<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 ---------->
<!--OUR ADVANTAGE-->
<section class="section-blog">
<!-- Start Single Right Post -->
<div class="right-post">
<div class="row no-gutters">
<div class="col-lg-6">
<div class="image-part d-flex align-items-center">
<img src="https://images.pexels.com/photos/932577/pexels-photo-932577.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="">
</div>
</div>
<div class="col-lg-6 text-center">
<div class="content-part d-flex align-items-center">
<div>
<h3 class="small-title">Our Advantage</h3>
<h2 class="big-title">Our Commitment</h2>
<p class="description ss">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tempus tellus finibus, maximus nisi sed, euismod odio. Duis maximus, enim quis volutpat bibendum, nulla sapien blandit velit, ut feugiat erat felis vitae sapien. Nunc eget justo viverra, posuere ante id, malesuada erat. Phasellus ultricies id augue a consectetur. Nulla ac rhoncus turpis, vitae finibus ligula. Nunc eu mauris tempus, lobortis ante eu, elementum metus. Praesent quis metus placerat, ullamcorper lectus sit amet, pellentesque risus.</p>
<a href="#" class="read-more">Read More</a>
</div>
</div>
</div>
</div>
</div>
<!-- / End Single Right Post -->
<!-- Start Single Left Post -->
<div class="left-post">
<div class="row no-gutters">
<div class="col-lg-6 order-lg-2">
<div class="image-part d-flex align-items-center">
<img src="https://doctoritas.com/wp-content/uploads/2015/11/record_img.png" alt="">
</div>
</div>
<div class="col-lg-6 order-lg-1 text-center">
<div class="content-part d-flex align-items-center">
<div>
<h3 class="small-title">Our Advantage</h3>
<h2 class="big-title">We Fight for Justic</h2>
<p class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tempus tellus finibus, maximus nisi sed, euismod odio. Duis maximus, enim quis volutpat bibendum, nulla sapien blandit velit, ut feugiat erat felis vitae sapien. Nunc eget justo viverra, posuere ante id, malesuada erat. Phasellus ultricies id augue a consectetur. Nulla ac rhoncus turpis, vitae finibus ligula. Nunc eu mauris tempus, lobortis ante eu, elementum metus. Praesent quis metus placerat, ullamcorper lectus sit amet, pellentesque risus.</p>
<a href="#" class="read-more">Read More</a>
</div>
</div>
</div>
</div>
</div>
<!-- / End Single Left Post -->
</section>
p,a,h2,h3,h4 {
margin: 0;
padding: 0;
}
a,
a:hover {
color: inherit;
text-decoration: none;
}
.section-blog {
font-family: "Lato", sans-serif;
}
.section-blog .right-post {
background-color: #104d50;
}
.section-blog .image-part {
height: 100%;
}
.section-blog .image-part img {
width: 100%;
}
.section-blog .content-part {
padding: 40px 140px;
height: 100%;
color: #fff;
}
.section-blog .content-part .small-title {
margin-bottom: 10px;
text-transform: uppercase;
letter-spacing: 0.15em;
font-size: 16px;
color: #c69a5d;
font-weight: 600;
}
.section-blog .content-part .big-title {
margin-bottom: 20px;
font-family: "Prata", sans-serif;
font-size: 45px;
}
.section-blog .content-part .description {
font-size: 18px;
}
.section-blog .content-part a.read-more {
margin-top: 30px;
display: inline-block;
padding: 15px 50px;
background-color: #cf8b5a;
color: #fff;
text-decoration: none;
text-transform: uppercase;
font-size: 15px;
letter-spacing: 0.1em;
font-weight: 700;
transition: background-color .3s;
}
.section-blog .content-part a.read-more:hover {
background-color: #b97e54;
}
.section-blog .left-post {
background-color: #f0ece1;
}
.section-blog .left-post .content-part h2,
.section-blog .left-post .content-part p {
color: #000;
}
@media (max-width: 575.99px) {
/* Extra Small Device */
.section-blog .right-post {
//background-color: red;
}
.section-blog .content-part {
padding: 40px 60px;
}
.section-blog .content-part .small-title {
font-size: 14px;
}
.section-blog .content-part .big-title {
font-size: 35px;
}
.section-blog .content-part .description {
font-size: 16px;
}
}
@media (min-width: 576px) and (max-width: 767.99px) {
/* Small Device */
.section-blog .right-post {
//background-color: green;
}
.section-blog .content-part {
padding: 40px 60px;
}
.section-blog .content-part .small-title {
font-size: 14px;
}
.section-blog .content-part .big-title {
font-size: 35px;
}
.section-blog .content-part .description {
font-size: 16px;
}
}
@media (min-width: 768px) and (max-width: 991.99px) {
/* Medium Device */
}
@media (min-width: 992px) and (max-width: 1199.99px) {
/* Large Device */
.section-blog .content-part {
padding: 40px 60px;
}
.section-blog .content-part .small-title {
font-size: 14px;
}
.section-blog .content-part .big-title {
font-size: 35px;
}
.section-blog .content-part .description {
font-size: 16px;
}
}
@media (min-width: 1200px) and (max-width: 1499.99px) {
/* Extra Large Device */
.section-blog .content-part {
padding: 40px 80px;
}
}
