media section
Parallax Section
HTML markup:
|
1 2 3 4 5 6 7 |
<div class="ct-mediaSection" data-height="575" data-type="parallax" data-stellar-background-ratio="0.3" data-bg-image="../../assets/images/demo-content/Intro-04.jpg" data-bg-image-mobile="../../assets/images/demo-content/Intro-04.jpg"> <div class="ct-mediaSection-inner text-center ct-u-colorWhite"> <h3 class="ct-u-colorWhite">Media Section with Parallax Effect</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Proin nibh augue, suscipit a, scelerisque sed, lacinia in, mi. Cras vel lorem.</p> </div> </div> |
Pattern Section:
HTML markup:
|
1 2 3 4 5 6 7 |
<div class="ct-mediaSection" data-height="575" data-type="pattern" data-bg-image="../../assets/images/demo-content/slide-lg-02.jpg" data-bg-image-mobile="../../assets/images/demo-content/slide-lg-02.jpg"> <div class="ct-mediaSection-inner text-center ct-u-colorWhite"> <h3 class="ct-u-colorWhite">Media Section with Static Image</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Proin nibh augue, suscipit a, scelerisque sed, lacinia in, mi. Cras vel lorem.</p> </div> </div> |
Ken Burns Section:
HTML markup:
|
1 2 3 4 5 6 7 8 9 10 |
<div class="ct-mediaSection" data-height="575" data-type="kenburns" data-bg-image="../../assets/images/demo-content/Intro-02.jpg" data-bg-image-mobile="../../assets/images/demo-content/Intro-02.jpg"> <div class="ct-mediaSection-kenburnsImageContainer"> <img src="../../assets/images/demo-content/Intro-02.jpg"> </div> <div class="ct-mediaSection-inner text-center ct-u-colorWhite"> <h3 class="ct-u-colorWhite">Media Section with Ken Burns Effect</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Proin nibh augue, suscipit a, scelerisque sed, lacinia in, mi. Cras vel lorem.</p> </div> </div> |
Video Section
:
Html markup:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<div class="ct-mediaSection" data-height="575" data-type="video" data-bg-image-mobile="../assets/images/demo-content/section-01.jpg"> <div class="ct-mediaSection-video embed-responsive embed-responsive-16by9"> <video muted loop autoplay="autoplay" preload="auto"> <source src='../../assets/videos/state_fair.mp4' type='video/mp4'/> </video> </div> <div class="ct-u-displayTable"> <div class="ct-mediaSection-inner text-center ct-u-colorWhite"> <h3 class="ct-u-colorWhite">Media Section with Video Background</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Proin nibh augue, suscipit a, scelerisque sed, lacinia in, mi. Cras vel lorem.</p> </div> </div> </div> |