[ux_slider]

[ux_banner height="700px" bg="20" bg_overlay="rgba(0, 0, 0, 0.25)"]

[text_box width="51" animate="fadeInLeft" text_depth="1"]

<h2>Create Amazing Banners with Drag and Drop</h2>
[divider]

[button text="A button" color="success" depth="3"]


[/text_box]

[/ux_banner]
[ux_banner height="700px" bg="20"]

[text_box width="46" animate="fadeInRight" parallax="1" position_x="5"]

<h2>Lorem ipsum dolor sit amet</h2>
<p class="lead">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat....</p>
[button text="Buy now" color="white"]

[button text="Learn more" color="white" style="outline"]


[/text_box]

[/ux_banner]

[/ux_slider]
[row v_align="middle"]

[col span="7"]

[ux_banner height="600px" bg="20" bg_pos="44% 39%"]

[text_box width="63" width__sm="78" padding="39px" position_x="5" position_x__sm="50" text_color="dark" bg="rgba(255, 255, 255, 0.85)" depth="2"]

<h3 class="uppercase">Lorem ipsum dolor sit amet</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat....</p>
[button text="Simple Link" style="link" icon="icon-play"]

[button text="Simple Button"]


[/text_box]

[/ux_banner]

[/col]
[col span="5" span__sm="12" align="center"]

<h2 class="lead uppercase">Drag And Drop Banner System</h2>
<p class="lead"><span style="font-size: 115%;">Flatsome <strong>Banners</strong> is the heart of Flatsome. Our Banner System let you create beautiful <strong>responsive</strong> banners with drag and drop.</span></p>
<p class="lead"> </p>
[ux_image id="19"]


[/col]
[col span="14"]

[ux_banner height="56.25%" height__sm="50%" bg="20" bg_overlay="rgba(22, 20, 16, 0.18)" hover="glow"]

[text_box width="36" position_x="90"]

<h3>Small Title</h3>
<p class="lead">You can place a text box wherever you want on a Banner</p>
[button text="Click me!"]


[/text_box]

[/ux_banner]

[/col]
[col span="6" span__sm="12" align="center"]

<h2>Banner Focus Point<b>™</b></h2>
<p class="lead">Set a focus point on the banner and the image will adjust to mobile a tablet screens. Perfect for resposnive Websites.</p>

[/col]
[col span="6" span__sm="12"]

[ux_image id="19" image_size="original"]


[/col]

[/row]
[title style="center" text="Banner Hover effects"]

[row]

[col span="4"]

[ux_banner height="200px" bg="20" bg_size="medium" bg_overlay="rgba(22, 20, 16, 0.18)" hover="glow"]

[text_box width="36"]

<h3>Glow</h3>

[/text_box]

[/ux_banner]

[/col]
[col span="4"]

[ux_banner height="200px" bg="20" bg_size="medium" bg_overlay="rgba(22, 20, 16, 0.18)" hover="zoom"]

[text_box width="36"]

<h3>Zoom</h3>

[/text_box]

[/ux_banner]

[/col]
[col span="4"]

[ux_banner height="200px" bg="20" bg_size="medium" bg_overlay="rgba(22, 20, 16, 0.18)" hover="zoom-fade"]

[text_box width="36"]

<h3>Zoom Fade</h3>

[/text_box]

[/ux_banner]

[/col]
[col span="4"]

[ux_banner height="200px" bg="20" bg_size="medium" bg_overlay="rgba(22, 20, 16, 0.18)" hover="blur"]

[text_box width="36"]

<h3>Blur</h3>

[/text_box]

[/ux_banner]

[/col]
[col span="4"]

[ux_banner height="200px" bg="20" bg_size="medium" bg_overlay="rgba(22, 20, 16, 0.18)" hover="fade-in"]

[text_box width="36"]

<h3>Fade In</h3>

[/text_box]

[/ux_banner]

[/col]
[col span="4"]

[ux_banner height="200px" bg="20" bg_size="medium" bg_overlay="rgba(22, 20, 16, 0.18)" hover="fade-out"]

[text_box width="36"]

<h3>Fade Out</h3>

[/text_box]

[/ux_banner]

[/col]
[col span="4"]

[ux_banner height="200px" bg="20" bg_size="medium" bg_overlay="rgba(22, 20, 16, 0.18)" hover="color"]

[text_box width="36"]

<h3>Add Color</h3>

[/text_box]

[/ux_banner]

[/col]
[col span="4"]

[ux_banner height="200px" bg="20" bg_size="medium" bg_overlay="rgba(22, 20, 16, 0.18)" hover="grayscale"]

[text_box width="36"]

<h3>Grayscale</h3>

[/text_box]

[/ux_banner]

[/col]
[col span="4"]

[ux_banner height="200px" bg="20" bg_size="medium" bg_overlay="rgba(22, 20, 16, 0.18)" hover="overlay-add"]

[text_box width="51"]

<h3>Add Overlay</h3>
<p><span style="font-size: 140%;">Overlay can be any color</span></p>

[/text_box]

[/ux_banner]

[/col]

[/row]
[row]

[col span__sm="12"]

<p class="lead" style="text-align: center;">You can also<strong> combine</strong> hover effects to create amazing hover effects</p>

[/col]

[/row]
[row]

[col span="6" span__sm="12"]

[ux_banner height="200px" bg="20" bg_size="medium" bg_overlay="rgba(22, 20, 16, 0.18)" hover="overlay-add" border="3px 3px 3px 3px" border_margin="10px 10px 10px 10px" border_hover="zoom"]

[text_box width="51"]

<h3><strong>Add animated borders</strong></h3>

[/text_box]

[/ux_banner]

[/col]
[col span="6" span__sm="12"]

[ux_banner height="200px" bg="20" bg_size="medium" bg_overlay="rgba(22, 20, 16, 0.18)" hover="overlay-add"]

[text_box width="51"]

<h3>Add Overlay</h3>
<p><span style="font-size: 140%;">Overlay can be any color</span></p>

[/text_box]

[/ux_banner]

[/col]

[/row]
[ux_banner height="500px" bg="20" parallax="2"]

[text_box width="41"]

<h2 class="uppercase">BACKGROUND VIDEO</h2>

[/text_box]

[/ux_banner]