TL Author

by Harsh Kansagara

HTML

<div class="tl_author">
  <div class="tla_wrap">
    <div class="tla_photo">
      <img src="https://randomuser.me/api/portraits/men/4.jpg">
    </div>
    <div class="tla_desc">
      <h2 class="tla_name">About <a href="#">Rajesh Namse</a></h2>
      <div class="tla_bio">
        Rajesh Namase is a professional blogger and founder of TechLila. He has a great passion in blogging and SEO. If you’d like to connect with him, use our Contact Us page.Rajesh has written 245 awesome articles for us at TechLila.
      </div>
      <ul class="tla_social">
        <li class="tla_find"><span>Find Rajesh On</span></li>
        <li><a class="tla_fb" href="">Facebook</a></li>
        <li><a class="tla_gp" href="">Google Plus</a></li>
        <li><a class="tla_li" href="">LinkedIn</a></li>
        <li><a class="tla_tw" href="">Twitter</a></li>
      </ul>
    </div>
  </div>
</div>

CSS

body{
  background:#fff;
  font-family:'Arial';
}

.tl_author{
  border:2px solid #dadada;
  padding:20px;
}
.tla_wrap{
  overflow:hidden;
}
.tla_photo{
  float:left;
  width:120px;
}
.tla_photo img{
  width:100%;
}
.tla_desc{
  padding-left:140px;
}
.tla_name{
  margin:0;
  font-size:18px;
}
.tla_name a{
  text-decoration:none;
  color:#E74F4C;
}
.tla_bio{
  margin:5px 0 0 0;
  font-size:14px;
}
.tla_social{
  list-style:none;
  margin:10px 0 0 0;
  padding:0;
  overflow:hidden;
  font-size:0;
}
.tla_social > li{
  height:30px;
  line-height:30px;
  background:#e0e0e0;
  display:inline-block;
  font-size:14px;
}
.tla_social > li > span{
  padding:0px 10px;
}
.tla_social > li > a{
  padding:0px 10px;
  text-decoration:none;
  color:#fff;
  display:block;
}
.tla_fb{
  background:#3b5999;
}
.tla_gp{
  background:#dd4b39;
}
.tla_li{
  background:#0077B5;
}
.tla_tw{
  background:#55acee;
}

@media only screen and (max-width:768px){
  .tla_photo{
    float:none;
    text-align:center;
    margin:0 auto;
  }
  .tla_desc{
    padding:0;
    margin-top:10px;
    text-align:center;
  }
  li.tla_find{
    display:none;
  }
}