"About me" box for light and dark backgrounds

Every author loves to tell about itself on its blog to let know the readers to get something about the author.I am a author and I know how does it feels.I've designed this widget with 2 styles.

• for dark background
• for light background

So lets see how to create a such attractive CSS3 widget.

Instructions

• Go to layout > add widget > HTML/Javascript
• at the heading section write your desire heading (like about me or something about me)
• then add the following script in it.

For light background

<style>
.beaboutmelight img
{
border: 3px solid #3e3e3e;
float: left;
height: 60px;
margin: 5px 10px 5px 5px;
-moz-transition: all .3s ease-in-out;
-ms-transform: rotate(20deg);
-ms-transition: all .3s ease-in-out;
opacity: 0.5;
-o-transition: all .3s ease-in-out;
transform: rotate(20deg);
transition: all .3s ease-in-out;
-webkit-transform: rotate(20deg);
-webkit-transition: all .3s ease-in-out;
width: 60px;
}
.beaboutmelight img:hover
{
ms-transform: rotate(0deg);
opacity: 1;
transform: rotate(0deg);
webkit-transform: rotate(0deg);
}
.beaboutmelight
{
border: 1px solid #3e3e3e;
border-radius: 10px;
color: #3e3e3e;
float: right;
font-family: verdana;
padding: 10px;
}
</style>
<div class="beaboutmelight">
<img src="IMAGE_URL"/>
<b>AUTHOR NAME</b>
Author description
</div>

For dark background

<style>
.beaboutmedark img
{
border: 3px solid #f7f7f7;
float: left;
height: 60px;
margin: 5px 10px 5px 5px;
-moz-transition: all .3s ease-in-out;
-ms-transform: rotate(20deg);
-ms-transition: all .3s ease-in-out;
opacity: 0.5;
-o-transition: all .3s ease-in-out;
transform: rotate(20deg);
transition: all .3s ease-in-out;
-webkit-transform: rotate(20deg);
-webkit-transition: all .3s ease-in-out;
width: 60px;
}
.beaboutmedark img:hover
{
-ms-transform: rotate(0deg);
opacity: 1;
transform: rotate(0deg);
-webkit-transform: rotate(0deg);
}
.beaboutmedark
{
border: 1px solid #f7f7f7;
border-radius: 10px;
color: #f7f7f7;
float: right;
font-family: verdana;
padding: 10px;

}
</style>

<div class="beaboutmedark">
<img src="IMAGE_URL"/>
<b>AUTHOR NAME</b>
Author description

</div>

Now replace the following

• IMAGE_URL  with the image of the author
• AUTHOR NAME with the name of the author
• Author description with the description of author