<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 ---------->
<div class="main-box">
<div class="site-more-features section-blue blue-purple-gredient" id="site-more-features">
<div class="container">
<div class="row">
<!-- clearfix -->
<div class="clearfix"></div>
<div class="col-xs-12 col-sm-12 col-md-4 col-md-push-4">
<!-- mobile image -->
<figure class="featured-img wow fadeInDown" data-wow-duration="2s" style="visibility: visible; animation-duration: 2s; animation-name: fadeInDown;">
<img src="http://kalanidhithemes.com/live-preview/landing-page/smart-app-landing-page/all-demo/default-version-purple-blue-gredient/images/feature-mobile.png" alt="Image">
</figure>
<!-- end -->
</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-md-pull-4">
<!-- feature 1 -->
<div class="feature align-right">
<h5>Application records</h5>
<p>Lorem Ipsum is simply dummy text of the printing and typeseing</p>
<figure>
<span class="icon-micro"></span>
</figure>
</div>
<!-- feature 2 -->
<div class="feature align-right move">
<h5>Best for business</h5>
<p>Lorem Ipsum is simply dummyof the printing and typeseing</p>
<figure>
<span class="icon-portfolio"></span>
</figure>
</div>
<!-- feature 3 -->
<div class="feature align-right">
<h5>Full free chat</h5>
<p>Lorem Ipsum is simply dummy text of the printing and typeseing</p>
<figure>
<span class="icon-chat"></span>
</figure>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-4">
<!-- feature 1 -->
<div class="feature align-left">
<h5>Retina ready</h5>
<p>Lorem Ipsum is simply dummy text of the printing and typeseing</p>
<figure>
<span class="icon-albums"></span>
</figure>
</div>
<!-- feature 2 -->
<div class="feature align-left move">
<h5>Secure extra</h5>
<p>Lorem Ipsum is simply dummy text of the printing and.</p>
<figure>
<span class="icon-lock"></span>
</figure>
</div>
<!-- feature 3 -->
<div class="feature align-left">
<h5>Night vision</h5>
<p>Lorem Ipsum is simply dummy of the printing and industry.</p>
<figure>
<span class="icon-moon"></span>
</figure>
</div>
</div>
</div>
</div>
</div>
</div>
/*-----------------------------------------------------------------------------------
[More Features] (Section)
# More Features (wrapper)
# Feature Image
# Featured Box
# Align right (class)
# Align left (class)
# Move left (class)
# Move right (class)
# Icons
# Typography (h5, p)
-----------------------------------------------------------------------------------*/
/* More features wrapper */
.blue-purple-gredient {
background: #836aeb;
background: rgba(50,187,241,1);
background: -moz-linear-gradient(-45deg, rgba(50,187,241,1) 0%, rgba(166,73,233,1) 68%, rgba(166,73,233,1) 100%);
background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(50,187,241,1)), color-stop(68%, rgba(166,73,233,1)), color-stop(100%, rgba(166,73,233,1)));
background: -webkit-linear-gradient(-45deg, rgba(50,187,241,1) 0%, rgba(166,73,233,1) 68%, rgba(166,73,233,1) 100%);
background: -o-linear-gradient(-45deg, rgba(50,187,241,1) 0%, rgba(166,73,233,1) 68%, rgba(166,73,233,1) 100%);
background: -ms-linear-gradient(-45deg, rgba(50,187,241,1) 0%, rgba(166,73,233,1) 68%, rgba(166,73,233,1) 100%);
background: linear-gradient(135deg, rgba(50,187,241,1) 0%, rgba(166,73,233,1) 68%, rgba(166,73,233,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#32bbf1', endColorstr='#a649e9', GradientType=1 );
}
.heading-text {
float:left;
width:100%;
margin-bottom:60px;
margin-top:-30px;
}
.heading-text p {
float:left;
width:100%;
text-align:center;
font-size:16px !important;
line-height:1.5;
white-space:pre-line;
}
.white {
color:#FFFFFF;
}
.site-more-features {
margin: 0;
display: block;
width: 100%;
clear: both;
}
@media screen and (max-width: 991px) {
.site-more-features {
}
}
.site-more-features .featured-img {
/* featured image */
padding: 0;
display: block;
margin: 0 auto;
overflow: hidden;
text-align: center;
max-width: 27.125rem;
}
.site-more-features .featured-img img {
display: inline-block;
vertical-align: middle;
}
.site-more-features .feature {
/* feature box */
text-align: left;
position: relative;
margin-bottom: 0;
margin-top: 0;
padding: 0.00625rem 5.625rem 3.125rem 2.5rem;
top: 1.875rem;
cursor: pointer;
}
@media screen and (max-width: 1199px) {
.site-more-features .feature {
padding-left: 0;
padding-right: 0;
}
}
@media screen and (max-width: 991px) {
.site-more-features .feature {
padding-top: 0.3125rem;
max-width: 25rem;
margin-left: auto;
margin-right: auto;
}
}
.site-more-features .feature:hover h5 {
color: #FFFFFF;
}
.site-more-features .feature:hover figure {
border-color: #2b8dd9;
box-shadow: 0 0 0.938rem rgba(2, 3, 3, 0.19);
}
.site-more-features .feature:hover figure:before {
background: #2b8dd9;
}
.site-more-features .feature:hover span, .site-more-features .feature:hover i.fa {
border-color:none;
color: white;
box-shadow: 0 0 15px rgba(2, 3, 3, 0.19);
background: #80d380;
color: #FFFFFF;
transition:all ease .5s;
border:none !important;
background: rgba(70,200,255,1);
/* Old Browsers */background: -moz-linear-gradient(left, rgba(70,200,255,1) 0%, rgba(129,211,126,1) 100%);
/* FF3.6+ */background: -webkit-gradient(left top, right top, color-stop(0%, rgba(70,200,255,1)), color-stop(100%, rgba(129,211,126,1)));
/* Chrome, Safari4+ */background: -webkit-linear-gradient(left, rgba(70,200,255,1) 0%, rgba(129,211,126,1) 100%);
/* Chrome10+,Safari5.1+ */background: -o-linear-gradient(left, rgba(70,200,255,1) 0%, rgba(129,211,126,1) 100%);
/* Opera 11.10+ */background: -ms-linear-gradient(left, rgba(70,200,255,1) 0%, rgba(129,211,126,1) 100%);
/* IE 10+ */background: linear-gradient(to right, rgba(70,200,255,1) 0%, rgba(129,211,126,1) 100%);
/* W3C */filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#46c8ff', endColorstr='#81d37e', GradientType=1 );
/* IE6-9 */
}
.site-more-features .feature:hover span:after, .site-more-features .feature:hover i.fa:after {
background: #2b8dd9;
}
.site-more-features .feature.align-right {
/* Align right class */
text-align: right;
padding-right: 5.25rem;
}
@media screen and (max-width: 1199px) {
.site-more-features .feature.align-right {
padding-right: 7.5rem;
padding-left: 0;
}
}
@media screen and (max-width: 991px) {
.site-more-features .feature.align-right {
text-align: left;
padding-right: 0;
padding-left: 7.5rem;
}
}
.site-more-features .feature.align-left {
/* Align left class */
text-align: left;
padding-right: 2.5rem;
padding-left: 5.25rem;
}
@media screen and (max-width: 1199px) {
.site-more-features .feature.align-left {
padding-right: 0;
padding-left: 7.5rem;
}
}
.site-more-features .feature.align-left.move {
/* move left class */
left:0;
}
@media screen and (max-width: 1199px) {
.site-more-features .feature.align-left.move {
left: 0;
}
}
.site-more-features .feature.align-left figure {
right: auto;
left: -1.25rem;
}
@media screen and (max-width: 1199px) {
.site-more-features .feature.align-left figure {
left: 0;
}
}
.site-more-features .feature.move {
/* move right class */
right:0;
}
@media screen and (max-width: 1199px) {
.site-more-features .feature.move {
right: 0;
}
}
.site-more-features .feature figure {
/* icons */
position: absolute;
top: 0;
right: -1.25rem;
bottom: 0;
display: block;
overflow: visible;
width: 5.25rem;
height: 5.25rem;
border: 1px solid rgba(255, 255, 255, .5);
border-radius: 62.5rem;
transition: 300ms linear;
transition-property: border-color, box-shadow;
}
@media screen and (max-width: 1199px) {
.site-more-features .feature figure {
right: 0;
}
}
@media screen and (max-width: 991px) {
.site-more-features .feature figure {
right: auto;
left: 0;
}
}
.site-more-features .feature figure:before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: block;
width: 100%;
height: 100%;
border-radius: 62.5rem;
/*border: 0.375rem solid white;*/
transition: 300ms linear;
transition-property: background;
}
.site-more-features h5 {
/* Typography */
color: #FFFFFF;
margin-bottom: 0.9375rem;
margin-top: 0.3125rem;
transition: 300ms linear;
transition-property: color;
font-family: inherit;
font-size: 19px;;
font-weight: 600;
}
.site-more-features p {
color: #FFFFFF;
font-family: inherit;
font-size: 14px;;
font-weight: normal;
line-height: 1.625rem;
}
.site-more-features figure {
/* Image */
overflow: hidden;
}
.site-more-features figure span, .site-more-features figure i.fa {
/* Icons */
text-align: center;
position: absolute;
z-index: 1;
left: 0;
right: 0;
bottom: 0;
top: 0;
overflow: hidden;
color: #FFFFFF;
font-size: 2.5rem;
width: 100%;
height: 100%;
display: block;
border-radius: 62.5rem;
line-height: 5.25rem;
transition: 300ms linear;
transition-property: color;
}
