How to Build a Facebook Clone using HTML & CSS
HTML CODE:-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<link rel="icon" href="https://icons8.com/icon/uLWV5A9vXIPu/facebook-new">
<title><Facebook- login or sign up page</title>
</head>
<body>
<div id="container">
<div id="recent-login">
<img id="facebook"src="https://static.xx.fbcdn.net/
rsrc.php/y8/r/dF5SId3UHWd.svg"alt"facebook-logo">
<div id="title">Recent Login</div>
<div id="subtitle">click your picture or add an account</div>
<div id="cards">
<div id="card-1">
<div id="cancle">x</div>
<img id="card-1-img"src="profile pict.jfif"
alt ="profile picture">
<div class="username">Glen</div>
</div>
<div id="card-2">
<img id="card-2-img" src="profile.png" alt="add account">
<div id="add-account" class="username">Add Account</div>
</div>
</div>
</div>
<div id ="login">
<input type="email"placeholder="Email or Phone Number">
<input type="password"placeholder="Password">
<input tpye="button"value="Login In" id="login-button">
<a href="#">Forget Password?</a>
<hr style="width:95%;">
<input tpye="button"value="Create New Account"
id ="create-new-account">
<p><strong>Create a Page</strong>
for a celebrity,brand or bussiness</p>
</div>
</div>
<footer>
<div>
</div>
</footer>
</body>
</html>
CSS Code:-
*{
margin:0;
padding:0;
font-family:Helvetica,Arial,sans-serif;
box-sizing:border-box;
}
body{
background: color blue;
position: relative;
height: 115vh;
overflow-x: hidden;
}
#container{
display: flex;
}
#recent-login{
display: flex;
flex-direction: column;
position: relative;
left: 20vh;
top: 13vh;
margin-right: 30vh;
}
#facebook{
height: 70px;
width: 190px;
margin: 20px;
}
#recent-logins>#title{
font-size: 20px;
font-weight: normal;
line-height: 32px;
margin-top: 20px;
margin-bottom: 5px;
}
#recent-login >#subtitle{
color: #606770;
font-size: 15px;
line-height: 15px;
margin-bottom: 20px;
font-weight: 400;
}
#cards{
display:flex ;
}
#card-1,#card-2{
position: relative;
background-color: white;
margin-right: 10px;
border-radius: 5px;
margin-right: 20px;
}
#card-1:hover,#card-2:hover{
box-shadow: rgb(red, green, blue);
cursor: pointer;
transition:box-shadow 0.3s;
}
#card-1-img,#card-2-img{
height: 160px;
width: 160px;
border-top-left-radius: 5px;
}
#add-account{
color: #606770;
}
.username{
font-size: 18px;
line-height: 22px;
padding: 12px;
text-align: center;
color: rgb(75, 79, 86);
}
#cancle{
position: absolute;
left: 8px;
color: white;
top: 5px;
bottom: 10px;
border-radius: 50%;
height: 20px;
text-align: center;
width: 20px;
background-color: rgb(75, 79, 86);
opacity: 0.5;
}
#card-1 #cancle:hover {
background-color: white;
opacity: 1.0;
color: rgb(194, 193, 193);
height: 25px;
width: 25px;
line-height: 22px;
top: -5px;
left: -5px;
font-size: 25px;
transition: 0.3s;
}
#login{
position: relative;
background-color: #FFFFFF;
height: 350px;
width: 400px;
border-radius: 10px;
display: flex;
flex-direction:column;
top: 18vh;
justify-content: flex-start;
padding: 10px,10px,20px,10px;
align-items: center;
box-shadow: 0 5px 5px 3px gainsboro;
}
#login> a{
margin: 10px 0;
text-decoration: none;
font-size: 15px;
color: #1877F2;
}
#login> a:hover{
text-decoration: underline;
cursor: pointer;
}
hr{
width: 95%;
height: 0.1%;
background-color: rgb(194, 193, 193);
}
#login> input[type=email],#login> input[type=password]{
height: 35px;
margin: 8px;
border-radius: 10px;
padding-left: 10px;
font-size: 16px;
width: 95;
border: 1.5px solid#EEEFF0;
}
#login> input[type=email]:focus,#login>input[type=password]:focus{
outline: none;
border: 1px solid blue;
box-shadow: 0 0 5px #719ECE;
caret-color: blue;
}
#login-button{
background-color:#1877F2;
color: #FFFFFF;
font-size: 20px;
border-radius: 5px;
border: none;
height: 50px;
font-weight: bold;
justify-content: center;
text-align: center;
width: 95%;
}
#login-button:hover{
background-color: #166FE5;
cursor: pointer;
}
#create-new-account{
background-color: #42b72a;
color: #FFFFFF;
font-size: 18px;
border-radius: 5px;
border: none;
height: 50px;
font-weight: bold;
text-align: center;
width: 60%;
margin-top: 20px;
}
#create-new-account:hover{
background-color: #36a420;
cursor: pointer;
}