<
div
class
=
"
news
"
>
<
div
class
=
"
one
"
>
<
div
class
=
"
img
"
>
<
a
href
=
"
#
"
>
<
img
src
=
"
images/news1.jpg
"
height
=
"
89
"
width
=
"
89
"
alt
=
"
"
>
</
a
>
</
div
>
<
div
class
=
"
text
"
>
<
time
>
Oct 18
</
time
>
<
p
>
<
a
href
=
"
#
"
>
I would like to avoid making these mistakes.
</
a
>
</
p
>
</
div
>
</
div
>
<
div
class
=
"
one
"
>
<
div
class
=
"
img
"
>
<
a
href
=
"
#
"
>
<
img
src
=
"
images/news2.jpg
"
height
=
"
89
"
width
=
"
89
"
alt
=
"
"
>
</
a
>
</
div
>
<
div
class
=
"
text
"
>
<
time
>
Oct 8
</
time
>
<
p
>
<
a
href
=
"
#
"
>
But how do you avoid mistakes you make by default?
</
a
>
</
p
>
</
div
>
</
div
>
<
div
class
=
"
one
"
>
<
div
class
=
"
img
"
>
<
a
href
=
"
#
"
>
<
img
src
=
"
images/news3.jpg
"
height
=
"
89
"
width
=
"
89
"
alt
=
"
"
>
</
a
>
</
div
>
<
div
class
=
"
text
"
>
<
time
>
Oct 2
</
time
>
<
p
>
<
a
href
=
"
#
"
>
Ideally you transform your life so it has other defaults.
</
a
>
</
p
>
</
div
>
</
div
>
</
div
>
// style.css
.news {
border-top: 2px solid #e7e7e7;
border-bottom: 2px solid #e7e7e7;
padding: 31px 0;
margin-bottom: 30px;
}
.news .one {
float: left;
width: 352px;
margin-left: 42px;
}
.news .one:first-child {
margin-left: 0;
}
.news .img {
float: left;
width: 98px;
text-align: center;
}
.news .text {
float: right;
width: 234px;
padding-top: 4px;
}
.news img {
border-radius: 50%;
}
.news time {
font-size: 14px;
color: #abb1bb;
}
.news p {
margin: 4px 0 0;
}
