<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="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<section class="content-section padding">
<div class="container">
<div class="row content-wrap">
<div class="col-lg-6 sm-padding">
<div class="content-info wow fadeInRight" data-wow-delay="300ms" style="visibility: visible; animation-delay: 300ms;">
<span>Explore The Features</span>
<h2>Offering the most complete integrated package!</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.</p>
<a href="#" class="default-btn">Get Free Quote</a>
</div>
</div>
<div class="col-lg-6 sm-padding wow fadeInLeft" data-wow-delay="100ms" style="visibility: visible; animation-delay: 100ms; animation-name: fadeInLeft;">
<img class="box-shadow" src="https://image.freepik.com/free-photo/young-handsome-business-man-with-laptop-office_1303-21054.jpg" alt="img">
</div>
</div>
</div>
</section>
@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro|Poppins:600,700|Work+Sans:600&display=swap);
* {
padding: 0;
margin: 0
}
html {
scroll-behavior: smooth!important;
overflow-x: hidden
}
body {
background-color: #fff;
font-family: source sans pro, sans-serif;
font-size: 16px;
line-height: 26px;
color: #8d9aa8;
font-weight: 400;
letter-spacing: -.2px;
position: relative;
overflow-x: hidden
}
::-webkit-scrollbar {
width: 8px;
height: 8px
}
::-webkit-scrollbar-thumb {
cursor: pointer;
background: #ffd013
}
::selection {
background-color: #ffd013;
color: #fff
}
::-moz-selection {
background-color: #ffd013;
color: #fff
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: poppins, sans-serif;
-webkit-font-smoothing: antialiased;
color: #263a4f
}
h1 {
font-size: 45px;
font-weight: 400;
line-height: 55px;
margin: 0 0 10px;
color: #263a4f
}
h2 {
font-size: 32px;
line-height: 42px;
color: #263a4f;
margin: 0 0 10px;
font-weight: 600;
letter-spacing: -1px
}
h3,
h4 {
margin: 0 0 10px;
font-weight: 400;
line-height: 1.7;
color: #263a4f;
letter-spacing: -.5px
}
h3 {
font-size: 20px
}
h4 {
font-size: 16px
}
h5,
h6 {
font-size: 14px;
margin: 0 0 10px
}
img {
border: none;
outline: 0;
max-width: 100%
}
p {
font-size: 16px;
line-height: 26px;
margin-bottom: 15px
}
a,
a:hover {
text-decoration: none
}
a:focus {
outline: 0;
text-decoration: none
}
.padding {
padding: 100px 0
}
.padding-15 {
padding: 15px
}
.padding-20 {
padding: 20px
}
.box-padding {
padding: 0 50px
}
@-webkit-keyframes sk-scaleout {
0% {
-webkit-transform: scale(0)
}
100% {
-webkit-transform: scale(1);
opacity: 0
}
}
@keyframes sk-scaleout {
0% {
-webkit-transform: scale(0);
transform: scale(0)
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 0
}
}
.default-btn {
background-color: #ffd013;
text-transform: uppercase;
font-family: work sans, sans-serif;
color: #000;
font-size: 12px;
border-radius: 2px;
line-height: 45px;
font-weight: 600;
display: inline-block;
letter-spacing: .5px;
padding: 0 30px;
-webkit-box-shadow: 0 3px 10px rgba(71, 44, 173, .2);
box-shadow: 0 3px 10px rgba(71, 44, 173, .2)
}
.default-btn:hover {
background-color: #232427;
color: #ffd013
}
a,
a:hover,
img {
-webkit-transition: all .5s;
-o-transition: all .5s;
transition: all .5s
}
.content-wrap img {
border-radius: 5px
}
.content-info span {
font-family: work sans, sans-serif;
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
margin-bottom: 15px;
display: block
}
.content-info h2 {
margin-bottom: 20px
}
.content-info p {
margin-bottom: 30px
}
