<!--HTML and CSS web design of Facebook Timeline (About)-->
<html>
<head>
<title>Akshay Sarda</title>
</head>
<style ="text/css">
#container
{
width:100%;
background-color:#E3E3EC;
height:880px
}
#header
{
width:100%;
height:40px;
background-color:506786;
background-attachment:fixed;
float:left;
border-radius:2px;
position:fixed;
z-index:1;
}
#logo
{
width:15%;
height:35px;
float:left;
margin-left:10px;
margin-top:2.5px;
font-size:30px;
color:white;
}
#search
{
width:50%;
height:35px;
margin-top:10px;
float:left;
}
#name
{
width:20%;
height:35px;
float:left;
margin-top:8px;
font-size:20px;
color:white;
font-width:2px
}
#blank
{
width:160px;
height:750px;
float:left;
margin-top:2.5px;
font-size:20px;
background-color:none;
margin-top:50px;
}
#timeline
{
width:800px;
height:300px;
float:left;
margin-top:8px;
background-image:url("01.jpg");
background-repeat:no-repeat;
border:1px solid;
boder-color:506786;
position:relative;
}
#side
{
width:370px;
height:270px;
float:left;
margin-top:8px;
position:relative;
margin-top:50px;
}
#recent
{
width:220px;
height:250px;
float:right;
margin-top:none;
background-color:white;
text-align:center;
border:1px solid;
boder-color:506786;
}
#links
{
height:50px;
width:800px;
float:left;
background-color:white;
border:1px solid;
border-color:506786;
border-radius:2px;
margin-top:0px;
}
#time
{
height:100%;
width:37%;
float:left;
text-align:right;
border:1px solid;
border-color:506786;
font-size:20px;
color:506799;
}
#about
{
height:100%;
width:12.29%;
float:left;
text-align:center;
border:1px solid;
boder-color:506786;
font-size:20px;
color:506786;
}
#load
{
width:800px;
float:left;
margin-top:2px;
}
#overview
{
width:800px;
height:60px;
float:left;
margin-top:20px;
border:1px solid;
border-color:506786;
background-color:f1f1f1;
color:506786;
font-size:48px;
}
#box
{
width:800px;
height:365px;
float:left;
background-color:white;
color:506786;
}
#view
{
width:250px;
height:365px;
float:left;
background-color:white;
color:506786;
font-size:20px;
border:1px solid;
border-color:506786;
}
#detail
{
width:546px;
height:365px;
float:left;
background-color:white;
color:506786;
font-size:20px;
border:1px solid;
border-color:506786;
}
#inner
{
width:300px;
height:365px;
float:left;
background-color:white;
color:506786;
font-size:16px;
margin-left:20px;
}
#inn
{
width:110px;
height:365px;
float:left;
background-color:white;
color:506786;
font-size:16px;
margin-left:15px;
}
#side1
{
width:350px;
height:500px;
float:right;
margin-top:8px;
}
#online
{
width:220px;
height:300px;
float:left;
margin-top:none;
background-color:white;
text-align:center;
border:1px solid;
boder-color:506786;
}
</style>
<body style="margin:0 auto">
<div id="container">
<div id="header">
<div id="logo">
<em>Facebook</em></div>
<div id="search">
<form>
<input type="text" value="Search" size="80">
</form></div>
<div id="name">
Akshay | Home
</div>
</div>
<div id="blank">
</div>
<div id="timeline" style="margin-top:50px;">
<div style="margin-left:10px; margin-top:190px;">
<img src="02.jpg" width=19% height=44% style="position:relative; border:1px solid; border-color:506786; border-radius:2px;"/>
</div>
</div>
<div id="side">
<div id="recent">
Recent Activities
</div>
</div>
<div id="links">
<div id="time">
<div style="float:right; height:90%; width:50%; margin-top:11px; margin-right:32px;"> Timeline </div>
</div>
<div id="about">
<div style="float:left; height:90%; width:90%; margin-top:11px;"> About </div>
</div>
<div id="about">
<div style="float:left; height:90%; width:90%; margin-top:11px;"> Friends </div>
</div>
<div id="about">
<div style="float:left; height:90%; width:90%; margin-top:11px; "> Photos </div>
</div>
<div id="about">
<div style="float:left; height:90%; width:90%; margin-top:11px; margin-right:auto; margin-left:auto;"> More </div>
</div>
<div id="about">
<div style="float:left; height:90%; width:90%; margin-top:11px;"> </div>
</div>
</div>
<div id="load">
<div id="overview">
<b> About</b>
</div>
<div id="box">
<div id="view"><br/>
Overview<br/><br/>
Work and Education<br/><br/>
Places You've Lived<br/><br/>
Contact and Basic Info<br/><br/>
Family and Relationships<br/><br/>
Details About You<br/><br/>
Life Events<br/>
</div>
<div id="detail">
<div id="inner">
<br/>
Student
<br/><br/><br/><hr/>
Studies BCA at Jaipur National University<br/>
Past: L K Singhania ,Gotan and global public school,kota<br/>
<br/><hr/><br/>
Lives in Jaipur, Rajasthan<br/>
From Jaipur, Rajasthan<br/><br/><hr/>
</div>
<div id="inn">
<br/>
Phones<br/>
09876543210<br/>
Email<br/>
akshay@gmail.com<br/>
akshay1@facebook.com<br/>
Birthday<br/>
October 31, 1995
</div>
</div>
</div>
</div>
</body>
</html>
<html>
<head>
<title>Akshay Sarda</title>
</head>
<style ="text/css">
#container
{
width:100%;
background-color:#E3E3EC;
height:880px
}
#header
{
width:100%;
height:40px;
background-color:506786;
background-attachment:fixed;
float:left;
border-radius:2px;
position:fixed;
z-index:1;
}
#logo
{
width:15%;
height:35px;
float:left;
margin-left:10px;
margin-top:2.5px;
font-size:30px;
color:white;
}
#search
{
width:50%;
height:35px;
margin-top:10px;
float:left;
}
#name
{
width:20%;
height:35px;
float:left;
margin-top:8px;
font-size:20px;
color:white;
font-width:2px
}
#blank
{
width:160px;
height:750px;
float:left;
margin-top:2.5px;
font-size:20px;
background-color:none;
margin-top:50px;
}
#timeline
{
width:800px;
height:300px;
float:left;
margin-top:8px;
background-image:url("01.jpg");
background-repeat:no-repeat;
border:1px solid;
boder-color:506786;
position:relative;
}
#side
{
width:370px;
height:270px;
float:left;
margin-top:8px;
position:relative;
margin-top:50px;
}
#recent
{
width:220px;
height:250px;
float:right;
margin-top:none;
background-color:white;
text-align:center;
border:1px solid;
boder-color:506786;
}
#links
{
height:50px;
width:800px;
float:left;
background-color:white;
border:1px solid;
border-color:506786;
border-radius:2px;
margin-top:0px;
}
#time
{
height:100%;
width:37%;
float:left;
text-align:right;
border:1px solid;
border-color:506786;
font-size:20px;
color:506799;
}
#about
{
height:100%;
width:12.29%;
float:left;
text-align:center;
border:1px solid;
boder-color:506786;
font-size:20px;
color:506786;
}
#load
{
width:800px;
float:left;
margin-top:2px;
}
#overview
{
width:800px;
height:60px;
float:left;
margin-top:20px;
border:1px solid;
border-color:506786;
background-color:f1f1f1;
color:506786;
font-size:48px;
}
#box
{
width:800px;
height:365px;
float:left;
background-color:white;
color:506786;
}
#view
{
width:250px;
height:365px;
float:left;
background-color:white;
color:506786;
font-size:20px;
border:1px solid;
border-color:506786;
}
#detail
{
width:546px;
height:365px;
float:left;
background-color:white;
color:506786;
font-size:20px;
border:1px solid;
border-color:506786;
}
#inner
{
width:300px;
height:365px;
float:left;
background-color:white;
color:506786;
font-size:16px;
margin-left:20px;
}
#inn
{
width:110px;
height:365px;
float:left;
background-color:white;
color:506786;
font-size:16px;
margin-left:15px;
}
#side1
{
width:350px;
height:500px;
float:right;
margin-top:8px;
}
#online
{
width:220px;
height:300px;
float:left;
margin-top:none;
background-color:white;
text-align:center;
border:1px solid;
boder-color:506786;
}
</style>
<body style="margin:0 auto">
<div id="container">
<div id="header">
<div id="logo">
<em>Facebook</em></div>
<div id="search">
<form>
<input type="text" value="Search" size="80">
</form></div>
<div id="name">
Akshay | Home
</div>
</div>
<div id="blank">
</div>
<div id="timeline" style="margin-top:50px;">
<div style="margin-left:10px; margin-top:190px;">
<img src="02.jpg" width=19% height=44% style="position:relative; border:1px solid; border-color:506786; border-radius:2px;"/>
</div>
</div>
<div id="side">
<div id="recent">
Recent Activities
</div>
</div>
<div id="links">
<div id="time">
<div style="float:right; height:90%; width:50%; margin-top:11px; margin-right:32px;"> Timeline </div>
</div>
<div id="about">
<div style="float:left; height:90%; width:90%; margin-top:11px;"> About </div>
</div>
<div id="about">
<div style="float:left; height:90%; width:90%; margin-top:11px;"> Friends </div>
</div>
<div id="about">
<div style="float:left; height:90%; width:90%; margin-top:11px; "> Photos </div>
</div>
<div id="about">
<div style="float:left; height:90%; width:90%; margin-top:11px; margin-right:auto; margin-left:auto;"> More </div>
</div>
<div id="about">
<div style="float:left; height:90%; width:90%; margin-top:11px;"> </div>
</div>
</div>
<div id="load">
<div id="overview">
<b> About</b>
</div>
<div id="box">
<div id="view"><br/>
Overview<br/><br/>
Work and Education<br/><br/>
Places You've Lived<br/><br/>
Contact and Basic Info<br/><br/>
Family and Relationships<br/><br/>
Details About You<br/><br/>
Life Events<br/>
</div>
<div id="detail">
<div id="inner">
<br/>
Student
<br/><br/><br/><hr/>
Studies BCA at Jaipur National University<br/>
Past: L K Singhania ,Gotan and global public school,kota<br/>
<br/><hr/><br/>
Lives in Jaipur, Rajasthan<br/>
From Jaipur, Rajasthan<br/><br/><hr/>
</div>
<div id="inn">
<br/>
Phones<br/>
09876543210<br/>
Email<br/>
akshay@gmail.com<br/>
akshay1@facebook.com<br/>
Birthday<br/>
October 31, 1995
</div>
</div>
</div>
</div>
</body>
</html>
No comments:
Post a Comment