<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 ---------->
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css">
<div class="background2">
<div class='container'>
<h1>Services</h1>
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-4">
<div class="services-box leftReveal" data-sr-id="13">
<i class="fa fa-code fa-2x services-icon"></i>
<h3 class="service-name">1. Web Design</h3>
<p class="text-small">Lorem ipsum dolor sit amet, consectet adipiscing elit. Cras est urna, imperd eget sem at, pellentes que cursus elit.</p>
<button type="button" class="btn btn-default mt10" data-toggle="modal" data-target="#item1-services">Info</button>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-4">
<div class="services-box leftReveal" data-sr-id="13">
<i class="fa fa-code fa-2x services-icon"></i>
<h3 class="service-name">1. Web Design</h3>
<p class="text-small">Lorem ipsum dolor sit amet, consectet adipiscing elit. Cras est urna, imperd eget sem at, pellentes que cursus elit.</p>
<button type="button" class="btn btn-default mt10" data-toggle="modal" data-target="#item1-services">Info</button>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-4">
<div class="services-box leftReveal" data-sr-id="13">
<i class="fa fa-code fa-2x services-icon"></i>
<h3 class="service-name">1. Web Design</h3>
<p class="text-small">Lorem ipsum dolor sit amet, consectet adipiscing elit. Cras est urna, imperd eget sem at, pellentes que cursus elit.</p>
<button type="button" class="btn btn-default mt10" data-toggle="modal" data-target="#item1-services">Info</button>
</div>
</div>
</div>
</div>
</div>
.background2 {
background-color: #1d1d1d;
}
.services-box {
padding: 30px;
background-color: #212121;
border-left: 2px solid #292929;
-webkit-transition: 0.6s;
-moz-transition: 0.6s;
-o-transition: 0.6s;
transition: 0.6s;
}
.services-icon {
font-size: 40px;
color: #8980fe;
}
.service-name {
margin-bottom: 15px;
margin-top: 15px;
}
.text-small {
font-size: 16px;
color: #fff;
}
.btn-default {
color: #fff;
background-color: transparent;
border-color: #535353;
}
.btn {
border-radius: 45px;
margin-bottom: 1px;
font-family: 'Montserrat', sans-serif;
text-transform: uppercase;
font-weight: 300;
letter-spacing: 2px;
font-size: 10px;
-webkit-transition: all 0.5s ease 0s;
-moz-transition: all 0.5s ease 0s;
-o-transition: all 0.5s ease 0s;
transition: all 0.5s ease 0s;
}
.mt10 {
margin-top: 10px !important;
}
.h3, h3 {
font-size: 24px;
}
.h2, .h3, .h4, .h5, .h6, h2, h3, h4, h5, h6 {
font-weight: 100;
color: #fff;
}
