"Grid Blogs"
Bootstrap 3.0.0 Snippet by anuragsingh

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="articles-wrapper">
<div class="preloader top"></div>
<div class="left-section articles"><div class="article ">
<div class="wrap">
<div class="source">
<div class="author">
<p class="author-name">By Connatix</p>
<p class="author-date">Mar 30, 2017</p>
</div>
</div>
<div class="top" style="background-image: url("http://blog.connatix.com/wp-content/uploads/2017/06/pexels-photo-256738.jpeg");">
<div class="vignette"></div>
<h5>Connatix Launches Platform Focused On Brand Safety</h5>
</div>
<div class="bottom">
<div class="description">By Philip Rosenstein
Connatix, a native advertising platform for premium publishers, launched the platform Connatix Programmatic Syndication on Thursday. With a focus on video, the new platform aims to ensure that customer advertisements run in a safe and appropriate environment.
The first launch partners include Meredith, Time Inc and·Condé Nast.
“With all the controversy around Google and YouTube</div>
</div>
<div class="hover-area" style="background-image: url("http://blog.connatix.com/wp-content/uploads/2017/06/pexels-photo-256738.jpeg");">
<div class="flare"></div>
<div class="sharer">
<a href="http://twitter.com/share?url=/?p=1323" target="_blank" class="twitter"></a>
<a href="https://www.facebook.com/sharer/sharer.php?u=/?p=1323" target="_blank" class="facebook"></a>
<a href="mailto:?body=/?p=1323" class="mail"></a>
</div>
<a class="apply" href="/?p=1323">Full Article</a></div>
</div>
</div><div class="article">
<div class="wrap">
<div class="source">
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
.articles-wrapper {
margin: 0 auto;
box-sizing: border-box
}
@media only screen and (min-width: 980px) and (max-width:1299px),only screen and (min-width:1300px) {
.articles-wrapper {
width:980px
}
}
@media only screen and (min-width: 481px) and (max-width:979px),only screen and (min-width:980px) and (max-width:1299px),only screen and (min-width:1300px) {
.articles-wrapper {
display:-webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-flow: row wrap;
flex-flow: row wrap
}
}
@media only screen and (max-width: 480px),only screen and (min-width:481px) and (max-width:979px) {
.articles-wrapper {
width:100%;
padding: 0 20px
}
}
.articles-wrapper .left-section,.articles-wrapper .right-section {
box-sizing: border-box;
transition: left 1s ease-in-out
}
@media only screen and (min-width: 481px) and (max-width:979px),only screen and (min-width:980px) and (max-width:1299px),only screen and (min-width:1300px) {
.articles-wrapper .left-section,.articles-wrapper .right-section {
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments: