<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://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous"> <!-- Section Vantagens --> <section id="vantagens"> <div class="container pt-5"> <div class="row"> <div class="col-md-12 text-center"> <h3>ESTAS SÃO AS <br> <span class="blue">VANTAGENS DE SER TREE</span> </h3> <img src="images/bottom-text-sobre.png" alt="cor de fundo"> <p>Você tem inúmeras vantagens ao ser Tree, veja abaixo algumas delas</p> <div class="row row-margin-bottom mt-5"> <div class="col-md-6 no-padding lib-item" data-category="view"> <div class="lib-panel"> <div class="row box-shadow w-100"> <div class="col-md-6 image-row"> <img src="https://http2.mlstatic.com/cards-yugioh-D_NQ_NP_271221-MLB20703057072_052016-F.jpg"> <div class="icon-round bg-success-gradiant text-white display-5"> <div class="ozi-icon"> <i aria-hidden="true" class="fas fa-piggy-bank" style=""></i> </div> </div> </div> <div class="col-md-6 card-text"> <div class="lib-row lib-header text-left pl-5"> <span class="blue">Descontos de<br> até 50% </span> <div class="lib-header-seperator"></div> </div> <div class="lib-row lib-desc pl-5"> Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor </div> </div> </div> </div> </div> <div class="col-md-6 no-padding lib-item" data-category="view"> <div class="lib-panel"> <div class="row box-shadow w-100"> <div class="col-md-6 image-row"> <img src="https://http2.mlstatic.com/cards-yugioh-D_NQ_NP_271221-MLB20703057072_052016-F.jpg"> <div class="icon-round bg-success-gradiant text-white display-5"> <div class="ozi-icon"> <i aria-hidden="true" class="fas fa-piggy-bank" style=""></i> </div> </div> </div> <div class="col-md-6 card-text"> <div class="lib-row lib-header text-left pl-5"> <span class="blue">Descontos de<br> até 50% </span> <div class="lib-header-seperator"></div> </div> <div class="lib-row lib-desc pl-5"> Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor </div> </div> </div> </div> </div> <div class="col-md-6 no-padding lib-item" data-category="view"> <div class="lib-panel"> <div class="row box-shadow w-100"> <div class="col-md-6 image-row"> <img src="https://http2.mlstatic.com/cards-yugioh-D_NQ_NP_271221-MLB20703057072_052016-F.jpg"> <div class="icon-round bg-success-gradiant text-white display-5"> <div class="ozi-icon"> <i aria-hidden="true" class="fas fa-piggy-bank" style=""></i> </div> </div> </div> <div class="col-md-6 card-text"> <div class="lib-row lib-header text-left pl-5"> <span class="blue">Descontos de<br> até 50% </span> <div class="lib-header-seperator"></div> </div> <div class="lib-row lib-desc pl-5"> Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor </div> </div> </div> </div> </div> <div class="col-md-6 no-padding lib-item" data-category="view"> <div class="lib-panel"> <div class="row box-shadow w-100"> <div class="col-md-6 image-row"> <img src="https://http2.mlstatic.com/cards-yugioh-D_NQ_NP_271221-MLB20703057072_052016-F.jpg"> <div class="icon-round bg-success-gradiant text-white display-5"> <div class="ozi-icon"> <i aria-hidden="true" class="fas fa-piggy-bank" style=""></i> </div> </div> </div> <div class="col-md-6 card-text"> <div class="lib-row lib-header text-left pl-5"> <span class="blue">Descontos de<br> até 50% </span> <div class="lib-header-seperator"></div> </div> <div class="lib-row lib-desc pl-5"> Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor </div> </div> </div> </div> </div> </div> </div> </div> </div> </section>

//Section Vantagens #vantagens { background-color: #F9F9F9; } .lib-row { width: 100%; } .icon-round { width: 80px; line-height: 70px; text-align: center; padding-top: 8px; border-radius: 100%; display: inline-block; position: absolute; right: -38px; top: 20px; background-color: #2CAFFD; } .ozi-icon i { font-size: 28px; padding: 0px; font-weight: bold; } .card-text { position: initial; } .lib-panel { margin-bottom: 20Px; } .lib-panel img { width: 100%; background-color: transparent; } .lib-panel .row, .lib-panel .col-md-6 { margin: 0; padding: 0; background-color: #FFFFFF; } .lib-panel .lib-row { padding: 0 20px 0 20px; } .lib-panel .lib-row.lib-header { background-color: #FFFFFF; font-size: 20px; padding: 10px 20px 0 20px; } .lib-panel .lib-row.lib-header .lib-header-seperator { height: 2px; width: 26px; background-color: #2CAFFD; margin: 7px 0 7px 0; } .lib-panel .lib-row.lib-desc { position: relative; height: auto; display: block; font-size: 13px; } .lib-panel .lib-row.lib-desc a{ position: absolute; width: 100%; bottom: 10px; left: 20px; } .row-margin-bottom { margin-bottom: 20px; } .box-shadow { -webkit-box-shadow: 0 0 10px 0 rgba(0,0,0,.10); box-shadow: 0 0 10px 0 rgba(0,0,0,.10); }