<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="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!--========== PAGE CONTENT ==========--> <!-- Heading v1 --> <div class="content-md container"> <div class="heading-v1 text-center"> <h2 class="heading-v1-title margin-b-0">Sliding Background Left</h2> </div> </div> <!-- End Heading v1 --> <!-- Sliding Background Left --> <div class="sliding-bg sliding-bg-semi-dark"> <div class="sliding-bg-img sliding-bg-left" style="background: url(http://prothemes.net/ark/bootsnip/61.jpg);"></div> <div class="container"> <div class="ver-center-aligned-block text-center"> <span class="sliding-bg-subtitle color-white">Welcome to</span> <div class="divider-v5"> <p class="divider-v5-element divider-v5-element-center before-after-bg-white"><i class="divider-v5-element-icon color-white fa fa-star"></i></p> </div> <h2 class="sliding-bg-title color-white">Ark Studio</h2> <p class="sliding-bg-text color-white">Wanna a simple and cool e-Commerce design with a very sleek interface? <br/> This is the right template for your website.</p> </div> </div> </div> <!-- End Sliding Background Left --> <!-- Heading v1 --> <div class="content-md container"> <div class="heading-v1 text-center"> <h2 class="heading-v1-title margin-b-0">Sliding Background Right</h2> </div> </div> <!-- End Heading v1 --> <!-- Sliding Background Right --> <div class="sliding-bg"> <div class="sliding-bg-img sliding-bg-right" style="background: url(http://prothemes.net/ark/bootsnip/60.jpg);"></div> <div class="container"> <div class="ver-center-aligned-block text-center"> <span class="sliding-bg-subtitle color-white">Welcome to</span> <h2 class="sliding-bg-title color-white">Ark Studio</h2> <p class="sliding-bg-text color-white">Wanna a simple and cool e-Commerce design with a very sleek interface? <br/> This is the right template for your website.</p> </div> </div> </div> <!-- End Sliding Background Right --> <!-- Heading v1 --> <div class="content-md container"> <div class="heading-v1 text-center"> <h2 class="heading-v1-title margin-b-0">Sliding Background Top</h2> </div> </div> <!-- End Heading v1 --> <!-- Sliding Background Top --> <div class="sliding-bg sliding-bg-semi-white"> <div class="sliding-bg-img sliding-bg-top" style="background: url(http://prothemes.net/ark/bootsnip/61.jpg);"></div> <div class="container"> <div class="ver-center-aligned-block text-center"> <span class="sliding-bg-subtitle">Welcome to</span> <h2 class="sliding-bg-title">Ark Studio</h2> <p class="sliding-bg-text">Wanna a simple and cool e-Commerce design with a very sleek interface? <br/> This is the right template for your website.</p> </div> </div> </div> <!-- End Sliding Background Top --> <!-- Heading v1 --> <div class="content-md container"> <div class="heading-v1 text-center"> <h2 class="heading-v1-title margin-b-0">Sliding Background Bottom</h2> </div> </div> <!-- End Heading v1 --> <!-- Sliding Background Bottom --> <div class="sliding-bg"> <div class="sliding-bg-img sliding-bg-bottom" style="background: url(http://prothemes.net/ark/bootsnip/60.jpg);"></div> <div class="container"> <div class="ver-center-aligned-block text-center"> <span class="sliding-bg-subtitle">Welcome to</span> <h2 class="sliding-bg-title">Ark Studio</h2> <p class="sliding-bg-text">Wanna a simple and cool e-Commerce design with a very sleek interface? <br/> This is the right template for your website.</p> </div> </div> </div> <!-- End Sliding Background Bottom --> <!-- Copyright --> <div class="content-sm container text-center"> <p>Created by Prothemes. Get to know more about our work at <a href="http://themeforest.net/item/ark-responsive-multipurpose-html5-template/13924383?ref=ProThemes_Net">Themeforest</a></p> </div> <!-- End Copyright --> <!--========== END PAGE CONTENT ==========-->

.content-sm { padding-top: 40px; padding-bottom: 40px; } .content-md { padding-top: 80px; padding-bottom: 80px; } .color-white { color: #fff; } /*------------------------------------------------------------------ [Heading v1] ------------------------------------------------------------------*/ .heading-v1 .heading-v1-title { font-size: 28px; font-style: italic; font-family: Droid Serif, serif; } .heading-v1 .heading-v1-subtitle { max-width: 350px; font-size: 16px; font-style: italic; font-family: Droid Serif, serif; color: #00bcd4; margin-bottom: 20px; } .heading-v1 .heading-v1-text { font-size: 18px; font-style: italic; margin-bottom: 0; } /* White Version */ .heading-v1.heading-v1-white .heading-v1-title { color: #fff; } .heading-v1.heading-v1-white .heading-v1-text { color: #fff; opacity: .8; } /*-------------------------------------------------- [Vertical Center Aligned Block] Using CSS3 Translate3D ----------------------------------------------------*/ .ver-center-aligned-block { position: absolute; top: 50%; left: 0; right: 0; -webkit-transform: translate3d(0, -50%, 0); -moz-transform: translate3d(0, -50%, 0); transform: translate3d(0, -50%, 0); } /*-------------------------------------------------- [Sliding Background] ----------------------------------------------------*/ .sliding-bg { position: relative; overflow: hidden; } .sliding-bg.sliding-bg-semi-dark:before { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(52, 52, 60, 0.9); content: " "; } .sliding-bg.sliding-bg-semi-white:before { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.9); content: " "; } .sliding-bg .sliding-bg-img { width: 100%; height: 500px; background-size: cover; background-position: center center; } .sliding-bg .sliding-bg-title { font-size: 100px; font-style: italic; font-weight: 400; font-family: Droid Serif, serif; letter-spacing: 10px; line-height: 1; margin-bottom: 10px; } .sliding-bg .sliding-bg-subtitle { display: block; font-size: 36px; font-style: italic; font-weight: 300; margin-bottom: 10px; } .sliding-bg .sliding-bg-text { font-size: 20px; } /* Sliding Background Left */ .sliding-bg .sliding-bg-left { -webkit-animation-name: sliding-bg-left; -moz-animation-name: sliding-bg-left; animation-name: sliding-bg-left; -webkit-animation-duration: 200s; -moz-animation-duration: 200s; animation-duration: 200s; -webkit-animation-timing-function: linear; -moz-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-iteration-count: infinite; -moz-animation-iteration-count: infinite; -ms-animation-iteration-count: infinite; animation-iteration-count: infinite; } /* Keyframes - Sliding Left */ @-webkit-keyframes sliding-bg-left { 100% { background-position: -3840px 0; } } @-moz-keyframes sliding-bg-left { 100% { background-position: -3840px 0; } } @keyframes sliding-bg-left { 100% { background-position: -3840px 0; } } /* Sliding Background Right */ .sliding-bg .sliding-bg-right { -webkit-animation-name: sliding-bg-right; -moz-animation-name: sliding-bg-right; animation-name: sliding-bg-right; -webkit-animation-duration: 200s; -moz-animation-duration: 200s; animation-duration: 200s; -webkit-animation-timing-function: linear; -moz-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-iteration-count: infinite; -moz-animation-iteration-count: infinite; -ms-animation-iteration-count: infinite; animation-iteration-count: infinite; } /* Keyframes - Sliding Right */ @-webkit-keyframes sliding-bg-right { 100% { background-position: 3840px 0; } } @-moz-keyframes sliding-bg-right { 100% { background-position: 3840px 0; } } @keyframes sliding-bg-right { 100% { background-position: 3840px 0; } } /* Sliding Background Top */ .sliding-bg .sliding-bg-top { -webkit-animation-name: sliding-bg-top; -moz-animation-name: sliding-bg-top; animation-name: sliding-bg-top; -webkit-animation-duration: 200s; -moz-animation-duration: 200s; animation-duration: 200s; -webkit-animation-timing-function: linear; -moz-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-iteration-count: infinite; -moz-animation-iteration-count: infinite; -ms-animation-iteration-count: infinite; animation-iteration-count: infinite; } /* Keyframes - Sliding Top */ @-webkit-keyframes sliding-bg-top { 100% { background-position: 0 -1000px; } } @-moz-keyframes sliding-bg-top { 100% { background-position: 0 -1000px; } } @keyframes sliding-bg-top { 100% { background-position: 0 -1000px; } } /* Sliding Background Bottom */ .sliding-bg .sliding-bg-bottom { -webkit-animation-name: sliding-bg-bottom; -moz-animation-name: sliding-bg-bottom; animation-name: sliding-bg-bottom; -webkit-animation-duration: 200s; -moz-animation-duration: 200s; animation-duration: 200s; -webkit-animation-timing-function: linear; -moz-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-iteration-count: infinite; -moz-animation-iteration-count: infinite; -ms-animation-iteration-count: infinite; animation-iteration-count: infinite; } /* Keyframes - Sliding Bottom */ @-webkit-keyframes sliding-bg-bottom { 100% { background-position: 0 1000px; } } @-moz-keyframes sliding-bg-bottom { 100% { background-position: 0 1000px; } } @keyframes sliding-bg-bottom { 100% { background-position: 0 1000px; } } /* Media Queries below 768px */ @media (max-width: 768px) { .sliding-bg .sliding-bg-title { font-size: 70px; } .sliding-bg .sliding-bg-subtitle { font-size: 30px; } .sliding-bg .sliding-bg-text { font-size: 18px; } } /* Media Queries below 480px */ @media (max-width: 480px) { .sliding-bg .sliding-bg-title { font-size: 50px; } .sliding-bg .sliding-bg-subtitle { font-size: 26px; } .sliding-bg .sliding-bg-text { font-size: 16px; } }