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:
[email protected]">
<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-->