Styled About Us Widget for your blog

In this post i am writing about a styled hangover "about us" widget which gives your blog a super impressive impression , an attractive design always hooks the eyes of the reader to gets it's attention.

Below is the Screenshot of about us widget   


#about_upper {
    background: url("images/about_top.png") no-repeat scroll 0% 0% transparent;
    height: 30px;
    width: 286px;
    padding-top: 60px;
    padding-left: 28px;

#about_middle {
    background: url("images/about_middle.png") repeat-y scroll 0% 0% transparent;
    width: 314px;

#about_content {
    padding: 5px 29px;
    line-height: 1.4em;

#about #portrait {
    float: right;
    margin-top: -41px;
    width: 58px;
    height: 60px;
    padding: 3px;

#about_lower {
    background: url("images/about_bottom.png") no-repeat scroll 0% 0% transparent;
    width: 314px;
    height: 29px;

#tape {
    background: url("images/tape.png") no-repeat scroll 0% 0% transparent;
    width: 38px;
    height: 32px;
    position: absolute;
    top: 58px;
    right: 13px;


<link rel="stylesheet" href="style.css" >
<div id="about">
 <div id="about_upper" ><b>About Me</b></div>
   <div id="about_middle" >

   <div id="about_content" >
   <div id="tape"></div>
    <img src="images/gavtar.png" id="portrait">
      Hi , i am pavan deshpande a blogger from india bangalore<br/>
      you can find my social presence at <br/>
<!-- Google Plus  -->  
<a href="" target="_blank"><img src="images/facebook.jpg" /></a>
<!-- Twitter -->
<a href="" target="_blank"><img src="images/twitter.jpg" /></a>
<!-- Facebook  -->
<a href="" target="_blank"><img src="images/google+.jpg" /></a>

 <div id="about_lower" ></div>

No comments:

Post a Comment