<!DOCTYPE html>
<!--[if lt IE 10]> <html lang="en" class="iex"> <![endif]-->
<!--[if (gt IE 10)|!(IE)]><!-->
<html lang="en">
<!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Lightbox | Components | Structura</title>
<meta name="description" content="HTML5/CSS3 template components for Framework Y and business industries, based on Framework Y.">
<link rel="stylesheet" href="../../../HTWF/scripts/bootstrap/css/bootstrap.css">
<link rel="stylesheet" href="../../../HTWF/style.css">
<link rel="stylesheet" href="../../../HTWF/scripts/flexslider/flexslider.css">
<link rel="stylesheet" href="../../../HTWF/css/content-box.css">
<link rel="stylesheet" href="../../../HTWF/css/animations.css">
<link rel="stylesheet" href="../../../HTWF/css/components.css">
<link rel="stylesheet" href="../../../HTWF/scripts/magnific-popup.css">
<link rel="stylesheet" href="../../../skin.css">
<link rel="icon" href="../../../images/favicon.png">
</head>
<body>
<div id="preloader"></div>
<header class="fixed-top scroll-change" data-menu-anima="fade-in">
<div class="navbar navbar-default mega-menu-fullwidth navbar-fixed-top" role="navigation">
<div class="navbar navbar-main">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle">
<i class="fa fa-bars"></i>
</button>
<a class="navbar-brand" href="../../index.html">
<img class="logo-default" src="../../../images/logo.png" alt="logo" />
<img class="logo-retina" src="../../../images/logo-retina.png" alt="logo" />
</a>
</div>
<div class="collapse navbar-collapse">
<div class="nav navbar-nav navbar-right">
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button">Home <span class="caret"></span></a>
<ul class="dropdown-menu multi-level">
<li><a href="../../index-square.html">Square</a></li>
<li><a href="../../index-cube.html">Cube</a></li>
<li><a href="../../index-parallelogram.html">Parallelogram</a></li>
<li><a href="../../index-ellipse.html">Ellipse</a></li>
<li><a href="../../index-rectangle.html">Rectangle</a></li>
<li><a href="../../index-circle.html">Circle</a></li>
<li><a href="../../index-triangle.html">Triangle</a></li>
<li><a href="../../index-hexagon.html">Hexagon</a></li>
<li><a href="../../index-pentagon.html">Pentagon</a></li>
<li><a href="../../index-line.html">Line</a></li>
<li><a href="../../index-fullpage.html">Fullpage</a></li>
<li><a href="../../index.html">Intro</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button">Pages <span class="caret"></span></a>
<ul class="dropdown-menu multi-level">
<li class="dropdown dropdown-submenu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Niche</a>
<ul class="dropdown-menu">
<li><a href="../../pricing.html">Pricing</a></li>
<li><a href="../../gallery.html">Photo & video</a></li>
<li><a href="../../faq.html">Faq</a></li>
<li><a href="../../history.html">History</a></li>
<li><a href="../../team.html">Team</a></li>
<li><a href="../../coming-soon.html">Coming soon</a></li>
<li><a href="../../404.html">404</a></li>
</ul>
</li>
<li class="dropdown dropdown-submenu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">About</a>
<ul class="dropdown-menu">
<li><a href="../../about-us-1.html">About us one</a></li>
<li><a href="../../about-us-2.html">About us two</a></li>
<li><a href="../../about-us-3.html">About us three</a></li>
<li><a href="../../about-us-4.html">About us four</a></li>
</ul>
</li>
<li class="dropdown dropdown-submenu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Contacts</a>
<ul class="dropdown-menu">
<li><a href="../../contacts-1.html">Contacts one</a></li>
<li><a href="../../contacts-2.html">Contacts two</a></li>
<li><a href="../../contacts-3.html">Contacts three</a></li>
<li><a href="../../contacts-4.html">Contacts four</a></li>
</ul>
</li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button">Portfolio <span class="caret"></span></a>
<ul class="dropdown-menu multi-level">
<li><a href="../../portfolio-1.html">Portfolio one</a></li>
<li><a href="../../portfolio-2.html">Portfolio two</a></li>
<li><a href="../../portfolio-3.html">Portfolio three</a></li>
<li><a href="../../portfolio-4.html">Portfolio four</a></li>
<li><a href="../../portfolio-5.html">Portfolio five</a></li>
<li class="dropdown dropdown-submenu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Single item</a>
<ul class="dropdown-menu">
<li><a href="../../portfolio-single-1.html">Single one</a></li>
<li><a href="../../portfolio-single-2.html">Single two</a></li>
<li><a href="../../portfolio-single-3.html">Single three</a></li>
</ul>
</li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button">Blog <span class="caret"></span></a>
<ul class="dropdown-menu multi-level">
<li><a href="../../blog-grid.html">Grid</a></li>
<li><a href="../../blog-masonry.html">Masonry</a></li>
<li><a href="../../blog-classic.html">Classic</a></li>
<li class="dropdown dropdown-submenu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Single post</a>
<ul class="dropdown-menu">
<li><a href="../../blog-single-1.html">Single one</a></li>
<li><a href="../../blog-single-2.html">Single two</a></li>
<li><a href="../../blog-single-3.html">Single three</a></li>
</ul>
</li>
</ul>
</li>
<li class="dropdown mega-dropdown mega-tabs active">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Elements <span class="caret"></span></a>
<div class="mega-menu dropdown-menu multi-level row bg-menu">
<div class="tab-box" data-tab-anima="fade-in">
<ul class="nav nav-tabs">
<li class="active"><a href="#">Components</a></li>
<li><a href="#">Headers</a></li>
<li><a href="#">Titles</a></li>
</ul>
<div class="panel active">
<div class="col">
<ul class="fa-ul text-s">
<li><i class="fa-li im-posterous"></i> <a href="../../features/components/icons.html">Icons</a></li>
<li><i class="fa-li im-secound"></i> <a href="../../features/components/counters-countdown.html">Counters</a></li>
<li><i class="fa-li im-clock-back"></i> <a href="../../features/components/counters-countdown.html">Countdowns</a></li>
<li><i class="fa-li im-libra"></i> <a href="../../features/components/progress-bars.html">Progress bars</a></li>
<li><i class="fa-li im-arrow-refresh2"></i> <a href="../../features/components/progress-bars.html">Circle progress bars</a></li>
<li><i class="fa-li im-calendar-4"></i> <a href="../../features/components/timeline.html">Timeline</a></li>
<li><i class="fa-li im-arrow-outside"></i> <a href="../../features/containers/section-slider.html">Slider</a></li>
<li><i class="fa-li im-speach-bubbles"></i> <a href="../../features/components/php-contact-form.html">Contact form</a></li>
</ul>
</div>
<div class="col">
<ul class="fa-ul text-s">
<li><i class="fa-li im-hand-touch"></i> <a href="../../features/components/buttons.html">Buttons</a></li>
<li><i class="fa-li im-old-camera"></i> <a href="../../features/components/image-boxes.html">Image boxes</a></li>
<li><i class="fa-li im-old-camera"></i> <a href="../../features/components/image-boxes-advanced.html">Advanced image boxes</a></li>
<li><i class="fa-li im-id-2"></i> <a href="../../features/components/content-box.html">Content boxes</a></li>
<li><i class="fa-li im-facebook"></i> <a href="../../features/components/social-media.html">Social media</a></li>
<li><i class="fa-li im-numbering-list"></i> <a href="../../features/components/lists.html">Lists</a></li>
<li><i class="fa-li im-map2"></i> <a href="../../features/components/maps.html">Google maps</a></li>
<li><i class="fa-li im-bold-text"></i> <a href="../../features/components/typography.html">Typography</a></li>
</ul>
</div>
<div class="col">
<ul class="fa-ul text-s">
<li><i class="fa-li im-split-horizontal2window"></i> <a href="../../features/components/tables.html">Advanced table</a></li>
<li><i class="fa-li im-maximize"></i> <a href="../../features/containers/lightbox.html">Lightbox and popups</a></li>
<li><i class="fa-li im-arrow-outside"></i> <a href="../../features/containers/sliders.html">Sliders and carousels</a></li>
<li><i class="fa-li im-scroll-fast"></i> <a href="../../features/containers/scroll-box-collapse.html">Scroll box</a></li>
<li><i class="fa-li im-download-2"></i> <a href="../../features/containers/scroll-box-collapse.html">Collapse box</a></li>
<li><i class="fa-li im-new-tab"></i> <a href="../../features/containers/tabs.html">Tabs</a></li>
<li><i class="fa-li im-new-tab"></i> <a href="../../features/containers/accordions.html">Accordions</a></li>
<li><i class="fa-li im-split-foursquarewindow"></i> <a href="../../features/containers/list-grid.html">Grid</a></li>
</ul>
</div>
<div class="col">
<ul class="fa-ul text-s">
<li><i class="fa-li im-split-foursquarewindow"></i> <a href="../../features/containers/list-masonry.html">Masonry</a></li>
<li><i class="fa-li im-panorama"></i> <a href="../../features/containers/section-background-image.html">Background image</a></li>
<li><i class="fa-li im-panorama"></i> <a href="../../features/containers/section-background-image-parallax.html">Background parallax</a></li>
<li><i class="fa-li im-film-strip"></i> <a href="../../features/containers/section-background-video.html">Background video</a></li>
<li><i class="fa-li im-clouds"></i> <a href="../../features/containers/section-animations.html">Bg animations</a></li>
<li><i class="fa-li im-go-bottom"></i> <a href="../../features/footers/parallax.html">Footer parallax</a></li>
<li><i class="fa-li im-go-bottom"></i> <a href="../../features/footers/minimal.html">Footer minimal</a></li>
<li><i class="fa-li im-go-bottom"></i> <a href="../../features/footers/base.html">Footer base</a></li>
</ul>
</div>
</div>
<div class="panel">
<div class="col">
<ul class="fa-ul text-s">
<li><i class="fa-li im-road"></i> <a href="../../features/menus/classic.html">Menu classic</a></li>
<li><i class="fa-li im-road"></i> <a href="../../features/menus/classic-transparent.html">Menu classic transparent</a></li>
<li><i class="fa-li im-road"></i> <a href="../../features/menus/big-logo.html">Menu big logo</a></li>
<li><i class="fa-li im-road"></i> <a href="../../features/menus/subline.html">Menu subline</a></li>
<li><i class="fa-li im-road"></i> <a href="../../features/menus/subtitle.html">Menu subtitle</a></li>
</ul>
</div>
<div class="col">
<ul class="fa-ul text-s">
<li><i class="fa-li im-road"></i> <a href="../../features/menus/middle-logo.html">Menu middle logo</a></li>
<li><i class="fa-li im-road"></i> <a href="../../features/menus/middle-logo-top.html">Menu middle logo top</a></li>
<li><i class="fa-li im-road"></i> <a href="../../features/menus/middle-box.html">Menu middle box</a></li>
<li><i class="fa-li im-road"></i> <a href="../../features/menus/icons.html">Menu icons</a></li>
<li><i class="fa-li im-road"></i> <a href="../../features/menus/icons-top.html">Menu icons top</a></li>
</ul>
</div>
<div class="col">
<ul class="fa-ul text-s">
<li><i class="fa-li im-road-2"></i> <a href="../../features/menus/side.html">Side classic</a></li>
<li><i class="fa-li im-road-2"></i> <a href="../../features/menus/side-lateral.html">Side lateral</a></li>
<li><i class="fa-li im-road-2"></i> <a href="../../features/menus/side-simple.html">Side simple</a></li>
</ul>
</div>
</div>
<div class="panel">
<div class="col">
<ul class="fa-ul text-s">
<li><i class="fa-li im-old-camera"></i> <a href="../../features/titles/image.html">Image background</a></li>
<li><i class="fa-li im-old-camera"></i> <a href="../../features/titles/image-fullscreen.html">Image full-screen</a></li>
<li><i class="fa-li im-old-camera"></i> <a href="../../features/titles/image-fullscreen-parallax.html">Image full-screen parallax</a></li>
<li><i class="fa-li im-old-camera"></i> <a href="../../features/titles/image-parallax.html">Image parallax</a></li>
<li><i class="fa-li im-old-camera"></i> <a href="../../features/titles/image-parallax-ken-burn.html">Image parallax ken-burn</a></li>
</ul>
</div>
<div class="col">
<ul class="fa-ul text-s">
<li><i class="fa-li im-film-board"></i> <a href="../../features/titles/video-mp4.html">Video background MP4</a></li>
<li><i class="fa-li im-film-board"></i> <a href="../../features/titles/video-youtube.html">Video background Youtube</a></li>
<li><i class="fa-li im-film-board"></i> <a href="../../features/titles/video-fullscreen.html">Video full-screen</a></li>
<li><i class="fa-li im-film-board"></i> <a href="../../features/titles/video-fullscreen-parallax.html">Video full-screen parallax</a></li>
<li><i class="fa-li im-film-board"></i> <a href="../../features/titles/video-parallax.html">Video parallax</a></li>
</ul>
</div>
<div class="col">
<ul class="fa-ul text-s">
<li><i class="fa-li im-panorama"></i> <a href="../../features/titles/base-1.html">Title base 1</a></li>
<li><i class="fa-li im-panorama"></i> <a href="../../features/titles/base-2.html">Title base 2</a></li>
<li><i class="fa-li im-clouds"></i> <a href="../../features/titles/animation.html">Animation background</a></li>
<li><i class="fa-li im-clouds"></i> <a href="../../features/titles/animation-parallax.html">Animation parallax</a></li>
</ul>
</div>
<div class="col">
<ul class="fa-ul text-s">
<li><i class="fa-li im-arrow-outside"></i> <a href="../../features/titles/slider.html">Slider background</a></li>
<li><i class="fa-li im-arrow-outside"></i> <a href="../../features/titles/slider-fullscreen.html">Slider full-screen</a></li>
<li><i class="fa-li im-arrow-outside"></i> <a href="../../features/titles/slider-fullscreen-parallax.html">Slider full-screen parallax</a></li>
<li><i class="fa-li im-arrow-outside"></i> <a href="../../features/titles/slider-parallax.html">Slider parallax</a></li>
</ul>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</header>
<div class="header-base">
<div class="container">
<div class="row">
<div class="col-md-9">
<div class="title-base text-left">
<h1>Lightbox</h1>
<p>This template come with lot of innovative features and an awesome and extensive documentation ready to be used to build your website.</p>
</div>
</div>
<div class="col-md-3">
<ol class="breadcrumb b white">
<li><a href="#">Home</a></li>
<li class="active">Features</li>
</ol>
</div>
</div>
</div>
</div>
<div class="section-empty section-item text-center">
<div class="container content">
<h5 class="text-center">LIGHTBOX TYPES</h5>
<hr class="space m" />
<div class="row">
<div class="col-md-2">
<h5 class="text-s">Image</h5>
<a class="img-box lightbox thumbnail" href="http://www.framework-y.com/images/large/large_wide_1.jpg" data-lightbox-anima="show-scale">
<span>
<img alt="" src="http://www.framework-y.com/images/lightbox-thumb.jpg">
</span>
</a>
</div>
<div class="col-md-2">
<h5 class="text-s">Youtube</h5>
<a class="img-box lightbox thumbnail" href="https://www.youtube.com/watch?v=bpqhStV2_rc" data-lightbox-anima="show-scale">
<span>
<img alt="" src="http://www.framework-y.com/images/lightbox-thumb.jpg">
</span>
</a>
</div>
<div class="col-md-2">
<h5 class="text-s">Vimeo</h5>
<a class="img-box lightbox thumbnail" href="https://vimeo.com/122626364" data-lightbox-anima="show-scale">
<span>
<img alt="" src="http://www.framework-y.com/images/lightbox-thumb.jpg">
</span>
</a>
</div>
<div class="col-md-2">
<h5 class="text-s">MP4 video</h5>
<a class="img-box lightbox thumbnail" href="http://www.framework-y.com/images/chameleon-footage.mp4" data-lightbox-anima="show-scale">
<span>
<img alt="" src="http://www.framework-y.com/images/lightbox-thumb.jpg">
</span>
</a>
</div>
<div class="col-md-2">
<h5 class="text-s">Google Map</h5>
<a class="img-box lightbox thumbnail" href="https://maps.google.com/maps?q=221B+Baker+Street,+London,+United+Kingdom&hl=en&t=v&hnear=221B+Baker+St,+London+NW1+6XE,+United+Kingdom" data-lightbox-anima="show-scale">
<span>
<img alt="" src="http://www.framework-y.com/images/lightbox-thumb.jpg">
</span>
</a>
</div>
<div class="col-md-2">
<h5 class="text-s">Custom HTML</h5>
<a class="img-box lightbox thumbnail" href="#lb2" data-lightbox-anima="show-scale">
<span>
<img alt="" src="http://www.framework-y.com/images/lightbox-thumb.jpg">
</span>
</a>
<div id="lb2" class="box-lightbox" style="padding:25px">
<div class="subtitle g">
<h4>CUSTOM HTML FOR LIGHTBOX</h4>
<hr>
<p class="sub">This is a custom HTML element</p>
</div> mkk+ fd f gf
L'orem ipsum dolor "sitamet", consectetur 'adipisici sd ng' elit, 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 laudantium, totam rem aperiam, eaqueipsa quae ab illo inventore veritatis et quasi architecto beatae
vitae dicta sunt explicabo.
</div>
</div>
<div class="col-md-2">
<hr class="space m" />
<h5 class="text-s">Scroll box</h5>
<a class="img-box lightbox thumbnail" href="#lb3" data-lightbox-anima="show-scale">
<span>
<img alt="" src="http://www.framework-y.com/images/lightbox-thumb.jpg">
</span>
</a>
<div id="lb3" class="box-lightbox m" style="padding:25px">
<div class="scroll-content scroll-mobile-disabled" data-height=".box-lightbox">
<div class="subtitle g">
<h4>CUSTOM HTML SCROLL BOX FOR LIGHTBOX</h4>
<hr>
<p class="sub">This is a custom HTML element with scroll box</p>
</div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, 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 laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto
beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit,
sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem
ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et
dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit
laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit
esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
Lorem ipsum dolor sit amet, consectetur adipisicing elit, 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 laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto
beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit,
sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem
ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et
dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit
laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit
esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
Lorem ipsum dolor sit amet, consectetur adipisicing elit, 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 laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto
beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit,
sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem
ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et
dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit
laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit
esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
Lorem ipsum dolor sit amet, consectetur adipisicing elit, 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 laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto
beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit,
sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem
ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et
dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit
laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit
esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
</div>
</div>
</div>
<div class="col-md-2">
<hr class="space m" />
<h5 class="text-s">Slider</h5>
<a class="img-box lightbox thumbnail" href="#sl-1" data-lightbox-anima="show-scale">
<span>
<img alt="" src="http://www.framework-y.com/images/lightbox-thumb.jpg">
</span>
</a>
<div id="sl-1" class="box-lightbox white">
<div class="flexslider white" id="slider-nav-thumb" data-trigger="manual" data-options="controlNav:false,animationLoop:false,slideshow:false,sync:#carousel-nav-thumb">
<ul class="slides">
<li>
<img alt="" src="http://www.framework-y.com/images/large/large_wide_1.jpg" />
</li>
<li>
<img alt="" src="http://www.framework-y.com/images/large/large_wide_2.jpg" />
</li>
<li>
<img alt="" src="http://www.framework-y.com/images/large/large_wide_3.jpg" />
</li>
<li>
<img alt="" src="http://www.framework-y.com/images/large/large_wide_4.jpg" />
</li>
<li>
<img alt="" src="http://www.framework-y.com/images/large/large_wide_5.jpg" />
</li>
<li>
<img alt="" src="http://www.framework-y.com/images/large/large_wide_1.jpg" />
</li>
<li>
<img alt="" src="http://www.framework-y.com/images/large/large_wide_2.jpg" />
</li>
<li>
<img alt="" src="http://www.framework-y.com/images/large/large_wide_3.jpg" />
</li>
<li>
<img alt="" src="http://www.framework-y.com/images/large/large_wide_4.jpg" />
</li>
<li>
<img alt="" src="http://www.framework-y.com/images/large/large_wide_5.jpg" />
</li>
<li>
<img alt="" src="http://www.framework-y.com/images/large/large_wide_1.jpg" />
</li>
</ul>
</div>
<div id="carousel-nav-thumb" data-trigger="manual" class="flexslider carousel nav-thumb" data-options="controlNav:false,animationLoop:false,slideshow:false,asNavFor:#slider-nav-thumb,minWidth:80,numItems:4">
<ul class="slides">
<li class="flex-active-slide">
<img alt="" src="http://www.framework-y.com/images/thumbs/thumb_wide_1.jpg" />
</li>
<li>
<img alt="" src="http://www.framework-y.com/images/thumbs/thumb_wide_2.jpg" />
</li>
<li>
<img alt="" src="http://www.framework-y.com/images/thumbs/thumb_wide_3.jpg" />
</li>
<li>
<img alt="" src="http://www.framework-y.com/images/thumbs/thumb_wide_4.jpg" />
</li>
<li>
<img alt="" src="http://www.framework-y.com/images/thumbs/thumb_wide_5.jpg" />
</li>
<li>
<img alt="" src="http://www.framework-y.com/images/thumbs/thumb_wide_1.jpg" />
</li>
<li>
<img alt="" src="http://www.framework-y.com/images/thumbs/thumb_wide_2.jpg" />
</li>
<li>
<img alt="" src="http://www.framework-y.com/images/thumbs/thumb_wide_3.jpg" />
</li>
<li>
<img alt="" src="http://www.framework-y.com/images/thumbs/thumb_wide_4.jpg" />
</li>
<li>
<img alt="" src="http://www.framework-y.com/images/thumbs/thumb_wide_5.jpg" />
</li>
<li>
<img alt="" src="http://www.framework-y.com/images/thumbs/thumb_wide_1.jpg" />
</li>
</ul>
</div>
</div>
</div>
<div class="col-md-2">
<hr class="space m" />
<h5 class="text-s">Text caption</h5>
<a class="img-box lightbox thumbnail" href="http://www.framework-y.com/images/large/large_wide_1.jpg" title="This is the text caption of image" data-lightbox-anima="show-scale">
<span>
<img alt="" src="http://www.framework-y.com/images/lightbox-thumb.jpg">
</span>
</a>
</div>
<div class="col-md-2">
<hr class="space m" />
<h5 class="text-s">Inner text caption</h5>
<a class="img-box lightbox thumbnail" href="http://www.framework-y.com/images/large/large_wide_1.jpg" data-options="mainClass:inner" title="This is the text caption of image" data-lightbox-anima="show-scale">
<span>
<img alt="" src="http://www.framework-y.com/images/lightbox-thumb.jpg">
</span>
</a>
</div>
</div>
<hr class="space s" />
<hr />
<hr class="space s" />
<h5>LIGHTBOX GALLERY</h5>
<hr class="space m" />
<div class="grid-list gallery thumb-xs">
<div class="grid-box row" data-lightbox-anima="show-scale">
<div class="grid-item col-md-2">
<a class="img-box thumbnail" href="http://www.framework-y.com/images/large/large_wide_1.jpg">
<span><img alt="" src="http://www.framework-y.com/images/thumbs/thumb_wide_1.jpg"></span>
</a>
</div>
<div class="grid-item col-md-2">
<a class="img-box thumbnail mfp-iframe" href="https://www.youtube.com/watch?v=bpqhStV2_rc">
<span><img alt="" src="http://www.framework-y.com/images/thumbs/thumb_wide_2.jpg"></span>
</a>
</div>
<div class="grid-item col-md-2">
<a class="img-box thumbnail" href="http://www.framework-y.com/images/large/large_wide_3.jpg">
<span><img alt="" src="http://www.framework-y.com/images/thumbs/thumb_wide_3.jpg"></span>
</a>
</div>
<div class="grid-item col-md-2">
<a class="img-box thumbnail" href="http://www.framework-y.com/images/large/large_wide_4.jpg">
<span><img alt="" src="http://www.framework-y.com/images/thumbs/thumb_wide_4.jpg"></span>
</a>
</div>
<div class="grid-item col-md-2">
<a class="img-box thumbnail" href="http://www.framework-y.com/images/large/large_wide_5.jpg">
<span><img alt="" src="http://www.framework-y.com/images/thumbs/thumb_wide_5.jpg"></span>
</a>
</div>
<div class="grid-item grid-item col-md-2">
<a class="img-box thumbnail mfp-iframe" href="https://www.youtube.com/watch?v=bpqhStV2_rc">
<span><img alt="" src="http://www.framework-y.com/images/thumbs/thumb_wide_6.jpg"></span>
</a>
</div>
</div>
</div>
<hr class="space s" />
<hr />
<hr class="space s" />
<h5>POPUPS</h5>
<hr class="space m" />
<div class="row">
<div class="col-md-3">
<a class="btn btn-primary nav-justified btn-default popup-trigger documentation-button" href="#popup-1">
Top Left
</a>
</div>
<div class="col-md-3">
<a class="btn btn-primary nav-justified btn-default popup-trigger documentation-button" href="#popup-2">
Top Right
</a>
</div>
<div class="col-md-3">
<a class="btn btn-primary nav-justified btn-default popup-trigger documentation-button" href="#popup-3">
Bottom Left
</a>
</div>
<div class="col-md-3">
<a class="btn btn-primary nav-justified btn-default popup-trigger documentation-button" href="#popup-4">
Bottom Right
</a>
</div>
</div>
<hr class="space xs" />
<div class="row">
<div class="col-md-3">
<a class="btn btn-primary nav-justified btn-default popup-trigger documentation-button" href="#popup-5">
Full Width Up
</a>
</div>
<div class="col-md-3">
<a class="btn btn-primary nav-justified btn-default popup-trigger documentation-button" href="#popup-6">
Full Width Down
</a>
</div>
<div class="col-md-3">
<a class="btn btn-primary nav-justified btn-default popup-trigger documentation-button" href="#popup-4">
Default
</a>
</div>
<div class="col-md-3">
<a class="btn btn-primary nav-justified btn-default popup-trigger documentation-button" href="#popup-7">
No title
</a>
</div>
</div>
<hr class="space xs" />
<div class="row">
<div class="col-md-3">
<a class="btn btn-primary nav-justified btn-default popup-trigger documentation-button" href="#popup-8">
With image
</a>
</div>
</div>
</div>
</div>
<div>
<div id="popup-1" class="popup-banner popup-top-left" data-popup-anima="fade-left">
<i class="fa fa-times popup-close"></i>
<div class="bs-panel panel-default">
<div class="panel-heading">Panel heading</div>
<div class="panel-body">
L'orem ipsum dolor, consectetur adipisicing elit, sed do eiusmod.
</div>
</div>
</div>
<div id="popup-2" class="popup-banner popup-top-right" data-popup-anima="fade-right">
<i class="fa fa-times popup-close"></i>
<div class="bs-panel panel-default">
<div class="panel-heading">Panel heading</div>
<div class="panel-body">
L'orem ipsum dolor, consectetur adipisicing elit, sed do eiusmod.
</div>
</div>
</div>
<div id="popup-3" class="popup-banner popup-bottom-left" data-popup-anima="fade-left">
<i class="fa fa-times popup-close"></i>
<div class="bs-panel panel-default">
<div class="panel-heading">Panel heading</div>
<div class="panel-body">
L'orem ipsum dolor, consectetur adipisicing elit, sed do eiusmod.
</div>
</div>
</div>
<div id="popup-4" class="popup-banner popup-bottom-right" data-popup-anima="fade-right">
<i class="fa fa-times popup-close"></i>
<div class="bs-panel panel-default">
<div class="panel-heading">Panel heading</div>
<div class="panel-body">
L'orem ipsum dolor, consectetur adipisicing elit, sed do eiusmod.
</div>
</div>
</div>
<div id="popup-5" class="popup-banner full-width-top" data-popup-anima="fade-top">
<i class="fa fa-times popup-close"></i>
L'orem ipsum dolor, consectetur adipisicing elit, 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 laudantium.
</div>
<div id="popup-6" class="popup-banner full-width-bottom" data-popup-anima="fade-bottom">
<i class="fa fa-times popup-close"></i>
L'orem ipsum dolor, consectetur adipisicing elit, 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 laudantium.
</div>
<div id="popup-7" class="popup-banner popup-bottom-right" data-popup-anima="fade-right">
<i class="fa fa-times popup-close"></i>
<div class="bs-panel panel-default">
<div class="panel-body">
L'orem ipsum dolor, consectetur adipisicing elit, sed do eiusmod.
</div>
</div>
</div>
<div id="popup-8" class="popup-banner popup-bottom-right" data-popup-anima="fade-right">
<i class="fa fa-times popup-close"></i>
<div class="bs-panel panel-default">
<div class="panel-heading">Panel heading</div>
<div class="panel-body">
<a class="img-box"><img src="http://www.framework-y.com/images/lightbox-thumb.jpg" alt=""></a>
L'orem ipsum dolor, consectetur adipisicing elit, sed do eiusmod.
</div>
</div>
</div>
</div>
<div class="section-empty text-center section-doc">
<div class="container content">
<h4 class="text-normal">Documentation</h4>
<p>This template is built with HTWF and more variants<br /> are available, check the official documentation for more details.</p>
<hr class="space xs" />
<a href="http://html.framework-y.com/containers/lightbox/" target="_blank" class="btn btn-sm">Go to documentation</a>
</div>
</div>
<footer class="footer-base">
<div class="content">
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="tag-row icon-row icon-row-square">
<span><a>About</a></span>
<span><a>Services</a></span>
<span><a>Support</a></span>
<span><a>Contacts</a></span>
</div>
</div>
<div class="col-md-6 text-right text-center-sm">
<div class="btn-group social-group btn-group-icons">
<a target="_blank" href="#" data-social="share-facebook" data-toggle="tooltip" data-placement="top" title="Facebook">
<i class="fa fa-facebook text-s"></i>
</a>
<a target="_blank" href="#" data-social="share-twitter" data-toggle="tooltip" data-placement="top" title="Twitter">
<i class="fa fa-twitter text-s"></i>
</a>
<a target="_blank" href="#" data-social="share-google" data-toggle="tooltip" data-placement="top" title="Google+">
<i class="fa fa-google-plus text-s"></i>
</a>
<a target="_blank" href="#" data-social="share-linkedin" data-toggle="tooltip" data-placement="top" title="LinkedIn">
<i class="fa fa-linkedin text-s"></i>
</a>
</div>
</div>
</div>
<div class="row copy-row">
<div class="col-md-12 copy-text">
© 2018 Structura - One page minimal template <span>Handmade by <a href="http://schiocco.com/">schiocco.com</a></span>
</div>
</div>
</div>
</div>
<script src="../../../HTWF/scripts/jquery.min.js"></script>
<script src="../../../HTWF/scripts/script.js"></script>
<link rel="stylesheet" href="../../../HTWF/scripts/iconsmind/line-icons.min.css">
<script src="../../../HTWF/scripts/bootstrap/js/bootstrap.min.js"></script>
<script src="../../../HTWF/scripts/flexslider/jquery.flexslider-min.js"></script>
<script src="../../../HTWF/scripts/jquery.magnific-popup.min.js"></script>
<script src="../../../HTWF/scripts/jquery.slimscroll.min.js"></script>
<script src="../../../HTWF/scripts/jquery.tab-accordion.js"></script>
<script src="../../../HTWF/scripts/parallax.min.js"></script>
</footer>
</body>
</html>