Facebook is an American online social media and social networking service based in Menlo Park, California, and a flagship service of the namesake company Facebook, Inc. It was founded by Mark Zuckerberg, along with fellow Harvard College students and roommates Eduardo Saverin, Andrew McCollum, Dustin Moskovitz, and Chris Hughes.
Being one of the most popular and widely used social networking app around the globe, Facebook has set a benchmark for tech persons. Be it the design, the optimization and the performance, everyone looks up to facebook.
In this article, we are going to design a webpage similar to the login page of Facebook.
Source Code :
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css" integrity="sha512-P5MgMn1jBN01asBgU0z60Qk4QxiXo86+wlFahKrsQf37c9cro517WzVSPPV1tDKzhku2iJ2FVgL67wG03SGnNA==" crossorigin="anonymous" />
<style type="text/css">
.container{
width:75%;
padding-top:10%;
}
body{
background: #f0f2f5;
}
.form-wrapper{
background: #fff;
padding:20px 20px;
border-radius: 8px;
box-shadow: 0 2px 4px rgb(0 0 0 / 10%), 0 8px 16px rgb(0 0 0 / 10%);
}
.forgot{
margin-top:10px;
}
.form-control{
border: 1px solid #dddfe2;
height: 55px;
font-size: 17px;
padding: 14px 16px;
border-radius: 6px;
}
.btn-account {
text-align: center;
}
.forgot{
font-size:0.9rem;
}
.btn-account .btn{
border-radius: 6px;
font-size: 17px;
line-height: 48px;
padding: 0 16px;
background-color: #42b72a;
font-weight: bold;
}
.fb-image{
height: 106px;
margin: -28px;
}
.wrapper-row{
display: flex;
align-items: center;
justify-content: center;
}
.content{
margin-top:20px;
font-size: 28px;
line-height: 32px;
}
.page a{
color:#000;
font-weight: bold;
}
.page{
font-size: 14px;
margin-top: 28px;
text-align: center;
}
</style>
<div class="container">
<div class="row wrapper-row">
<div class="col-md-7">
<img class="fb-image" src="https://static.xx.fbcdn.net/rsrc.php/y8/r/dF5SId3UHWd.svg">
<p class="content">Facebook helps you connect and share with the people in your life.</p>
</div>
<div class="col-md-5">
<div class="form-wrapper">
<div class="form-group">
<input type="text" class="form-control" placeholder="Email address or phone number">
</div>
<div class="form-group">
<input type="password" class="form-control" placeholder="Password">
</div>
<input type="button" class="btn btn-primary btn-block" value="Log In">
<div class="text-center forgot">
<a href="#">Forgotten Password</a>
</div>
<hr>
<div class="btn-account">
<a href="#" class="btn btn-success btn-account btn-lg">Create New Account</a>
</div>
</div>
<div class="page">
<a href="#">Create a Page</a>
for a celebrity, band or business.
</div>
</div>
</div>
</div>
Follow this video for complete guidance :
