Facebook sign up & login page using HTML CSS
I have created the SIGNUP page of Facebook using HTML, CSS. Well, took more time on CSS.
This is the signup page, which has a login form where you can enter the requested entry in the input box, and form for creating a new FB account, have some personal information (mobile no, email, name, dob) that need to enter and sign up.
1. Difficulty Level
- Simple (Anyone Can Learn it, Easy Code to Comprehend)
2. Languages
- HTML , CSS
3.ScreenShot
4. CODE
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Facebook-log in or sign up</title>
<link rel="icon" href="facebook.png" type="image">
</head>
<body>
<!--header of the page-->
<div id="headerwrapper">
<div id="header">
<li id="sitename"><a href="http://facebook.com">facebook</a></li>
<form action="post">
<li>Email or Phone<br><input type="text" name="email"></li>
<li>Password<br><input type="password" name="password"><br><a href="">Forgotten account?</a></li>
<li><input type="submit" name="login" value="Log In"></li>
</form>
</div>
</div>
<br>
<div id="wrapper">
<div id="div1">
<p>Facebook helps you connect and share with the<br> people in your life.</p>
<img src="fb.png">
</div>
<!--form design on right side-->
<div id="div2">
<h1>Create an account</h1>
<li>It's quick and easy.</li>
<li>
<input type="text" placeholder="First Name" id="firstname">
<input type="text" placeholder="Surname" id="surname">
</li>
<li><input type="text" placeholder="Mobile number or email address"></li>
<li><input type="password" placeholder="New password"></li>
<p>Birthday</p>
<li>
<select>
<option>Day</option>
<option>01</option>
<option>02</option>
<option>03</option>
<option>04</option>
<option>05</option>
<option>06</option>
<option>07</option>
<option>08</option>
<option>09</option>
<option>10</option>
<option>11</option>
<option>12</option>
<option>13</option>
<option>14</option>
<option>15</option>
<option>16</option>
<option>17</option>
<option>18</option>
<option>19</option>
<option>20</option>
<option>21</option>
<option>22</option>
<option>23</option>
<option>24</option>
<option>25</option>
<option>26</option>
<option>27</option>
<option>28</option>
<option>29</option>
<option>30</option>
<option>31</option>
</select>
<select>
<option>Month</option>
<option>Jan</option>
<option>Feb</option>
<option>Mar</option>
<option>Apr</option>
<option>May</option>
<option>Jun</option>
<option>July</option>
<option>Aug</option>
<option>Sept</option>
<option>Oct</option>
<option>Nov</option>
<option>Dec</option>
</select>
<select>
<option>Year</option>
<option>2000</option>
<option>2001</option>
<option>2002</option>
<option>2003</option>
<option>2004</option>
<option>2005</option>
<option>2006</option>
<option>2007</option>
<option>2008</option>
<option>2009</option>
<option>2010</option>
<option>2011</option>
<option>2012</option>
<option>2013</option>
<option>2014</option>
<option>2015</option>
<option>2016</option>
<option>2017</option>
<option>2018</option>
<option>2019</option>
<option>2020</option>
<option>2021</option>
<option>2022</option>
<option>2023</option>
<option>2024</option>
<option>2025</option>
<option>2026</option>
<option>2027</option>
<option>2028</option>
<option>2029</option>
<option>2030</option>
<option>2031</option>
</select>
</li><br>
<p>Gender</p>
<li>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label>
<input type="radio" id="male" name="gender" value="male">
<label for="male">Male</label>
<input type="radio" id="custom" name="gender" value="custom">
<label for="other">Custom</label>
</li>
<li id="terms">By clicking Sign up, you agree to our <a href="">Terms</a>,<a href="">Data Policy</a> and<br><a
href="">Cookie Use</a>.You may receive SMS notifications from us and<br> can opt out at any time.</li>
<li><input type="submit" value="Sign up"></li>
<li id="create_page"><a href="">Create a Page</a> for a celebrity, band or business.</li>
</div>
</div>
<!--bottom of the page-->
<div id="footer_wrapper">
<div id="footer1">
English (UK) <a href="">हिन्दी</a><a href="">ਪੰਜਾਬੀ</a><a href=""> اردو</a><a href="">தமிழ்</a><a
href="">বাংলা</a><a href="">मराठी</a><a href="">తెలుగు</a><a href="">ગુજરાતી</a><a href="">ಕನ್ನಡ</a><a
href="">മലയാളം</a><a href="#" title="Show more languages">+</a>
</div>
<div id="footer2">
<a href="">Sign Up</a><a href="">Log In</a><a href="">Messenger</a><a href="">FacebookLite</a><a
href="">Watch</a><a href="">People</a><a href="">Pages</a><a href="">Page categories</a><a href="">Places</a><a
href="">Games</a><a href="">Locations</a><a href="">Marketplace</a><a href="">Groups</a><a
href="">Instagram</a><a href="">Local</a><a href="">Fundraisers</a><a href="">Services</a>
<a href="">About</a><a href="">Create ad</a><a href="">Create Page</a>
<a href="">Developers</a><a href="">Careers</a><a href="">Privacy</a><a href="">Cookies</a><a
href="">AdChoices</a><a href="">Terms</a><a href="">Help</a>
<p>Facebook © 2020</a>
</div>
</div>
</body>
</html>
CSS
body {
text-align: center;
width: 100%;
margin: 0 auto;
padding: 0px;
font-family: "lucida grande", tahoma, verdana, arial, sans-serif;
background: linear-gradient(white, #D3D8E8);
}
#headerwrapper {
width: 100%;
min-width: 980px;
background-color: #3b5998;
}
#header {
width: 980px;
margin: 0px auto;
padding: 0px;
height: 85px;
}
#header li {
list-style-type: none;
float: left;
text-align: left;
color: white;
}
#header #sitename {
margin-top: 25px;
}
#header #sitename a {
color: white;
text-decoration: none;
font-size: 30px;
font-weight: 900;
}
#header form {
margin-top: 15px;
float: right;
}
#header form li {
font-size: 13px;
margin-left: 15px;
}
#header form li a {
color: #A9BCF5;
text-decoration: none;
}
#header form input[type="text"] {
margin-top: 3px;
margin-bottom: 3px;
width: 150px;
border: 1px solid #08298A;
height: 25px;
padding-left: 3px;
}
#header form input[type="password"] {
margin-top: 3px;
margin-bottom: 3px;
width: 150px;
border: 1px solid #08298A;
height: 25px;
padding-left: 3px;
}
#header form input[type="submit"] {
height: 25px;
margin-top: 20px;
background-color: #084B8A;
color: white;
border: 1px solid #08298A;
}
#wrapper {
margin: 0 auto;
padding: 0px;
text-align: center;
width: 980px;
height:601px;
}
#wrapper div {
float: left;
font-family: helvetica, arial, sans-serif;
}
#wrapper #div1 {
margin-top: 30px;
width: 580px;
text-align: left;
height:298px;
}
#wrapper #div1 p {
font-size: 20px;
font-family: arial;
font-weight: bold;
margin: 0px;
color: #0e385f;
}
#wrapper #div2 {
margin-top: 10px;
width: 400px;
height:600px;
text-align: left;
}
#wrapper #div2 h1 {
margin: 0px;
font-size: 36px;
color: #2E2E2E;
}
#wrapper #div2 p {
color: #90949c;
font-size: 16px;
font-weight: bold;
}
#wrapper #div2 li {
list-style-type: none;
margin-top: 10px;
width:399px;
}
#wrapper #div2 li #firstname {
width: 49%;
border-radius: 5px;
width:179px;
}
#wrapper #div2 li #surname {
margin-left: 2%;
width: 49%;
width:179px;
border-radius: 5px;
}
#wrapper #div2 li input[type="text"] {
width: 100%;
height: 40px;
border-radius: 5px;
padding-left: 11px;
font-size: 18px;
border: 1px solid #BDBDBD;
}
#wrapper #div2 li input[type="password"] {
width: 100%;
height: 40px;
border-radius: 5px;
padding-left: 10px;
font-size: 18px;
border: 1px solid #BDBDBD;
}
#wrapper #div2 li select {
padding: 4px;
padding-left: 10px;
padding-right: 10px;
float: left;
}
#wrapper #div2 li a {
margin-left: 10px;
width: 150px;
color: #045FB4;
text-decoration: none;
font-size: 12px;
display: inline-block;
vertical-align: middle;
line-height: 15px;
}
#wrapper #div2 li a:hover {
text-decoration: underline;
}
#wrapper #div2 li {
color: #2E2E2E;
font-size: 18px;
}
#wrapper #div2 #terms {
color: #424242;
font-size: 11px;
}
#wrapper #div2 #terms a {
display: inline;
margin: 0px;
}
#wrapper #div2 li input[type="submit"] {
width: 205px;
height: 45px;
text-align: center;
font-size: 19px;
margin-top: 10px;
margin-bottom: 10px;
font-family: 'Freight Sans Bold', helvetica, arial, sans-serif ;
font-weight: bold ;
background: linear-gradient(#67ae55, #578843);
background-color: #69a74e;
box-shadow: inset 0 1px 1px #a4e388;
border-color: #3b6e22 #3b6e22 #2c5115;
border: 1px solid;
border-radius: 5px;
color: #fff;
cursor: pointer;
display: inline-block;
position: relative;
text-shadow: 0 1px 2px rgba(0, 0, 0, .5);
}
#wrapper #div2 #create_page {
color: #424242;
font-size: 13px;
font-weight: bold;
}
#wrapper #div2 #create_page a {
display: inline;
margin: 0px;
font-size: 13px;
}
#footer_wrapper {
width: 100%;
clear: both;
float: left;
margin-top: 30px;
min-width: 995px;
background-color: white;
text-align: left;
}
#footer1 {
width: 980px;
margin: 0px auto;
padding: 0px;
border-bottom: 1px solid #E6E6E6;
height: 30px;
line-height: 30px;
font-size: 12px;
color: #848484;
}
#footer1 a {
color: #365899;
display: inline;
margin-left: 10px;
text-decoration: none;
}
#footer1 a:hover {
text-decoration: underline;
}
#footer2 {
width: 980px;
margin: 0px auto;
padding: 0px;
font-size: 12px;
color: #848484;
}
#footer2 a {
color: #365899;
display: inline-block;
margin: 5px;
margin-left: 0px;
min-width: 60px;
text-decoration: none;
}
#footer2 a:hover {
text-decoration: underline;
}
