How to design and code Facebook Homepage using HTML and CSS only ?

0 0 Edit this post

Facebook Style Homepage Design Using HTML And CSS. How to Design Homepage like Facebook using HTML and CSS. Facebook login page html code github, etc

Tutor Chetan

Learn the basics of HTML and CSS

Frontend Fundamentals - Pirple Course

Final Project: HTML/CSS Source Code for Facebook Homepage.

<html>
<head>
<title>Facebook (Final Exam)</title>
<style>
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);
}
#header_wrapper
{
width:100%;
min-width:980px;
background-color:#4c66a4;
}
#header
{
width:980px;
margin:0px auto;
padding:0px;
height:85px;
}
#header li
{
list-style-type:none;
float:left;
text-align:left;
color:white;
font-size:25px;
}
#header #sitename
{
margin-top:25px;
}
#header #sitename a
{
color:white;
text-decoration:none;
font-size:42px;
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;
}
#wrapper div
{
float:left;
font-family: helvetica, arial, sans-serif;
}
#wrapper #div1
{
margin-top:30px;
width:590px;
text-align:left;

}

#wrapper #div1 p
{
font-size:30px;
font-family:arial;
margin-top:0px;
color:black;
}
#wrapper #div1 br
{
font-size:24px;
font-family:arial;
margin-top:30px;
color:black;
}
#wrapper #div2
{
margin-top:10px;
width:390px;
text-align:left;
}
#wrapper #div2 h1
{
margin:0px;
font-size:37px;
color:#2E2E2E;
}
#wrapper #div2 p
{
font-size:18px;
color:#2E2E2E;
}
#wrapper #div2 li
{
list-style-type:none;
margin-top:10px;
}
#wrapper #div2 li #firstname
{
width:49%;
}
#wrapper #div2 li #surname
{
margin-left:2%;
width:49%;
}
#wrapper #div2 li input[type="text"]
{
width:100%;
height:40px;
border-radius:5px;
padding-left:10px;
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;
float:left;
}
#wrapper #div2 li a
{
margin-left:10px;
width:150px;
color:#045FB4;
text-decoration:none;
font-size:11px;
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 !important;
font-weight: bold !important;
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:80px;
text-decoration:none;
}
#footer2 a:hover
{
text-decoration:underline;
}
</style>
</head>
<body>
<div id="header_wrapper">
<div id="header">
<li id="sitename"><a href="www.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="https://www.facebook.com/login/identify/?ctx=recover&ars=royal_blue_bar">Forgotten account?</a></li>
<li><input type="submit" name="login" value="Log In"></li>
</form>
</div>
</div>

<div id="wrapper">

<div id="div1">
<p><b>Connect with friends and the<br>world around you on Facebook.</b></p>
<img src="https://scontent.fktm8-1.fna.fbcdn.net/v/t39.2365-6/32213527_1720875981299142_7601737152052854784_n.png?_nc_cat=1&_nc_ohc=6BzvHZc7PccAQnyXX2OAGgqjhkfLy0QarqMcjNdaXafbgcmHnxWPDlKww&_nc_ht=scontent.fktm8-1.fna&oh=5e007e0000adff3ff6a95d852bfc4826&oe=5EA236E8">
<b><left>See photos and updates</b> from friends in News Feed.</left>
<br><br><br><img src="https://scontent.fktm8-1.fna.fbcdn.net/v/t39.2365-6/32220240_200651090730619_3989834943638274048_n.png?_nc_cat=1&_nc_ohc=Dv3qq60CEBsAQlELpIT8iHZD456P2Hv2Sm11rqLc_kEFgBVDXw23BuISA&_nc_ht=scontent.fktm8-1.fna&oh=4124675116207e379756e33c73898b39&oe=5EA1A236">
<b>Share what's new</b> in your life on your Timeline.
<br><br><br><img src="https://scontent.fktm8-1.fna.fbcdn.net/v/t39.2365-6/32158113_191365994837162_5605369115159035904_n.png?_nc_cat=1&_nc_ohc=uANeyxlAkWoAQlMI2lIv3RlPhwXIZuIIsfqXdcr2qL3ab47gYp8oGbBTQ&_nc_ht=scontent.fktm8-1.fna&oh=b45521550ccef9d0d8dac2952b25f411&oe=5EB13FB5">
<b>Find more</b> of what you're looking for with Facebook Search.
</div>

