<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.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">
<div class="col-sm-6">
<div class="serviceBox">
<img src="https://cdn.shopify.com/s/files/1/2083/7711/files/audience-aboutus.jpg?3401039272122659592">
<div class="service-content">
<span class="service-icon">
<i class="fa fa-group"></i>
</span>
<h3 class="title">Target Audience</h3>
<p class="description">
<ul style="text-align:left;">
<li>3,000 media & marketing executives made up of clientside, media agencies & partner executives</li>
<li>60% client-side executives</li>
<li>30% media executives & partners</li>
<li>15% agency executives</li>
</ul>
</p>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="serviceBox middle">
<div class="service-content">
<span class="service-icon">
<i class="fa fa-rocket"></i>
</span>
<h3 class="title">New Opportunities for Your Product Line:</h3>
<p class="description">
<ul style="text-align:left;">
<li>Target a niche group and captive audience</li>
<li>Move existing inventory via an additional distribution channel</li>
<li>Test new product concepts</li>
<li>Closed network means prices are not searchable and your brand is protected.</li>
</ul>
</p>
</div>
<img src="https://cdn.shopify.com/s/files/1/2083/7711/files/growth-aboutus.jpg?3401039272122659592">
</div>
</div>
</div>
</div>
<section class="diagonal">
<div class="container">
<h1>Digaonal Section</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur finibus nisi maximus, pharetra nulla finibus, efficitur mi. Phasellus at ligula quis nunc varius rhoncus. Sed vitae justo at nisl ornare fermentum at sit amet leo. Donec lobortis elementum faucibus. Vestibulum tempor nec justo in iaculis. Duis tellus mauris, consequat vel dolor sed, volutpat sollicitudin enim. Maecenas velit dolor, efficitur sagittis interdum ac, pellentesque et velit. Nulla odio erat, pharetra non posuere id, sollicitudin sed erat. Nulla vitae est ligula. Ut aliquam porta orci. Nulla faucibus leo in sapien finibus, vel egestas lorem varius.
</p>
</div>
</section>
<section id="webcoderskull-area" class="webcoderskull-law-area">
<div class="container">
<div class="row">
<div class="col-md-12">
<h2>Our Services</h2>
<p class="sub-heading">Sed ut perspiciatis, unde omnis isteew nouat error sit voluptatem etusasi accu ndolor <br>laudantium, totam rem aperiam eaqu m </p>
<div class="separator">
<span class="single-line-middle"></span>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4 col-sm-6">
<div class="webcoderskull-item">
<i class="fa fa-usd" aria-hidden="true"></i>
<h3><a href="#">Designing</a></h3>
<p>Lorem ipsum dolor sitea amet, zixf cons adipi cing elit, seddi do ipsum eiusmod brrtde mpor in didunt utlae ore etioe.Lorem ips new idolor sit amet.</p>
<a href="" class="learn-more">Learn more</a>
</div>
</div>
<div class="col-md-4 col-sm-6">
<div class="webcoderskull-item">
<i class="fa fa-briefcase" aria-hidden="true"></i>
<h3><a href="#">Development Based</a></h3>
<p>Lorem ipsum dolor sitea amet, zixf cons adipi cing elit, seddi do ipsum eiusmod brrtde mpor in didunt utlae ore etioe.Lorem ips new idolor sit amet.</p>
<a href="" class="learn-more">Learn more</a>
</div>
</div>
<div class="col-md-4 col-sm-6">
<div class="webcoderskull-item">
<i class="fa fa-users" aria-hidden="true"></i>
<h3><a href="#">Web Coder</a></h3>
<p>Lorem ipsum dolor sitea amet, zixf cons adipi cing elit, seddi do ipsum eiusmod brrtde mpor in didunt utlae ore etioe.Lorem ips new idolor sit amet.</p>
<a href="" class="learn-more">Learn more</a>
</div>
</div>
<div class="col-md-4 col-sm-6">
<div class="webcoderskull-item">
<i class="fa fa-random" aria-hidden="true"></i>
<h3><a href="#">Graphic</a></h3>
<p>Lorem ipsum dolor sitea amet, zixf cons adipi cing elit, seddi do ipsum eiusmod brrtde mpor in didunt utlae ore etioe.Lorem ips new idolor sit amet.</p>
<a href="http://www.webcoderskull.com" target="_blank" class="learn-more">Learn more</a>
</div>
</div>
<div class="col-md-4 col-sm-6">
<div class="webcoderskull-item">
<i class="fa fa-credit-card" aria-hidden="true"></i>
<h3><a href="#">Wordpress</a></h3>
<p>Lorem ipsum dolor sitea amet, zixf cons adipi cing elit, seddi do ipsum eiusmod brrtde mpor in didunt utlae ore etioe.Lorem ips new idolor sit amet.</p>
<a href="http://www.webcoderskull.com" target="_blank" class="learn-more">Learn more</a>
</div>
</div>
<div class="col-md-4 col-sm-6">
<div class="webcoderskull-item">
<i class="fa fa-diamond" aria-hidden="true"></i>
<h3><a href="#">Magento</a></h3>
<p>Lorem ipsum dolor sitea amet, zixf cons adipi cing elit, seddi do ipsum eiusmod brrtde mpor in didunt utlae ore etioe.Lorem ips new idolor sit amet.</p>
<a href="http://www.webcoderskull.com" target="_blank" class="learn-more">Learn more</a>
</div>
</div>
</div> <!-- End Row -->
</div> <!-- End Container -->
</section>
.serviceBox{
text-align: center;
margin: 0 -15px;
display:inline-block;
}
.serviceBox img{
width: 100%;
height: auto;
max-width:585px;
}
.serviceBox .service-content{
position: relative;
background: #0d2337;
color: #efefef;
padding: 50px 30px 30px;
min-height:290px;
}
.serviceBox .service-icon{
display: block;
width: 70px;
height: 70px;
background: #75b7f4;
border-radius: 10px;
position: absolute;
top: -35px;
left: 0;
right: 0;
margin: auto;
transform: rotate(45deg);
}
.serviceBox .service-icon i{
font-size: 30px;
line-height: 70px;
color: #0d2337;
transform: rotate(-45deg);
}
.serviceBox .title{
font-size: 20px;
font-weight: 600;
margin-bottom: 20px;
text-transform: uppercase;
}
.serviceBox .description{
font-size: 14px;
line-height: 25px;
margin-bottom: 20px;
}
.serviceBox.middle .service-content{
padding: 30px 30px 50px;
}
.serviceBox.middle .service-icon{
bottom: -35px;
top: auto;
}
@media only screen and (max-width: 990px){
.serviceBox .title{ font-size: 17px; }
}
@media only screen and (max-width: 767px){
.serviceBox{ margin: 0 0 30px 0; }
}
.diagonal {
color: #fff;
margin-top: 100px;
padding: 50px 0;
position: relative;
background: #2196F3;
}
.diagonal:before {
position: absolute;
margin-top: -130px;
content: '';
border-style: solid;
border-width: 0 0 5rem 100vw;
border-color: transparent #2196F3 #2196F3 transparent;
}
#webcoderskull-area {
padding: 100px 0;
text-align: center;
}
#webcoderskull-law-area h2 {
font-weight: 400;
}
.webcoderskull-item {
border: 1px solid #6a78dc;
margin-bottom: 45px;
padding: 35px;
transition: all 0.3s cubic-bezier(.25,.8,.25,1);
box-shadow: 0 1px 3px rgba(114,120,220,0.12), 0 1px 2px rgba(114,120,220,0.24);
}
.webcoderskull-item:hover {
box-shadow: 0 14px 28px rgba(114,120,220,0.25), 0 10px 10px rgba(114,120,220,0.22);
}
.webcoderskull-item .fa {
font-size: 35px;
margin-bottom: 30px;
}
.learn-more {
font-size: 16px;
letter-spacing: 1px;
text-transform: uppercase;
font-family: 'Oswald', sans-serif;
color: #474747;
}
.webcoderskull-item h3 a {
color: #474747;
}
.webcoderskull-item h3 a:hover {
text-decoration: none;
}
.webcoderskull-item:hover h3 a {
color: #5b69cb;
}
.webcoderskull-item:hover .learn-more,
.webcoderskull-item:hover h3,
.webcoderskull-item:hover .fa {
text-decoration: none;
color: #5b69cb;
}
.webcoderskull-item:hover .learn-more::after {
content: " \2192";
opacity: 1;
transition: all 0.6s ease 0s;
transition: all 0.6s ease 0s;
margin-left: 5px;
margin-top: 0px;
line-height: 15px
}
.webcoderskull-item .learn-more::after {
content: " \2192";
position: absolute;
opacity: 0;
margin-left: -30px;
transition: all 0.6s ease 0s;
font-size: 31px;
line-height: 15px;
transition: all 0.6s ease 0s;
}
