Tuesday, January 22, 2013

Facebook style Profile Page with Cover Image using HTML and CSS

We all have seen the new Facebook Profile Page with the Cover Image. It looks very modern, stylish and unique, so its time, that you too transform the profile page on your website to look like it. Here we have a very simple script made in HTML and CSS to design the structure similar to Facebook Profile Page. Go ahead download it and use it.
facebook like profile page using HTML and CSS with Cover Image
Its a very simple code using only HTML and CSS to design the structure similar to the Facebook profile Page. You can easily customize it as per your needs.


The script has two file one Html and other the CSS file along with a default cover image. The best suited cover image is of size 600px X 250px . So if you want to change the cover image do select an image which is of 600px width and height between 250-300px.

  profile.html :  


<div id="container">
<div id='cover_container' style="background:url('cover.jpg');">
<div id='info_box'>
<div id="profile_img"><img src='Image Link' class='avatar_img'/></div>
<div id="info-box">
<div id="info-name">Name</div> // User's Name
<div id="info-content">
<div style="float:right">
<div><img src='cameraa.png' title='Change Cover Picture'/></div>
</div>
<div id="info-photos">
<div>Photos</div>
<div>17</div> // Number of Photos
</div>
<div id="info-friends">
<div>Friends</div>
<div>270</div>  // Number of friends
</div>
// Content on the Page
<div id="container-content">
Put your Content Here.
</div>



  wtfdiary.css :  


#container{
margin:0 auto;
width:600px;
}

#container-content{
border:solid 1px #cccccc;
padding:20px;
width:558px;
color:#cccccc;
}

#info_box{
padding:60px 50px 0px 10px;
border:solid 1px #dedede;
width:538px;
background-color:#fcfcfc;
margin-top:200px;
}

#profile_img{
background-color: #FFFFFF;
border: 1px solid #DEDEDE;
margin-left: 10px;
margin-top: -100px;
position: absolute;
width: 86px;
height: 86px;
float:left;
}

.avatar_img{
padding:3px;
}

#cover_container{
overflow: auto;
width: 600px;
}

#info-box{
margin-left:115px;
margin-top: -50px;
position: absolute;
}

#info-name{
float:left;
overflow:hidden;
word-wrap: break-word;
width:150px;
}

#info-content{
margin-left:170px;
width:290px;
}

#info-photos{
text-align:center;
font-size:11px;
padding:5px;
float:left;
width:80px;
border:solid 1px #eeeeee;
-moz-border-radius: 3px;-webkit-border-radius: 3px;border-radius: 3px;
}

#info-friends{
text-align:center;
font-size:11px;
padding:5px;
margin-left:100px;
border:solid 1px #eeeeee;
width:80px;
-moz-border-radius: 3px;-webkit-border-radius: 3px;border-radius: 3px;
}


So download and give your website's profile page a completely new look. For any query do post your comment.


5 comments: