In this tutorial, I will design Facebook registration page and show you how to design registration pages in HTML and CSS.I hope this will help you a lot.
______________________________________________________
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width , initial-scale=1"/>
<meta name="" content=""/>
<title>Facebook</title>
<link rel="stylesheet" href="style.css" type="text/css"/>
<script src=""></script>
</head>
<body>
<div class="nav">
<div class="logo">
<img src="facebook-logo.PNG" alt="facebook logo" height="55" width="180"/>
</div>
<div class="sign-in">
<div class="name">
<label for="email" class="lab">Email or Phone</label></br>
<input class="input" type="text" placeholder="" maxlength=""required/>
</div>
<div class="password">
<label for="password" class="lab">Password</label></br>
<input class="input" type="password" placeholder="" maxlength=""required/>
</div>
<div class="btn">
<button class="btn1" type="button">Log In</button>
</div>
<div class="txt">
<a href="https://www.facebook.com/" class="link" target="_blank"> Forgotten Account?</a>
</div>
</div>
</div>
<div class="sign-up">
<div class="people-pic">
<div class="pp">
<h2>Facebook helps you connect and share with the </br>people in your life.</h2>
<img src="people.png" alt="people picture" height="200" width="550"/>
</div>
</div>
<div class="form">
<div class="text">
<h1 class="heading">Create an accout</h1>
<h3 class="heading2">It's quick and easy.</h3>
</div>
<form class="fields">
<input type="text" class="first" placeholder="First name"/>
<input type="text" class="sur" placeholder="Surname"/>
<input type="emial" class="email" placeholder="Mobile number or email address"/>
<input type="password" class="pass" placeholder="New password"/>
<h3 class="gen">Gender</h3>
<input type="checkbox" class="check">Male
<input type="checkbox" class="check">Female
<input type="checkbox" class="check">Custom
</form>
</div>
</div>
</body>
</html>
CSS:
_____________________________________________________
body{
padding: 0;
margin: 0;
font-family: lato;
height: 100%;
width: 100%;
background-color: rgb(237, 239, 246);
}
.nav{
widows: 100%;
height: 90px;
background-color:rgb(65, 94, 155);
}
.sign-in{
margin: 1px auto;
position: relative;
top:-60px;
right: 100px;
display:inherit;
float:right;
}
.logo{
padding:20px 0px 0px 160px;
}
.name, .password, .btn{
display: inline-block;
}
.name, .password{
height: ;
width:180px;
}
.lab{
position: relative;
bottom:5px;
color:white;
}
.input{
border-style: solid;
border-width: 1px;
border-color: black;
padding: 3px;
outline: none;
}
.btn1{
font-weight: bold;
background-color:rgb(65, 94, 155);
color: white;
border-style: solid;
border-width: 1px;
border-radius: 2px;
padding: 4px;
border-color:rgb(38, 69, 120);
outline:none;
}
.btn1:hover{
border-color:black;
}
.txt{
position: relative;
top:2px;
left: 185px;
color: rgb(167, 204, 255);
font-size: 14px;
}
.people-pic, .form{
display: inline-flex;
}
.pp{
color:rgb(7, 47, 87);
}
.form{
float:right;
position: absolute;
margin-left: 50px;
margin-top: 0px;
}
.people-pic{
margin-left: 100px;
margin-top: 30px;
}.link{
text-decoration: none;
color: rgb(167, 204, 255);
font-size: 14px;
}
.heading{
font-weight: 900;
color:black;
font-size: 45px;
}
.heading2{
font-weight: 100;
margin-top:-22px;
}
.text, .fields{
position: absolute;
}
.fields{
position: relative;
top:120px;
}
.first, .sur{
padding: 13px 25px 13px 16px;
border-style: solid;
border-radius: 7px;
border-width: 1px;
border-color:rgb(202, 210, 224);
outline:none;
}
.first{
margin-right: 15px;
}
.email{
margin-top:13px;
padding:13px 213px 13px 16px;
border-style: solid;
border-radius: 7px;
border-width: 1px;
border-color:rgb(202, 210, 224);
outline:none;
width:200px;
}
.pass{
margin-top:13px;
padding:13px 213px 13px 16px;
border-style: solid;
border-radius: 7px;
border-width: 1px;
border-color:rgb(202, 210, 224);
outline:none;
width:200px;
}
.gen{
margin:22px 0px 0px 4px;
}
.check{
margin-top: 10px;
padding-right: 20px;
}
_________________________________________________________________________________
1 Comments
thanks :)
ReplyDelete