Breaking News

Make Facebook Homepage HTML Source Code

Facebook Homepage HTML Source Code


Facebook Homepage Design with HTML and CSS.  Are you studying HTML with CSS course and try to make your fist Homepage which just look like Facebook. From here you can get some tips and tricks and view the source code from here.

Don't Forget to Visit My YouTube Channel and Subscribe.

Chetan Vlog - Youtube Channel




Visit Nepal 2020

Chetan Vlog


    

Source Code:

<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="textname="email"></li>
<li>Password<br><input type="passwordname="password"><br><a href="https://www.facebook.com/login/identify/?ctx=recover&ars=royal_blue_bar">Forgotten account?</a></li>
<li><input type="submitname="loginvalue="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="textplaceholder="First Nameid="firstname"><input type="textplaceholder="Surnameid="surname"></li>
<li><input type="textplaceholder="Mobile number or email address"></li>
<li><input type="textplaceholder="Re-enter mobile number or email address"></li>
<li><input type="passwordplaceholder="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="submitvalue="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>

Thank You. Hope You Like it.


No comments

Thanks for visit. Hope you like it. Support us by Like, Comment, Share, Follow and Subscribe.