"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
<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">
<section class="padded-container about">
<div class="about__grid" aa-region="about">
<div class="about__header">
<div class="about__header-about">About</div>
<div class="about__header-showTitle">About Abby</div>
<div class="about__header-tuneInTime">Created By: Sassy Mohen</div></div>
<div>·</div>
<div><div class="about__description with-text-clamp" id="js-about-description" style="overflow: hidden;">
<div class="about__copy" id="js-about-copy" style="display: inline;">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.</div></div>
<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></section>
<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);
body{background:#2d2d32;}
.about{color:#fff;}
.padded-container{position:relative;padding-left:20px;padding-right:20px;width:100%;box-sizing:border-box;}
section{margin-bottom:0;}
.about__grid {display: -ms-grid;-ms-grid-columns: (1fr)[12];display: grid;grid-gap: 15px 10px;grid-template-columns: repeat(12,1fr);}
.about__header-about {margin-bottom: 8px;font-size: 18px;font-weight: 400;line-height: 22px;}
.about__header-showTitle {margin-bottom: 8px;font-size: 20px;font-weight: 400;line-height: 24px;}
.about__header-tuneInTime, .about_page--tuneInTime {margin-bottom: 24px;font-size: 14px;font-weight: 400;line-height: 18px;color: #999;}
.about__description.with-text-clamp {max-height: 182px;overflow: hidden;}
.about__description {margin-bottom: 12px;}
.about a {color: #0092f3;}
.about__description.with-text-clamp .about__copy {display: -webkit-box !important;-webkit-box-orient: vertical;-webkit-line-clamp: 7;overflow: hidden;}
.about__copy {font-size: 16px;line-height: 26px;-webkit-text-size-adjust: 100%;}
.social {display: inline-flex;align-items: center;vertical-align: top;}
.social-heading {font-size:13px!important;text-transform:uppercase;padding-right:5px;font-weight:300;}
.social-icons .facebook,.social-icons .twitter {color: #fff;}
.facebook:hover {color: #3b5998 !important;}
.twitter:hover{color:#1da1f2 !important;}
@media(min-width:768px){.about__grid > :nth-child(2) {grid-column: span 1;}
.about__grid > :nth-child(3) {grid-column: span 8;}
.about__grid > :nth-child(1) {grid-column: span 3;}
.padded-container{padding-left:40px;padding-right:40px;}
.about__header-showTitle {margin-bottom: 24px;font-size: 32px;font-weight: 700;line-height: 38px;}
.about__header-about {margin-bottom: 24px;font-size: 20px;font-weight: 400;line-height: 24px;}}
@media(min-width:1440px){.padded-container{padding-left:95px;padding-right:95px;}}
@media(max-width:767px){.about__grid > * {grid-column: span 12;}
.about__header-tuneInTime, .about_page--tuneInTime {margin-bottom: 25px;}}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Light Bootstrap Dashboard React

Questions / Comments: