"About Test 2"
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
30
31
32
33
34
35
36
37
<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 ---------->
<section class="hero">
<div class="hero__inner">
<h1 class="hero__title">
<span class="hero__title-text">About YouTube</span>
<img src="/images/logo.png">
</h1>
<h2 class="hero__mission-intro js-header-sub-logo">Our mission is to give content creators a platform to help grow their audience.</h2>
<iframe width="1040" height="585" src="https://www.youtube.com/embed/GPDjgCptb1Q?fs=0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<p class="hero__mission">Our goal is to make Online TV and Independent TV the next big thing and grow the amount of content available.</p>
</div>
<div class="hero__angle-container">
<div class="hero__angle hero__angle--top js-parallaxed" data-speed="0.03"></div>
<div class="hero__angle hero__angle--bottom js-parallaxed" data-speed="0.03"></div>
</div></section>
<section class="abouts">
<div class="abouts__inner js-abouts-ribbons">
<h2 class="abouts__section-title">Sparkk TV was founded in 2005 as VBCtv and was rebranded in May of 2014. We offer a way to watch the best Webseries online in one place but give them a more traditional TV network look and feel.
Our webseries air NEW weekly and are commecial free; New Content is added daily and all series are available On-Demand after first showing.
You can watch our shows online, using our app or on your TV via Roku (Chromecast), Apple TV (Airplay), Amazon Fire TV or your Xbox.</h2>
<div class="abouts__item js-parallaxed" data-speed="0.03">
<h3 class="abouts__title">Why Come To <span class="abouts__ribbon js-abouts-ribbon">Sparkk TV?</span></h3>
<p class="abouts__copy">We offer content curation to our content creators using the YouTube API, we allow you a platform to grow your webseries and give your fans/viewers and easier way to find your series while we also promote your series. All views on our site count towards your YouTube views and you monitize your own content.</p>
</div>
<div class="abouts__item js-parallaxed" data-speed="0.08">
<h3 class="abouts__title">Our <span class="abouts__ribbon js-abouts-ribbon">Essence</span></h3>
<p class="abouts__copy">We believe everyone should have easy, open access to information and that video is a powerful force for education, building understanding, and documenting world events, big and small.</p>
</div>
<div class="abouts__item js-parallaxed" data-speed="0.03">
<h3 class="abouts__title">Our <span class="abouts__ribbon js-abouts-ribbon">Promise</span></h3>
<p class="abouts__copy">We believe everyone should have a chance to be discovered, build a business and succeed on their own terms, and that people—not gatekeepers—decide what’s popular.</p>
</div>
<div class="abouts__item js-parallaxed" data-speed="0.08">
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
.hero {overflow:hidden;position:relative;}
.hero__inner {display: flex;flex-wrap: wrap;margin: 0 auto;max-width: 1040px;width: 100%;align-items: center;flex-flow: column;}
.hero__title {margin-top: 100px;}
.hero__title-text {clip: rect(1px, 1px, 1px, 1px);color: #000;height: 1px;overflow: hidden;position: absolute !important;user-select: none;width: 1px;}
.hero__title img {height:85px;}
.hero__mission-intro {padding-left: 32px;padding-right: 32px;font-size: 32px;font-weight: 300;line-height: 1.3125;margin-top: 24px;max-width: 550px;text-align: center;width: 100%;}
.hero__mission {padding-left: 32px;padding-right: 32px;font-size: 32px;font-weight: 300;line-height: 1.3125;margin: 100px 0 210px;max-width: 600px;text-align: center;width: 100%;}
.hero__angle-container {background: #f5f5f5;bottom: 0;height: 66%;left: 0;position: absolute;width: 100%;z-index: -1;}
.hero__angle--top {height: 300px;right: 0;top: -270px;transform: rotate(-6deg);transform-origin: right top;}
.hero__angle {background: #fff;height: 1px;position: absolute;width: 120%;z-index: 10;}
.hero__angle--bottom {bottom: -270px;height: 300px;right: 0;transform: rotate(6deg);transform-origin: right bottom;}
.abouts {position: relative;}
.abouts__inner {padding-left: 32px;padding-right: 32px;display: flex;flex-wrap: wrap;margin: 0 auto;max-width: 1040px;width: 100%;align-items: center;flex-flow: column;padding-top: 40px;}
.abouts__section-title {font-size: 32px;font-weight: 300;line-height: 1.3125;margin-bottom: 100px;max-width:1000px;text-align:center;width: 100%;}
.abouts__item:nth-of-type(2n+1) {align-self: flex-start;padding-right: 40px;}
.abouts__item:nth-of-type(2n) {align-self: flex-end;padding-left: 40px;}
.abouts__item {margin-bottom: 80px;width: 50%;}
.abouts__title {font-size: 45px;font-weight: 700;line-height: 1.15556;}
.abouts__ribbon {display: inline;position: relative;}
.abouts__ribbon::after {background:#d9534f;bottom: 0;content: "";display: block;height: 45%;left: -10px;position: absolute;right: -10px;z-index: -1;}
.abouts__copy {color: #292929;font-size: 14px;font-weight: 300;line-height: 1.57143;margin-top: 16px;}
.dev {background: #f5f5f5;overflow: hidden;padding-bottom: 64px;padding-top: 268px;position: relative;z-index: 10;}
.dev__angle {background: #fff;height: 300px;position: absolute;right: 0;top: -270px;transform: rotate(-6deg);transform-origin: right top;width: 120%;z-index: -1;}
.dev__inner {padding-left: 32px;padding-right: 32px;display: flex;flex-wrap: wrap;margin: 0 auto;max-width: 1040px;width: 100%;justify-content: center;}
.dev__item {padding: 0 32px;position: relative;text-align: center;width: 50%;z-index: 20;}
.dev__item img{display:block;max-width:100%;height:auto;vertical-align:middle;margin-top:-100px;padding-bottom:50px;}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Material Kit Pro

Questions / Comments: