index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Facebook</title>
<!-- css -->
<link rel="stylesheet" type="text/css" href="css/style.css">
<!-- fonts -->
<link href="https://fonts.googleapis.com/css?family=Padauk" rel="stylesheet">
</head>
<body>
<div class="header">
<div class="wrapper">
<!-- logo starts -->
<div class="logo">
<img src="image/facebook.png" alt="logo">
</div>
<!-- logo ends -->
<!--email and password starts -->
<div class="login">
<form action="#" method="post">
<ul>
<li>
<label for="email">Email or Phone<br>
<input type="email" id="email"></label>
</li>
<li>
<label for="passwords">Password<br>
<input type="password" id="passwords"></label>
</li>
<li>
<button type="submit">Log In</button>
</li>
</ul>
</form>
<!-- email and password ends -->
<div class="fa"><a href="#">Forgotten account?
</a></div>
</div>
</div>
</div>
<!-- header ends -->
<div class="banner">
<div class="wrapper">
<!-- blog 1 -->
<div class="blog1">
<h1>Facebook helps you connect and share with the<br> people in your life.</h1>
<img src="image/logo.png" alt="conntecting_people">
</div>
<!-- blog 2 -->
<div class="blog2">
<h1>Create an account</h1>
<h2>It's free and always will be.</h2>
<!-- form 2 sign up -->
<form method="post" action="#">
<ul>
<li>
<input type="name" placeholder=" First name">
</li>
<li>
<input class="" type="name" placeholder=" Surname" style="width: 248px">
</li>
</ul>
<input type="email" placeholder=" Sabber plz your email address" style="width: 495px">
<input type="password" placeholder=" New password" style="width: 495px">
<!-- birthday -->
<div class="birthday">
<label for="birthday">Birthday</label><br>
<select name="date" id="date">
<option value="0">Day</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value=" 12" selected="1">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>
<select name="month" id="month">
<option value="0">Month</option>
<option value="1" selected="1"> Jan</option>
<option value="2">Feb</option>
<option value="3">Mar</option>
<option value="4">Apr</option>
<option value="5">May</option>
<option value="6">Jun</option>
<option value="7">Jul</option>
<option value="8">Aug</option>
<option value="9">Sept</option>
<option value="10">Oct</option>
<option value="11">Nov</option>
<option value="12">Dec</option>
</select>
<select>
<option value="0">Year</option>
<option value="2030">2030</option>
<option value="2029">2029</option>
<option value="2028">2028</option>
<option value="2027">2027</option>
<option value="2026">2026</option>
<option value="2025">2025</option>
<option value="2024">2024</option>
<option value="2023">2023</option>
<option value="2022">2022</option>
<option value="2021">2021</option>
<option value="2020">2020</option>
<option value="2019">2019</option>
<option value="2018">2018</option>
<option value="2017">2017</option>
<option value="2016">2016</option>
<option value="2015">2015</option>
<option value="2014">2014</option>
<option value="2013">2013</option>
<option value="2012">2012</option>
<option value="2011">2011</option>
<option value="2010">2010</option>
<option value="2009">2009</option>
<option value="2008">2008</option>
<option value="2007">2007</option>
<option value="2006">2006</option>
<option value="2005">2005</option>
<option value="2004">2004</option>
<option value="2003">2003</option>
<option value="2002">2002</option>
<option value="2001">2001</option>
<option value="2000">2000</option>
<option value="1999">1999</option>
<option value="1998">1998</option>
<option value="1997">1997</option>
<option value="1996">1996</option>
<option value="1995">1995</option>
<option value=" 1994" selected="1">1994</option>
</select>
<div class="provide">
<a href="#">Why do I need to provide my<br> date of birth?</a>
</div>
</div>
<div class="mfbox">
<input type="radio" name="gender" style="height: 16px; width: 18px"><span>Female</span>
<input type="radio" name="gender" style="height: 16px; width: 18px"><span>Male</span>
</div>
<div class="more">
<p>By clicking Sign Up, you agree to our <a href="#">Terms</a>, <a href="#">Data Policy</a> and <a href="#">Cookie Policy</a>. You may receive SMS notifications from us and can opt out at any time.</p>
</div>
<button type="submit">Sign Up</button></form>
<span class="page"><a href="#">Create a Page</a> for a celebrity, band or business.</span>
</div>
</div>
</div>
</body>
</html>
css/style.css
/*font-family: 'Padauk', sans-serif;*/
body{
padding: 0;
margin: 0;
letter-spacing: .45px;
word-spacing: -5px;
font-family: 'Padauk', sans-serif;
/* line-height: 40px;*/
}
.header{
height: 105px;
background-color: #3B5998;
}
.wrapper{
width: 67%;
margin: 0 auto;
padding-bottom: 10px;
overflow: hidden;
}
.logo{
margin-top: 35px;
float: left;
}
.login{
width: 72%;
float: right;
position: relative;
padding-right: 28px;
}
.login ul{
float: right;
list-style: none;
}
.login ul li{
float: left;
}
.login label{
color: white;
font-size: 18px;
height: 100px;
}
.login label input{
border: none;
border: 1px solid black;
height: 24px;
width: 180px;
margin-right: 20px;
}
.login label input:active{
border: 1px solid black;
}
.login button{
background-color: #4267B2;
border: none;
border: 1px solid #29487D;
float: right;
font-weight: 700;
color: white;
width:58px;
height: 28px;
margin-top: 27px;
}
.login button:hover{
background-color: #365899
}
.login a{
color: #73ABD8;
float: right;
text-decoration: none;
font-size: 17px;
}
.login a:hover{
text-decoration: underline;
}
.fa{
position: absolute;
right:149px;
top: 75px;
}
/*header complete*/
.banner{
height: 750px;
background-image: url("../images/body.jpg");
background-repeat: no-repeat;
background-size: cover;
}
/*blog 1 stars*/
.blog1{
width: 54%;
float: left;
}
.blog1 h1{
font-size: 28px;
font-weight:700;
color: #0E385F;
margin-top: 52px;
margin-bottom: 0px;
line-height: 30px;
}
.blog1 img{
width: 100%;
}
/*blog 2 starts*/
.blog2{
width: 42%;
float: right;
}
.blog2 h1{
font-size: 50px;
font-weight:600;
margin-top: 20px;
margin-bottom:-9px;
}
.blog2 h2{
font-size: 29px;
font-weight:400;
margin-top: 1px;
margin-bottom: 0px;
}
/*sign up forms stars*/
.blog2 form ul{
padding-left: 0;
}
.blog2 form ul li{
list-style: none;
float: left;
}
.blog2 form input{
width: 232px;
height: 48px;
border: 1px solid #BDC7D8;
border-radius: 6px;
font-size: 23px;
color: #989C9F;
margin-bottom: 13px;
}
.blog2 form ul li:first-child{
margin-right: 13px;
}
/*birthday starts*/
.birthday label{
font-size: 27px;
}
.birthday select{
height: 36px;
width: 76px;
border: 1px solid #BDC7D8;
font-size: 17px;
}
.provide{
float: right;
margin-right: 94px;
line-height: 19px;
}
.provide a{
text-decoration: none;
color: #365899;
}
.provide a:hover{
text-decoration: underline;
}
/*birthday ends*/
/*male female checkbox*/
.mfbox input{
height: 18px;
width: 18px;
}
.mfbox{
margin: 20px 0 20px 10px;
}
.mfbox span{
font-size: 24px;
}
/*more text*/
.more{
width: 75%;
line-height: 19px;
color: #7D7D7E;
}
.more a{
text-decoration: none;
color: #365899;
}
.more a:hover{
text-decoration: underline;
}
/*button*/
.blog2 button{
background-color: #5E9B4B;
border: none;
border: 1px solid #2F5212;
border-radius: 6px;
height:50px;
width: 242px;
color: white;
font-size: 25px;
margin-bottom: 34px;
}
.blog2 button:hover{
background-color: #6DAA59;
}
/*button ends*/
.page{
font-weight: 700;
color: #666666;
font-size: 18px;
}
.page a{
text-decoration: none;
color: #365899;
}
.page a:hover{
text-decoration: underline;
}
/*page ends*/
DOWNLOAD SOURCE CODE
