Article Mini Blog Sample with Sidebar


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:

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.

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;
}