Html and css of facebook front page download ~ Computer Treat

Html and css of facebook front page download

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>facebook</title>
<link href="style.css" type="text/css" rel="stylesheet" />

</head>
<body>
<div class="main"></div>
<div class="header">
<div class="logo"><a href="facebook.com"><img src="logo.jpg" class="book" width="200px" /></a> </div>

<div class="login">
<form action="">
<div class="email">Email or phone:</div>
<input type="text" class="text" name="Email" />

<div class="pw">password:</div> <input type="password" class="password" name="password" />
<input type="button" class="log" value="LogIn" />
<br /> <div class="cc"><input type="checkbox" name="keep me logged in" value="checkbox" /> Keep me logged in
<a href="">Forgot your password ?</a></div>
</form> </div></div>
<div class="topic">
<h2>Welcome to Facebook</h2><br />
<h4>Connect with your friends and the world<br />around you</h4> </div>
<div class="name">
<form action="">
<table border="0">
<tr>
<td ><input type="text" class="input" placeholder="First Name" /> </td>
<td class="sh"><input type="text" class="input" placeholder="Last name" />
</td>
</tr>
<tr>
<td colspan="2"> <input type="text" class="input" placeholder="Email" size="50px"/> </td>
</tr>
<tr>
<td colspan="2"><input type="text" class="input" placeholder="Re-enter email" size="50px" /></td>
</tr>
<tr>
<td colspan="2"><input type="password" class="input" placeholder="New Password" size="50px" /></td>
</tr>
<tr>

<td colspan="2" class="doc"> <h2 class="birthday">Birthday</h2>
<select name="day" class="select">
<option value="day" selected="selected">Day</option>
<option value="1">1</option><option value="2">2</option></select>
<select name="month" class="select">
<option value="jan">jan</option>
<option value="feb">feb</option>
<option value="march">march</option>
<option value="april">april</option>
<option value="may">may</option>
<option value="jun">jun</option>
<option value="july">july</option>
<option value="aug">aug</option>
<option value="sep">sep</option>
<option value="octo">octo</option>
<option value="nov">nov</option>
<option value="dec">dec</option>
</select>
<select name="year" class="select">
<option value="year" selected="selected">Year</option>
<option value="1989">1989</option>
<option value="1990">1990</option>
<option value="1991">1991</option>
<option value="1992">1992</option>
<option>1993</option>
<option>94</option>
<option>95</option>
<option>96</option>
<option>97</option>
<option>98</option>
<option>99</option>
<option>2000</option>
<option>2001</option>
<option>2002</option>
<option>2003</option>
<option>2004</option>
<option>2005</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>2010</option>
<option>2011</option>
<option>2012</option>
<option>2013</option>
<option>2014</option>
</select> <a class="top" href=" ">why do i need to provide my birthday?</a></td>
</tr>
<tr>

<td colspan="2" class="sex"><input type="radio" name="male" value="1" />Male <input type="radio" name="female" value="1" />Female</td>
</tr>
</table>

</form>
</div>
<div class="cond">By clicking sign up,you agree to our <a href="">terms</a> and that you have read our <a href=""> data use policy</a>,including our <a href="">cookie use</a>.</div>

<div class="button">
<input type="button" class="click" value="Sign Up" />
</div>
<hr class="line" />
<div class="create"><a href="Create a page" class="place">Create a page</a> for a celebrity, band or business.</div>
<div class="language"><ul>
<li><a href="english" >English(UK)</a></li>
<li><a href="#" >English(US)</a></li>
<li><a href="#" >Bengali</a></li>
<li><a href="#" >Hindi</a></li>
<li><a href="#" >Punjabi</a></li>
<li><a href="#" >Tamil</a></li>
<li><a href="#" >Telugu</a></li>
<li><a href="#" >Malayalam</a></li>
<li><a href="#" >Spanish</a></li>
<li><a href="#" >Portugues (Brasil)></a></li>
<li><a href="#" >...</a></li>
<hr class="ten"/>
<li><a href="#" >Mobile</a></li>
<li><a href="#" >Find friends</a></li>
<li><a href="#" >Badges</a></li>
<li><a href="#" >People</a></li>
<li><a href="#" >Pages</a></li>
<li><a href="#" >Places</a></li>
<li><a href="#" >Apps</a></li>
<li><a href="#" >Games</a></li>
<li><a href="#" >Music</a></li>
<br />
<li><a href="#" >About</a></li>
<li><a href="#" >Create ad</a></li>
<li><a href="#" >Create page</a></li>
<li><a href="#" >Developers</a></li>
<li><a href="#" >Carriers</a></li>
<li><a href="#" >Privacy</a></li>
<li><a href="#" >Cookies</a></li>
<li><a href="#" >Terms</a></li>
<li><a href="#" >Help</a></li>
</ul></div>
<div class="last">Facebook © 2013' <a href="#">english(US)</a></div>

