"About Test 2"
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 ----------> <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"> <h3 class="abouts__title">Our <span class="abouts__ribbon js-abouts-ribbon">Vibe</span></h3> <p class="abouts__copy">We believe everyone should be able to find communities of support, break down barriers, transcend borders and come together around shared interests and passions.</p> </div></div></section> <section class="dev js-blogs"> <div class="dev__angle js-parallaxed" data-speed="0.03"></div> <div class="dev__inner"> <div class="dev__item"> <img class="youtube" src="//res.cloudinary.com/sparkktv/image/upload/v1550599338/developed-with-youtube-sentence-case-dark_nz16mc.png"> </div></div></section>
.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;}

Related: See More


Questions / Comments: