Lorem ipsum dolor sit amet consectetur adipiscing elitsed do eiusmod tempor incididunt utlabore et dolore magna aliqua. Utenim ad minim veniam quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur ullamco laboris nisi ut.

Lorem ipsum dolor sit amet consectetur adipiscing elitsed do eiusmod tempor incididunt utlabore et dolore magna aliqua. Utenim ad minim veniam quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur ullamco laboris nisi ut.

Lorem ipsum dolor sit amet consectetur adipiscing elitsed do eiusmod tempor incididunt utlabore et dolore magna aliqua. Utenim ad minim veniam quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur ullamco laboris nisi ut.

Usage

<section class="section-block">
    <div class="block-media">
        <div class="image" style="background-image:url(image.jpg)"></div>
    </div>
    <div class="container">
        <div class="row">
            <div class="col">

            </div>
            <div class="col"></div>
        </div>
    </div>
</section>

<section class="section-block">
    <div class="block-media">
        <div class="image" data-parallax="scroll" data-bleed="0" data-image-src="image.jpg"></div>
    </div>
    <div class="container">
        <div class="row">
            <div class="col">
 
            </div>
            <div class="col"></div>
        </div>
    </div>
</section>

<section class="section-block">
    <div class="block-media">
        <video autoplay loop muted poster="image.jpg">
            <source src="video.mp4" type="video/mp4">
        </video>
    </div>
    <div class="container">
        <div class="row">
            <div class="col">

            </div>
            <div class="col">
                <a class="btn-video lightbox" data-lightbox-anima="fade-top" href="https://www.youtube.com/watch?v=Lb4IcGF5iTQ"></a>
            </div>
        </div>
    </div>
</section>

Settings

Name Type Description
Video file Information You need to upload your MP4 video on your server and use it. The video must be compatible with the HTML5 format. You can use the free software Any video converter to convert your videos. Remember to set the poster image of the video with the attribute poster="image.jpg", it's showed while the video is loading or if the video play is not possible, usually on mobile devices.
Full layout CSS Add the class section-block-full to the section to apply the full width layout.
Try it Full block
Inverted CSS Add the class section-block-right to the section to invert the content position.
Parallax Information The parallax image feature require the installation of the parallax plugin: 
<script src="themekit/scripts/parallax.min.js"></script>
Full width CSS Add the class section-full-width to make the section full width.
Try it Full width
No padding CSS Add the class no-padding-y to remove the vertical padding, the class no-padding-x to remove the horizontal padding and the class no-padding to remove both padding. Add the class no-padding-top or no-padding-bottom to remove only the top or bottom padding.
Try it No padding y No padding x No padding No padding top No padding bottom
Code location Information The sections must be placed inside the <main> </main> code block. For more details visit the getting started page.
Section base
Section image
Section slider
Section video
Section map