</body>
</html>


/* CSS Document

*/
body{
width:1300px;
height:auto}
.main{background-color: #66CC99}
.header{width:1350px;
background-color: #3b5998;;
height:85px ;
background-repeat:no-repeat;
margin-left:-8px;
margin-top:-8px
}
. logo {margin-left:100px;
margin-top:34px}
.topic{
font:caption
}
.topic h2{
font-size:35px;
position:relative;
left:119px;
font-weight:bold;
margin-top:20px;
}

.login{
float:right;
position:relative;
right:282px;
top:-4px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
letter-spacing:-1px;
margin-top:-53px;
color:#FFFFFF
}
.name{
text-align:center;
margin-left:458px;
text-align:center
}
.click{
margin-top:20px;
padding:50px;
min-width:194px;
padding:6px;
margin-left:463px;
border:1px solid;
letter-spacing:1px;
cursor:pointer;
background-color:#69a74e;
border-color:#3b6e22 ;
-webkit-box-shadow: inset 0 1px 1px #a4e388;
border-radius:6px;
font-family:'Freight Sans Bold', 'lucida grande',tahoma,verdana,arial,sans-serif;
text-shadow:#666666;
font-size:19px;
font:bolder;
color:white;
text-shadow:0 1px 2px rgba(0,0,0,0.5);
font-weight:bolder
}

.topic{
text-align:center}
.topic h4{font-weight:100;
line-height:28px;
margin-top:-44px;
margin-left:467px;
text-align:left;
color:#999999;
font-size:19px;
color:#141823;
font-family:Geneva, Arial, Helvetica, sans-serif}
.cond{
text-align:center;
color:#777;
margin-top:20px;
font-family:Verdana, Arial, Helvetica, sans-serif;
width:368px;
font-size:11px;
margin-left:462px;
text-align:left
}

.input{
padding:8px;
padding-right:1px;
background-color:white;
border-color: #bdc7d8;
border-style:solid;
border-width:1px;
float:left;
line-height:18px;
border-radius:4px;
font-weight:lighter;
font-size:18px;
}

.sh{position:relative;
left:8px}

.name a{font-size:11px;
display:inline-block;
width:150px}
.cc a{color:#98a9ca;
margin-left:55px;
letter-spacing:-1px}
.cc{ position:relative;
top:-39px;
left:-3px;
font-size:11px;
color:#98a9ca;
letter-spacing:-1px
}
.place{font-size:13px;
letter-spacing:-1px}
.select{padding:5px;
border-color:#bdc7d8;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size:13px
}
.sex{font-weight:normal;
border-color:#bdc7d8;
font-size:18px;
font-family:Verdana, Arial, Helvetica, sans-serif;
color:#333;
float:left}
.doc{text-align:left}
.birthday{text-align:left;
font-family:'lucida grande',tahoma,verdana,arial,sans-serif;
line-height:0px;
font-weight:normal;
font-size: 18px;
color:#333}
.top{vertical-align:middle;
margin-left:10px;
letter-spacing:-1px}

a {text-decoration:none;
color:#3b5998;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px
}

a:hover {text-decoration:underline}
.create{margin-left:464px;
font-weight:bold;
font-size:13px;
font-family:Verdana, Arial, Helvetica, sans-serif;
color:#666;
letter-spacing:-1px
}
.line{width:462px;
margin-left:464px}
ul li {display:inline;padding:1px;
margin-left:10px}
.language{margin-left:135px;
letter-spacing:-1px;
margin-top:78px}
.ten{width:975px;
margin-left:12px;
border-bottom-color:1px solid #ccc;
}
.last{color:gray;
font-size:11px;
font-family:Verdana, Arial, Helvetica, sans-serif;
margin-left:187px
}
.log{font-weight:bolder;
color:#FFFFFF;
background-color:#5b74a8;
border-color: #29447e;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
width:48px;
height:24px;
cursor:pointer;
position:relative;
top:-39px;
left:169px

}
.book{margin-top:22px;
margin-left:184px;
width:179px;
height:53px;
}
.pw{position:relative;
top:-38px;
left:167px}
.password{position:relative;
top:-37px;
left:166px;
border:1px solid #1d2a5b}
.text{border:1px solid #1d2a5b;}

/* */

Computer Treat

Monday, 30 September 2013