Home Version 41 Page Code
Click to preview the Home Version 41 demo. View demo
Preview:
Banner Section (BannerPane)
This section uses the DNNGo LayerGallery Pro module.
Add the slides (images, text, links) manually in the module — see LayerGallery Pro.
OUR SERVICE (Full_Screen_PaneA)
Code:
html
<div class="container pb-60">
<div class="home41-title01">
<h2>OUR SERVICE</h2>
<p class="home41-pr home41-pl big_size">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, eius perferendis temporibus sequi magni odit repellat iure .</p>
</div>
<div class="sync_carousel sync_carousel_1 animation pb-20">
<div class="carousel_nav">
<div class="item animation_item scaleUp delay1">
<div class="ico"><span class="fa fa-align-left"></span><em class="line"></em></div>
<h6>STATISTICS</h6> </div>
<div class="item animation_item scaleUp delay2">
<div class="ico"><span class="fa fa-wifi"></span><em class="line"></em></div>
<h6>SIGNAL</h6> </div>
<div class="item animation_item scaleUp delay3">
<div class="ico"><span class="fa fa-clock-o"></span><em class="line"></em></div>
<h6>CLOCK</h6> </div>
<div class="item animation_item scaleUp delay4">
<div class="ico"><span class="fa fa-refresh"></span><em class="line"></em></div>
<h6>UPDATE</h6> </div>
<div class="item animation_item scaleUp delay5">
<div class="ico"><span class="fa fa fa-font"></span><em class="line"></em></div>
<h6>TYPEFACE</h6> </div>
</div>
<div class="carousel_main animation fadeIn delay6">
<div class="item">
<p class="pb-40" style="margin-bottom: 0;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, eius perferendis temporibus sequi magni odit repellat iure accusamus minima fugiat.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet</p>
<p style="margin-bottom: 0;">
<a class="dg-btn-1 btn-accent size-xl radius-3px" href="#">LIKE THIS THEME</a>
</p>
</div>
<div class="item">
<p class="pb-40" style="margin-bottom: 0;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, eius perferendis temporibus sequi magni odit repellat iure accusamus minima fugiat.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet</p>
<p style="margin-bottom: 0;">
<a class="dg-btn-1 btn-accent size-xl radius-3px" href="#">LIKE THIS THEME</a>
</p>
</div>
<div class="item">
<p class="pb-40" style="margin-bottom: 0;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, eius perferendis temporibus sequi magni odit repellat iure accusamus minima fugiat.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet</p>
<p style="margin-bottom: 0;">
<a class="dg-btn-1 btn-accent size-xl radius-3px" href="#">LIKE THIS THEME</a>
</p>
</div>
<div class="item">
<p class="pb-40" style="margin-bottom: 0;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, eius perferendis temporibus sequi magni odit repellat iure accusamus minima fugiat.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet</p>
<p style="margin-bottom: 0;">
<a class="dg-btn-1 btn-accent size-xl radius-3px" href="#">LIKE THIS THEME</a>
</p>
</div>
<div class="item">
<p class="pb-40" style="margin-bottom: 0;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, eius perferendis temporibus sequi magni odit repellat iure accusamus minima fugiat.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet</p>
<p style="margin-bottom: 0;">
<a class="dg-btn-1 btn-accent size-xl radius-3px" href="#">LIKE THIS THEME</a>
</p>
</div>
</div>
</div>
</div>
<div class="home41-bg01 pt-60">
<div class="container">
<div class="row">
<div class="col-md-6 col-md-push-6 col-sm-push-0 col-sm-12">
<h3 class="home41-title02 pt-20">SOME FEATURE ABOUT US</h3>
<div class="pb-20 big_size"> Lorem ipsu dolor sit amet, consectetur adipisicing elit. poribus sequi magni odit repellat iure accusNullam dictum felis eu pede set,repellat iure accusNullam dictum felis eu pede set . </div>
<div class="pb-50">
<ul class="home41-icon01 animation">
<li class="animation_item scaleUp delay1">
<div class="ico"><span class="fa fa-comments"></span></div>
<h5>Divergent Thinking</h5> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere quas vel consectetur culpa eum qui . </li>
<li class="animation_item scaleUp delay2">
<div class="ico"><span class="fa fa-sun-o"></span></div>
<h5>Boxed & Wide Layout</h5> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere quas vel consectetur culpa eum qui . </li>
<li class="animation_item scaleUp delay3">
<div class="ico"><span class="fa fa-music"></span></div>
<h5>470 Font Icons</h5> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere quas vel consectetur culpa eum qui . </li>
</ul>
</div>
</div>
<div class="col-md-6 col-md-pull-6 col-sm-pull-0 animation fadeInLeft"><img alt="" class="img-responsive" src="http://demo8.dnngo.net/Portals/13/Home41-Images/home41-img01.png"></div>
</div>
</div>
</div>
<div class="home41-bg02 pt-50 pb-50">
<div class="container animation zoomIn">
<h1> Compatible with desktops, laptops and mobile devices. <div class="clearfix visible-sm"></div> <a class="dg-btn-2 size-xl btn-white" href="#">READ MORE</a> </h1> </div>
</div>
<div class="container pt-60 pb-60">
<div class="row pt-20 pb-20">
<div class="col-md-6 col-sm-12 animation fadeInLeft">
<h3 class="home41-title02">INNOVATIVE DESIGNS</h3>
<p class="big_size" style="margin-bottom: 0;">Lorem ipsu dolor sit amet, consectetur elit. dictum felis eu pedeLorem ipsu dolor sit amet, consectetur adipisicing elit. </p>
<div class="panel-group home41-accordion pt-20" id="dg-acc07">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><a data-parent="#dg-acc07" data-toggle="collapse" href="#dg-07-1"><span class="arrow"></span>what we do ?</a></h4> </div>
<div class="panel-collapse collapse in" id="dg-07-1">
<div class="panel-body">
<p>Lorem ipsu dolor sit amet, consectetur elit. dictum felis eu pedeLorem ipsu dolor sit amet, consectetur adipisicing elit. </p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><a class="collapsed" data-parent="#dg-acc07" data-toggle="collapse" href="#dg-07-2"><span class="arrow"></span>Responsive design </a></h4> </div>
<div class="panel-collapse collapse" id="dg-07-2">
<div class="panel-body">
<p> Lorem ipsu dolor sit amet, consectetur elit. dictum felis eu pedeLorem ipsu dolor sit amet, consectetur adipisicing elit. </p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><a class="collapsed" data-parent="#dg-acc07" data-toggle="collapse" href="#dg-07-3"><span class="arrow"></span>Browser compatibility</a></h4> </div>
<div class="panel-collapse collapse" id="dg-07-3">
<div class="panel-body">
<p> Lorem ipsu dolor sit amet, consectetur elit. dictum felis eu pedeLorem ipsu dolor sit amet, consectetur adipisicing elit.</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-sm-12 animation fadeInRight"><img alt="" class="img-responsive" src="http://demo8.dnngo.net/Portals/13/Home41-Images/home41-image02.jpg"> </div>
</div>
</div>
<div class="home41-bg03 pt-60 pb-60">
<div class="container animation pt-20 pb-20">
<div class="home41-chart row">
<div class="col-sm-6 col-md-3 animation_item scaleUp delay1">
<div class="home41-percentage" data-percent="84">
<div class="percentage_inner"><span>0</span>%</div>
</div>
<h6>Web Design</h6> </div>
<div class="col-sm-6 col-md-3 animation_item scaleUp delay2">
<div class="home41-percentage" data-percent="89">
<div class="percentage_inner"><span>0</span>%</div>
</div>
<h6>HTML5 & CSS3</h6> </div>
<div class="col-sm-6 col-md-3 animation_item scaleUp delay3">
<div class="home41-percentage" data-percent="92">
<div class="percentage_inner"><span>0</span>%</div>
</div>
<h6>Graphic Design</h6> </div>
<div class="col-sm-6 col-md-3 animation_item scaleUp delay4">
<div class="home41-percentage" data-percent="90">
<div class="percentage_inner"><span>0</span>%</div>
</div>
<h6>Graphic Design</h6> </div>
</div>
</div>
</div>
<div class="home41-bg04 text-center pt-60 pb-60">
<div class="container animation zoomIn pt-60 pb-60">
<h2>FREE SUPPORTS AND UPDATES</h2>
<p class="pt-30 pb-30">Lorem ipsum dolor sit amet, consectetur adipisicing elit. temporibus sequi magni odit repellat iure accusNullam dictum felis eu pede set repellat iure accusNullam dictum felis eu pede set. </p>
<a class="dg-btn-2 btn-white border-2px radius-3px size-xl" href="#">Click to buy</a>
</div>
</div>
<div class="container pt-20">
<div class="home41-title03 pt-60 text-center">
<h4>THE MOST POPULAR WORKS </h4>
<p class="home41-pr100 home41-pl100 big_size pb-20" style="margin-top:-15px;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. temporibus sequi magni odit repellat iure accusNullam dictum felis eu pede set repellat iure accusNullam dictum felis eu pede set </p>
<div class="line"> </div>
</div>
</div>
<div class="isotope_grid home41-isotope">
<div class="isotope_group">
<a data-filter="*" href="#" class="active">All</a>
<a data-filter=".photography" href="#">PHOTOGRAPHY</a>
<a data-filter=".webdesign" href="#">WEB DESIGN</a>
<a data-filter=".graphics" href="#">GRAPHICS</a>
<a data-filter=".video" href="#">VIDEO</a>
</div>
<div data-min-width="381" class="isotope_main">
<div class="isotope_item photography graphics" data-zoom="2">
<div class="photo_box img_zoom ico_zoom">
<a href="#">
<div class="pic_box"> <img alt="" src="http://demo8.dnngo.net/Portals/13/Home41-Images/home41-image03.jpg" />
<div class="content">
<div class="vertical_center_1">
<div class="vertical_center_2">
<div class="ico"><span class="fa fa-link"></span></div>
<h3>IMAGE TITLE</h3>
<p>Photos,Design</p>
</div>
</div>
</div>
<div class="shade"></div>
</div>
</a>
</div>
</div>
<div class="isotope_item webdesign">
<div class="photo_box img_zoom ico_zoom">
<a href="#">
<div class="pic_box"> <img alt="" src="http://demo8.dnngo.net/Portals/13/Home41-Images/home41-image04.jpg" />
<div class="content">
<div class="vertical_center_1">
<div class="vertical_center_2">
<div class="ico"><span class="fa fa-link"></span></div>
<h3>IMAGE TITLE</h3>
<p>Photos,Design</p>
</div>
</div>
</div>
<div class="shade"></div>
</div>
</a>
</div>
</div>
<div class="isotope_item graphics video">
<div class="photo_box img_zoom ico_zoom">
<a href="#">
<div class="pic_box"> <img alt="" src="http://demo8.dnngo.net/Portals/13/Home41-Images/home41-image05.jpg" />
<div class="content">
<div class="vertical_center_1">
<div class="vertical_center_2">
<div class="ico"><span class="fa fa-link"></span></div>
<h3>IMAGE TITLE</h3>
<p>Photos,Design</p>
</div>
</div>
</div>
<div class="shade"></div>
</div>
</a>
</div>
</div>
<div class="isotope_item video" data-zoom="2">
<div class="photo_box img_zoom ico_zoom">
<a href="#">
<div class="pic_box"> <img alt="" src="http://demo8.dnngo.net/Portals/13/Home41-Images/home41-image06.jpg" />
<div class="content">
<div class="vertical_center_1">
<div class="vertical_center_2">
<div class="ico"><span class="fa fa-link"></span></div>
<h3>IMAGE TITLE</h3>
<p>Photos,Design</p>
</div>
</div>
</div>
<div class="shade"></div>
</div>
</a>
</div>
</div>
</div>
</div>
<div class="container animation zoomIn pt-60 pb-30">
<div class="home41-title03 pt-20">
<h4>WHAT THEY SAY</h4>
<div class="line"> </div>
</div>
<ul data-autoplay="3000" data-autoheight="false" data-display-arrows="false" data-position="fade" class=" Testimonials_tab home41-Testimonials">
<li>
<blockquote> <span class="pic"> <img alt="" class="img-responsive" src="http://demo8.dnngo.net/Portals/13/Home41-Images/home41-image07.jpg"></span>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. temporibus magni odit repellat iure accusNullam dictum felis eu.Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p> <small>AMBERYE</small> </blockquote>
</li>
<li>
<blockquote> <span class="pic"><img alt="" class="img-responsive" src="http://demo8.dnngo.net/Portals/13/Home41-Images/home41-image08.jpg"></span>
<p>consectetur adipisicing elit. temporibus magni odit repellat iure accusNullam dictum felis eu.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, </p> <small>AMBERYE</small> </blockquote>
</li>
<li>
<blockquote> <span class="pic"> <img alt="" class="img-responsive" src="http://demo8.dnngo.net/Portals/13/Home41-Images/home41-image09.jpg"></span>
<p>temporibus magni odit repellat iure accusNullam dictum felis eu.Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, consectetur adipisicing elit. consectetur adipisicing elit. </p> <small>AMBERYE</small> </blockquote>
</li>
<li>
<blockquote> <span class="pic"> <img alt="" class="img-responsive" src="http://demo8.dnngo.net/Portals/13/Home41-Images/home41-image08.jpg"></span>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. temporibus magni odit repellat iure accusNullam dictum felis eu.Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p> <small>AMBERYE</small> </blockquote>
</li>
</ul>
</div>OUR SKILLS (BottomOutPane)
Code:
html
<div class="home41-bg05 pt-60 pb-60">
<div class="container pt-20 pb-10">
<h3 class="home41-title04">OUR SKILLS</h3>
<p class="home41-pr100 home41-pl100 big_size">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, eius perferendis temporibus sequi magni odit repellat iure accusamus minima fugiat.Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<div class="home41-icon02 mt-40">
<div class="row animation">
<div class="col-md-3 col-sm-6 animation_item scaleUp delay1">
<div class="flip_box">
<div class="rotate">
<div class="front"><span class="fa fa-edit"></span>
<h3>PHOTOSHOP</h3> </div>
<div class="back">
<h3>PHOTOSHOP</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, eius perferendis temporibus sequi magni odit repellat iure accusamus minima fugiat.</p>
</div>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6 animation_item scaleUp delay2">
<div class="flip_box">
<div class="rotate">
<div class="front"><span class="fa fa-cogs"></span>
<h3>HTML + CSS</h3> </div>
<div class="back">
<h3>HTML + CSS</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, eius perferendis temporibus sequi magni odit repellat iure accusamus minima fugiat.</p>
</div>
</div>
</div>
</div>
<div class="clearfix visible-sm"> </div>
<div class="col-md-3 col-sm-6 animation_item scaleUp delay3">
<div class="flip_box">
<div class="rotate">
<div class="front"><span class="fa fa-camera"></span>
<h3>ILLUSTRATOR</h3> </div>
<div class="back">
<h3>ILLUSTRATOR</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, eius perferendis temporibus sequi magni odit repellat iure accusamus minima fugiat.</p>
</div>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6 animation_item scaleUp delay4">
<div class="flip_box">
<div class="rotate">
<div class="front"><span class="fa fa-lightbulb-o"></span>
<h3>CREATIVE</h3> </div>
<div class="back">
<h3>CREATIVE</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, eius perferendis temporibus sequi magni odit repellat iure accusamus minima fugiat.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>ABOUT US (FootPaneD)
Code:
html
<div class="animation">
<div class="animation_item scaleUp delay1"> <p>Lorem ipsum dolor sit amet, consetetur vidunt ut labore et dolore Donec id elit llus ac cursus commodo, tortor mauris s et accusam et justo duo dolores et ea sum dolor sit amet, consectetur nvallis egestas rhoncus.anteluctus vel. </p> <div class="home41-footer-social"> <a href="#" class="fa fa-twitter"></a> <a href="#" class="fa fa-facebook"></a> <a href="#" class="fa fa-dribbble"></a> <a href="#" class="fa fa-instagram"></a> <a href="#" class="fa fa-steam"></a> <a href="#" class="fa fa-tumblr"></a> </div> </div>
</div>RECENT POST (FootPaneE)
Code:
html
<div class="animation"><ul class="home41-footerlist animation_item scaleUp delay2"> <li> <p>Lorem ipsum dolor sit amet</p> <span>may 5, 2014</span></li> <li> <p>mauris s et accusam et justo</p> <span>March 18, 2014</span> </li> <li> <p>Donec facilisis viverra anteluctus vel</p> <span>February 12, 2014</span></li> </ul></div>GOOGLE MAP (FootPaneF)
Code:
html
<div class="animation"><div id="gmap01" class="animation_item scaleUp delay3"></div></div>CONTACT INFO (FootPaneG)
Code:
html
<div class="animation"><ul class="home41-footerlist02 animation_item scaleUp delay4"> <li><span class="fa fa-map-marker"></span>usto duo dolores et ea sum dolor sit amet, consectetur no.12345 nvallis egestas rhoncus </li> <li><span class="fa fa-mobile-phone"></span>phone : +( 1 )-123-456-789-0</li> <li><span class="fa fa-envelope"></span>Email : [email protected]</li> </ul></div>App Site | Recent Post | Comments (FooterPane)
Code:
html
<a href="#">App Site</a> | <a href="#">Recent Post</a> | <a href="#">Comments</a>