Make Facebook Homepage HTML Source Code

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.


COMMENTS

BLOGGER
Name

Armed Police Force,3,Armed Police Force Paper,1,Article,5,Bachelor Paper,1,BBS Paper,1,Blessing and Wishes,4,Christmas,1,Computer,5,EPS Korea,3,Exam Results,6,Exam Schedule,9,Festivals,1,Film,2,Lok Sewa Aayog,6,Lok Sewa Aayog Model Question,7,Lok Sewa Aayog Paper,1,Model Question,7,MS Excel Notes,1,MS PowerPoint Notes,1,MS Word Notes,1,Nepal Army,4,Nepal Bank Limited,2,Nepal Electricity Authority,2,Nepal Oil Corporation,2,Nepal Police,22,Nepal Police Paper,5,Nepal Rastra Bank,2,Nepal Telecom,1,New Year,1,News,16,NID Nepal,2,Notes,5,Question Collection,10,Rastriya Banijya Bank,1,Real Exam Paper,8,Shortcut Key,1,Social Security Fund,1,Syllabus,12,Tips & Tricks,2,TU University,4,Vacancy,9,Valentine,1,Video,5,VisitNepal,5,
ltr
item
Online Khabar with Chetan Thapa Magar: Make Facebook Homepage HTML Source Code
Make Facebook Homepage HTML Source Code
Make Facebook Homepage HTML Source Code
https://1.bp.blogspot.com/-Ht-y_PBsoBc/XiagOhNqQ7I/AAAAAAAAAbA/f8GLJbEsn4sG-Fetp5H2KvNoNt8ohDGSACLcBGAsYHQ/s1600/1.1.png
https://1.bp.blogspot.com/-Ht-y_PBsoBc/XiagOhNqQ7I/AAAAAAAAAbA/f8GLJbEsn4sG-Fetp5H2KvNoNt8ohDGSACLcBGAsYHQ/s72-c/1.1.png
Online Khabar with Chetan Thapa Magar
https://www.chetanthapamagar.com.np/2020/01/make-facebook-homepage-html-source-code.html
https://www.chetanthapamagar.com.np/
https://www.chetanthapamagar.com.np/
https://www.chetanthapamagar.com.np/2020/01/make-facebook-homepage-html-source-code.html
true
2012862999246101061
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS PREMIUM CONTENT IS LOCKED STEP 1: Share to a social network STEP 2: Click the link on your social network Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy Table of Content