<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="container">
<div class="row">
<h2>Create your snippet's HTML, CSS and Javascript in the editor tabs</h2>
<div class="col-6">
<div class="mydiv">
<div class="service-sec-list srvc-bg-nx srcl1">
<img src="https://www.dkstudio.in/img/logo.png" alt="service">
<h5 class="mb10">Web Development</h5>
<ul class="-service-list">
<li> <a href="#">PHP</a> </li>
<li> <a href="#"><strong>.</strong>Net</a> </li>
<li> <a href="#">Java</a> </li>
<li> <a href="#">Joomla</a></li>
</ul>
<p>Lorem Ipsum is text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500.</p>
</div>
</div>
</div>
</div>
</div>
*, h1, h2, h3, h4, h5, h6, p, ul {
margin: 0;
padding: 0;
}
.mydiv { visibility: visible;
animation-delay: 0.4s;
animation-name: fadeInUp;
will-change: transform;
transform: perspective(1000px) rotateX(0deg) rotateY(0deg) scale3d(1, 1, 1);}
{
visibility: visible;
animation-delay: 0.4s;
animation-name: fadeInUp;
will-change: transform;
transform: perspective(1000px) rotateX(0deg) rotateY(0deg) scale3d(1, 1, 1);
}
.service-sec-list, .service-sec-list:hover, .service-sec-list:hover p {
-moz-transition: all .8s;
-o-transition: all .8s;
-webkit-transition: all .8s;
transition: all .8s;
}
.service-sec-list {
padding: 52px 25px;
}
.srvc-bg-nx {
background: #fff;
border-radius: 6px;
margin: 0 10px;
height: 240px;
-webkit-box-shadow: 0 3.4px 2.7px -30px rgba(0,0,0,.059), 0 8.2px 8.9px -30px rgba(0,0,0,.071), 0 25px 40px -30px rgba(0,0,0,.2);
box-shadow: 0 3.4px 2.7px -30px rgba(0,0,0,.059), 0 8.2px 8.9px -30px rgba(0,0,0,.071), 0 25px 40px -30px rgba(0,0,0,.2);
}
.srcl1 {
background: #f3f5ff;
border-bottom: 4px solid #b0bdff;
}
.srvc-bg-nx {
overflow: hidden;
}
* {
-webkit-font-smoothing: antialiased;
-moz-os-font-smoothing: grayscale;
box-sizing: border-box;
vertical-align: baseline;
}
.service-sec-list img {
-moz-transition: width .5s,height .5s;
-webkit-transition: width .5s,height .5s;
transition: width .5s,height .5s;
height: 60px;
width: 60px;
margin-bottom: 10px;
}
html .mb10 {
margin-bottom: 10px;
}
h5 {
font-size: 20px;
line-height: 30px;
}
ul {
list-style: none;
}
.-service-list li:first-child {
padding-left: 0;
}
.-service-list li {
list-style: none;
padding: 0 8px;
border-right: 1px solid #d4d4d4;
display: inline-block;
}
.-service-list li, .common-heading-2>span, .dropcap, .sctxt {
text-transform: uppercase;
}
.-service-list li a {
font-size: 13px;
color: #6a6a8e;
text-transform: uppercase;
text-decoration: none;
padding-bottom: 5px;
display: inline-block;
font-weight: 700;
}
a {
-webkit-transition: 1.2s cubic-bezier(.17,.85,.438,.99);
-o-transition: 1.2s cubic-bezier(.17,.85,.438,.99);
transition: 1.2s cubic-bezier(.17,.85,.438,.99);
}
.service-sec-list p {
display: none;
}
.service-sec-list p {
font-size: 15px;
line-height: 24px;
margin: 14px 0 0;
}
.service-sec-list:hover img {
height: 0;
width: 60px;
}
.service-sec-list:hover p {
display: block;
}
