Clone
Cloning allows users to create duplicate instances of an app, enabling multiple accounts or separate versions for different users on the same device. this can be particularly useful for apps that do not support multiple accounts, such as Snapchat and WhatsApp.
Cloning Facebook
A perfect cloning of Facebook's login page is built with HTML & CSS. Demonstrates responsive layout, form styling and modern UI techniques. ideal for beginners practicing front-end design or developers exploring authentication page design patterns.
New Tags
font-size: 0px- this is used to resize or change the size of the fonts or texts.font-weight: 700- this is used to change thickness or bold the font or texts.<span>- this tag is used as inline element and it is used to style the elements in inline CSS.<input type = "text">- this tag is used to create an input box, and here "text" is mentioned. so we can add texts to the box.<input type = "password">- this tag is used to create an input box, and here "password" is mentioned. so we can add secret texts or numbers as password to the box and it is not visible.<button>- this tag is used to create button in the web pages.placeholder = "..."- it is used to display the texts inside the box for users to type the correct details. inside the " " we type anything that display on the box.
Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:Arial, Helvetica, sans-serif;
}
main{
border:1px solid rgba(128, 128, 128, 0.436);
height:90vh;
display:grid;
grid-template-columns:1.7fr 1.3fr;
}.left{
display:grid;
grid-template-columns:1fr 2fr;
}.right{
border:1px solid rgba(128, 128, 128, 0.409);
display:flex;
flex-direction:column;
justify-content:space-around;
padding-left:27px;
padding-right:23px;
font-size:12px;
gap:10px;
}
.logo img{
width:60px;
height:60px;
}
.image img{
padding-right:30px;
width:330px;
height:325px;
}
.logo{
display:flex;
flex-direction:column;
justify-content:space-between;
padding:7px;
}
h5{
padding-top:67px;
}
input{
border:0.3px solid rgba(128, 128, 128, 0.436);
border-radius:5px;
padding:7px;
font-size:8px;
}
button{
border-radius:15px;
font-size:8px;
padding:4px;
border:none;
}
#cna{
margin-top:15px;
color:rgb(0, 89, 255);
border: 0.5px solid rgb(0, 89, 255);
}
#meta{
margin-left:47%;
width:25px;
height:7px;
}
#log{
background-color:rgb(0, 64, 255);
color:white;
padding:5px;
}
input:hover{
border:1px solid;
}
span{
color:blue;
}
</style>
</head>
<body>
<main>
<div class="left">
<div class="logo">
<img src="https://th.bing.com/th/id/OIP.N24RC8dLPtIGYfPSlKsK7AHaHa?w=166&h=180&c=7&r=0&o=7&dpr=1.3&pid=1.7&rm=3" alt="">
<h1>Explore the things <span>you love.</span> </h1>
</div>
<div class="image">
<img src="https://static.xx.fbcdn.net/rsrc.php/yb/r/HpEiFYDux5j.webp" alt="">
</div>
</div>
<div class="right">
<h5>Log in to Facebook</h5>
<input type="text" placeholder="Email address or mobile number">
<input type="password" placeholder="Password">
<button id="log">Log in</button>
<button>Forgotten password?</button>
<button id="cna">Create new account</button>
<img id="meta" src="https://tse4.mm.bing.net/th/id/OIP.0hq62bdD9-fLp_GDPz-k4wHaBf?w=2560&h=516&rs=1&pid=ImgDetMain&o=7&rm=3" alt=""></img>
</div>
</main>
<footer>
</footer>
</body>
</html>
Top comments (0)