<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="iq-fancy-boxnew text-center"> <div class="iq-icon icon-bg "> <i aria-hidden="true" class="ion-ios-monitor-outline"></i> </div> <div class="fancy-content"> <h5 class="iq-tw-6 iq-pt-20 iq-pb-10">High Resolution</h5> <p>Lorem ipsum madolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.</p> </div> </div> </div> </div>

.iq-fancy-boxnew { padding: 40px 15px 25px 15px; overflow: hidden; position: relative; background: #fff; } .iq-fancy-boxnew .iq-icon { border-radius: 90px; display: inline-block; height: 86px; width: 86px; line-height: 86px; text-align: center; color: #fff; background: #4ac4f3; -webkit-transition: all 0.5s ease-out 0s; -moz-transition: all 0.5s ease-out 0s; -ms-transition: all 0.5s ease-out 0s; -o-transition: all 0.5s ease-out 0s; transition: all 0.5s ease-out 0s; } .iq-fancy-boxnew .iq-icon i { font-size: 46px; } .iq-fancy-boxnew .fancy-content h5 { z-index: 9; position: relative; } .iq-works-imgs { width: 100%; } .iq-fancy-boxnew.text-center .icon-bg { text-align: center; display flex; align-content: center; align-items: center; justify-content: center; width: 86px; height: 86px; margin: auto; position: relative; background-color: #4ac4f3; background-image: linear-gradient(-45deg, #4ac4f3 0%, #4ac4f3 100%); border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; box-shadow: 15px 15px 50px rgba(0, 0, 0, 0.2); animation: one-animated 10s infinite; overflow: hidden; }