Scribd
Upload
105 views

Web Development Practical 7th Sem

The document contains HTML code for a login page and registration page frontend. The login page HTML includes code for page structure, links to CSS files for styling, and a login form with fields for email and password. The registration page HTML also includes code for page structure and links to CSS files, and contains a registration form with fields for name, birthdate, gender, email, and phone number.

Uploaded by

Harsh
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
105 views

Web Development Practical 7th Sem

The document contains HTML code for a login page and registration page frontend. The login page HTML includes code for page structure, links to CSS files for styling, and a login form with fields for email and password. The registration page HTML also includes code for page structure and links to CSS files, and contains a registration form with fields for name, birthdate, gender, email, and phone number.

Uploaded by

Harsh
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 10

Login Page Frontend

Login Page HTML Code


<!DOCTYPE html>

<html lang="en">

<head>

<title>Login V1</title>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

<!--===============================================================================================-
->

<link rel="icon" type="image/png" href="images/icons/favicon.ico"/>

<!--===============================================================================================-
->

<link rel="stylesheet" type="text/css" href="vendor/bootstrap/css/bootstrap.min.css">

<!--===============================================================================================-
->

<link rel="stylesheet" type="text/css" href="fonts/font-awesome-4.7.0/css/font-awesome.min.css">

<!--===============================================================================================-
->

<link rel="stylesheet" type="text/css" href="vendor/animate/animate.css">

<!--===============================================================================================-
->

<link rel="stylesheet" type="text/css" href="vendor/css-hamburgers/hamburgers.min.css">

<!--===============================================================================================-
->

<link rel="stylesheet" type="text/css" href="vendor/select2/select2.min.css">

<!--===============================================================================================-
->

<link rel="stylesheet" type="text/css" href="css/util.css">

<link rel="stylesheet" type="text/css" href="css/main.css">

<!--===============================================================================================-
->
</head>

<body>

<div class="limiter">

<div class="container-login100">

<div class="wrap-login100">

<div class="login100-pic js-tilt" data-tilt>

<img src="images/img-01.png" alt="IMG">

</div>

<form class="login100-form validate-form">

<span class="login100-form-title">

Member Login

</span>

<div class="wrap-input100 validate-input" data-validate = "Valid email is


required: ex@abc.xyz">

<input class="input100" type="text" name="email"


placeholder="Email">

<span class="focus-input100"></span>

<span class="symbol-input100">

<i class="fa fa-envelope" aria-hidden="true"></i>

</span>

</div>

<div class="wrap-input100 validate-input" data-validate = "Password is


required">

<input class="input100" type="password" name="pass"


placeholder="Password">

<span class="focus-input100"></span>
<span class="symbol-input100">

<i class="fa fa-lock" aria-hidden="true"></i>

</span>

</div>

<div class="container-login100-form-btn">

<button class="login100-form-btn">

Login

</button>

</div>

<div class="text-center p-t-12">

<span class="txt1">

Forgot

</span>

<a class="txt2" href="#">

Username / Password?

</a>

</div>

<div class="text-center p-t-136">

<a class="txt2" href="#">

Create your Account

<i class="fa fa-long-arrow-right m-l-5" aria-hidden="true"></i>

</a>

</div>

</form>

</div>
</div>

</div>

<!--===============================================================================================-
->

<script src="vendor/jquery/jquery-3.2.1.min.js"></script>

<!--===============================================================================================-
->

<script src="vendor/bootstrap/js/popper.js"></script>

<script src="vendor/bootstrap/js/bootstrap.min.js"></script>

<!--===============================================================================================-
->

<script src="vendor/select2/select2.min.js"></script>

<!--===============================================================================================-
->

<script src="vendor/tilt/tilt.jquery.min.js"></script>

<script >

$('.js-tilt').tilt({

scale: 1.1

})

</script>

<!--===============================================================================================-
->

<script src="js/main.js"></script>

</body>

</html>
Registration Form Front-end
Registration Page HTML Code
<!DOCTYPE html>

<html lang="en">

<head>

<!-- Required meta tags-->

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<meta name="description" content="Colorlib Templates">

<meta name="author" content="Colorlib">

<meta name="keywords" content="Colorlib Templates">

<!-- Title Page-->

<title>Au Register Forms by Colorlib</title>

<!-- Icons font CSS-->

<link href="vendor/mdi-font/css/material-design-iconic-font.min.css" rel="stylesheet" media="all">

<link href="vendor/font-awesome-4.7/css/font-awesome.min.css" rel="stylesheet" media="all">

<!-- Font special for pages-->

<link
href="https://fonts.googleapis.com/css?family=Poppins:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700
i,800,800i,900,900i" rel="stylesheet">

<!-- Vendor CSS-->

<link href="vendor/select2/select2.min.css" rel="stylesheet" media="all">

<link href="vendor/datepicker/daterangepicker.css" rel="stylesheet" media="all">

<!-- Main CSS-->

<link href="css/main.css" rel="stylesheet" media="all">


</head>

<body>

<div class="page-wrapper bg-gra-01 p-t-180 p-b-100 font-poppins">

<div class="wrapper wrapper--w780">

<div class="card card-3">

<div class="card-heading"></div>

<div class="card-body">

<h2 class="title">Registration Info</h2>

<form method="POST">

<div class="input-group">

<input class="input--style-3" type="text" placeholder="Name" name="name">

</div>

<div class="input-group">

<input class="input--style-3 js-datepicker" type="text" placeholder="Birthdate" name="birthday">

<i class="zmdi zmdi-calendar-note input-icon js-btn-calendar"></i>

</div>

<div class="input-group">

<div class="rs-select2 js-select-simple select--no-search">

<select name="gender">

<option disabled="disabled" selected="selected">Gender</option>

<option>Male</option>

<option>Female</option>

<option>Other</option>

</select>

<div class="select-dropdown"></div>

</div>

</div>
<div class="input-group">

<input class="input--style-3" type="email" placeholder="Email" name="email">

</div>

<div class="input-group">

<input class="input--style-3" type="text" placeholder="Phone" name="phone">

</div>

<div class="p-t-10">

<button class="btn btn--pill btn--green" type="submit">Submit</button>

</div>

</form>

</div>

</div>

</div>

</div>

<!-- Jquery JS-->

<script src="vendor/jquery/jquery.min.js"></script>

<!-- Vendor JS-->

<script src="vendor/select2/select2.min.js"></script>

<script src="vendor/datepicker/moment.min.js"></script>

<script src="vendor/datepicker/daterangepicker.js"></script>

<!-- Main JS-->

<script src="js/global.js"></script>

</body>

</html>
<!-- end document-->

You might also like