<div id="div2">
<h1>Sign Up</h1>
<p>It’s quick and easy.</p>
<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="text" placeholder="Re-enter mobile number or email address"></li>
<li><input type="password" placeholder="New password"></li>
<p>Birthday</p>
<li>
<select>
<option>Day</option>
<option value="01">1</option>
<option value="02">2</option>
<option value="03">3</option>
<option value="04">4</option>
<option value="05">5</option>
<option value="06">6</option>
<option value="07">7</option>
<option value="08">8</option>
<option value="09">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>
<select>
<option>Month</option>
<option value="01">January</option>
<option value="02">February</option>
<option value="03">March</option>
<option value="04">April</option>
<option value="05">May</option>
<option value="06">June</option>
<option value="07">July</option>
<option value="08">August</option>
<option value="09">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>
<select>
<option>Year</option>
<option value="2030">2030</option>
<option value="2029">2029</option>
<option value="2028">2028</option>
<option value="2027">2027</option>
<option value="2026">2026</option>
<option value="2025">2025</option>
<option value="2024">2024</option>
<option value="2023">2023</option>
<option value="2022">2022</option>
<option value="2021">2021</option>
<option value="2020">2020</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="1990">1990</option>
<option value="1989">1989</option>
<option value="1988">1988</option>
<option value="1987">1987</option>
<option value="1986">1986</option>
<option value="1985">1985</option>
<option value="1984">1984</option>
<option value="1983">1983</option>
<option value="1982">1982</option>
<option value="1981">1981</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>
<option value="1969">1969</option>
<option value="1968">1968</option>
<option value="1967">1967</option>
<option value="1966">1966</option>
<option value="1965">1965</option>
<option value="1964">1964</option>
<option value="1963">1963</option>
<option value="1962">1962</option>
<option value="1961">1961</option>
<option value="1960">1960</option>
<option value="1959">1959</option>
<option value="1958">1958</option>
<option value="1957">1957</option>
<option value="1956">1956</option>
<option value="1955">1955</option>
<option value="1954">1954</option>
<option value="1953">1953</option>
<option value="1952">1952</option>
<option value="1951">1951</option>
<option value="1950">1950</option>
<option value="1949">1949</option>
<option value="1948">1948</option>
<option value="1947">1947</option>
<option value="1946">1946</option>
<option value="1945">1945</option>
<option value="1944">1944</option>
<option value="1943">1943</option>
<option value="1942">1942</option>
<option value="1941">1941</option>
<option value="1940">1940</option>
<option value="1939">1939</option>
<option value="1938">1938</option>
<option value="1937">1937</option>
<option value="1936">1936</option>
<option value="1935">1935</option>
<option value="1934">1934</option>
<option value="1933">1933</option>
<option value="1932">1932</option>
<option value="1931">1931</option>
<option value="1930">1930</option>
<option value="1929">1929</option>
<option value="1928">1928</option>
<option value="1927">1927</option>
<option value="1926">1926</option>
<option value="1925">1925</option>
<option value="1924">1924</option>
<option value="1923">1923</option>
<option value="1922">1922</option>
<option value="1921">1921</option>
<option value="1920">1920</option>
<option value="1919">1919</option>
<option value="1918">1918</option>
<option value="1917">1917</option>
<option value="1916">1916</option>
<option value="1915">1915</option>
<option value="1914">1914</option>
<option value="1913">1913</option>
<option value="1912">1912</option>
<option value="1911">1911</option>
<option value="1910">1910</option>
<option value="1909">1909</option>
<option value="1908">1908</option>
<option value="1907">1907</option>
<option value="1906">1906</option>
<option value="1905">1905</option>
<option value="1904">1904</option>
<option value="1903">1903</option>
<option value="1902">1902</option>
<option value="1901">1901</option>
<option value="1900">1900</option>
</select>
<a href="">Providing your birthday here</a>
</li>
<li><input type="radio">Female <input type="radio">Male</li>
<li id="terms">By clicking Sign Up, you agree to our <a href="https://www.facebook.com/legal/terms/update">Terms</a>, <a href="https://www.facebook.com/about/privacy/update">Data Policy</a> and <a href="https://www.facebook.com/policies/cookies/">Cookies Policy</a>. You may receive SMS Notifications from us and can opt out 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>

<div id="footer_wrapper">

<div id="footer1">
English (US) <a href="https://ne-np.facebook.com">नेपाली</a><a href="">हिन्दी</a><a href="">Español</a><a href="">Português (Brasil)</a>
<a href="">日本語</a><a href="">Français (France)</a><a href="">Deutsch</a><a href="">Italiano</a><a href="">العربية</a><a href="">中文(简体)</a>
</div>
<div id="footer2">
<a href="">Sign Up</a><a href="">Log In</a><a href="">Messenger</a><a href="">Facebook Lite</a><a href="">Watch</a><a href="">People</a><a href="">Pages</a><a href="">Pages 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 Ads</a><a href="">Create Page</a><a href="">Developers</a><a href="">Careers</a><a href="">Privacy</a><a href="">Cookies</a><a href="">Ads</a><a href="">Terms</a><a href="">Help</a>
<p>Facebook © 2020</a>
<p>Project#2(Final Exam) by Chetan Thapa Magar</a>
</div>
</div>
</body>
</html>