service 1

free shipping

Lorem ipsum dummy text goes here

money back guarantee

Lorem ipsum dummy text goes here

safe shopping

Lorem ipsum dummy text goes here

online support

Lorem ipsum dummy text goes here


<div class="shipping-service-area">
<div class="container-fluid">
<div class="row">
<!-- Single Service -->
<div class="sin-service col-lg-3 col-sm-6 col-xs-12">
<!-- Service Icon -->
<div class="icon text-center"><i class="zmdi zmdi-car"></i></div>
<!-- Service Content -->
<div class="content fix">
<h3>free shipping</h3>
<p>Lorem ipsum dummy text goes here</p>
</div>
</div>
<!-- Single Service -->
<div class="sin-service col-lg-3 col-sm-6 col-xs-12">
<!-- Service Icon -->
<div class="icon text-center"><i class="zmdi zmdi-balance-wallet"></i></div>
<!-- Service Content -->
<div class="content fix">
<h3>money back guarantee</h3>
<p>Lorem ipsum dummy text goes here</p>
</div>
</div>
<!-- Single Service -->
<div class="sin-service col-lg-3 col-sm-6 col-xs-12">
<!-- Service Icon -->
<div class="icon text-center"><i class="zmdi zmdi-shield-security"></i></div>
<!-- Service Content -->
<div class="content fix">
<h3>safe shopping</h3>
<p>Lorem ipsum dummy text goes here</p>
</div>
</div>
<!-- Single Service -->
<div class="sin-service col-lg-3 col-sm-6 col-xs-12">
<!-- Service Icon -->
<div class="icon text-center"><i class="zmdi zmdi-headset-mic"></i></div>
<!-- Service Content -->
<div class="content fix">
<h3>online support</h3>
<p>Lorem ipsum dummy text goes here</p>
</div>
</div>
</div>
</div>
</div>


.shipping-service-area {
  background: #fff;
  padding: 40px 0;
}
.sin-service {
  border-right: 1px solid #dddddd;
  padding-left: 72px;
  text-align: left;
}
.sin-service:last-child {
  border-right: 0px solid #dddddd;
}
.sin-service .icon {
  display: block;
  float: left;
  margin-right: 20px;
}
.sin-service .icon i {
  border: 1px solid #dddddd;
  border-radius: 50%;
  display: block;
  font-size: 36px;
  height: 72px;
  line-height: 70px;
  width: 72px;
}
.sin-service:hover .icon i {
  border-width: 1px;
  border-style: solid;
  color: #fff;
}
.sin-service .content {
  margin-top: 12px;
}
.sin-service .content h3 {
  font-size: 16px;
  letter-spacing: 1px;
  line-height: 12px;
  text-transform: uppercase;
  margin: 0 0 12px;
}
.sin-service .content p {
  font-weight: 300;
}

service 2

free shipping

Lorem ipsum dummy text goes here

money back guarantee

Lorem ipsum dummy text goes here

safe shopping

Lorem ipsum dummy text goes here

online support

Lorem ipsum dummy text goes here


<div class="shipping-service-area-2">
<div class="container-fluid">
<div class="row">
<!-- Single Service -->
<div class="sin-service col-lg-3 col-sm-6 col-xs-12">
<!-- Service Icon -->
<div class="icon text-center"><i class="zmdi zmdi-car"></i></div>
<!-- Service Content -->
<div class="content fix">
<h3>free shipping</h3>
<p>Lorem ipsum dummy text goes here</p>
</div>
</div>
<!-- Single Service -->
<div class="sin-service col-lg-3 col-sm-6 col-xs-12">
<!-- Service Icon -->
<div class="icon text-center"><i class="zmdi zmdi-balance-wallet"></i></div>
<!-- Service Content -->
<div class="content fix">
<h3>money back guarantee</h3>
<p>Lorem ipsum dummy text goes here</p>
</div>
</div>
<!-- Single Service -->
<div class="sin-service col-lg-3 col-sm-6 col-xs-12">
<!-- Service Icon -->
<div class="icon text-center"><i class="zmdi zmdi-shield-security"></i></div>
<!-- Service Content -->
<div class="content fix">
<h3>safe shopping</h3>
<p>Lorem ipsum dummy text goes here</p>
</div>
</div>
<!-- Single Service -->
<div class="sin-service col-lg-3 col-sm-6 col-xs-12">
<!-- Service Icon -->
<div class="icon text-center"><i class="zmdi zmdi-headset-mic"></i></div>
<!-- Service Content -->
<div class="content fix">
<h3>online support</h3>
<p>Lorem ipsum dummy text goes here</p>
</div>
</div>
</div>
</div>
</div>


.shipping-service-area-2 {
  background: #fff;
  padding: 0;
}
.shipping-service-area-2 .sin-service {
  border-bottom: 1px solid #dddddd;
  padding-bottom: 64px;
  padding-top: 64px;
  border-right: 1px solid #dddddd;
  padding-left: 72px;
  text-align: left;
}
.sin-service:last-child {
  border-right: 0px solid #dddddd;
}
.sin-service .icon {
  display: block;
  float: left;
  margin-right: 20px;
}
.sin-service .icon i {
  border: 1px solid #dddddd;
  border-radius: 50%;
  display: block;
  font-size: 36px;
  height: 72px;
  line-height: 70px;
  width: 72px;
}
.sin-service:hover .icon i {
  border-width: 1px;
  border-style: solid;
  color: #fff;
}
.sin-service .content {
  margin-top: 12px;
}
.sin-service .content h3 {
  font-size: 16px;
  letter-spacing: 1px;
  line-height: 12px;
  text-transform: uppercase;
  margin: 0 0 12px;
}
.sin-service .content p {
  font-weight: 300;
}

Style Switcher

Select Layout
Chose Color
Chose Pattren
Chose Background