facebook clone
website:here
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">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<nav class="navbar">
<div class="logo">facebook</div>
<div class="login-form">
<div class="login-input-div">
<div class="label">Email or phone</div>
<input type="text" class="login-input"><br>
<input type="checkbox" class="keep-me-logged-in">
<label class="light-blue">Keep me logged in</label>
</div>
<div class="login-input-div">
<div class="label">Password</div>
<input type="password" class="login-input"><br>
<label class="light-blue"><a href="#" class="forgot-p">
Forgot your password?</a></label>
</div>
<div class="login-btn">
<button>Login</button>
</div>
</div>
</nav>
<div class="container">
<div class="content-body">
<h1> Connect with friends and the <br>
world around you on Facebook</h1>
<img src="https://i.postimg.cc/Wb7QX00n/OBa-Vg52wt-TZ.png"
class="fb-content-img">
</div>
<div class="signup-body">
<h1 class="sign-up-h1">Sign Up</h1>
<div class="gray">
<p>It's free and always will be</p>
</div>
<div class="user-names">
<input type="text" class="input-name"
placeholder="First name">
<input type="text" class="input-name"
placeholder="Last name">
</div>
<div class="signup-email">
<input type="text" class="input-email"
placeholder="Email or mobile number">
</div>
<div class="signup-email">
<input type="text" class="input-email"
placeholder="Re-enter Email or mobile number">
</div>
<div class="signup-password">
<input type="password" class="input-password"
placeholder="New password">
</div>
<h3 class="birth-day-h3">Birthday</h3>
<div class="birth-day">
<div class="input-day">
<select name="days" id="days">
<option value="">day</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>
</div>
<div class="year">
<select name="years" id="years">
<option value="" selected>year</option>
<option value="2022">2022</option>
<option value="2021">2021</option>
<option value="2019">2019</option>
<option value="2018">2018</option>
<option value="2017">2017</option>
<option value="2016">2016</option>
<option value="2015">2015</option>
<option value="2014">2014</option>
<option value="2013">2013</option>
<option value="2012">2012</option>
<option value="2011">2011</option>
<option value="2010">2010</option>
<option value="2009">2009</option>
<option value="2008">2008</option>
<option value="2007">2007</option>
<option value="2006">2006</option>
<option value="2005">2005</option>
<option value="2004">2004</option>
<option value="2003">2003</option>
<option value="2002">2002</option>
<option value="2001">2001</option>
<option value="2000">2000</option>
<option value="1999">1999</option>
<option value="1998">1998</option>
<option value="1997">1997</option>
<option value="1996">1996</option>
<option value="1995">1995</option>
<option value="1994">1994</option>
<option value="1993">1993</option>
<option value="1992">1992</option>
<option value="1991">1991</option>
<option value="1980">1980</option>
<option value="1979">1979</option>
<option value="1978">1978</option>
<option value="1977">1977</option>
<option value="1976">1976</option>
<option value="1975">1975</option>
<option value="1974">1974</option>
<option value="1973">1973</option>
<option value="1972">1972</option>
<option value="1971">1971</option>
<option value="1970">1970</option>
</select>
</div>
<div class="month">
<select name="months" id="months">
<option value="" selected>month</option>
<option value="1">January</option>
<option value="2">February</option>
<option value="3">March</option>
<option value="1">April</option>
<option value="5">May</option>
<option value="6">June </option>
<option value="7">July</option>
<option value="8">August </option>
<option value="9">September </option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>
</div>
<div class="why-need-bd">
<p>Why do I need to provide my <br> birthday
</p>
</div>
</div>
<div class="gender">
<input type="radio" name="female" id="female">
<span class="gender-label">Female</span>
<input type="radio" name="male" id="male">
<span class="gender-label">Male</span>
</div>
<div class="p-policy">
<p>By clicking Sign Up, you agree to our
<span class="bold-dark">Terms</span> and that you have <br>
read our <span class="bold-dark">Data Use Policy</span>,
including our <span class="bold-dark">Cookie Use</span></p>
</div>
<div class="sign-up-button">
<button class="sign-up-btn">Sign Up</button>
</div>
<br>
<hr>
<div class="create-p-c">
<p><span class="bold-dark">Create a Page</span>
for a celebrity, brand or business</p>
</div>
</div>
</div>
</body>
</html>
css
/*google font*/
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap');
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
.navbar {
width: 100%;
height: 80px;
display: flex;
justify-content: space-around;
align-items: center;
background-color: #3b5998;
}
.logo {
font-size: 45px;
font-family: 'Poppins', sans-serif;
color: white;
}
.login-form {
display: flex;
font-family: 'Roboto', sans-serif;
font-size: 13px;
}
.login-input-div {
margin-left: 20px;
}
.label {
color: white;
margin-bottom: 3px;
}
.login-input {
height: 25px;
background-color: lightyellow;
border: none;
margin-bottom: 5px;
}
.light-blue {
color: aliceblue;
}
.forgot-p {
text-decoration: none;
color: aliceblue;
}
.login-btn {
margin-left: 20px;
margin-top: 19px;
}
.login-btn button {
width: 80px;
background-color: #7099f0;
height: 25px;
border: none;
color: white;
font-weight: 700;
cursor: pointer;
}
.container {
display: flex;
}
.content-body {
width: 50%;
margin-left: 30px;
margin-top: 60px;
}
.content-body h1 {
font-family: 'Poppins', sans-serif;
font-size: 4.5vh;
}
.fb-content-img {
width: 100%;
margin-top: 50px;
}
.signup-body {
margin-top: 40px;
margin-left: 30px;
margin-right: 10px;
}
.sign-up-h1 {
font-family: 'Poppins', sans-serif;
font-size: 4vh;
}
.gray {
color: gray;
font-size: 25px;
font-family: 'Roboto', sans-serif;
margin-top: 10px;
}
.user-names {
width: 100%;
display: flex;
margin-top: 30px;
}
.input-name {
margin: 5px;
height: 40px;
width: 250px;
padding: 10px;
font-size: 18px;
border-radius: 5px;
border: 0.5px solid gray;
margin-left: 10px;
}
.signup-email {
width: 100%;
margin-top: 10px;
}
.input-email {
width: 515px;
padding: 10px;
font-size: 18px;
border-radius: 5px;
border: 0.5px solid gray;
margin-left: 10px;
}
.signup-password {
width: 100%;
margin-top: 10px;
}
.input-password {
margin: 5px;
height: 40px;
width: 515px;
padding: 10px;
font-size: 18px;
border-radius: 5px;
border: 0.5px solid gray;
margin-left: 10px;
}
.birth-day-h3 {
font-family: 'Roboto', sans-serif;
margin-left: 10px;
margin-top: 10px;
margin-bottom: 10px;
}
.birth-day {
display: flex;
align-items: center;
padding: 10px;
}
#days,
#years,
#months {
height: 35px;
}
.why-need-bd {
font-size: 13px;
font-family: 'Roboto', sans-serif;
color: darkblue;
margin-left: 25px;
}
.gender {
margin-top: 20px;
font-family: 'Roboto', sans-serif;
font-weight: 600;
}
.gender input {
margin: 10px;
}
.p-policy {
font-size: 12px;
font-family: 'Roboto', sans-serif;
margin-top: 10px;
}
.p-policy p {
margin-left: 10px;
}
.bold-dark {
color: darkblue;
font-weight: 600;
}
.sign-up-btn {
margin: 10px;
width: 150px;
height: 40px;
font-size: 25px;
font-weight: bold;
background: linear-gradient(#67ae55, #578843);
border: none;
border-radius: 10px;
color: white;
cursor: pointer;
}
.create-p-c {
margin-top: 10px;
font-family: 'Roboto', sans-serif;
font-size: 14px;
}
.create-p-c p {
margin: 10px;
}
1 Comments:
network ports
ConversionConversion EmoticonEmoticon