Home Version 7 Page Code
Click to preview the Home Version 7 demo. View demo
Preview:
Banner Section (BannerPane)
This section uses the DNNGo LayerGallery Pro module.
The download package provides import data for this page (Home7-ContentListEntity.xml in the DNNGo_LayerGalleryPro Module folder). Import it via Manager → Import & Export to recreate the demo banner — see LayerGallery Pro.
Powerful Theme (Full_Screen_PaneA · 1)
Code:
html
<div class="container">
<div class="pane_layout animation">
<div class="row">
<div class="col-sm-6 col-md-3 animation_item scaleUp delay1">
<div class="home07-ibox">
<div class="icon-box"> <span class="fa fa-compass"></span> </div>
<h5>Powerful Theme</h5>
<p>Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci nean dignissim pellentque felis.</p>
<a href="http://store.dnnsoftware.com/home/product-details/PackageID/36589/r/cd57d7207c9d4266bc34">Read More</a>
</div>
<div class="visible-sm pb-60"></div>
</div>
<div class="col-sm-6 col-md-3 animation_item scaleUp delay2">
<div class="home07-ibox">
<div class="icon-box"> <span class="fa fa-globe"></span> </div>
<h5>Retina Ready</h5>
<p>Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci nean dignissim pellentque felis.</p>
<a href="http://store.dnnsoftware.com/home/product-details/PackageID/36589/r/cd57d7207c9d4266bc34">Read More</a>
</div>
<div class="visible-sm pb-60"></div>
</div>
<div class="col-sm-6 col-md-3 animation_item scaleUp delay3">
<div class="home07-ibox">
<div class="icon-box"> <span class="fa fa-soccer-ball-o"></span> </div>
<h5>Fronted Skin</h5>
<p>Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci nean dignissim pellentque felis.</p>
<a href="http://store.dnnsoftware.com/home/product-details/PackageID/36589/r/cd57d7207c9d4266bc34">Read More</a>
</div>
</div>
<div class="col-sm-6 col-md-3 animation_item scaleUp delay4">
<div class="home07-ibox xs-pb-0">
<div class="icon-box"> <span class="fa fa-adjust"></span> </div>
<h5>Adjust Bugs</h5>
<p>Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci nean dignissim pellentque felis.</p>
<a href="http://store.dnnsoftware.com/home/product-details/PackageID/36589/r/cd57d7207c9d4266bc34">Read More</a>
</div>
</div>
</div>
</div>
</div>Full_Screen_PaneA Section (Full_Screen_PaneA · 2)
Code:
html
<div class="mt-60 mb-60"> <div class="container"> <div class="pane_layout"> <div class="row"> <div class="col-sm-12"> <hr class="home7-dividers01" /> </div> </div> </div> </div> </div>The Features (Full_Screen_PaneA · 3)
Code:
html
<div class="pb-60"> <div class="container pb-20"> <div class="row"> <div class="col-sm-12"> <div class="home07-title01 animation scaleUp"> <h4><span>The Features</span></h4> </div> <div data-autoplay="false" data-autoheight="false" class="carousel home07-carousel animation scaleUp"> <div class="item"> <div class="cal1_main clearfix"> <div class="cal1_left1"> </div> <div class="cal1_right1"> <h5>Clean Design</h5> <div class="line"></div> <p>Donec sit amet lorem pretium neque fringilla imperdiet ac eu augue. Morbi non magna diam. Sed ac massa nisi, nec pellentesque tellus. Integer posuere volutpat nulla eu placerat.</p> <a class="linker" href="#">Read More</a> <div class="bottomline"></div> <div class="bottomicon"> <a class="fa fa-facebook-square" href="#"></a> <a class="fa fa-twitter-square" href="#"></a> <a class="fa fa-pinterest-square" href="#"></a> <a class="fa fa-tumblr-square" href="#"></a> <a class="fa fa-vimeo-square" href="#"></a> <a class="fa fa-hacker-news" href="#"></a> </div> </div> </div> </div> <div class="item"> <div class="cal1_main clearfix"> <div class="cal1_left2"> </div> <div class="cal1_right2"> <h5>470 Font Icons</h5> <div class="line"></div> <p>Donec sit amet lorem pretium neque fringilla imperdiet ac eu augue. Morbi non magna diam. Sed ac massa nisi, nec pellentesque tellus. Integer posuere volutpat nulla eu placerat.</p> <a class="linker" href="#">Read More</a> <div class="bottomline"></div> <div class="bottomicon"> <a class="fa fa-facebook-square" href="#"></a> <a class="fa fa-twitter-square" href="#"></a> <a class="fa fa-pinterest-square" href="#"></a> <a class="fa fa-tumblr-square" href="#"></a> <a class="fa fa-vimeo-square" href="#"></a> <a class="fa fa-hacker-news" href="#"></a> </div> </div> </div> </div> <div class="item"> <div class="cal1_main clearfix"> <div class="cal1_left3"> </div> <div class="cal1_right3"> <h5>Responsive Web</h5> <div class="line"></div> <p>Donec sit amet lorem pretium neque fringilla imperdiet ac eu augue. Morbi non magna diam. Sed ac massa nisi, nec pellentesque tellus. Integer posuere volutpat nulla eu placerat.</p> <a class="linker" href="#">Read More</a> <div class="bottomline"></div> <div class="bottomicon"> <a class="fa fa-facebook-square" href="#"></a> <a class="fa fa-twitter-square" href="#"></a> <a class="fa fa-pinterest-square" href="#"></a> <a class="fa fa-tumblr-square" href="#"></a> <a class="fa fa-vimeo-square" href="#"></a> <a class="fa fa-hacker-news" href="#"></a> </div> </div> </div> </div> </div> </div> </div> </div> </div>Customization services ensure what exactly you wan (Full_Screen_PaneA · 4)
Code:
html
<div class="home07-bg pt-50 pb-50"> <div class="container"> <div class="row"> <div class="col-sm-12"> <div class="home07-cont animation scaleUp"> <h1> Customization services ensure what exactly you want</h1> <p>We will design and develop the skins and modules based completely on your needs. Our aim is to provide what exactly you want.</p> <div class="clearfix visible-sm"></div> <a href="http://store.dnnsoftware.com/home/product-details/PackageID/36589/r/cd57d7207c9d4266bc34" class="home07-btn">Start Your Business</a> </div> </div> </div> </div> </div>Featured Products (Full_Screen_PaneA · 5)
Code:
html
<ul class="home07-cont02 clearfix animation"> <li class="the1 animation_item scaleUp delay1"> <div class="icon"><img alt="" src="http://demo8.dnngo.net/portals/13/Home07-Images/home07_cont1.png" /></div> <h5>Featured Products</h5> <div class="line"></div> <p>Donec consectetur diam ac nibh auctor ultricies. Integer mauris lacus, consequat in luctus id, semper sed felis. Srum felis. Cum sociis natoque magnis.</p> <a href="http://store.dnnsoftware.com/home/product-details/PackageID/36589/r/cd57d7207c9d4266bc34">Read More</a> </li> <li class="the2 animation_item scaleUp delay2"> <div class="icon"><img alt="" src="http://demo8.dnngo.net/portals/13/Home07-Images/home07_cont2.png" /></div> <h5>Powerful Theme</h5> <div class="line"></div> <p>Donec consectetur diam ac nibh auctor ultricies. Integer mauris lacus, consequat in luctus id, semper sed felis. Srum felis. Cum sociis natoque magnis.</p> <a href="http://store.dnnsoftware.com/home/product-details/PackageID/36589/r/cd57d7207c9d4266bc34">Read More</a> </li> <li class="the3 animation_item scaleUp delay3"> <div class="icon"><img alt="" src="http://demo8.dnngo.net/portals/13/Home07-Images/home07_cont3.png" /></div> <h5>update Template</h5> <div class="line"></div> <p>Donec consectetur diam ac nibh auctor ultricies. Integer mauris lacus, consequat in luctus id, semper sed felis. Srum felis. Cum sociis natoque magnis.</p> <a href="http://store.dnnsoftware.com/home/product-details/PackageID/36589/r/cd57d7207c9d4266bc34">Read More</a> </li> </ul>Portfolios (Full_Screen_PaneA · 6)
Code:
html
<div class="pt-60 pb-60"> <div class="container pt-20 pb-20"> <div class="row"> <div class="col-sm-12"> <div class="home07-title01 animation scaleUp"> <h4><span>Portfolios</span></h4> </div> <p class="home07-titlep animation scaleUp"> Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium dolore mque laudan tium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae consectetur adipiscing elit. </p> <ul class="home07-imglist animation scaleUp"> <li> <a href="#"><img alt="" src="http://demo8.dnngo.net/portals/13/Home07-Images/home07_img01.png" /></a> <a href="#"><img alt="" src="http://demo8.dnngo.net/portals/13/Home07-Images/home07_img02.png" /></a> <a href="#"><img alt="" src="http://demo8.dnngo.net/portals/13/Home07-Images/home07_img03.png" /></a> <a href="#"><img alt="" src="http://demo8.dnngo.net/portals/13/Home07-Images/home07_img04.png" /></a> </li> <li> <a href="#"><img alt="" src="http://demo8.dnngo.net/portals/13/Home07-Images/home07_img05.png" /></a> <a href="#"><img alt="" src="http://demo8.dnngo.net/portals/13/Home07-Images/home07_img06.png" /></a> <a href="#"><img alt="" src="http://demo8.dnngo.net/portals/13/Home07-Images/home07_img07.png" /></a> <a href="#"><img alt="" src="http://demo8.dnngo.net/portals/13/Home07-Images/home07_img08.png" /></a> <a href="#"><img alt="" src="http://demo8.dnngo.net/portals/13/Home07-Images/home07_img09.png" /></a> </li> <li> <a href="#"><img alt="" src="http://demo8.dnngo.net/portals/13/Home07-Images/home07_img10.png" /></a> <a href="#"><img alt="" src="http://demo8.dnngo.net/portals/13/Home07-Images/home07_img11.png" /></a> <a href="#"><img alt="" src="http://demo8.dnngo.net/portals/13/Home07-Images/home07_img12.png" /></a> <a href="#"><img alt="" src="http://demo8.dnngo.net/portals/13/Home07-Images/home07_img13.png" /></a> </li> </ul> </div> </div> </div> </div>Retina Ready (Full_Screen_PaneA · 7)
Code:
html
<div class="home07-bg02 pt-60"> <div class="container pt-20 pb-20"> <div class="row animation"> <div class="col-sm-4 animation_item scaleUp delay1"> <div class="home07-ibox02 mb-50"> <span class="fa fa-tint"></span> <h6> Retina Ready</h6> <p>Sed ut perspiciatis unde omnis iste natus error sit inventore veritatis et quasi architecto beatae consectetur adipiscing elit.</p> </div> </div> <div class="col-sm-4 animation_item scaleUp delay2"> <div class="home07-ibox02 mb-50"> <span class="fa fa-glass"></span> <h6> Best Services</h6> <p>Sed ut perspiciatis unde omnis iste natus error sit inventore veritatis et quasi architecto beatae consectetur adipiscing elit.</p> </div> </div> <div class="col-sm-4 animation_item scaleUp delay3"> <div class="home07-ibox02 mb-50"> <span class="fa fa-picture-o"></span> <h6> Photo Gallery</h6> <p>Sed ut perspiciatis unde omnis iste natus error sit inventore veritatis et quasi architecto beatae consectetur adipiscing elit.</p> </div> </div> <div class="col-sm-4 animation_item scaleUp delay4"> <div class="home07-ibox02 mb-60"> <span class="fa fa-video-camera"></span> <h6> Facetime Video</h6> <p>Sed ut perspiciatis unde omnis iste natus error sit inventore veritatis et quasi architecto beatae consectetur adipiscing elit.</p> </div> </div> <div class="col-sm-4 animation_item scaleUp delay5"> <div class="home07-ibox02 mb-60"> <span class="fa fa-briefcase"></span> <h6> New Product</h6> <p>Sed ut perspiciatis unde omnis iste natus error sit inventore veritatis et quasi architecto beatae consectetur adipiscing elit.</p> </div> </div> <div class="col-sm-4 animation_item scaleUp delay6"> <div class="home07-ibox02 mb-60"> <span class="fa fa-certificate"></span> <h6> Top Seller</h6> <p>Sed ut perspiciatis unde omnis iste natus error sit inventore veritatis et quasi architecto beatae consectetur adipiscing elit.</p> </div> </div> </div> </div> </div>Top Numbers (Full_Screen_PaneA · 8)
Code:
html
<div class="home7-bg03 pt-60 pb-60">
<div class="container pt-20 pb-20">
<div class="row animation">
<div class="col-sm-12">
<div class="home07-title01 animation_item scaleUp delay1">
<h4><span>Top Numbers</span></h4> </div>
<p class="home07-titlep animation_item scaleUp delay2"> Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium dolore mque laudan tium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae consectetur adipiscing elit. </p>
</div>
</div>
<div class="home07-number row">
<div class="col-md-6 col-sm-6 col-lg-3 animation_item scaleUp delay3">
<div class="na_box mt-30"> <span data-number="2800" class="animation number">0</span>
<p>Clients</p>
</div>
</div>
<div class="col-md-6 col-sm-6 col-lg-3 animation_item scaleUp delay4">
<div class="na_box mt-30"> <span data-number="9600" class="animation number">0</span>
<p>Downloads</p>
</div>
</div>
<div class="col-md-6 col-sm-6 col-lg-3 animation_item scaleUp delay5">
<div class="na_box mt-30"> <span data-number="3500" class="animation number">0</span>
<p>Followers</p>
</div>
</div>
<div class="col-md-6 col-sm-6 col-lg-3 animation_item scaleUp delay6">
<div class="na_box mt-30"> <span data-number="4700" class="animation number">0</span>
<p>Comments</p>
</div>
</div>
</div>
</div>
</div>About Us (Full_Screen_PaneA · 9)
Code:
html
<div class="pt-60"> <div class="container pt-20 pb-30"> <div class="row"> <div class="col-sm-6 animation fadeInLeft"> <h4 class="home07-title02">About Us</h4> <div id="home07-accordion" class="panel-group home07-accordion"> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a href="#collapse1_1" data-parent="#home07-accordion" data-toggle="collapse"><span class="accordion_icon"></span>Who We Are ?</a> </h4> </div> <div class="panel-collapse collapse in" id="collapse1_1"> <div class="panel-body"> <p>Phasellus enim libero, blandit vel sapi condimentum ultricies magna Quisque euismod orci ut et lobortis aliquam aliquam in tortor et lobortis aliquam Phasellus enim libero, blandit vel sapi condimentum ultricies magnis. Enim expedita sed quia nesciunt incidunt accusamus necessitati bustur modi adipisci officia.</p> <p class="linker"><a href="#">More Information</a></p> </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a class="collapsed" href="#collapse1_2" data-parent="#home07-accordion" data-toggle="collapse"><span class="accordion_icon"></span>What We Do ?</a> </h4> </div> <div class="panel-collapse collapse" id="collapse1_2"> <div class="panel-body"> <p>Phasellus enim libero, blandit vel sapi condimentum ultricies magna Quisque euismod orci ut et lobortis aliquam aliquam in tortor et lobortis aliquam Phasellus enim libero, blandit vel sapi condimentum ultricies magnis. Enim expedita sed quia nesciunt incidunt accusamus necessitati bustur modi adipisci officia 2 ...</p> <p class="linker"><a href="#">More Information</a></p> </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a class="collapsed" href="#collapse1_3" data-parent="#home07-accordion" data-toggle="collapse"><span class="accordion_icon"></span>How We Work ?</a> </h4> </div> <div class="panel-collapse collapse" id="collapse1_3"> <div class="panel-body"> <p>Phasellus enim libero, blandit vel sapi condimentum ultricies magna Quisque euismod orci ut et lobortis aliquam aliquam in tortor et lobortis aliquam Phasellus enim libero, blandit vel sapi condimentum ultricies magnis. Enim expedita sed quia nesciunt incidunt accusamus necessitati bustur modi adipisci officia 3 ...</p> <p class="linker"><a href="#">More Information</a></p> </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a class="collapsed" href="#collapse1_4" data-parent="#home07-accordion" data-toggle="collapse"><span class="accordion_icon"></span>Why Choose Us ?</a> </h4> </div> <div class="panel-collapse collapse" id="collapse1_4"> <div class="panel-body"> <p>Phasellus enim libero, blandit vel sapi condimentum ultricies magna Quisque euismod orci ut et lobortis aliquam aliquam in tortor et lobortis aliquam Phasellus enim libero, blandit vel sapi condimentum ultricies magnis. Enim expedita sed quia nesciunt incidunt accusamus necessitati bustur modi adipisci officia 4 ...</p> <p class="linker"><a href="#">More Information</a></p> </div> </div> </div> </div> </div> <div class="col-sm-6 animation fadeInRight"> <h4 class="home07-title02">Our Skills</h4> <p>Sed non neque elit. Sed ut imperdiet nisi. Proin condime ntum fermentum nunc. Etiam pharetra, erat sed ferm entum feugiat, velit mauris egestas quam, ut aliquam massa nisl quis neque. Sed non pharetra, erat sed ferm fermentum nunc. Tortor mauri Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor imperdiet.</p><br /><div class="home07-loadlist"> <p>Web Design </p> <div class="the1 progress progress-striped active"> <div data-width="80%" class="bar animation animationwidth"><span></span></div> </div> <p>HTML/CSS</p> <div class="the2 progress progress-striped active"> <div data-width="90%" class="bar animation animationwidth"><span></span></div> </div> <p>JQuery</p> <div class="the3 progress progress-striped active"> <div data-width="60%" class="bar animation animationwidth"><span></span> </div> </div> <p>DNN</p> <div class="the4 progress progress-striped active"> <div data-width="70%" class="bar animation animationwidth"><span></span></div> </div> </div> </div> </div> </div> </div>recent projects (BottomOutPane)
Code:
html
<div class="home07-bg04 pt-60 pb-60"> <div class="container pt-20 pb-20"> <div class="row"> <div class="home07-title01 animation scaleUp"> <h4><span><em>recent</em> projects</span></h4> </div> <div data-autoplay="false" data-pagination="false" data-autoheight="false" class="carousel home07-carousel02 animation scaleUp"> <div class="item"> <img alt="" src="http://demo8.dnngo.net/portals/13/Home07-Images/home07-carousel02-p1.jpg" /> <h3>blue folder design</h3> <div class="line"></div> <p>design / illustration</p> </div> <div class="item"> <img alt="" src="http://demo8.dnngo.net/portals/13/Home07-Images/home07-carousel02-p2.jpg" /> <h3>blue folder design</h3> <div class="line"></div> <p>design / illustration</p> </div> <div class="item"> <img alt="" src="http://demo8.dnngo.net/portals/13/Home07-Images/home07-carousel02-p3.jpg" /> <h3>blue folder design</h3> <div class="line"></div> <p>design / illustration</p> </div> <div class="item"> <img alt="" src="http://demo8.dnngo.net/portals/13/Home07-Images/home07-carousel02-p1.jpg" /> <h3>blue folder design</h3> <div class="line"></div> <p>design / illustration</p> </div> <div class="item"> <img alt="" src="http://demo8.dnngo.net/portals/13/Home07-Images/home07-carousel02-p2.jpg" /> <h3>blue folder design</h3> <div class="line"></div> <p>design / illustration</p> </div> </div> <div class="linker_out animation scaleUp"> <a class="linker" href="#">view portfolio <span class="fa fa-angle-right"></span></a> </div> </div> </div> </div>LATEST NEWS (FootPaneD)
Code:
html
<ul class="home07-ibox03 animation scaleUp">
<li>
<div class="img"><img alt="" src="http://demo8.dnngo.net/portals/13/Home07-Images/home07_img14.jpg" /></div>
<p>DNN Modules Development</p>
<span class="date">February 20th,2014</span> </li>
<div class="line"></div>
<li>
<div class="img"><img alt="" src="http://demo8.dnngo.net/portals/13/Home07-Images/home07_img15.jpg" /></div>
<p>Advanced Technology</p>
<span class="date">March 16th,2014</span> </li>
<div class="line"></div>
<li>
<div class="img"><img alt="" src="http://demo8.dnngo.net/portals/13/Home07-Images/home07_img16.jpg" /></div>
<p>Powerful & Creative Skin Pack</p>
<span class="date">September 08th,2014</span> </li>
</ul>FOLLOW US (FootPaneE)
Code:
html
<div class="home07-list animation scaleUp">
<p>Sed non neque elit. Sed ut imperdiet nisi. Proin condime ntum fermentum nunc. Etiam pharetra, erat sed ferm entum feugiati.</p>
<ul>
<li><a href="#"><span class="fa fa-facebook-square"></span>Facebook</a></li>
<li><a href="#"><span class="fa fa-twitter-square"></span>Twitter</a></li>
<li><a href="#"><span class="fa fa-vimeo-square"></span>Vimeo</a></li>
<li><a href="#"><span class="fa fa-pinterest-square"></span>pinterest</a></li>
</ul>
</div>TWEETS (FootPaneF)
Code:
html
<ul class="home07-list02 animation scaleUp">
<li><span class="fa fa-twitter"></span><a href="#">@ Frank Miller</a> Donec consectetur diam ac nibh auctor ultricies. Integer mauris lacus, consequat magnis.
<span class="date">1 day ago</span></li>
<li><span class="fa fa-twitter"></span><a href="#">@ John Smith</a> Mauris sit condim eser ntumsi um risus amets.
<span class="date">2 weeks ago</span></li>
<li><span class="fa fa-twitter"></span><a href="#">@ Harro Rote</a> Sed ut perspiciatis, unde omnis iste natus error sit volup.
<span class="date">1 month ago</span></li>
</ul>GET IN TOUCH (FootPaneG)
Code:
html
<div class="home07-aboutus animation scaleUp"> <p>Phasellus enim libero, blandit vel sapi condiment et lobortis aliquam aliquam in tortor et lobortis aliquam Phasellus enim libero, blandit vel sapi magnis.</p> <ul> <li>Address : XingAn Street No.287</li> <li>Phone : (+086)-123-456-78910</li> <li>Email : [email protected]</li> <li>Skype : dnngo-linda</li> <li>Website : www.dnngo.net</li> </ul> </div>