Historic Profile Page using CSS

Hi guys, Today I am going to share how to create a beautiful historic profile page by using simple css. By using this you can able to highlight how your organization comes to present stage and how you can be here now etc.

CSS Code

h4 { font-size:18px; color:#666666; font-weight:bold; }
.years .year {position:relative; padding-bottom:60px; margin-bottom:40px; }
.years .year.fromleft {padding-left:130px; background:url(left.png) no-repeat left bottom;}
.years .year.fromright {padding-right:130px; background:url(right.png) no-repeat right bottom;}
.years .year .date {position:absolute; top:0; padding:6px 0; text-align:center; width:100px; font-size:16px; font-weight:bold; background:#336699; color:#fff; text-shadow:0 1px 0 #fff; border-bottom:1px solid #999999; }
.years .year.fromleft .date {left:0;}
.years .year.fromright .date {right:0;}
.years .year.last {background:none; padding-bottom:0;}
.grid {
display:inline;
float: left;
position: relative;
margin-left: 10px;
margin-right: 10px;
width:700px;
background:#fff;
padding:10px;
border:4px solid #f2f2f2;
}
.alpha {
margin-left: 0;
}
.container { margin:0 auto; width:60%; background:#fff; }

Please don’t forget to share and subscribe to latest updates of the blog. Also any comments and feedback are all welcome!

Thanks!

View Demo Download

You May Also Like

Never Miss Any Web Tutorials, Guides, Tips and Free eBooks

Join Our Community Of 50,000+ Web Lovers and get a weekly newsletter in your inbox

 

I hate spam too. Unsubscribe at any time.

Leave a Comment