<div class="container">
<div class="row">
<div class="col-md-4 Services-tab item">
<div class="folded-corner service_tab_1">
<div class="text"> <i class="fa fa-image fa-5x fa-icon-image"></i>
<p class="item-title">
<h3> Plan</h3>
</p><!-- /.item-title -->
<p> This is an amazing set of animated accordions based completely on CSS. They come oriented both vertically and horizontally in order to fit properly in your project. In order to see the slides, </p>
</div>
</div>
</div>
<div class="col-md-4 Services-tab item">
<div class="folded-corner service_tab_1">
<div class="text"> <i class="fa fa-lightbulb fa-5x fa-icon-image"></i>
<p class="item-title">
<h3> Design</h3>
</p><!-- /.item-title -->
<p> This is an amazing set of animated accordions based completely on CSS. They come oriented both vertically and horizontally in order to fit properly in your project. In order to see the slides, </p>
</div>
</div>
</div>
<div class="col-md-4 Services-tab item">
<div class="folded-corner service_tab_1">
<div class="text"> <i class="fa fa-user fa-5x fa-icon-image"></i>
<p class="item-title">
<h3> Market</h3>
</p>
<p> This is an amazing set of animated accordions based completely on CSS. They come oriented both vertically and horizontally in order to fit properly in your project. In order to see the slides, </p>
</div>
</div>
</div>
</div>
</div>
body {
background: #000000 !important
}
h3 {
color: #ec5626
}
.text {
color: #ec5626;
text-align: center
}
.folded-corner:hover .text {
visibility: visible;
color: #000000;
}
.Services-tab {
margin-top: 80px
}
.folded-corner {
padding: 60px 30px;
position: relative;
font-size: 100%;
text-decoration: none;
color: #999;
background: transparent;
transition: all ease .5s;
border: 1px solid #ec5626
}
.folded-corner:hover {
background-color: #ec5626
}
.folded-corner:before {
content: "";
position: absolute;
top: 0;
right: 0;
border-style: solid;
border-width: 0 0px 0px 0;
border-color: #ddd #000;
transition: all ease .3s
}
.folded-corner:hover:before {
background-color: #D00003;
border-width: 0 50px 50px 0;
border-color: #eee #000
}
.service_tab_1 {
background-color: #000
}
.service_tab_1:hover .fa-icon-image {
color: #000;
transform: scale(1.5)
}
.fa-icon-image {
color: #ec5626;
display: inline-block;
font-style: normal;
font-variant: normal;
font-weight: normal;
line-height: 1;
font-size-adjust: none;
font-stretch: normal;
-moz-font-feature-settings: normal;
-moz-font-language-override: normal;
text-rendering: auto;
transition: all .65s linear 0s;
text-align: center;
transition: all 1s cubic-bezier(.99, .82, .11, 1.41)
}