Pretty posts

HTML5 and CSS3 Author Bio Data Info Box Design
Today we'd like to show you how to create a Responsive Author Box Design with html5 and css3. It's very simple and clean design. If you like it, you can add it to your next project. It's fully responsive that you can check from our demo link.
Live Demo Download


<div class="author-box">
 <img src="img/about-widget.jpg"/>
        <p>Hello, my name is codiblog. I am a professional designer and developer from BLA BLA</p>
Instruction: For content work perfectly we have done everything into a <div>...</div> tags. Added <img></img> tags for image display and <p></p> tags for writing some text.


* Title: Responsive Author Box Design
* Author: Md Jillur Rahman
* Website:

.author-box {
    background: #fff;
    width: 300px;
    margin: 0 auto;
    text-align: center;
    padding: 0;
.author-box img {
    vertical-align: middle;
    border-radius: 50%;
    box-shadow: 0 1px 8px #ddd;
.author-box img:hover {
    opacity: 0.8;
    cursor: cell;
.author-box p {
    color: #fff;
    margin: 0;
    font-size: 16px;
    line-height: 1.3em;
    background: #222;
    padding: 10px;
    position: relative;
.author-box p:before, .author-box p:after {
    content: "";
    border-right: 15px solid transparent;
    border-bottom: 15px solid transparent;
    border-top: 15px solid #fff;
    position: absolute;
    top: 0;
    left: 0;
.author-box p:after {
    right: 0;
    left: auto;
    border-left: 15px solid transparent;
    border-right: none;
Customize: You can change full content width default length 300px from .author-box class. We have included image round radius and shadow in .author-box img class. If you don't like font size/color/background, you can change it from .author-box p class.

That's it. We hope you enjoy this author box design and find this tutorial helpful.

Browser Support: 

Github: View Project on Github