"New About Test"
Bootstrap 3.3.0 Snippet by sparkktv

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<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">
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
@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;}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Bootstrap Wizard

Questions / Comments: