Facebook Style Homepage Design Using HTML And CSS

Facebook-Style-Homepage-Design-Using-HTML-And-CSS

Facebook Style Homepage Design Using HTML And CSS

To Create Facebook Style Homepage Design Using HTML and CSS it takes only two Steps : -

Step 1 :- Create a HTML file and write Code :-

Copy the below code and save it as index.html


<div class="main-bar">

	<div class="main-bar-inner">
	
	<div class="ist-section">
		
		<h1>facebook</h1>
	</div>
   

   <div class="second-section">
		
		<form>
			

		<span>
			<label>Password</label>
			<br>
			<input type="password" name="">
			<input type="submit" name="submit" value="Log In">
			<br>
			<span style="color: #9cb4d8;
    font-weight: normal;    font-size: 12px;padding: 4px;float: left;
    width: 100%;">Forgotten account?</span>
		</span>
		<span>
				<label>Email or Phone</label>
				<br>
			<input type="text" name="">
		</span>
		</form>
	</div>




</div>
</div>



<div class="second-main-bar">

<div class="second-main-bar-inner">



<div class="second-main-bar-inner-one">
<p>Facebook helps you connect and share with the people in your life.</p>

<img src="banner.png">


</div>


<div class="second-main-bar-inner-two">

<p>Create an account</p>

<span>It's free and always will be.</span>

<br>
<br>

<form>
	<input class="text" type="text" name="" placeholder="First name">
	<input class="text" type="text" name="" placeholder="Surname">
	<br>
	<input class="number" type="text" name="" placeholder="Mobile number or email address">
	<br>
	<input class="password" type="text" name=" " placeholder="New password">
	<span style="color: #1d2129">Birthday</span>
	<br>
	<select aria-label="Day" name="birthday_day" id="day" title="Day" class="_5dba"><option value="0">Day</option><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">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" selected="1">29</option><option value="30">30</option><option value="31">31</option></select>

	<select aria-label="Month" name="birthday_month" id="month" title="Month" class="_5dba"><option value="0">Month</option><option value="1">Jan</option><option value="2">Feb</option><option value="3">Mar</option><option value="4">Apr</option><option value="5">May</option><option value="6">Jun</option><option value="7">Jul</option><option value="8">Aug</option><option value="9">Sept</option><option value="10">Oct</option><option value="11">Nov</option><option value="12" selected="1">Dec</option></select>


	<select aria-label="Year" name="birthday_year" id="year" title="Year" class="_5dba"><option value="0">Year</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" selected="1">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></select>

<br>
<span class="radio"><input type="radio" name=""> Female</span>

<span class="radio"><input type="radio" name=""> Male</span>
 

<br>

<span class="copyright">
	By clicking Create an account, you agree to our Terms and confirm that you have read our Data Policy, including our Cookie Use Policy. You may receive SMS message notifications from Facebook and can opt out at any time.
</span>


<br>

<button>Create an account</button>

<br>

<span class="lastline" > <span style="color: #365899">Create a Page </span> for a celebrity, band or business.</span>

<br><br>
</form>

</div>





</div>
</div>

 

