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!