<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<section class="boot-elemant-bg py-md-5 py-4" style="background-image: url(https://via.placeholder.com/1920/09f.png/fff);">
<div class="container position-relative py-md-5 py-0">
<div class="row">
<div class="col-lg-8">
<span class="text-white text-uppercase">Travel </span>
<h2 class="text-white display-3 font-weight-bold">17 travel inventions we need right now </h2>
<p class="f-w-16 mb-4">I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.</p>
<a href="#" class="btn btn-outline-white btn-lg px-4"> Read More </a>
</div>
</div>
</div>
<div class="elemant-bg-overlay black"></div>
</section>
<section class="boot-elemant-bg py-md-5 py-4">
<div class="container position-relative py-md-5 py-0">
<div class="row">
<div class="col-lg-8">
<span class="text-uppercase">Travel </span>
<h2 class="display-3 font-weight-bold">17 travel inventions we need right now </h2>
<p class="f-16 mb-4">I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.</p>
<a href="#" class="btn btn-outline-primary btn-lg px-4"> Read More </a>
</div>
</div>
</div>
</section>
<section class="boot-elemant-bg gradient-primary py-md-5 py-4">
<div class="container position-relative py-md-5 py-0">
<div class="row">
<div class="col-lg-8">
<span class="text-white text-uppercase">Travel </span>
<h2 class="text-white display-3 font-weight-bold">17 travel inventions we need right now </h2>
<p class="f-w-16 mb-4">I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.</p>
<a href="#" class="btn btn-outline-white btn-lg px-4"> Read More </a>
</div>
</div>
</div>
</section>
<section class="boot-elemant-bg py-md-5 py-4">
<div class="container position-relative py-md-5 py-0">
<div class="row">
<div class="col-lg-8 offset-lg-2 text-center">
<span class="text-uppercase">Travel </span>
<h2 class="display-3 font-weight-bold">17 travel inventions we need right now </h2>
<p class="f-16 mb-4">I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.</p>
<a href="#" class="btn btn-outline-primary btn-lg px-4"> Read More </a>
</div>
</div>
</div>
</section>
<section class="boot-elemant-bg gradient-primary py-md-5 py-4">
<div class="container position-relative py-md-5 py-0">
<div class="row">
<div class="col-lg-8 offset-lg-4 text-right">
<span class="text-white text-uppercase">Travel </span>
<h2 class="text-white display-3 font-weight-bold">17 travel inventions we need right now </h2>
<p class="f-w-16 mb-4">I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.</p>
<a href="#" class="btn btn-outline-white btn-lg px-4"> Read More </a>
</div>
</div>
</div>
</section>
<section class="boot-elemant py-md-5 py-4">
<div class="container position-relative py-md-5 py-0">
<div class="boot-block pb-md-5 pb-4 text-center">
<span class="text-uppercase">boot </span>
<h2 class="display-4 font-weight-bold">Articles</h2>
<p class="f-16 mb-4">Brouse latest tips from our blog </p>
</div>
<div class="row">
<div class="col-lg-4">
<div class="boot-card"><a href="#"><img src="https://via.placeholder.com/1920/09f.png/fff" alt="Image articles" class="img-fluid"></a>
<div class="boot-caption py-4">
<div class="boot-meta">
<h4 class="font-weight-normal">Jan 10, 2018 by <a href="#" class="text-primary">Boot Brown</a></h4>
</div>
<h3 class="text-dark mb-md-2"><a href="blog-details.html" class="text-dark" >velit esse cillum dolore eu fugiat</a></h3>
<p class="f-16 mb-0">I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet.</p>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="boot-card"><a href="#"><img src="https://via.placeholder.com/1920/09f.png/fff" alt="Image articles" class="img-fluid"></a>
<div class="boot-caption py-4">
<div class="boot-meta">
<h4 class="font-weight-normal">Jan 10, 2018 by <a href="#" class="text-primary">Boot Brown</a></h4>
</div>
<h3 class="text-dark mb-md-2"><a href="blog-details.html" class="text-dark" >velit esse cillum dolore eu fugiat</a></h3>
<p class="f-16 mb-0">I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet.</p>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="boot-card"><a href="#"><img src="https://via.placeholder.com/1920/09f.png/fff" alt="Image articles" class="img-fluid"></a>
<div class="boot-caption py-4">
<div class="boot-meta">
<h4 class="font-weight-normal">Jan 10, 2018 by <a href="#" class="text-primary">Boot Brown</a></h4>
</div>
<h3 class="text-dark mb-md-2"><a href="blog-details.html" class="text-dark" >velit esse cillum dolore eu fugiat</a></h3>
<p class="f-16 mb-0">I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet.</p>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="boot-elemant gradient-primary py-md-5 py-4">
<div class="container position-relative py-md-5 py-0">
<div class="boot-block pb-md-5 pb-4 text-center">
<span class="text-uppercase text-white">boot </span>
<h2 class="display-4 text-white font-weight-bold">Articles</h2>
<p class="f-w-16 mb-4">Brouse latest tips from our blog </p>
</div>
<div class="row">
<div class="col-lg-4">
<div class="boot-card"><a href="#"><img src="https://via.placeholder.com/1920/09f.png/fff" alt="Image articles" class="img-fluid"></a>
<div class="boot-caption py-4 px-3">
<div class="boot-meta">
<h4 class="font-weight-normal">Jan 10, 2018 by <a href="#" class="text-primary">Boot Brown</a></h4>
</div>
<h3 class="text-dark mb-md-2"><a href="blog-details.html" class="text-dark" >velit esse cillum dolore eu fugiat</a></h3>
<p class="f-16 mb-0">I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet.</p>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="boot-card"><a href="#"><img src="https://via.placeholder.com/1920/09f.png/fff" alt="Image articles" class="img-fluid"></a>
<div class="boot-caption py-4 px-3">
<div class="boot-meta">
<h4 class="font-weight-normal">Jan 10, 2018 by <a href="#" class="text-primary">Boot Brown</a></h4>
</div>
<h3 class="text-dark mb-md-2"><a href="blog-details.html" class="text-dark" >velit esse cillum dolore eu fugiat</a></h3>
<p class="f-16 mb-0">I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet.</p>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="boot-card"><a href="#"><img src="https://via.placeholder.com/1920/09f.png/fff" alt="Image articles" class="img-fluid"></a>
<div class="boot-caption py-4 px-3">
<div class="boot-meta">
<h4 class="font-weight-normal">Jan 10, 2018 by <a href="#" class="text-primary">Boot Brown</a></h4>
</div>
<h3 class="text-dark mb-md-2"><a href="blog-details.html" class="text-dark" >velit esse cillum dolore eu fugiat</a></h3>
<p class="f-16 mb-0">I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet.</p>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="boot-elemant py-md-5 py-4">
<div class="container position-relative py-md-5 py-0">
<div class="boot-block pb-md-5 pb-4 text-center">
<span class="text-uppercase">boot </span>
<h2 class="display-4 font-weight-bold">Articles</h2>
<p class="f-16 mb-4">Brouse latest tips from our blog </p>
</div>
<div class="row">
<div class="col-lg-6">
<div class="boot-card mb-5 shadow-sm">
<div class="row no-gutters">
<div class="col-md-6 col-lg-6">
<a href="#"><img src="https://via.placeholder.com/1920/09f.png/fff" alt="Image articles" class="img-fluid"></a>
</div>
<div class="col-md-6 col-lg-6">
<div class="boot-caption py-2 px-4">
<div class="boot-meta">
<h4 class="font-weight-normal">Jan 10, 2018 by <a href="#" class="text-primary">Boot Brown</a></h4>
</div>
<h3 class="text-dark mb-md-2"><a href="blog-details.html" class="text-dark" >velit esse cillum dolore eu fugiat</a></h3>
<p class="f-14 mb-0">I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet.</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="boot-card mb-5 shadow-sm">
<div class="row no-gutters">
<div class="col-md-6 col-lg-6">
<a href="#"><img src="https://via.placeholder.com/1920/09f.png/fff" alt="Image articles" class="img-fluid"></a>
</div>
<div class="col-md-6 col-lg-6">
<div class="boot-caption py-2 px-4">
<div class="boot-meta">
<h4 class="font-weight-normal">Jan 10, 2018 by <a href="#" class="text-primary">Boot Brown</a></h4>
</div>
<h3 class="text-dark mb-md-2"><a href="blog-details.html" class="text-dark" >velit esse cillum dolore eu fugiat</a></h3>
<p class="f-14 mb-0">I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet.</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="boot-card mb-5 shadow-sm">
<div class="row no-gutters">
<div class="col-md-6 col-lg-6">
<a href="#"><img src="https://via.placeholder.com/1920/09f.png/fff" alt="Image articles" class="img-fluid"></a>
</div>
<div class="col-md-6 col-lg-6">
<div class="boot-caption py-2 px-4">
<div class="boot-meta">
<h4 class="font-weight-normal">Jan 10, 2018 by <a href="#" class="text-primary">Boot Brown</a></h4>
</div>
<h3 class="text-dark mb-md-2"><a href="blog-details.html" class="text-dark" >velit esse cillum dolore eu fugiat</a></h3>
<p class="f-14 mb-0">I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet.</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="boot-card mb-5 shadow-sm">
<div class="row no-gutters">
<div class="col-md-6 col-lg-6">
<a href="#"><img src="https://via.placeholder.com/1920/09f.png/fff" alt="Image articles" class="img-fluid"></a>
</div>
<div class="col-md-6 col-lg-6">
<div class="boot-caption py-2 px-4">
<div class="boot-meta">
<h4 class="font-weight-normal">Jan 10, 2018 by <a href="#" class="text-primary">Boot Brown</a></h4>
</div>
<h3 class="text-dark mb-md-2"><a href="blog-details.html" class="text-dark" >velit esse cillum dolore eu fugiat</a></h3>
<p class="f-14 mb-0">I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="boot-elemant gradient-primary py-md-5 py-4">
<div class="container position-relative py-md-5 py-0">
<div class="boot-block pb-md-5 pb-4 text-center">
<span class="text-uppercase text-white">boot </span>
<h2 class="display-4 text-white font-weight-bold">Articles</h2>
<p class="f-w-16 mb-4">Brouse latest tips from our blog </p>
</div>
<div class="row">
<div class="col-lg-6">
<div class="boot-card mb-5 shadow-lg">
<div class="row no-gutters">
<div class="col-md-6 col-lg-6">
<a href="#"><img src="https://via.placeholder.com/1920/09f.png/fff" alt="Image articles" class="img-fluid"></a>
</div>
<div class="col-md-6 col-lg-6">
<div class="boot-caption py-2 px-4">
<div class="boot-meta">
<h4 class="font-weight-normal">Jan 10, 2018 by <a href="#" class="text-primary">Boot Brown</a></h4>
</div>
<h3 class="text-dark mb-md-2"><a href="blog-details.html" class="text-dark" >velit esse cillum dolore eu fugiat</a></h3>
<p class="f-14 mb-0">I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet.</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="boot-card mb-5 shadow-lg">
<div class="row no-gutters">
<div class="col-md-6 col-lg-6">
<a href="#"><img src="https://via.placeholder.com/1920/09f.png/fff" alt="Image articles" class="img-fluid"></a>
</div>
<div class="col-md-6 col-lg-6">
<div class="boot-caption py-2 px-4">
<div class="boot-meta">
<h4 class="font-weight-normal">Jan 10, 2018 by <a href="#" class="text-primary">Boot Brown</a></h4>
</div>
<h3 class="text-dark mb-md-2"><a href="blog-details.html" class="text-dark" >velit esse cillum dolore eu fugiat</a></h3>
<p class="f-14 mb-0">I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet.</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="boot-card mb-5 shadow-lg">
<div class="row no-gutters">
<div class="col-md-6 col-lg-6">
<a href="#"><img src="https://via.placeholder.com/1920/09f.png/fff" alt="Image articles" class="img-fluid"></a>
</div>
<div class="col-md-6 col-lg-6">
<div class="boot-caption py-2 px-4">
<div class="boot-meta">
<h4 class="font-weight-normal">Jan 10, 2018 by <a href="#" class="text-primary">Boot Brown</a></h4>
</div>
<h3 class="text-dark mb-md-2"><a href="blog-details.html" class="text-dark" >velit esse cillum dolore eu fugiat</a></h3>
<p class="f-14 mb-0">I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet.</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="boot-card mb-5 shadow-lg">
<div class="row no-gutters">
<div class="col-md-6 col-lg-6">
<a href="#"><img src="https://via.placeholder.com/1920/09f.png/fff" alt="Image articles" class="img-fluid"></a>
</div>
<div class="col-md-6 col-lg-6">
<div class="boot-caption py-2 px-4">
<div class="boot-meta">
<h4 class="font-weight-normal">Jan 10, 2018 by <a href="#" class="text-primary">Boot Brown</a></h4>
</div>
<h3 class="text-dark mb-md-2"><a href="blog-details.html" class="text-dark" >velit esse cillum dolore eu fugiat</a></h3>
<p class="f-14 mb-0">I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="boot-elemant py-md-5 py-4">
<div class="container position-relative py-md-5 py-0">
<div class="boot-block pb-md-5 pb-4 text-center">
<span class="text-uppercase">boot </span>
<h2 class="display-4 font-weight-bold">Articles</h2>
<p class="f-16 mb-4">Brouse latest tips from our blog </p>
</div>
<div class="row">
<div class="col-lg-4">
<div class="boot-card shadow-lg"><a href="#"><img src="https://via.placeholder.com/1920/09f.png/fff" alt="Image articles" class="img-fluid"></a>
<div class="boot-caption py-4 px-3">
<div class="boot-meta">
<h4 class="font-weight-normal">Jan 10, 2018 by <a href="#" class="text-primary">Boot Brown</a></h4>
</div>
<h3 class="text-dark mb-md-2"><a href="blog-details.html" class="text-dark">velit esse cillum dolore eu fugiat</a></h3>
<p class="f-16 mb-0">I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet.</p>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="boot-card shadow-lg"><a href="#"><img src="https://via.placeholder.com/1920/09f.png/fff" alt="Image articles" class="img-fluid"></a>
<div class="boot-caption py-4 px-3">
<div class="boot-meta">
<h4 class="font-weight-normal">Jan 10, 2018 by <a href="#" class="text-primary">Boot Brown</a></h4>
</div>
<h3 class="text-dark mb-md-2"><a href="blog-details.html" class="text-dark">velit esse cillum dolore eu fugiat</a></h3>
<p class="f-16 mb-0">I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet.</p>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="boot-card shadow-lg"><a href="#"><img src="https://via.placeholder.com/1920/09f.png/fff" alt="Image articles" class="img-fluid"></a>
<div class="boot-caption py-4 px-3">
<div class="boot-meta">
<h4 class="font-weight-normal">Jan 10, 2018 by <a href="#" class="text-primary">Boot Brown</a></h4>
</div>
<h3 class="text-dark mb-md-2"><a href="blog-details.html" class="text-dark">velit esse cillum dolore eu fugiat</a></h3>
<p class="f-16 mb-0">I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet.</p>
</div>
</div>
</div>
</div>
</div>
</section>
@import url('https://fonts.googleapis.com/css?family=Montserrat:400,500,600,700|Poppins:400,500,600,700');
body,html{
font-family: 'Poppins', sans-serif; font-size: 14px; color: #333;
}
h1,.h1,h2,.h2,h3,.h3,h4,.h4,h5,.h5,h6,.h6{
font-family: 'Montserrat', sans-serif;
}
.f-w-16{
color: rgba(255,255,255,0.49);
font-size: 16px;
font-weight: 400;
line-height: 2em;
}
.f-16{
color: rgba(0,0,0,0.49);
font-size: 16px;
font-weight: 400;
line-height: 2em;
}
.gradient-primary{
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#007bff+1,0021dd+100 */
background: #007bff; /* Old browsers */
background: -moz-linear-gradient(left, #007bff 1%, #0021dd 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, #007bff 1%,#0021dd 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, #007bff 1%,#0021dd 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#007bff', endColorstr='#0021dd',GradientType=1 ); /* IE6-9 */
}
/** btn**/
.btn-outline-white {
border: 1px solid #fff;
color: #fff;
}
.btn-outline-white:hover,.btn-outline-white:focus {
border: 1px solid #fff;
color: #000;
background-color: #fff
}
.btn {
position: relative;
border-radius: 0px;
}
.position-relative{ position: relative; z-index: 10; }
.boot-elemant-bg { position: relative; background-repeat: no-repeat; background-size: cover; }
.elemant-bg-overlay {
position: absolute;
height: 100%;
width: 100%;
top: 0;
z-index: 0;
left: 0;
background-color: #000;
opacity: 0.8;
}
.boot-card {
background-color: #fff;
}
.boot-meta h4 {
font-size: 12px;
margin-bottom: 10px;
}
.boot-caption a{ text-decoration: none; }
.boot-caption h3{ font-size: 18px; font-weight: 500 }
