How to Create Facebook Landing Page Using HTML and CSS Only.
Ajay Sharma
Posted on July 9, 2021
Hello Everyone, In this Post We Will be Seeing How to Create Facebook Landing Page Using HTML and CSS only.
Here is The Live Link of Landing Page https://ajaysharma12799.github.io/Facebook-Landing-Page/
Follow Me on LinkedIn https://www.linkedin.com/in/ajaysharma12799/
Follow Me on Github https://www.github.com/ajaysharma12799/
Steps to Create :-
- Choose Any Text Editor (VSCode Recommended).
- Setup Directory Structure.
- Use Below HTML and CSS Code To Build Your Page.
<!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 - Login or Signup</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="container">
<div class="text__wrapper">
<div class="heading">
<img src="./img/facebook.svg" alt="Facebook">
</div>
<p class="description">Facebook helps you connect and share with the people in your life.</p>
</div>
<div class="form__wrapper">
<form class="form">
<div>
<input type="text" name="Email_Mobile" id="Email_Mobile" placeholder="Email Address or Phone Number">
</div>
<div>
<input type="password" name="Password" id="Password" placeholder="Password">
</div>
<div>
<button type="submit" class="loginButton btn">Login</button>
</div>
</form>
<a href="#" class="forgotPassword">Forgotten Password?</a>
<button type="submit" class="registerButton btn">Create New Account</button>
</div>
</div>
</body>
</html>
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap');
:root {
--primaryColor: rgb(25,119,242);
--buttonColor: rgb(66,183,41);
--bodyColor: rgb(239,242,245);
--textColor: rgb(27,30,33);
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: var(--bodyColor);
font-family: 'Roboto', sans-serif;
}
a {
text-decoration: none;
color: var(--buttonColor);
}
button {
border: none;
}
a:hover {
text-decoration: underline;
}
input {
padding: 7px;
margin: 2% 0;
border: 1px solid lightgray;
border-radius: 5px;
width: 200px;
}
input::placeholder {
color: gray;
font-weight: lighter;
font-size: 10px;
}
.btn {
width: 100%;
border-radius: 3px;
color: #fff;
padding: 6px;
}
#container {
display: flex;
justify-content: center;
align-items: center;
margin-top: 10%;
}
.text__wrapper {
width: 37vw;
margin-right: 3%;
margin-top: 5%;
}
.heading {
position: relative;
top: -50%;
left: -7%;
}
.heading > img {
width: 350px;
}
.description {
color: var(--textColor);
font-weight: 900;
font-size: 30px;
float: left;
}
.form__wrapper {
width: 300px;
height: 250px;
margin-top: 5%;
background-color: #fff;
padding: 5% 2% 5% 2%;
border-radius: 5px;
line-height: 150%;
display: grid;
justify-content: center;
align-items: center;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.form {
margin-top: -18%;
margin-bottom: 7%;
}
.loginButton {
background-color: var(--primaryColor);
color: #fff;
margin-top: 2%;
}
.forgotPassword {
color: var(--primaryColor);
font-size: 10px;
text-align: center;
}
.registerButton {
background-color: var(--buttonColor);
color: #fff;
font-size: 10px;
width: 60%;
padding: 8px;
font-weight: bold;
margin: 0 auto;
margin-top: 3%;
margin-bottom: 3%;
}
/* Responsive Design */
/* Small Mobile Device */
@media (max-width: 320px) {
#container {
display: grid;
margin-top: 10vh;
justify-content: center;
}
.text__wrapper {
width: 100%;
margin-right: 3%;
margin-top: -5%;
text-align: center;
margin: 0 auto;
}
.heading > img {
width: 300px;
position: relative;
left: 8%;
}
.description {
margin-bottom: 10%;
}
.form__wrapper {
margin: 0 auto;
height: 200px;
background-color: #fff;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.form {
margin-top: -5%;
}
.loginButton {
background-color: var(--primaryColor);
color: #fff;
margin-top: 2%;
}
.forgotPassword {
color: var(--primaryColor);
font-size: 10px;
text-align: center;
}
.registerButton {
background-color: var(--buttonColor);
color: #fff;
font-size: 10px;
width: 60%;
padding: 8px;
font-weight: bold;
margin: 0 auto;
}
}
/* Average Mobile Devices */
@media (min-width: 320px) and (max-width: 480px) {
#container {
display: grid;
margin-top: 10vh;
justify-content: center;
}
.text__wrapper {
width: 100%;
margin-right: 3%;
margin-top: -5%;
text-align: center;
}
.heading > img {
width: 350px;
position: relative;
left: 8%;
}
.description {
margin-bottom: 5%;
}
.form__wrapper {
width: 220px;
height: 200px;
margin-left: 3%;
background-color: #fff;
padding: 5% 2% 5% 2%;
border-radius: 5px;
margin: 0 auto;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.form {
margin-top: -8%;
}
.loginButton {
background-color: var(--primaryColor);
color: #fff;
margin-top: 2%;
}
.forgotPassword {
color: var(--primaryColor);
font-size: 10px;
text-align: center;
}
.registerButton {
background-color: var(--buttonColor);
color: #fff;
font-size: 10px;
width: 60%;
padding: 8px;
font-weight: bold;
margin: 0 auto;
margin-top: 3%;
margin-bottom: 3%;
}
}
/* Tablet and IPads */
@media (min-width: 481px) and (max-width: 768px) {
#container {
display: grid;
margin-top: 10vh;
justify-content: center;
}
.text__wrapper {
width: 100%;
margin-right: 3%;
margin-top: -5%;
text-align: center;
}
.heading > img {
width: 350px;
position: relative;
left: 8%;
}
.description {
margin-bottom: 5%;
}
.form__wrapper {
width: 220px;
height: 220px;
margin-left: 3%;
background-color: #fff;
padding: 5% 2% 5% 2%;
border-radius: 5px;
margin: 0 auto;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.form {
margin-top: -8%;
}
.loginButton {
background-color: var(--primaryColor);
color: #fff;
margin-top: 2%;
}
.forgotPassword {
color: var(--primaryColor);
font-size: 10px;
text-align: center;
}
.registerButton {
background-color: var(--buttonColor);
color: #fff;
font-size: 10px;
width: 60%;
padding: 8px;
font-weight: bold;
margin: 0 auto;
margin-top: 3%;
margin-bottom: 3%;
}
}
💖 💪 🙅 🚩
Ajay Sharma
Posted on July 9, 2021
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.
Related
