<section class="servie_area page-section" id="services">
<div class="container">
<div class="row">
<div class="col-md-6 col-sm-12 col-xs-12">
<div class="section_title service_section_title">
<h3>Our Services</h3>
<p>Etiam non erat mi. Etiam congue et augue sed tempus. Aenean sed ipsum luctus, scelerisque ipsum nec, iaculis justo. Sed at vestibulum.</p>
</div>
</div>
<!-- item -->
<div class="col-md-3 col-sm-6 col-xs-6 col-xxs-12 service_icon_info_top">
<div class="service_icon"><span class="fa fa-superpowers"></span>
<h5>Web Development</h5></div>
<div class="service-overlay"><span class="fa fa-superpowers"></span>
<h5><a href="#" title="Web Development">Web Development</a></h5>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis repellat quo vitae tempora.</p>
</div>
</div>
<!-- #item -->
<!-- item -->
<div class="col-md-3 col-sm-6 col-xs-6 col-xxs-12 service_icon_info_top">
<div class="service_icon"><span class="fa fa-ravelry"></span>
<h5>Photography</h5></div>
<div class="service-overlay"><span class="fa fa-ravelry"></span>
<h5><a href="#" title="Photography">Photography</a></h5>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis repellat quo vitae tempora.</p>
</div>
</div>
<!-- #item -->
</div>
<div class="row">
<!-- item -->
<div class="col-md-3 col-sm-6 col-xs-6 col-xxs-12 service_icon_info">
<div class="service_icon"><span class="fa fa-snowflake-o"></span>
<h5>Graphics Design</h5></div>
<div class="service-overlay"><span class="fa fa-snowflake-o"></span>
<h5><a href="#" title="Graphics Design">Graphics Design</a></h5>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis repellat quo vitae tempora.</p>
</div>
</div>
<!-- #item -->
<!-- item -->
<div class="col-md-3 col-sm-6 col-xs-6 col-xxs-12 service_icon_info">
<div class="service_icon"><span class="fa fa-diamond"></span>
<h5>Social Media</h5></div>
<div class="service-overlay"><span class="fa fa-diamond"></span>
<h5><a href="#" title="Social Media">Social Media</a></h5>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis repellat quo vitae tempora.</p>
</div>
</div>
<!-- #item -->
<!-- item -->
<div class="col-md-3 col-sm-6 col-xs-6 col-xxs-12 service_icon_info">
<div class="service_icon"><span class="fa fa-globe"></span>
<h5>Creative Writing</h5></div>
<div class="service-overlay"><span class="fa fa-globe"></span>
<h5><a href="#" title="Creative Writing">Creative Writing</a></h5>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis repellat quo vitae tempora.</p>
</div>
</div>
<!-- #item -->
<!-- item -->
<div class="col-md-3 col-sm-6 col-xs-6 col-xxs-12 service_icon_info">
<div class="service_icon"><span class="fa fa-object-ungroup"></span>
<h5>Brand Creation</h5></div>
<div class="service-overlay"><span class="fa fa-object-ungroup"></span>
<h5><a href="#" title="Brand Creation">Brand Creation</a></h5>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis repellat quo vitae tempora.</p>
</div>
</div>
<!-- #item -->
</div>
</div>
</section>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
section.servie_area {
padding: 110px 0 120px;
}
.service_section_title h3 {
padding-bottom: 25px;
text-transform: uppercase; font-weight: 600; font-size: 30px;
}
.service_section_title p {
max-width: 450px;
font-size: 16px;
line-height: 30px;
}
.service_icon_info,
.service_icon_info_top {
border: 1px solid #ddd;
height: 216px;
text-align: center;
}
.service_icon_info:nth-child(2),
.service_icon_info:nth-child(4),
.service_icon_info:nth-child(3) {
border-left: none;
}
.service_icon_info_top:nth-child(2) {
border-right: none;
margin-left: -1px;
margin-bottom: -1px;
}
.service_icon_info_top {
margin: 12px 0 -2px 0px;
position: relative;
}
.service_icon_info {
position: relative;
}
.service_icon_info .service-overlay,
.service_icon_info_top .service-overlay {
width: 295px;
height: 295px;
position: absolute;
overflow: hidden;
margin: -55px -2px;
top: 0px;
left: 0;
opacity: 0;
background-image: linear-gradient(to right, #2196F3 0%, #64B5F6 100%);
background: -webkit-linear-gradient(to right, #2196F3 0%, #64B5F6 100%); /* Chrome 10-25, Safari 5.1-6 */
-webkit-transform: translateY(20px);
transform: translateY(20px);
text-align: center;
padding-top: 45px;
box-shadow: rgba(0, 0, 0, 0.10) 0px 15px 45px 0px;
z-index: 1;
-webkit-transition: .4s;
transition: .4s;
border-radius: 5px;
}
.service_icon_info:hover .service-overlay,
.service_icon_info_top:hover .service-overlay {
opacity: 1;
-webkit-transform: translateY(10px);
transform: translateY(10px);
}
.service_icon {
padding-top: 55px;
}
.service_icon span {
color: #333333;
font-size: 48px;
}
.service_icon h5 {
color: #333333;
font-size: 16px;
margin-top: 30px;
}
.service-overlay h5 {
color: #fff;
font-size: 16px;
margin-top: 30px;
}
.service-overlay h5 a,
.service-overlay h5 a:hover,
.service-overlay h5 a:active,
.service-overlay h5 a:focus{
color: #fff;
}
.service-overlay p {
max-width: 230px;
margin: 25px auto 0 auto;
color: #eee;
}
.service-overlay span {
font-size: 48px;
}
.service_icon_info:hover .service-overlay:hover,
.service-overlay span,
.service_icon_info_top:hover .service-overlay span {
color: #fff;
}
/*Responsive*/
@media only screen and (min-width: 992px) and (max-width: 1200px) {
.service_icon_info .service-overlay,
.service_icon_info_top .service-overlay {
width: 244px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.service_section_title {
text-align: center;
margin: 0 auto;
padding-bottom: 50px;
}
.service_section_title p {
max-width: 545px;
margin: 0 auto;
}
.service_icon_info .service-overlay,
.service_icon_info_top .service-overlay {
width: 100%;
left: 2px;
}
.service_icon_info_top {
border: 1px solid #ddd;
}
.service_icon_info:nth-child(2),
.service_icon_info:nth-child(4) {
border-right: 1px solid #ddd;
border-left: 1px solid #ddd;
}
.service_icon_info {
border-bottom: 1px solid #ddd;
border-top: none;
border-right: none;
height: 216px;
text-align: center;
}
.service_icon_info:nth-child(1),
.service_icon_info:nth-child(3) {
border-left: 1px solid #ddd;
}
}
@media (max-width: 768px) {
.service_section_title {
padding-bottom: 30px;
}
}
@media (max-width: 767px) {
.service_icon_info .service-overlay,
.service_icon_info_top .service-overlay {
width: 100%;
left: 2px;
}
.service_icon_info_top {
border: 1px solid #ddd;
}
.service_icon_info:nth-child(2),
.service_icon_info:nth-child(4) {
border-right: 1px solid #ddd;
border-left: 1px solid #ddd;
}
.service_icon_info {
border-bottom: 1px solid #ddd;
border-top: none;
border-right: none;
height: 216px;
text-align: center;
}
.service_icon_info:nth-child(1),
.service_icon_info:nth-child(3) {
border-left: 1px solid #ddd;
}
.service_section_title p {
max-width: 100%;
}
}
@media (max-width: 500px) {
.service_icon_info_top:nth-child(2) {
margin-left: 0;
margin-bottom: -12px;
border-bottom: none;
border-right: 1px solid #ddd;
}
.service_icon_info:nth-child(1),
.service_icon_info:nth-child(3) {
border-right: 1px solid #ddd;
}
}