"New Design"
Bootstrap 4.1.1 Snippet by briankolins

<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 ----------> <!-- This snippet uses Font Awesome 5 Free as a dependency. You can download it at fontawesome.io! --> <style> body { background-color: #ddffdd; } h5 { color: black; font-size:200%; } </style> <section class="pricing py-5"> <div class="container"> <div class="row"> <!-- 1 Tier --> <div class="col-lg-4"> <div class="card mb-5 mb-lg-0"> <div class="card-body" style=background-color:#aa99ff> <h5 align="center"> SIE Study Course</h5> <h6 class="card-price text-center">$149<span class="period"> for 12 weeks of access</span></h6> <hr> <ul class="fa-ul"> <li><span class="fa-li"><i class="fas fa-check"></i></span>Starting Wednesday, August 7th</li> <li><span class="fa-li"><i class="fas fa-check"></i></span>6, 3-hour classes</li> <li><span class="fa-li"><i class="fas fa-check"></i></span><a href="http://www.TSG.mx/SIEStudy">www.TSG.mx/SIESTudy</a></li> <li><span class="fa-li"><i class="fas fa-check"></i></span>All of the material needed for success on the SIE, spread out to give time for processing and understanding.</li> </ul> <a href="#" class="btn btn-block btn-primary text-uppercase">Button</a> </div> </div> </div> <!-- 2 Tier --> <div class="col-lg-4"> <div class="card mb-5 mb-lg-0"> <div class="card-body" style=background-color:#00cc00> <h5 align="center" >SIE Cram Course (option 1)</h5> <h6 class="card-price text-center">$119<span class="period"> for 10 weeks of access</span></h6> <hr> <ul class="fa-ul"> <li><span class="fa-li"><i class="fas fa-check"></i></span>Sat, July 26th and Sun, 27th</li> <li><span class="fa-li"><i class="fas fa-check"></i></span>12p-9p Eastern, Both Days!</li> <li><span class="fa-li"><i class="fas fa-check"></i></span>Intensive 2-day course covering ALL material needed for success on the SIE exam!</li> <li><span class="fa-li"><i class="fas fa-check"></i></span><a href="http://www.TSG.mx/SIEStudy">www.TSG.mx/SIESTudy</a></li> </ul> <a href="#" class="btn btn-block btn-primary text-uppercase">Button</a> </div> </div> </div> <!-- 3 Tier --> <div class="col-lg-4"> <div class="card"> <div class="card-body" style=background-color:#aa99ff> <h5 align="center">SIE Cram Course (option 2)</h5> <h6 class="card-price text-center">$119<span class="period"> for 10 weeks of access</span></h6> <hr> <ul class="fa-ul"> <li><span class="fa-li"><i class="fas fa-check"></i></span>Sat, August 17th and Sun, 18th</li> <li><span class="fa-li"><i class="fas fa-check"></i></span>12p-9p Eastern, Both Days!</li> <li><span class="fa-li"><i class="fas fa-check"></i></span>Intensive 2-day course covering ALL material needed for success on the SIE exam!</li> <li><span class="fa-li"><i class="fas fa-check"></i></span><a href="http://www.TSG.mx/SIEStudy">www.TSG.mx/SIESTudy</a></li> </ul> <a href="#" class="btn btn-block btn-primary text-uppercase">Button</a> </div> </div> </div> <!-- 4 Tier --> <div class="col-lg-4"> <div class="card mb-5 mb-lg-0"> <div class="card-body" style=background-color:#00cc00> <h5 align="center" >SIE Cram Course (option 1)</h5> <h6 class="card-price text-center">$119<span class="period"> for 10 weeks of access</span></h6> <hr> <ul class="fa-ul"> <li><span class="fa-li"><i class="fas fa-check"></i></span>Sat, July 26th and Sun, 27th</li> <li><span class="fa-li"><i class="fas fa-check"></i></span>12p-9p Eastern, Both Days!</li> <li><span class="fa-li"><i class="fas fa-check"></i></span>Intensive 2-day course covering ALL material needed for success on the SIE exam!</li> <li><span class="fa-li"><i class="fas fa-check"></i></span><a href="http://www.TSG.mx/SIEStudy">www.TSG.mx/SIESTudy</a></li> </ul> <a href="#" class="btn btn-block btn-primary text-uppercase">Button</a> </div> </div> </div> <!-- 5 Tier --> <div class="col-lg-4"> <div class="card"> <div class="card-body" style=background-color:#aa99ff> <h5 align="center">SIE Cram Course (option 2)</h5> <h6 class="card-price text-center">$119<span class="period"> for 10 weeks of access</span></h6> <hr> <ul class="fa-ul"> <li><span class="fa-li"><i class="fas fa-check"></i></span>Sat, August 17th and Sun, 18th</li> <li><span class="fa-li"><i class="fas fa-check"></i></span>12p-9p Eastern, Both Days!</li> <li><span class="fa-li"><i class="fas fa-check"></i></span>Intensive 2-day course covering ALL material needed for success on the SIE exam!</li> <li><span class="fa-li"><i class="fas fa-check"></i></span><a href="http://www.TSG.mx/SIEStudy">www.TSG.mx/SIESTudy</a></li> </ul> <a href="#" class="btn btn-block btn-primary text-uppercase">Button</a> </div> </div> </div> <div class="col-lg-4"> <div class="card mb-5 mb-lg-0"> <div class="card-body" style=background-color:#00cc00> <h5 align="center" >SIE Cram Course (option 1)</h5> <h6 class="card-price text-center">$119<span class="period"> for 10 weeks of access</span></h6> <hr> <ul class="fa-ul"> <li><span class="fa-li"><i class="fas fa-check"></i></span>Sat, July 26th and Sun, 27th</li> <li><span class="fa-li"><i class="fas fa-check"></i></span>12p-9p Eastern, Both Days!</li> <li><span class="fa-li"><i class="fas fa-check"></i></span>Intensive 2-day course covering ALL material needed for success on the SIE exam!</li> <li><span class="fa-li"><i class="fas fa-check"></i></span><a href="http://www.TSG.mx/SIEStudy">www.TSG.mx/SIESTudy</a></li> </ul> <a href="#" class="btn btn-block btn-primary text-uppercase">Button</a> </div> </div> </div> </div> </div> </section>
.row.heading h2 { color: #fff; font-size: 52.52px; line-height: 95px; font-weight: 400; text-align: center; margin: 0 0 40px; padding-bottom: 20px; text-transform: uppercase; } ul{ margin:0; padding:0; list-style:none; } .heading.heading-icon { display: block; } .padding-lg { display: block; padding-top: 60px; padding-bottom: 60px; } .practice-area.padding-lg { padding-bottom: 55px; padding-top: 55px; } .practice-area .inner{ border:1px solid #999999; text-align:center; margin-bottom:28px; padding:40px 25px; } .our-webcoderskull .cnt-block:hover { box-shadow: 0px 0px 10px rgba(0,0,0,0.3); border: 0; } .practice-area .inner h3{ color:#3c3c3c; font-size:24px; font-weight:500; font-family: 'Poppins', sans-serif; padding: 10px 0; } .practice-area .inner p{ font-size:14px; line-height:22px; font-weight:400; } .practice-area .inner img{ display:inline-block; } .our-webcoderskull{ background: url("http://www.webcoderskull.com/img/right-sider-banner.png") no-repeat center top / cover; } .our-webcoderskull .cnt-block{ float:left; width:100%; background:#fff; padding:30px 20px; text-align:center; border:2px solid #d5d5d5; margin: 0 0 28px; } .our-webcoderskull .cnt-block figure{ width:148px; height:148px; border-radius:100%; display:inline-block; margin-bottom: 15px; } .our-webcoderskull .cnt-block img{ width:148px; height:148px; border-radius:100%; } .our-webcoderskull .cnt-block h3{ color:#2a2a2a; font-size:20px; font-weight:500; padding:6px 0; text-transform:uppercase; } .our-webcoderskull .cnt-block h3 a{ text-decoration:none; color:#2a2a2a; } .our-webcoderskull .cnt-block h3 a:hover{ color:#337ab7; } .our-webcoderskull .cnt-block p{ color:#2a2a2a; font-size:13px; line-height:20px; font-weight:400; } .our-webcoderskull .cnt-block .follow-us{ margin:20px 0 0; } .our-webcoderskull .cnt-block .follow-us li{ display:inline-block; width:auto; margin:0 5px; } .our-webcoderskull .cnt-block .follow-us li .fa{ font-size:24px; color:#767676; } .our-webcoderskull .cnt-block .follow-us li .fa:hover{ color:#025a8e; }

Related: See More


Questions / Comments: