<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 ----------> <section id="feature" class="sec-padding sec-dark"> <div class="container"> <div class="row"> <div class="sec-title text-center"> <h2>Feature</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit Proin sodales.tincidunt sodales. Nam tellus velit hendrerit.</p> </div> <div class="col-md-4 col-sm-4 col-xs-12"> <div class="feature-item"> <div class="feature-icon"> <i class="fa fa-smile-o"></i> </div> <div class="feature-details text-center"> <h2>Responsive</h2> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit Proin sodales.tincidunt sodales. Nam tellus velit hendrerit. </p> </div> </div> </div> <div class="col-md-4 col-sm-4 col-xs-12"> <div class="feature-item"> <div class="feature-icon"> <i class="fa fa-smile-o"></i> </div> <div class="feature-details text-center"> <h2>Elegant</h2> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit Proin sodales.tincidunt sodales. Nam tellus velit hendrerit. </p> </div> </div> </div> <div class="col-md-4 col-sm-4 col-xs-12"> <div class="feature-item"> <div class="feature-icon"> <i class="fa fa-smile-o"></i> </div> <div class="feature-details text-center"> <h2>Minimal</h2> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit Proin sodales.tincidunt sodales. Nam tellus velit hendrerit. </p> </div> </div> </div> </div> </div> </section>

/* Feature Section */ .feature-icon { height: 108px; width: 108px; margin: 0 auto; background-color: #fff; text-align: center; line-height: 108px; border: 1px solid #ffb400; transform: rotate(45deg); position: relative; transition: all 0.3s ease; } .feature-icon .fa { display: inline-block; transform: rotate(-45deg); font-size: 35px; color: #ffb400; } .feature-item:hover .feature-icon .fa { opacity: 0.9; } .feature-icon:before { position: absolute; content: ""; height: 20%; border-left: 2px dashed #ffb400; transform: rotate(-43deg); left: 110%; top: 106px; transition: all 0.3s ease; } .feature-details { margin-top: 55px; padding: 35px; transition: all 0.3s ease; background-color: #fff; box-shadow: 0 1px 1px 1px rgba(236, 236, 236, 1); } .feature-details h2 { color: #555; font-size: 18px; text-transform: uppercase; font-weight: 600; margin: 0; } .feature-details p { font-weight: 300; margin-top: 10px; } .feature-item:hover .feature-details, .feature-item:hover .feature-icon, .feature-item:hover .feature-icon:before { border-color: rgba(236, 236, 236, 1); } .feature-item:hover .feature-details { box-shadow: 0 5px 5px 5px rgba(236, 236, 236, 1); } @media (max-width: 767px) { #feature { padding-bottom: 30px; } .feature-item { margin-bottom: 30px; } .feature-details { padding: 15px; } }