Feel free to download and use the source code as a reference for your own web design projects. You can study the code, experiment with different modifications, and further enhance the design to suit your preferences. The possibilities are endless!
HTML
<!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">
<title>Facebook - log in or signup</title>
<link rel="shortcut icon" href="https://logodownload.org/wp-content/uploads/2014/09/facebook-logo-3-1.png"
type="image/x-icon">
<link rel="stylesheet" href="style.css">
<script src="https://kit.fontawesome.com/04158e9780.js" crossorigin="anonymous"></script>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@500&display=swap" rel="stylesheet">
</head>
<body>
<div class="container facebook-login-container">
<div class="facebook-login">
<div class="left-container">
<div class="logo"><img
src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/89/Facebook_Logo_%282019%29.svg/2560px-Facebook_Logo_%282019%29.svg.png"
alt=""></div>
<p>Connect with friends and the world around you on Facebook.</p>
</div>
<div class="right-container">
<form action="#">
<input type="text" placeholder="Email or phone number">
<div class="password-input-box">
<input type="password" name="" id="" placeholder="Password" class="password">
<div class="hideorshow-btn">
<i class="fa-regular fa-eye-slash pw-eye"></i>
</div>
</div>
<input type="submit" value="Log In">
<a href="#">Forgot Password ?</a>
<div class="create-btn-container">
<a href="#"><button>Create new Account</button></a>
</div>
</form>
<div class="bottom-link">
<a href="#">Create Page</a> for a celebrity, brand or business.
</div>
</div>
</div>
</div>
<script>
let showorhideicon = document.querySelector('.pw-eye');
let password = document.querySelector('.password');
password.addEventListener('keyup', () => {
if (password.value.length > 0) {
showorhideicon.style.display = "flex";
} else {
showorhideicon.style.display = "none";
}
})
showorhideicon.addEventListener('click', () => {
showorhideicon.classList.toggle('fa-eye');
if (showorhideicon.classList.contains('fa-eye')) {
password.type = "text";
} else {
password.type = "password";
}
})
</script>
</body>
</html>
CSS
*{
margin: 0;
padding: 0;
}
body{
background-color:#f0f2f5;
}
.container{
display: flex;
justify-content: center;
}
.facebook-login-container .facebook-login{
width:80%;
height:100vh;
display: flex;
justify-content:space-between;
}
.facebook-login-container .left-container{
display: flex;
flex-direction: column;
width:50%;
height:100%;
justify-content:center;
}
.facebook-login-container .left-container p{
font-family:Open Sans;
font-size:1.65rem;
margin-top:3%;
}
.facebook-login-container .left-container .logo{
height:50px;
overflow: hidden;
width:230px;
}
.facebook-login-container .left-container .logo img{
width:100%;
}
.facebook-login-container .right-container{
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
width:50%;
}
.facebook-login-container .right-container form{
background-color:white;
width:80%;
box-shadow:0px 0px 5px 0.5px rgb(0,0,0,0.1);
border-radius:12px;
display: flex;
flex-direction: column;
padding:5%;
box-sizing: border-box;
}
.facebook-login-container .right-container form input{
height:48px;
margin-bottom:5%;
border:1px solid rgba(0, 0, 0, 0.208);
border-radius:5px;
padding-left:5%;
box-sizing: border-box;
outline:none;
font-size:1rem;
}
.facebook-login-container .right-container form input:focus{
border:1px solid #1877f2;
}
.facebook-login-container .right-container form input[type="submit"]{
background-color:#1877f2;
color:white;
font-weight:bolder;
font-size:1.2rem;
cursor: pointer;
outline:none;
padding: 0;
border:none;
margin: 0;
}
.facebook-login-container .right-container .password-input-box{
width:100%;
border:1px solid rgba(0, 0, 0, 0.208);
height:48px;
border-radius:5px;
margin-bottom:5%;
display:flex;
}
.facebook-login-container .right-container .password-input-box:focus-within{
border:1px solid #1877f2;
}
.facebook-login-container .right-container .password-input-box input{
width:85%;
outline:none;
border:none;
}
.facebook-login-container .right-container .password-input-box input:focus{
border:none;
}
.facebook-login-container .right-container .password-input-box .hideorshow-btn{
width:15%;
display: flex;
justify-content:center;
align-items: center;
}
.facebook-login-container .right-container .password-input-box .hideorshow-btn i{
height:25px;
width:25px;
border-radius:50%;
display: flex;
justify-content: center;
font-size:0.8rem;
display:none;
align-items: center;
}
.facebook-login-container .right-container .password-input-box .hideorshow-btn i:hover{
background-color:rgba(0, 0, 0, 0.064);
cursor: pointer;
}
.facebook-login-container .right-container form a{
text-decoration:none;
text-align:center;
color:#1877f2;
font-family:sans-serif;
margin-top:5%;
font-size:0.9rem;
}
.facebook-login-container .right-container .create-btn-container{
border-top:1px solid rgba(0, 0, 0, 0.208);
margin-top:5%;
height:100px;
display: flex;
justify-content: center;
align-items:center;
}
.facebook-login-container .right-container .create-btn-container button{
height:50px;
width:230px;
background-color:#40b428;
border:none;
cursor: pointer;
color:white;
font-weight:bolder;
border-radius:5px;
font-size:1.1rem;
}
.facebook-login-container .right-container .create-btn-container button:hover{
background-color:#39a024;
transition-duration:0.3s;
}
.facebook-login-container .right-container .bottom-link{
margin-top:5%;
font-family:sans-serif;
font-size:0.9rem;
}
.facebook-login-container .right-container .bottom-link a{
text-decoration:none;
color:black;
font-weight:bolder;
}
.facebook-login-container .right-container .bottom-link a:hover{
text-decoration:underline;
}