Registration Page
Simple Html Registration Page
Html
<!DOCTYPE html>
<html>
<head>
<title>registration page</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="outer-div">
<div class="reg-div row">
<!-- left side -->
<div class="col-md-5 left-side">
<div class="logo">
<img src="./images/logo.png" alt="logo" width="180">
</div>
<h2>YOGA CAMP</h2>
<br>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<footer>
<small>© 2020 | sample.com</small>
</footer>
</div>
<!-- right side -->
<div class="col-md-7 right-side">
<h2>Register</h2>
<br>
<div class="form">
<input type="text" placeholder="Full Name">
<input type="email" placeholder="Email">
<input type="text" placeholder="Mobile" maxlength="10">
<input type="text" placeholder="City">
<button>Register</button>
<p>Have an account <a href="#">Login</a> </p>
</div>
</div>
</div>
</div>
</body>
</html>
CSS
body {
font-family: Arial, Helvetica, sans-serif;
}
.outer-div {
left: 0;
top: 0;
position: absolute;
width: 100%;
height: 100%;
background: url('https://images.pexels.com/photos/3822138/pexels-photo-3822138.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940') no-repeat;
background-position: center;
background-size: cover;
}
.reg-div {
position: relative;
width: 700px;
height: 500px;
margin: 0 auto;
top: 50%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
box-shadow: 0 0 260px #333;
}
/* left side */
.left-side {
height: inherit;
text-align: center;
color: #2f275b;
background: rgba(1,196,255,.3);
}
.logo {
padding-top: 40px;
}
footer {
bottom:5px;
position: absolute;
left:0;
width:100%;
}
/* right side */
.right-side {
height: inherit;
text-align: center;
padding-top: 40px;
color: #2f275b;
background: rgba(255,255,255,.8);
}
input {
display: block;
width: 250px;
padding:10px;
margin: 0 auto;
margin-bottom: 20px;
font-size: 12px;
outline: none;
border:solid 1px #2f275b;
border-radius: 2px;
transition: all .3s;
}
input:focus {
width: 280px;
}
button {
width: 200px;
color: #FFF;
border-radius: 25px;
background: #2f275b;
outline: none;
border:solid 1px #2f275b;
margin-bottom: 20px;
padding: 10px;
transition: all .3s;
}
button:hover {
background: #5c4abe;
border: solid 1px #5c4abe;
}
Comments
Post a Comment