Two blocks section

Sections documentation

  1. Home
  2. Sections
  3. Two blocks

Two blocks

Lorem ipsum dolore consectetur adipisicing elito sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea coSed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantiumo. 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.

Two blocks

Lorem ipsum dolore consectetur adipisicing elito sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea coSed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantiumo. 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.

Usage

<div class="section-two-blocks">
    <div class="row">
        <div class="col-md-6">
            ...
        </div>
        <div class="col-md-6">
            <div class="content">
                ...
            </div>
        </div>
    </div>
</div>

<div class="section-two-blocks" style="height:300px;">
    <div class="row">
        <div class="col-md-6">
            <a class="img-box"><img src="http://www.framework-y.com/images/thumb-large.png" /></a>
        </div>
        <div class="col-md-6">
            <div class="content">
                <h2>SIMPLE IMAGE</h2>
                    L'orem ipsum dolor, consectetur adipisicing elit ...
            </div>
        </div>
    </div>
</div>

<div class="section-two-blocks blocks-right" style="height:300px;" data-anima="scale-rotate" data-trigger="hover">
        <div class="row">
            <div class="col-md-6">
                <a class="lightbox img-box" href="http://www.framework-y.com/images/thumb-large.png.jpg">
                    <img class="anima" src="http://www.framework-y.com/images/thumb-large.png" />
                </a>
            </div>
            <div class="col-md-6">
                <div class="content">
                    <h2>ANIMATIONS & LIGHTBOX</h2>
                    L'orem ipsum dolor, consectetur adipisicing elit ...
                </div>
            </div>
        </div>
    </div>

<div class="section-two-blocks" style="height:300px;">
    <div class="row">
        <div class="col-md-6 blocks-video">
            <div data-video-youtube="BX4yotn2FPI"></div>
        </div>
        <div class="col-md-6">
            <div class="content">
                <h2>YOUTUBE VIDEO</h2>
                L'orem ipsum dolor, consectetur adipisicing elit ...
            </div>
        </div>
    </div>
</div>

<div class="section-two-blocks blocks-right" style="height:300px;">
    <div class="row">
        <div class="col-md-6 blocks-video">
            <video autoplay loop muted poster="video-poster.jpg">
                <source src="video.mp4" type="video/mp4">
            </video>
        </div>
        <div class="col-md-6">
            <div class="content">
                <h2>MP4 VIDEO</h2>
                L'orem ipsum dolor, consectetur adipisicing elit ...
            </div>
        </div>
    </div>
</div>

<div class="section-two-blocks" style="height:300px;">
    <div class="row">
        <div class="col-md-6">
            <div class="flexslider slider">
                <ul class="slides">
                    <li>
                        <img src="http://www.framework-y.com/images/thumb-large.png" />
                    </li>
                    <li>
                        <img src="http://www.framework-y.com/images/thumb-large.png" />
                    </li>
                    <li>
                        <img src="http://www.framework-y.com/images/thumb-large.png" />
                    </li>
                </ul>
            </div>
        </div>
        <div class="col-md-6">
            <div class="content">
                <h2>SLIDER</h2>
                L'orem ipsum dolor, consectetur adipisicing elit ...
            </div>
        </div>
    </div>
</div>

<div class="section-two-blocks blocks-right" style="height:300px;background-color: #F1F1F1;">
    <div class="row">
        <div class="col-md-7">
            <a class="img-box"><img src="http://www.framework-y.com/images/thumb-large.png" /></a>
        </div>
        <div class="col-md-5" style=" color: #525252;">
            <div class="content">
                <h2>WIDE COLUMN</h2>
                L'orem ipsum dolor, consectetur adipisicing elit ...
            </div>
        </div>
    </div>
</div>

<div class="section-two-blocks blocks-right" style="height:300px;" data-parallax="scroll" data-image-src="http://www.framework-y.com/images/thumb-large.png">
    <div class="row">
        <div class="col-md-6"></div>
        <div class="col-md-6 section-bg">
            <div class="content">
                <h2>PARALLAX IMAGE</h2>
                L'orem ipsum dolor, consectetur adipisicing elit ...
            </div>
        </div>
    </div>
</div>

<div class="section-two-blocks blocks-multi" style="height:300px;">
    <div class="row">
        <div class="col-md-4">
            <a class="img-box"><img src="http://www.framework-y.com/images/thumb-large.png" /></a>
        </div>
        <div class="col-md-4 block-text">
            <div class="block-inner">
                <h2>MULTI BLOCKS</h2>
                L'orem ipsum dolor, consectetur adipisicing elit ...
            </div>
        </div>
        <div class="col-md-4">
            <a class="img-box"><img src="http://www.framework-y.com/images/thumb-large.png" /></a>
        </div>
    </div>
</div>

Main settings

Name Type Description
Code location Information Insert sections code into <body> ... </body> HTML tag of page. Sections are full screen only if you not insert its into a boxed container.
Right section CSS class To set a right content section add class blocks-right to section object. Example: <div class="section-two-blocks blocks-right"> ... </div>.
Full width section CSS class Add class full-width-section to section object.
Wide columns section CSS class Replace first class col-md-6 with col-md-7 and second class col-md-6 with col-md-5.
Youtube link HTML Use this code: <div data-video-youtube="ID"></div> and replace ID with ID of your Youtube video.
MP4 and Youtube background video documentation

MP4 and Youtube background video feature is part of background video section. Complete documentation here

MP4 video Mixed MP4 video is the reccomended method to use, you must upload your MP4 video on your server and use it. Video must be compatible with HTML5. You can use the free software Any video converter to convert your videos to MP4 HTML5 format.
Lightbox Information Lightbox is part of lightbox and popups component.
Plugin dependency

This feature require Lightbox Plugin (../../HTWF/scripts/magnific-popup.css and ../../HTWF/scripts/jquery.magnific-popup.min.js)

Lightbox documentation here
Slider Information Slider is part of slider component.
Plugin dependency

This feature require Flex Slider Plugin (../../HTWF/scripts/flexslider/jquery.flexslider-min.js' and ../../HTWF/scripts/flexslider/flexslider.css)

Slider documentation here
Parallax Information Parallax is part of parallax image section .
Plugin dependency

This feature require Parallax Plugin (../../HTWF/scripts/parallax.min.js)

Parallax documentation here