"q"
Bootstrap 3.3.0 Snippet by exigentinc

<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="sec-pad home-items-left" id="diffusez"> <div class="container"> <div class="row"> <div class="col-sm-5 "> <h2>Broadcast anywhere</h2> <p> Encoding and delivery are optimized to guarantee video that streams to any screen in the best quality possible. </p> <p> api.video accepts 4K broadcasts and can adapt the stream for any network. </p> <!-- <div class="comment"><div class="comment-txt">Video playback was critial for us and api.video answered all our criteria.</div><div class="comment-author">Dymitri - Web developer at GE</div></div> --> </div> <div class="col-sm-5 col-sm-offset-2 "> <div class="overview-img res-margin-sm "> <div class="overview-img res-margin-sm"> <img src="https://www-static.api.video/image/video-4-k.svg" alt="api.video accepts 4K broadcast"> </div> </div> </div> </div> </div> </section> <section class="home-items-right" id="gerez"> <div class="container"> <div class="row"> <div class="col-sm-5 "> <div class="overview-img res-margin-sm"> <img src="https://www-static.api.video/image/caracters-1.svg" alt="A webservice built to answer the most demanding video and streaming needs"> </div> </div> <div class="col-sm-5 col-sm-offset-2"> <h2>Manage any volume of videos</h2> <p> No matter the screen, size, quality, or bitrate, api.video can manage it for you. Our webservice is built to answer the most demanding video and streaming needs. </p> </div> <!-- <div class="comment"><div class="comment-txt">Best video service! Love it.</div><div class="comment-author">Paul Gullarm - CEO at Lyft</div></div> --> </div> </div> </section>
/*! CSS Used from: https://www-static.api.video/css/vendor.bundle.css */ section { display: block; } img { border: 0; } @media print { *,:after,:before { color: #000!important; text-shadow: none!important; background: 0 0!important; -webkit-box-shadow: none!important; box-shadow: none!important; } img { page-break-inside: avoid; } img { max-width: 100%!important; } h2,p { orphans: 3; widows: 3; } h2 { page-break-after: avoid; } } * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } :after,:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } img { vertical-align: middle; } h2 { font-family: inherit; font-weight: 500; line-height: 1.1; color: inherit; } h2 { margin-top: 20px; margin-bottom: 10px; } h2 { font-size: 30px; } p { margin: 0 0 10px; } .container { padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto; } @media (min-width:768px) { .container { width: 750px; } } @media (min-width:992px) { .container { width: 970px; } } @media (min-width:1200px) { .container { width: 1170px; } } .row { margin-right: -15px; margin-left: -15px; } .col-sm-5 { position: relative; min-height: 1px; padding-right: 15px; padding-left: 15px; } @media (min-width:768px) { .col-sm-5 { float: left; } .col-sm-5 { width: 41.66666667%; } .col-sm-offset-2 { margin-left: 16.66666667%; } } .container:after,.container:before,.row:after,.row:before { display: table; content: " "; } .container:after,.row:after { clear: both; } /*! CSS Used from: https://www-static.api.video/css/style.css */ h2 { font-size: 40px; font-weight: bold; font-style: normal; font-stretch: normal; line-height: 1.1; padding-bottom: 30px; letter-spacing: 1.3px; color: #545454; } .home-items-left { margin-bottom: 40px; } .home-items-left img { width: 100%; } ::-webkit-input-placeholder { font-style: italic; color: rgba(0, 0, 0, 0.27); } :-moz-placeholder { font-style: italic; color: rgba(0, 0, 0, 0.27); } ::-moz-placeholder { font-style: italic; color: rgba(0, 0, 0, 0.27); } :-ms-input-placeholder { font-style: italic; color: rgba(0, 0, 0, 0.27); } ::-webkit-scrollbar { -webkit-appearance: none; width: 7px; } ::-webkit-scrollbar-thumb { border-radius: 5px; background-color: rgba(0,0,0,.3); -webkit-box-shadow: 0 0 1px rgba(255,255,255,.6); } .sec-pad { padding: 80px 0px; } img { max-width: 100%; height: auto; } @media only screen and (max-width : 992px) { h2 { font-size: 26px; line-height: 1.3; } .res-margin-sm { margin-bottom: 30px; } .sec-pad { padding: 70px 0px; } } @media only screen and (max-width : 767px) { h2 { font-size: 30px; } .container { padding-left: 30px; padding-right: 30px; max-width: 100%; } .sec-pad { padding: 50px 0; } } @media only screen and (max-width : 480px) { .container { padding-left: 35px; padding-right: 35px; } } /*! CSS Used from: https://www-static.api.video/css/vendor.bundle.css */ section { display: block; } img { border: 0; } @media print { *,:after,:before { color: #000!important; text-shadow: none!important; background: 0 0!important; -webkit-box-shadow: none!important; box-shadow: none!important; } img { page-break-inside: avoid; } img { max-width: 100%!important; } h2,p { orphans: 3; widows: 3; } h2 { page-break-after: avoid; } } * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } :after,:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } img { vertical-align: middle; } h2 { font-family: inherit; font-weight: 500; line-height: 1.1; color: inherit; } h2 { margin-top: 20px; margin-bottom: 10px; } h2 { font-size: 30px; } p { margin: 0 0 10px; } .container { padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto; } @media (min-width:768px) { .container { width: 750px; } } @media (min-width:992px) { .container { width: 970px; } } @media (min-width:1200px) { .container { width: 1170px; } } .row { margin-right: -15px; margin-left: -15px; } .col-sm-5 { position: relative; min-height: 1px; padding-right: 15px; padding-left: 15px; } @media (min-width:768px) { .col-sm-5 { float: left; } .col-sm-5 { width: 41.66666667%; } .col-sm-offset-2 { margin-left: 16.66666667%; } } .container:after,.container:before,.row:after,.row:before { display: table; content: " "; } .container:after,.row:after { clear: both; } /*! CSS Used from: https://www-static.api.video/css/style.css */ h2 { font-size: 40px; font-weight: bold; font-style: normal; font-stretch: normal; line-height: 1.1; padding-bottom: 30px; letter-spacing: 1.3px; color: #545454; } .home-items-right { margin-bottom: 40px; } .home-items-right img { width: 100%; } @media only screen and (max-width: 767px) { .home-items-right img { display: block; margin: auto; } } ::-webkit-input-placeholder { font-style: italic; color: rgba(0, 0, 0, 0.27); } :-moz-placeholder { font-style: italic; color: rgba(0, 0, 0, 0.27); } ::-moz-placeholder { font-style: italic; color: rgba(0, 0, 0, 0.27); } :-ms-input-placeholder { font-style: italic; color: rgba(0, 0, 0, 0.27); } ::-webkit-scrollbar { -webkit-appearance: none; width: 7px; } ::-webkit-scrollbar-thumb { border-radius: 5px; background-color: rgba(0,0,0,.3); -webkit-box-shadow: 0 0 1px rgba(255,255,255,.6); } img { max-width: 100%; height: auto; } @media only screen and (max-width : 992px) { h2 { font-size: 26px; line-height: 1.3; } .res-margin-sm { margin-bottom: 30px; } } @media only screen and (max-width : 767px) { h2 { font-size: 30px; } .container { padding-left: 30px; padding-right: 30px; max-width: 100%; } } @media only screen and (max-width : 480px) { .container { padding-left: 35px; padding-right: 35px; } }

Related: See More


Questions / Comments: