Article Mini Blog Sample with Sidebar

Why give out your phone number to anyone when you can give out your virtual number to everyone! Try Call Me Private today!


Author info goes here

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.


Code:
<section>
<div class=\"row clearfix\">
<div class=\"article col\">
<img src=\"http://placehold.it/350x150\">
<div class=\"row clearfix\">
<div class=\"author col\"><img src=\"http://placehold.it/120x120\">Author info goes here</div>
<div class=\"content col\">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </p>
</div>
</div>
</div>
<div class=\"sidebar col\">
<ul>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
</ul>
</div>
</div>
</section>
CSS:
section {
max-width: 960px;
margin: auto;
}
.row {
clear: both;
margin-left: -10px;
margin-right: -10px;
}
.col {
float: left;
padding-right: 10px;
padding-left: 10px;
-webkit-box-sizing: border-box; */
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.article {
width: 66.666%;
background: aliceblue;
}
.sidebar {
width: 33.333%;
background: lightpink;
height: 600px;
}
.author {
width: 25%;
}
.content {
width: 75%;
}
img{
width: 100%;
margin-bottom: 15px;
}
@media screen and (max-width: 768px) {
.article, .sidebar{
width: 100%;
}
}
@media screen and (max-width: 1088px) {
.author {
width: 30%
}
.content {
width: 70%;
}
}

.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: \" \";
clear: both;
height: 0;
}