"New About Test"
Bootstrap 3.3.0 Snippet by sparkktv

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/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 ----------> <hr class="hr"> <div class="content-section"> <div class="container"> <div class="main-product-description text-center no-nudge"> <div class="icon-container"> <i class="fa fa-play fa-5x completed" aria-hidden="true"></i> <p class="series-type completed">Completed Series</p> </div> <div class="product-info-container"> <h2 class="normal-heading is-heavy is-uppercase">About Abby</h2> <p class="small-heading is-uppercase">Created By: Sassy Mohen</p> <p class="content-section--copy">Still believing in fairy-tale romance and love, Abby Freeman has a lot to learn. Newly single after breaking up with her high-school sweetheart, Abby finds herself in a dating market much changed since she last entered. Supported by her two more practical best friends Micah & Caroline, Abby begins her undying quest to find true love in LA...and maybe a little fun too.</p> <div class="social"> <h2 class="social-heading">Follow Us:</h2> <div class="social-icons"> <a class="facebook" href="http://facebook.com/aboutabby"><i class="fa fa-facebook-square fa-2x"></i></a> <a class="twitter" href="http://twitter.com/aboutabbyshow"><i class="fa fa-twitter-square fa-2x"></i></a> </div> </div> </div> </div> </div> </div> <hr class="hr">
@import url(//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css); .content-section {align-items:center;background-position:50% 50%;background-repeat:no-repeat;background-size:cover;display:flex;flex-wrap:wrap;justify-content:space-around;min-height:15rem;padding:3rem 0;width:100%;} .content-section .container {padding: 0 1.25rem;} .main-product-description .icon-container {margin:0 auto;max-width:5rem;} .main-product-description .icon-container {display:table-cell;width:25%;vertical-align:middle;} .main-product-description .product-info-container {display:table-cell;text-align:left;padding-right:5%;vertical-align:top;} .normal-heading.is-uppercase,.small-heading.is-uppercase{text-transform:uppercase;} .normal-heading.is-heavy{font-weight: 600;line-height: 1.16;margin: .25em 0;} .normal-heading {font-size: 2.25rem;} .small-heading {font-size: 1.125rem;font-weight: 500;line-height: 1;margin: 0 0 .5em;} .content-section--copy {font-size: 1.25rem;line-height: 1.2;margin: .5em 0 0;} .icon-container .completed{color:#325d88;} .icon-container .current{color:#d9534f;} .icon-container .series-type{font-size:13px;text-transform:uppercase;font-weight:600;} .social{display:inline-flex;align-items:center;vertical-align:top;} .social-heading{font-size:13px;text-transform:uppercase;padding-right:5px;font-weight:300;} .facebook:hover {color: #3b5998 !important;} .twitter:hover{color:#1da1f2 !important;} .social-icons .facebook, .twitter{color:#2d2d32;}

Related: See More


Questions / Comments: