<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/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 ---------->
<div class="container">
<div class="row">
<section class="wrapper services" id="services">
<div class="container">
<div class="gap"></div>
<div class="row">
<div class="col-md-12">
<div class="center gap fade-down section-heading text-center">
<h2 class="main-title">About Us</h2>
<hr>
</div>
</div>
</div>
<div class="row dsk">
<div class="col-lg-6">
<p class="">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Vivamus porta justo at ornare porta. Aliquam facilisis
sollicitudin tortor quis placerat. Duis tempus lectus non mi
sodales rhoncus. In sed orci vestibulum, egestas urna iaculis
, suscipit erat.</p><p> Praesent tempus volutpat ligula, ut mollis quam
finibus nec. Morbi pretium nec neque non porttitor. Morbi
ultrices enim vel purus feugiat, sed rutrum metus efficitur.
Fusce at tristique lorem, eget malesuada nisi. Vestibulum semper
lorem vitae nulla elementum aliquet.
</p>
</div>
<div class="col-lg-6">
<img src="http://two4seven.com/wp-content/uploads/2016/05/creative_team.png">
</div>
</div><!--/.row-->
<div class="row dsk">
<div class="col-lg-6">
<div class='blog-posts'>
<div class='post featured left'>
<div class='image' style='background-image: url(https://unsplash.it/600/400/?random)'>
</div>
<div class='content'>
<h2>Mision</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas illo tempore at eveniet adipisci harum error deserunt in sint aspernatur magni asperiores explicabo corporis ratione praesentium illum magnam esse ipsa dignissimos quaerat perferendis dolor vero? Maiores hic modi optio eaque...</p>
</div>
</div>
</div>
</div>
<div class="col-lg-6">
<div class='blog-posts'>
<div class='post featured right'>
<div class='content'>
<h2>Vision</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas illo tempore at eveniet adipisci harum error deserunt in sint aspernatur magni asperiores explicabo corporis ratione praesentium illum magnam esse ipsa dignissimos quaerat perferendis dolor vero? Maiores hic modi optio eaque...</p>
</div>
<div class='image' style='background-image: url(https://unsplash.it/600/400/?random)'>
</div>
</div>
</div>
</div>
</div><!--/.row-->
</div>
</section>
</div>
</div>
<script>
</script>
.about .blog-posts .featured {
width: 100% !important;
height: 250px !important;
margin: 0.5em 0 1em 0 !important;
}
.container .blog-posts .featured .image {
height: 250px !important;
}
.container .blog-posts .featured .content {
height: 250px !important;
}
.container .blog-posts .row {
display: flex;
}
.container .blog-posts .post {
flex: 1;
overflow: hidden;
background: white;
height: 200px;
-moz-box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.2);
-webkit-box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.2);
box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.2);
margin-right: 1em;
margin-bottom: 1em;
}
.container .blog-posts .post:hover {
-moz-box-shadow: 0 0 3px 2px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 0 0 3px 2px rgba(0, 0, 0, 0.1);
box-shadow: 0 0 3px 2px rgba(0, 0, 0, 0.1);
}
.container .blog-posts .post:hover .image {
opacity: 0.8;
}
.container .blog-posts .post .image, .container .blog-posts .post .content {
display: inline-block;
position: relative;
-moz-transition: all 500ms ease;
-o-transition: all 500ms ease;
-webkit-transition: all 500ms ease;
transition: all 500ms ease;
}
.container .blog-posts .post .image {
width: 50%;
height: 200px;
background-size: cover;
background-position: center center;
}
.container .blog-posts .post.right .image {
float:right;
}
.container .blog-posts .post.left .image {
float:left;
}
.container .blog-posts .post .content {
padding: 0.5em 1em;
width: 50%;
-moz-box-shadow: -2px 0 2px -1px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: -2px 0 2px -1px rgba(0, 0, 0, 0.1);
box-shadow: -2px 0 2px -1px rgba(0, 0, 0, 0.1);
background-color:#FFF;
height: 250px;
}
.container .blog-posts .post.left .content:before {
content: '';
position: absolute;
background: white;
width: 10px;
height: 10px;
top: 20%;
left: -5px;
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
-moz-box-shadow: -1px 0 2px -1px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: -1px 0 2px -1px rgba(0, 0, 0, 0.1);
box-shadow: -1px 0 2px -1px rgba(0, 0, 0, 0.1);
}
.container .blog-posts .post.right .content:before {
content: '';
position: absolute;
background: white;
width: 10px;
height: 10px;
top: 20%;
right: -5px;
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
-moz-box-shadow: -1px 0 2px -1px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: -1px 0 2px -1px rgba(0, 0, 0, 0.1);
box-shadow: -1px 0 2px -1px rgba(0, 0, 0, 0.1);
z-index:1;
}
.container .blog-posts .post .content h2 {
font-weight: bold;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.dsk img {
max-width: 100%;
height: auto;
}
@media screen and (max-width: 840px) {
.row.dsk .post {
width: 100%;
margin: 0;
}
}
@media screen and (max-width: 600px) {
.content {
width: 70% !important;
}
.image {
width: 30% !important;
}
.content h2 {
text-overflow: inherit;
white-space: normal;
}
}
