- Scott Levine
- –
- 30 mins ago
2018's Most Relaxing and Affordable Vacations
At Wake, our mission has always been focused on bringing openness and transparency to the design process.
News Blog - Masonry
To help you reach your audience in a personal and more informal way, Front includes several News Blogs to start with.
Masonry #1
- Charlotte Moore
- –
- 23 hours ago
<div class="container u-cubeportfolio">
<!-- Content -->
<div class="cbp mb-7"
data-layout="mosaic"
data-animation="quicksand"
data-x-gap="30"
data-y-gap="30"
data-media-queries='[
{"width": 1500, "cols": 3},
{"width": 1100, "cols": 3},
{"width": 800, "cols": 3},
{"width": 480, "cols": 1}
]'>
<!-- Item -->
<div class="cbp-item">
<div class="cbp-caption">
<!-- Blog Card -->
<article class="card border-0">
<div class="card-body p-0">
<div class="row align-items-stretch no-gutters">
<div class="col-md-6">
<div class="p-5">
<!-- Post Info -->
<ul class="list-inline small text-muted mb-1">
<li class="list-inline-item mr-0">Scott Levine</li>
<li class="list-inline-item mx-2">–</li>
<li class="list-inline-item">30 mins ago</li>
</ul>
<!-- End Post Info -->
<!-- Info -->
<div class="mb-4">
<h2 class="h5 mb-3">
<a href="#">2018's Most Relaxing and Affordable Vacations</a>
</h2>
<p>At Wake, our mission has always been focused on bringing openness and transparency to the design process.</p>
</div>
<!-- End Info -->
<!-- Labels -->
<ul class="list-inline mb-0">
<li class="list-inline-item g-mb-10">
<a class="btn btn-xs btn-soft-danger" href="#">Start-Up</a>
</li>
</ul>
<!-- End Labels -->
</div>
</div>
<div class="col-md-6 bg-img-hero min-height-300 rounded" style="background-image: url(../../assets/img/500x550/img1.jpg);"></div>
</div>
</div>
</article>
<!-- End Blog Card -->
</div>
</div>
<!-- End Item -->
<!-- Item -->
<div class="cbp-item">
<div class="cbp-caption">
<!-- Blog Card -->
<article class="card border-0">
<img class="card-img-top" src="../../assets/img/450x450/img2.jpg" alt="Image Description">
<div class="card-body p-5">
<!-- Post Info -->
<ul class="list-inline small text-muted mb-1">
<li class="list-inline-item mr-0">Charlotte Moore</li>
<li class="list-inline-item mx-2">–</li>
<li class="list-inline-item">4 hours ago</li>
</ul>
<!-- End Post Info -->
<!-- Info -->
<div class="mb-4">
<h3 class="h5 mb-0">
<a href="#">Love for food always comes first</a>
</h3>
</div>
<!-- End Info -->
<!-- Labels -->
<ul class="list-inline mb-0">
<li class="list-inline-item g-mb-10">
<a class="btn btn-xs btn-soft-success" href="#">Food</a>
</li>
<li class="list-inline-item g-mb-10">
<a class="btn btn-xs btn-soft-warning btn-pill" href="#">Art</a>
</li>
</ul>
<!-- End Labels -->
</div>
</article>
<!-- End Blog Card -->
</div>
</div>
<!-- End Item -->
<!-- Item -->
<div class="cbp-item">
<div class="cbp-caption">
<!-- Blog Card -->
<article class="card border-0">
<img class="card-img-top" src="../../assets/img/450x450/img5.jpg" alt="Image Description">
<div class="card-body p-5">
<!-- Post Info -->
<ul class="list-inline small text-muted mb-1">
<li class="list-inline-item mr-0">Charlotte Moore</li>
<li class="list-inline-item mx-2">–</li>
<li class="list-inline-item">23 hours ago</li>
</ul>
<!-- End Post Info -->
<!-- Info -->
<div class="mb-4">
<h3 class="h5 mb-0">
<a href="#">InVision is investing $5 million in design startups</a>
</h3>
</div>
<!-- End Info -->
<!-- Labels -->
<ul class="list-inline mb-0">
<li class="list-inline-item g-mb-10">
<a class="btn btn-xs btn-soft-warning btn-pill" href="#">House</a>
</li>
<li class="list-inline-item g-mb-10">
<a class="btn btn-xs btn-soft-warning btn-pill" href="#">Real Estate</a>
</li>
</ul>
<!-- End Labels -->
</div>
</article>
<!-- End Blog Card -->
</div>
</div>
<!-- End Item -->
<!-- Item -->
<div class="cbp-item">
<div class="cbp-caption">
<!-- Blog Card -->
<article class="card border-0 bg-primary text-center">
<a class="card-body py-9 px-7" href="#">
<!-- SVG Quote -->
<figure class="mx-auto mb-3">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="40px" height="40px"
viewBox="0 0 8 8" style="enable-background:new 0 0 8 8;" xml:space="preserve">
<path class="fill-white" opacity=".7" d="M3,1.3C2,1.7,1.2,2.7,1.2,3.6c0,0.2,0,0.4,0.1,0.5c0.2-0.2,0.5-0.3,0.9-0.3c0.8,0,1.5,0.6,1.5,1.5c0,0.9-0.7,1.5-1.5,1.5
C1.4,6.9,1,6.6,0.7,6.1C0.4,5.6,0.3,4.9,0.3,4.5c0-1.6,0.8-2.9,2.5-3.7L3,1.3z M7.1,1.3c-1,0.4-1.8,1.4-1.8,2.3
c0,0.2,0,0.4,0.1,0.5c0.2-0.2,0.5-0.3,0.9-0.3c0.8,0,1.5,0.6,1.5,1.5c0,0.9-0.7,1.5-1.5,1.5c-0.7,0-1.1-0.3-1.4-0.8
C4.4,5.6,4.4,4.9,4.4,4.5c0-1.6,0.8-2.9,2.5-3.7L7.1,1.3z"/>
</svg>
</figure>
<!-- End SVG Quote -->
<h3 class="h4 text-white mb-4">In the future, design principles won't be about design</h3>
<small class="d-block text-white-70 mb-1">Andrea Gard</small>
</a>
</article>
<!-- End Blog Card -->
</div>
</div>
<!-- End Item -->
</div>
<!-- End Content -->
</div>
<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/cubeportfolio/js/jquery.cubeportfolio.min.js"></script>
<!-- JS Implementing Plugins -->
<script src="../../assets/js/components/hs.cubeportfolio.js"></script>
<!-- JS Plugins Init. -->
<script>
$(document).on('ready', function () {
// initialization of cubeportfolio
$.HSCore.components.HSCubeportfolio.init('.cbp');
});
</script>