Ticker

6/recent/ticker-posts

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

 

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>

Hope You Like it. Don't Forget to Like Share and Support Us. 

Learn HTML and CSS for Frontend Fundamentals (Pirple Course).

Click Here To Visit The Course. 

Post a Comment

0 Comments