Hello Guys everyone here, I show how you can build a Facebook login page using HTML and CSS.
Quick Start
Create a folder and add two files called index.html and style.css
After creating files start to code!
Start to add this code in your index.html
<div class="content">
<div class="flex-div">
<div class="name-content">
<h1 class="logo">Facebook</h1>
<p>Connect with friends and the world around you on Facebook.</p>
</div>
<form action="">
<input type="text" placeholder="Email or Phone Number" required/>
<input type="password" placeholder="Password" required/>
<button class="login">Login</button>
<a href="#">Forgot Password ?</a>
<hr>
<button class="create-account">Create New Account</button>
</form>
</div>
</div>
After coding your index file then your page looks like this,
After completing the index file. Now let us style out for page in the style.css.
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
font-family: "poppins", sans-serif;
background: #f2f4f7;
}
.content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%)
}
.flex-div {
display: flex;
justify-content: space-evenly;
align-items: center;
}
.name-content{
margin-right: 7rem;
}
.name-content .logo {
font-size: 3.5rem;
color: #1877f2;
}
.name-content p{
font-size: 1.3rem;
font-weight: 500;
margin-bottom: 5rem;
}
form{
display: flex;
flex-direction: column;
background: #fff;
padding: 2rem;
width: 530px;
height: 380px;
border-radius: 10px;
box-shadow: 0 2px 4px rgb(0 0 0/ 10%), 0 8px 16px rgb(0 0 0/10%)
}
form input {
padding: 15px;
margin: 5px;
margin-bottom: 2px;
border: 2px solid gray;
}
form input:focus{
border: 2px solid #000;
}
button {
height: 45px;
padding: 10px;
}
.login{
margin-top: 10px;
background: #1877f2;
border-radius: 10px;
outline: none;
border: none;
}
form a {
text-decoration: none;
padding-top: 15px ;
text-align: center;
color: #1877f2;
}
form hr{
margin: 1rem;
background: #f7f7f7;
}
form .create-account {
margin: 0 auto;
background-color: #06b909;
border: none;
outline: none;
border-radius: 10px;
width: 75%;
}
@media (max-width: 500px) {
html {
font-size: 60%;
}
.name-content {
margin: 0;
text-align: center;
}
form {
width: 300px;
height: fit-content;
}
form input {
margin-bottom: 1rem;
font-size: 1.5rem;
}
form .login {
font-size: 1.5rem;
}
form a {
font-size: 1.5rem;
}
form .create-account {
font-size: 1.5rem;
}
.flex-div {
display: flex;
flex-direction: column;
}
}
@media (min-width: 501px) and (max-width: 768px) {
html {
font-size: 60%;
}
.name-content {
margin: 0;
text-align: center;
}
form {
width: 300px;
height: fit-content;
}
form input {
margin-bottom: 1rem;
font-size: 1.5rem;
}
form .login {
font-size: 1.5rem;
}
form a {
font-size: 1.5rem;
}
form .create-account {
font-size: 1.5rem;
}
.flex-div {
display: flex;
flex-direction: column;
}
}
@media (min-width: 501px) and (max-width: 768px) {
html {
font-size: 60%;
}
.name-content {
margin: 0;
text-align: center;
}
form {
width: 300px;
height: fit-content;
}
form input {
margin-bottom: 1rem;
font-size: 1.5rem;
}
form .login {
font-size: 1.5rem;
}
form a {
font-size: 1.5rem;
}
form .create-account {
font-size: 1.5rem;
}
.flex-div {
display: flex;
flex-direction: column;
}
}
@media (min-width: 769px) and (max-width: 1200px) {
html {
font-size: 60%;
}
.name-content {
margin: 0;
text-align: center;
}
form {
width: 300px;
height: fit-content;
}
form input {
margin-bottom: 1rem;
font-size: 1.5rem;
}
form .login {
font-size: 1.5rem;
}
form a {
font-size: 1.5rem;
}
form .create-account {
font-size: 1.5rem;
}
.flex-div {
display: flex;
flex-direction: column;
}
@media (orientation: landscape) and (max-height: 500px) {
.header {
height: 90vmax;
}
}
}
After your styling then your page looks very impressive and attractive as same as the Facebook login page.
Now, guys, you have done with your Facebook login page. I hope this may help you. If you need any other let me know in the comment section. Thank you.