Skip to content

Instantly share code, notes, and snippets.

@bogdan-nourescu

bogdan-nourescu/facebook.html

Last active June 13, 2019 17:44
Show Gist options
  • Save bogdan-nourescu/686a96d13e32cde81ade20518016d9e9 to your computer and use it in GitHub Desktop.
Save bogdan-nourescu/686a96d13e32cde81ade20518016d9e9 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
facebook.html
<!DOCTYPE html>
<html>
<head>
<title>Facebook</title>
<style>
html,body{
padding:0;
margin:0;
}
header {
background-color: #3b5998;
color:white;
height:80px;
}
.header-container {
max-width:980px;
margin:0 auto;
height:100%;
}
.header-container > *{
float:left;
width:50%;
height:100%;
}
header .logo{
height: 100%;
}
.login-form-box{
display:flex;
flex-direction:row;
}
.email-container{
width:40%;
padding: 10px 3px;
}
.pass-container{
width:40%;
padding: 10px 3px;
}
.login-btn-container{
width:20%;
padding: 10px 3px;
}
.login-btn-container > .input > input{
background-color:#486dba;
border: 1px solid #273b66;
color: white;
padding: 2px 7px;
}
.pass-container > .explanation {
color:#81a0d9;
}
.leftSide, .rightSide{
float:left;
width:50%;
}
.mainContent, footer>*{
max-width:980px;
margin:0 auto;
}
.leftSide{
padding-right: 40px;
box-sizing: border-box;
}
.leftSide p{
margin-top:40px;
font-size: 24px;
color:#0b5089;
font-weight:bold;
}
.leftSide img{
width:100%;
}
section{
background-color:#f4f5f9;
padding-bottom:20px;
}
.rightSide input[type="text"]{
border-radius:5px;
border:1px solid lightgrey;
padding:6px 8px;
}
.flex{
display:flex;
}
.flex>*{
flex:1;
margin-top:10px;
}
.birthday-container a{
flex: 2;
font-size:13px;
padding:2px 4px;
text-decoration:none;
}
.birthday-container a:hover{
text-decoration:underline;
}
.tos a{
text-decoration:none;
}
.tos a:hover{
text-decoration:underline;
}
.sign-up-btn{
color: white;
background-color:#65a550;
border-radius:5px;
border:1px solid #4a783a;
padding:7px 40px;
box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
transition: all 0.3s cubic-bezier(.25,.8,.25,1);
font-size: 1.3em;
}
.sign-up-btn:hover{
box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}
footer a{
text-decoration:none;
font-size:0.8em;
color: #385898;
}
footer a:hover{
text-decoration:underline;
}
footer .separator{
background-image: linear-gradient(to right, #ebedf0 , #3b5998 30%,#3b5998 70%, #ebedf0);
height:2px;
}
</style>
</head>
<body>
<header>
<div class="header-container">
<div class="logo-container">
<img class="logo" src="https://maxcdn.icons8.com/app/uploads/2016/08/Official-Facebook-Logo.png" alt="facebook logo" />
</div>
<form class="login-form-box">
<div class="email-container">
<div class="label">Email or Phone</div>
<div class="input"><input type="text" /></div>
<div class="explanation"></div>
</div>
<div class="pass-container">
<div class="label">Password</div>
<div class="input"><input type="text" /></div>
<div class="explanation">Forgotton account?</div>
</div>
<div class="login-btn-container">
<div class="label">&nbsp;</div>
<div class="input"><input type="button" value="Log in"/></div>
<div class="explanation"></div>
</div>
</form>
</div>
</header>
<section>
<div class="mainContent">
<div class="leftSide">
<p>Facebook helps you connect and share with the people in your life.</p>
<img src="facebook interconnect.PNG" alt="facebook interconnect"/>
</div>
<div class="rightSide">
<h1>Create a New Account</h1>
<h3>It’s free and always will be.</h3>
<div class="flex">
<input type="text" placeholder="First Name" style="margin-right:5px;"/>
<input type="text" placeholder="Last Name" style=""/>
</div>
<div class="flex">
<input type="text" placeholder="Mobile number or email" />
</div>
<div class="flex">
<input type="text" placeholder="New Password" />
</div>
<h3></h3>
<div class="flex birthday-container">
<select>
<option value="">Month</option>
<option>Jan</option>
<option>Feb</option>
<option>Mar</option>
<option>Apr</option>
<option>May</option>
<option>Jun</option>
<option>Jul</option>
<option>Aug</option>
<option>Sep</option>
<option>Oct</option>
<option>Nov</option>
<option>Dec</option>
</select>
<select>
<option value="">Day</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
<option>11</option>
<option>12</option>
<option>13</option>
<option>14</option>
<option>15</option>
<option>16</option>
<option>17</option>
<option>18</option>
<option>19</option>
<option>20</option>
<option>21</option>
<option>22</option>
<option>23</option>
<option>24</option>
<option>25</option>
<option>26</option>
<option>27</option>
<option>28</option>
<option>29</option>
<option>30</option>
<option>31</option>
</select>
<select id="year" title="Year"><option value="0">Year</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" selected="1">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></select>
<a href="#" >Why do i need to provide my birthday?</a>
</div>
<div class="flex">
<label><input type="radio" name="gender"/>Female</label>
<label><input type="radio" name="gender"/>Male</label>
</div>
<p class="tos">
By clicking Sign Up, you agree to our <a href="#">Terms</a>.
Learn how we collect, use and share your data in our <a href="#">Data Policy</a> and how we use cookies and similar technology in our <a href="#">Cookies Policy</a>. You may receive SMS Notifications from us and can opt out any time.
</p>
<div>
<input class="sign-up-btn" type="button" value="Sign Up" />
</div>
</div>
<br style="clear:both;" />
<div>
</section>
<footer>
<div>
<a href="#">Link 1</a>
<a href="#">Link 1</a>
<a href="#">Link 1</a>
<a href="#">Link 1</a>
<a href="#">Link 1</a>
<a href="#">Link 1</a>
<a href="#">Link 1</a>
<a href="#">Link 1</a>
<a href="#">Link 1</a>
<a href="#">Link 1</a>
<a href="#">Link 1</a>
</div>
<div class="separator"></div>
<div>
<a href="#">Link 1</a>
<a href="#">Link 1</a>
<a href="#">Link 1</a>
<a href="#">Link 1</a>
<a href="#">Link 1</a>
<a href="#">Link 1</a>
<a href="#">Link 1</a>
<a href="#">Link 1</a>
<a href="#">Link 1</a>
<a href="#">Link 1</a>
<a href="#">Link 1</a>
<a href="#">Link 1</a>
<a href="#">Link 1</a>
<a href="#">Link 1</a>
<a href="#">Link 1</a>
<a href="#">Link 1</a>
<a href="#">Link 1</a>
<a href="#">Link 1</a>
<a href="#">Link 1</a>
<a href="#">Link 1</a>
<a href="#">Link 1</a>
<a href="#">Link 1</a>
<a href="#">Link 1</a>
<a href="#">Link 1</a>
<a href="#">Link 1</a>
<a href="#">Link 1</a>
<a href="#">Link 1</a>
<a href="#">Link 1</a>
<a href="#">Link 1</a>
<a href="#">Link 1</a>
<a href="#">Link 1</a>
<a href="#">Link 1</a>
<a href="#">Link 1</a>
</div>
</footer>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment