Home Version 8 Page Code
Click to preview the Home Version 8 demo. View demo
Preview:
Banner Section (BannerPane)
This section uses the DNNGo LayerGallery Pro module.
The download package provides import data for this page (Home8-ContentListEntity.xml in the DNNGo_LayerGalleryPro Module folder). Import it via Manager → Import & Export to recreate the demo banner — see LayerGallery Pro.
Popular Products (BannerPane · 2)
Code:
html
<ul class="home08-ibox clearfix">
<li class="one animation zoomInUp delay1">
<div class="icon"><img alt="" src="http://demo8.dnngo.net/portals/13/Home08-Images/home08-icon01.png" /></div>
<h4>Popular Products</h4>
<p>Donec pede justo, fringilla vel, aliquet nec, vulput ate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium.</p>
</li>
<li class="two animation zoomInUp delay2">
<div class="icon"><img alt="" src="http://demo8.dnngo.net/portals/13/Home08-Images/home08-icon02.png" /></div>
<h4>Host Settings</h4>
<p>Donec pede justo, fringilla vel, aliquet nec, vulput ate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium.</p>
</li>
<li class="three animation zoomInUp delay3">
<div class="icon"><img alt="" src="http://demo8.dnngo.net/portals/13/Home08-Images/home08-icon03.png" /></div>
<h4>Leave Message</h4>
<p>Donec pede justo, fringilla vel, aliquet nec, vulput ate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium.</p>
</li>
<li class="four animation zoomInUp delay4">
<div class="icon"><img alt="" src="http://demo8.dnngo.net/portals/13/Home08-Images/home08-icon04.png" /></div>
<h4>Creative Web</h4>
<p>Donec pede justo, fringilla vel, aliquet nec, vulput ate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium.</p>
</li>
</ul>Interactive, compelling and engaging (Full_Screen_PaneA · 1)
Code:
html
<div class="home08-cont pb-60"> <div class="container pb-20"> <div class="row"> <div class="col-sm-12 animation zoomInUp"> <h1>Interactive, compelling and engaging</h1> <div class="line"></div> <p class="big-size">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi archite cto beatae vitae dicta sunt explicabo.</p> <img alt="" class="img-responsive" src="http://demo8.dnngo.net/portals/13/Home08-Images/home8-img.png" /> </div> </div> </div> </div>Develop Business Solutions (Full_Screen_PaneA · 2)
Code:
html
<div class="home08-bg pt-60"> <div class="container pt-20"> <div class="row"> <div class="col-md-6 home08-cont02 col-sm-12 animation zoomInLeft"> <h1>Develop Business Solutions</h1> <div class="line"></div> <p>Nunc nibh diam, blandit vitae vehicula dapibus. Fusce et ornare sapien, non euismod felis. Integer et risus quis arcu. 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. Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br /><br />Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec eros eget nisl fringilla commodo. Maecenas ornare, augue ut ultricies tique, enim lectus pretium quam, tellus sedeu placerat ligula aliquam eu sapien eros enatis at dapibus.</p> <a class="home08-btn02" href="http://store.dnnsoftware.com/home/product-details/PackageID/36589/r/cd57d7207c9d4266bc34">Purchase Theme</a> <div class="visible-sm visible-xs pb-60"></div> </div> <div class="col-md-6 animation zoomInRight"> <img alt="" src="http://demo8.dnngo.net/portals/13/Home08-Images/home08-img02.png" class="img-responsive" /> </div> </div> </div> </div>Constantly upgrade DNN skins (Full_Screen_PaneA · 3)
Code:
html
<div class="home08-cont03 pt-60 pb-60"> <div class="container pt-20 pb-20"> <div class="row"> <div class="col-md-6 col-sm-12"> <div class="cont-left clearfix ml-30 mr-30"> <div class="left-img1 animation fadeInUp delay1"> <img alt="" src="http://demo8.dnngo.net/portals/13/Home08-Images/home08-img03.png" class="img-responsive" /> </div> <div class="left-img2 animation fadeInUp delay2"> <img alt="" src="http://demo8.dnngo.net/portals/13/Home08-Images/home08-img04.png" class="img-responsive" /> </div> <div class="left-img3 animation fadeInUp delay3"> <img alt="" src="http://demo8.dnngo.net/portals/13/Home08-Images/home08-img05.png" class="img-responsive" /> </div> </div> <div class="visible-sm visible-xs pb-60"></div> </div> <div class="col-md-6 col-sm-12 animation fadeInRight delay3"> <h1>Constantly upgrade DNN skins</h1> <div class="line"></div> <p>Sociis natoque penatibus et magnis dis parturient montes, nascetur ridicul us mus. Nam fermentum, nulla luctus pharetra vulputate, felis tellus mollis orci, sed rhoncus sapien nunc eget odio.</p> <ul> <li> <em class="fa"><img alt="" src="http://demo8.dnngo.net/portals/13/Home08-Images/home08-icon05.png" /></em> <h3>Advanced Technology</h3> <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Aenean lacinia bibendum nulla sed consectetur fringilla.</p> </li> <li> <em class="fa "><img alt="" src="http://demo8.dnngo.net/portals/13/Home08-Images/home08-icon06.png" /></em> <h3>Free Lifetime Services</h3> <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Aenean lacinia bibendum nulla sed consectetur fringilla.</p> </li> </ul> </div> </div> </div> </div>Aim to give your clients the best user experience (Full_Screen_PaneA · 4)
Code:
html
<div class="home08-bg02 pt-60 pb-60"> <div class="container"> <div class="row"> <div class="col-sm-9"> <h1 class="special_color_1 animation fadeInUp animated"> Aim to give your clients the best user experience </h1> </div><div class="col-sm-3"><a href="https://www.dnngo.net/" class="home08-btn03 large white">START FROM HERE</a></div> </div> </div> </div>Screen Shots (Full_Screen_PaneA · 5)
Code:
html
<div class="home08-cont04 pb-60 pt-60"> <div class="container pt-20 pb-20"> <div class="row"> <div class="col-sm-12"> <h1 class="animation scaleUp">Screen Shots</h1> <div class="line"></div> <p class="big-szie animation scaleUp">Nunc nibh diam, blandit vitae vehicula dapi bus, pulvinar eu sapien. Fusce et ornare sapien, non euismod felis</p> </div> <div class="col-sm-12"> <div data-autoplay="3000" data-autoheight="false" data-navigation="false" class="carousel home08-carousel animation scaleUp"> <div class="item"> <div class="photo_box ico_rotate"> <a href="#"> <div class="pic_box"> <img alt="" src="http://demo8.dnngo.net/portals/13/Home08-Images/home08-carousel1.jpg" class="img-responsive" /> <div class="shade"></div> </div> </a> </div> </div> <div class="item"> <div class="photo_box ico_rotate"> <a href="#"> <div class="pic_box"> <img alt="" src="http://demo8.dnngo.net/portals/13/Home08-Images/home08-carousel2.jpg" class="img-responsive" /> <div class="shade"></div> </div> </a> </div> </div> <div class="item"> <div class="photo_box ico_rotate"> <a href="#"> <div class="pic_box"> <img alt="" src="http://demo8.dnngo.net/portals/13/Home08-Images/home08-carousel3.jpg" class="img-responsive" /> <div class="shade"></div> </div> </a> </div> </div> <div class="item"> <div class="photo_box ico_rotate"> <a href="#"> <div class="pic_box"> <img alt="" src="http://demo8.dnngo.net/portals/13/Home08-Images/home08-carousel4.jpg" class="img-responsive" /> <div class="shade"></div> </div> </a> </div> </div> <div class="item"> <div class="photo_box ico_rotate"> <a href="#"> <div class="pic_box"> <img alt="" src="http://demo8.dnngo.net/portals/13/Home08-Images/home08-carousel1.jpg" class="img-responsive" /> <div class="shade"></div> </div> </a> </div> </div> </div> </div> </div> </div> </div>0 Downloads 0 Best Reviews 0 Shares 0 Messages (Full_Screen_PaneA · 6)
Code:
html
<div class="home08-bg03 pt-60 pb-60"> <div class="container pt-20"> <div class="home08-number row animation"> <div class="col-sm-6 col-md-3 na3_1 animation_item scaleUp delay1"> <span class="img"> <img alt="" src="http://demo8.dnngo.net/portals/13/Home08-Images/home08-icon07.png" /> </span> <span class="animation number" data-number="1600">0</span> <p class="text">Downloads</p> </div> <div class="col-sm-6 col-md-3 na3_2 animation_item scaleUp delay2"> <span class="img"> <img alt="" src="http://demo8.dnngo.net/portals/13/Home08-Images/home08-icon08.png" /> </span> <span class="animation number" data-number="2850">0</span> <p class="text">Best Reviews</p> </div> <div class="col-sm-6 col-md-3 na3_3 animation_item scaleUp delay3"> <span class="img"> <img alt="" src="http://demo8.dnngo.net/portals/13/Home08-Images/home08-icon09.png" /> </span> <span class="animation number" data-number="794">0</span> <p class="text">Shares</p> </div> <div class="col-sm-6 col-md-3 na3_4 animation_item scaleUp delay4"> <span class="img"> <img alt="" src="http://demo8.dnngo.net/portals/13/Home08-Images/home08-icon10.png" /></span> <span class="animation number" data-number="1360">0</span> <p class="text">Messages</p> </div> </div> </div> </div>Testimonials (Full_Screen_PaneA · 7)
Code:
html
<div class="home08-bg04 pt-60 pb-60"> <div class="container pt-20 pb-20"> <div class="row"> <div class="col-sm-12"> <h1 class="animation scaleUp">Testimonials</h1> <div class="line animation scaleUp"></div> <ul data-autoplay="3000" data-autoheight="false" data-position="roll-left" class="Testimonials_tab home08-Testimonials animation scaleUp"> <li> <blockquote> <p><span class="Pic"><img alt="" src="http://demo8.dnngo.net/portals/13/Home08-Images/home08-circle1.jpg" /></span>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. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincitellus ac cursus commodo. </p> <small>David Smith <span>The Buyer of dnngo.net</span></small> </blockquote> </li> <li> <blockquote> <p><span class="Pic"><img alt="" src="http://demo8.dnngo.net/portals/13/Home08-Images/home08-circle2.jpg" /></span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec eros eget nisl fringilla commodo. Maecenas ornare, augue ut ultricies tique, enim lectus pretium quam, tellus sedeu placerat ligula aliquam eu sapien eros enatis at dapibus.</p> <small>David Smith <span>The Buyer of dnngo.net</span></small> </blockquote> </li> <li> <blockquote> <p><span class="Pic"><img alt="" src="http://demo8.dnngo.net/portals/13/Home08-Images/home08-circle3.jpg" /></span>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. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> <small>David Smith <span>The Buyer of dnngo.net</span></small> </blockquote> </li> </ul> </div> </div> </div> </div>Pricing Table (Full_Screen_PaneA · 8)
Code:
html
<div class="pt-60 pb-20"> <div class="container pt-10"> <div class="row"> <div class="col-sm-12 home08-cont05"> <h1>Pricing Table</h1> <div class="line"></div> <p class="big-size">Nunc nibh diam, blandit vitae vehicula dapi bus, pulvinar eu sapien. Fusce et ornare sapien, non euismod felis</p> </div> </div> <div class="price-table home08-price row"> <div class="col-sm-6 col-md-3"> <div class="price_holder color1 animation zoomInUp delay1"> <div class="price_box"> <div class="price_title "> <h2>Basic Plan</h2> </div> <span class="sup">$</span> <span class="price">199</span> <p>Per Month</p> </div> <ul> <li><span class="fa fa-star-o"></span>Responsive Web</li> <li><span class="fa fa-star-o"></span>Sample Pages</li> <li><span class="fa fa-star-o"></span>Unlimited Colors</li> <li><span class="fa fa-star-o"></span>50 Databases</li> <li><span class="fa fa-star-o"></span>100GB Space</li> </ul> <a href="http://store.dnnsoftware.com/home/product-details/PackageID/36589/r/cd57d7207c9d4266bc34" class="btn">BUY NOW !</a> </div> </div> <div class="col-sm-6 col-md-3"> <div class="price_holder color2 animation zoomInUp delay2"> <div class="price_box"> <div class="price_title "> <h2>Professional</h2> </div> <span class="sup">$</span> <span class="price">299</span> <p>Per Month</p> </div> <ul> <li><span class="fa fa-star-o"></span>Responsive Web</li> <li><span class="fa fa-star-o"></span>Sample Pages</li> <li><span class="fa fa-star-o"></span>Unlimited Colors</li> <li><span class="fa fa-star-o"></span>100 Databases</li> <li><span class="fa fa-star-o"></span>200GB Space</li> </ul> <a href="https://www.dnngo.net/DNNStore/tabid/58/ProductID/1647/Default.aspx" class="btn">BUY NOW !</a> </div> </div> <div class="col-sm-6 col-md-3"> <div class="price_holder color3 animation zoomInUp delay3"> <div class="price_box"> <div class="price_title "> <h2>Maxium</h2> </div> <span class="sup">$</span> <span class="price">399</span> <p>Per Month</p> </div> <ul> <li><span class="fa fa-star-o"></span>Responsive Web</li> <li><span class="fa fa-star-o"></span>Sample Pages</li> <li><span class="fa fa-star-o"></span>Unlimited Colors</li> <li><span class="fa fa-star-o"></span>150 Databases</li> <li><span class="fa fa-star-o"></span>300GB Space</li> </ul> <a href="https://www.dnngo.net/DNNStore/tabid/58/ProductID/1647/Default.aspx" class="btn">BUY NOW !</a> </div> </div> <div class="col-sm-6 col-md-3"> <div class="price_holder color4 animation zoomInUp delay4"> <div class="price_box"> <div class="price_title "> <h2>Extreme</h2> </div> <span class="sup">$</span> <span class="price">499</span> <p>Per Month</p> </div> <ul> <li><span class="fa fa-star-o"></span>Responsive Web</li> <li><span class="fa fa-star-o"></span>Sample Pages</li> <li><span class="fa fa-star-o"></span>Unlimited Colors</li> <li><span class="fa fa-star-o"></span>200 Databases</li> <li><span class="fa fa-star-o"></span>400GB Space</li> </ul> <a href="http://store.dnnsoftware.com/home/product-details/PackageID/36589/r/cd57d7207c9d4266bc34" class="btn">BUY NOW !</a> </div> </div> </div> </div> </div>Download App From The Store (BottomOutPane)
Code:
html
<div class="home08-bg05 pb-60 pt-60"> <div class="container pt-10 pb-20"> <div class="row"> <div class="col-sm-12 animation fadeInUp"> <h1>Download App From The Store</h1> <div class="line"></div> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec eros eget nisl fringilla comm odo. Maecenas ornare, augue ut ultricies tristique, enim lectus pretium quam, quis bibendum metus tellus sedeu dolor lacus. Consequat viverra ipsum, sed placerat ligula aliquam eu sapien eros enatis at dapibus consequat viverra ipsum, sed placerat ligula aliquam eu. </p> <a class="home08-btn03 large white" href="#"><em class="fa fa-apple"></em>App Store</a><a class="home08-btn03 large white" href="#"><em class="fa fa-android"></em>Play Store</a> </div> </div> </div> </div>Home08PaneA Section (Home08PaneA)
Code:
html
<div id="gmap01"></div>Contact Us (Home08PaneB · 1)
Code:
html
<div class="pt-60 pb-20"></div> <div class="home08-title animation fadeInRight"> <h3>Contact Us</h3> <div class="line"></div> </div> <p class="pb-30" style="margin:0;">Pellentesque consequat viverra ipsum, sed placerat ligula aliquam eu. Ut tuismod aliquet enim, nec semper mi posuere nec lor nam nunc est, faucibus iaculis varius vitae, placerat quis felis. Nunc elementum dolor quis perarcuege tristique viverra. sed placerat ligula aliquam eu sapien eros enatis at dapibus.</p>Form Section (Home08PaneB)
This section uses the DNNGo PowerForms module — see PowerForms.
ABOUT US (FootPaneD)
Code:
html
<div class="home08-cont07 animation zoomInUp delay1">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec eros eget nisl fringilla comm odo. <br />
<br />
Maecenas ornare, augue ut ultricies tristique, enim lectus pretium quam, quis bibendum metus tellus sedeu dolor lacus. Consequat viverra ipsum.</p>
<br />
<a class="link" href="#"><em class="fa fa-facebook"></em></a>
<a class="link" href="#"><em class="fa fa-twitter"></em></a>
<a class="link" href="#"><em class="fa fa-linkedin"></em></a>
<a class="link" href="#"><em class="fa fa-vine"></em></a>
<a class="link" href="#"><em class="fa fa-youtube"></em></a>
<a class="link" href="#"><em class="fa fa-rss"></em></a>
</div>TAGS (FootPaneE)
Code:
html
<div class="home08-tag animation zoomInUp delay2"> <a href="https://www.dnngo.net">DNNGo</a> <a href="https://www.dnngo.net">HTML5</a> <a href="https://www.dnngo.net/DNNStore">CSS3</a> <a href="http://store.dnnsoftware.com/home/product-details/PackageID/36589/r/cd57d7207c9d4266bc34">Skin Pack</a> <a href="https://www.dnngo.net/DNNStore">Catalook</a> <a href="https://www.dnngo.net/DNNStore">Blog</a> <a href="https://www.dnngo.net/DNNStore">Gallery</a> <a href="http://store.dnnsoftware.com/home/product-details/PackageID/36589/r/cd57d7207c9d4266bc34">Features</a> <a href="http://store.dnnsoftware.com/home/product-details/PackageID/36589/r/cd57d7207c9d4266bc34">Short Code</a> <a href="https://www.dnngo.net/DNNStore">Mobilesite</a> <a href="https://www.dnngo.net/DNNStore">Photos</a> <a href="https://www.dnngo.net/DNNStore">News</a> <a href="https://www.dnngo.net/DNNStore">Form</a> <a href="http://store.dnnsoftware.com/home/product-details/PackageID/36589/r/cd57d7207c9d4266bc34">Responsive</a> </div>NEWS (FootPaneF)
Code:
html
<ul class="header08-cont06 animation zoomInUp delay3">
<li>
<div class="img"><img alt="" src="http://demo8.dnngo.net/portals/13/Home08-Images/home08-img06.png" /></div>
<p>Lorem ipsum dolor sit amet, consectetuer bollt adipiscing elit. Donec libero purus.</p>
<span class="date">February 12nd,2014</span> </li>
<div class="line"></div>
<li>
<div class="img"><img alt="" src="http://demo8.dnngo.net/portals/13/Home08-Images/home08-img07.png" /></div>
<p>Lorem ipsum dolor sit amet, consectetuer bollt adipiscing elit. Donec libero purus.</p>
<span class="date">March 08th,2014</span> </li>
</ul>LINKS (FootPaneG)
Code:
html
<ul class="home08-list animation zoomInUp delay4">
<li><a href="#"><span class="fa fa-step-forward"></span>Design & Skinning</a></li>
<li><a href="#"><span class="fa fa-step-forward"></span>Help Center</a></li>
<li><a href="#"><span class="fa fa-step-forward"></span>Modules Development</a></li>
<li><a href="#"><span class="fa fa-step-forward"></span>Download Center</a></li>
<li><a href="#"><span class="fa fa-step-forward"></span>Find Our Location</a></li>
</ul>App Site | Recent Post | Comments (FooterPane)
Code:
html
<a href="#">App Site</a> | <a href="#">Recent Post</a> | <a href="#">Comments</a>