Step 2 : Make a CSS style file and write the below code and save it as style.css

	body
	{
		padding: 0;
		margin: 0;
		font-family:"lucida grande",tahoma,verdana,arial,sans-serif;
	}
		.main-bar
		{
    background-color: #3b5998;
    background-image: linear-gradient(#4e69a2, #3b5998 50%);
    border-bottom: 1px solid #133783;
    min-height: 42px;
    float: left;
    width: 100%
		}
		
		.main-bar-inner
		{
			width: 73%;
			background: transparent;
			margin: 0 14%;
			float: left;
		}
		.main-bar .main-bar-inner .ist-section
		{
			float: left;
			width: 40%
		}
		.main-bar .main-bar-inner .ist-section h1
		{
          line-height: 1.5em;
          color: white;
          margin:  0; 
          font-size: 40px;
          padding: 20px 0 5px 0; 
          float: left;
		}

		.main-bar .main-bar-inner .second-section
		{
           float: right;
           width: 60%;
		}
        
        .main-bar .main-bar-inner .second-section form span
        {
        	float: right;
        	margin:  3% 0 0 0; 
        	padding: 0 2%;

        }
       .main-bar .main-bar-inner .second-section form span label
       {
       	color: white;
       	font-size: 12px;

       }
        .main-bar .main-bar-inner .second-section form span input[type="text"]
        {
        	width: 140px;
        }
        .main-bar .main-bar-inner .second-section form span input[type="password"]
        {
        	width: 140px;
        }
       .main-bar .main-bar-inner .second-section form span input[type="submit"]
       {
       background-color: #4267b2;
       border: 1px solid #29487d;
       color: white;
       line-height: 1.4em

       }
       .second-main-bar
       {
       	float: left;
       	width: 100%;
       	background: linear-gradient(white, #D3D8E8);
       	height: 86vh

       }
       .second-main-bar .second-main-bar-inner
       {
       	width: 73%;
			background: transparent;
			margin: 0 14%;
			float: left;
       }
        .second-main-bar .second-main-bar-inner .second-main-bar-inner-one
       {
       	width: 61.5%;
       	float: left;
       }
       .second-main-bar .second-main-bar-inner .second-main-bar-inner-one p
       {
       	color: #0e385f;
    font-size: 20px;
    font-weight: bold;
    line-height: 29px;
    margin-top: 40px;
    width: 450px;
    word-spacing: -1px;
       }
      .second-main-bar .second-main-bar-inner .second-main-bar-inner-two
       {
       	float: left;
       	width: 35%;
       }
       .second-main-bar .second-main-bar-inner .second-main-bar-inner-two p

       {
        font-size: 36px;
        color: #333;
        font-weight: 600;
        margin-bottom: 5px;
       }
        .second-main-bar .second-main-bar-inner .second-main-bar-inner-two form .text
       {
       	    width: 42%;
       	    font-size: 18px;
            padding: 8px 10px;
            margin-bottom: 10px;
            border-radius: 5px; 
            border:1px solid #bdc7d8;
       }
        .second-main-bar .second-main-bar-inner .second-main-bar-inner-two form .number , .password
       {
       	    width: 92%;
       	    font-size: 18px;
            padding: 8px 10px;
            margin-bottom: 10px;
            border-radius: 5px;
            border:1px solid #bdc7d8;
       }
       select
       {
       	    font-size: 13px;
    height: 30px;
    padding: 5px;
    margin: 3% 0
       }
        .second-main-bar .second-main-bar-inner .second-main-bar-inner-two form .radio
       {
             color: #1d2129;
    font-size: 18px;
    font-weight: normal;
    line-height: 18px;
    padding: 0 10px 0 3px;
       }
       .copyright
       {
       	color: #777;
    font-size: 11px;
    margin: 2em 0;
    float: left;
       }
       button
       {
       	    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;
    letter-spacing: 1px;
    position: relative;
    text-shadow: 0 1px 2px rgba(0,0,0,.5);
        margin-top: 10px;
    margin-bottom: 10px;
        min-width: 194px;
    padding: 7px 20px;
    text-align: center;
        font-size: 19px;
            font-weight: bold !important;
                line-height: 126%;
       }
       .lastline
       {
       	border-top: 1px solid #dddfe2;
    color: #666;
    font-size: 13px;
    font-weight: bold;
    margin-top: 10px;
    padding-top: 15px;
       }

 

Download the Full Code  Click here

ADD COMMENT

Your email address will not be published. Required fields are marked *








Be the first to comment. :)

The primary motive of our company is to provide beyond satisfactory results .

Request a free consultation quote

WWW.BHAGAUTI.COM © COPYRIGHT 2018 | TERMS AND CONDITIONS | Privacy & Policy