Home Version 9 Page Code
Click to preview the Home Version 9 demo. View demo
Preview:
NEW APP STYLE CREATE YOUR APP PAGE You can manage (BannerPane)
Code:
html
<ul class="home09-banner"> <li style="height: 407px; background-image:url('http://demo8.dnngo.net/portals/13/Home09-Images/home09-bannerbg.jpg')"> <div class="content"> <div class="title"> <div class="animation_1">NEW APP STYLE</div> <div class="animation_2"> CREATE YOUR APP PAGE </div> <div class="animation_3"> You can manage your website easily</div> </div> <div id="nextPage"> </div> <div class="pic_list"> <img alt="" class="animation_4" src="http://demo8.dnngo.net/portals/13/Home09-Images/home09-img02.png" /> <img alt="" class="animation_5" src="http://demo8.dnngo.net/portals/13/Home09-Images/home09-img01.png" /> <img alt="" class="animation_6" src="http://demo8.dnngo.net/portals/13/Home09-Images/home09-img03.png" /> </div> </div> </li> </ul>User Account (TopPane)
Code:
html
<div class="row animation pb-30">
<div class="col-md-3 col-sm-6 animation_item fadeInUp">
<div class="home09-ibox">
<div class="ico"><img alt="" src="http://demo8.dnngo.net/portals/13/Home09-Images/home09-icon04.png" /></div>
<h5>User Account</h5>
<p>Lorem ipsum dolor sit amet, euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan. </p>
<a href="http://store.dnnsoftware.com/home/product-details/PackageID/36589/r/cd57d7207c9d4266bc34">VIEW MORE ></a>
</div>
<div class="visible-sm visible-xs pb-60"></div>
</div>
<div class="col-md-3 col-sm-6 animation_item fadeInUp delay1">
<div class="home09-ibox">
<div class="ico"><img alt="" src="http://demo8.dnngo.net/portals/13/Home09-Images/home09-icon03.png" /></div>
<h5>Our Location</h5>
<p>Lorem ipsum dolor sit amet, euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan. </p>
<a href="http://store.dnnsoftware.com/home/product-details/PackageID/36589/r/cd57d7207c9d4266bc34">VIEW MORE ></a>
</div>
<div class="visible-sm visible-xs pb-60"></div>
</div>
<div class="clearfix visible-sm"></div>
<div class="col-md-3 col-sm-6 animation_item fadeInUp delay2">
<div class="home09-ibox">
<div class="ico"><img alt="" src="http://demo8.dnngo.net/portals/13/Home09-Images/home09-icon02.png" /></div>
<h5>Seo Friendly</h5>
<p>Lorem ipsum dolor sit amet, euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan. </p>
<a href="https://www.dnngo.net/DNNStore/tabid/58/ProductID/1647/Default.aspx">VIEW MORE ></a>
</div>
<div class="visible-xs pb-60"></div>
</div>
<div class="col-md-3 col-sm-6 animation_item fadeInUp delay3">
<div class="home09-ibox">
<div class="ico"><img alt="" src="http://demo8.dnngo.net/portals/13/Home09-Images/home09-icon01.png" /></div>
<h5>Full Support</h5>
<p>Lorem ipsum dolor sit amet, euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan. </p>
<a href="https://www.dnngo.net/DNNStore/tabid/58/ProductID/1647/Default.aspx">VIEW MORE ></a>
</div>
</div>
</div>We Have Everything You Need! (Full_Screen_PaneB · 1)
Code:
html
<div class="home09-bg01">
<div class="container pt-60 animation fadeInUp">
<div class="home09-cont pt-10">
<h2> We Have Everything You Need!</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet<br />lacus accumsan et viverra justo commodo.<br /><br /></p>
<p>
<a class="btn animationhover rubberBand" href="#">$99 FOR DOWNLOAD</a>
<a class="btn animationhover rubberBand" href="#">GO TO THE STORE</a>
</p>
</div> <img alt="" class="img-responsive animation fadeInUp" src="http://demo8.dnngo.net/portals/13/Home09-Images/home09-img04.png" /> </div>
</div>Comments from Buyers (Full_Screen_PaneB · 2)
Code:
html
<div class="home09-bg02"> <div class="shade"> <div class="container pt-60 pb-60"> <div class=" clearfix animation fadeInUp pt-10"> <h3 class="home09-title">Comments from Buyers</h3> <ul class="home09-ibox02"> <li> <div class="pic"><img alt="" src="http://demo8.dnngo.net/portals/13/Home09-Images/home09-team01.jpg" /></div> <p>“ You guys do a fantastic job. The skin looks exactly as we expected. We have now done several skins and even skins that were done 6 months ago ”</p> <strong>——Andrea Arkov / Designer</strong></li> <li class="i-right"> <div class="pic"><img alt="" src="http://demo8.dnngo.net/portals/13/Home09-Images/home09-team02.jpg" /></div> <p>“ You guys do a fantastic job. The skin looks exactly as we expected. We have now done several skins and even skins that were done 6 months ago ”</p> <strong>——Harralloy Chris/Dnngo Buyerr</strong></li> <li class="clear"> <span>“</span> </li> <li> <div class="pic"><img alt="" src="http://demo8.dnngo.net/portals/13/Home09-Images/home09-team03.jpg" /></div> <p>“ You guys do a fantastic job. The skin looks exactly as we expected. We have now done several skins and even skins that were done 6 months ago ”</p> <strong>——John Smith/Programmer</strong></li> <li class="i-right"> <div class="pic"><img alt="" src="http://demo8.dnngo.net/portals/13/Home09-Images/home09-team04.jpg" /></div> <p>“ You guys do a fantastic job. The skin looks exactly as we expected. We have now done several skins and even skins that were done 6 months ago ”</p> <strong>——Bela Chrisis/Manager</strong></li> </ul> </div> </div> </div> </div>Awesome Works (ContentPane)
Code:
html
<div class="animation fadeInUp">
<h3 class="home09-title02" style="text-align: center;">Awesome Works</h3>
<p class="pb-30" style="text-align: center;margin-bottom:0;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus<br />accumsan et viverra justo commodo.</p>
<div data-pagination="false" class="carousel home09-carousel pb-20">
<div class="item">
<a href="#"><img alt="" src="http://demo8.dnngo.net/portals/13/Home09-Images/home09-img05.jpg" /></a>
</div>
<div class="item">
<a href="#"><img alt="" src="http://demo8.dnngo.net/portals/13/Home09-Images/home09-img06.jpg" /></a>
</div>
<div class="item">
<a href="#"><img alt="" src="http://demo8.dnngo.net/portals/13/Home09-Images/home09-img07.jpg" /></a>
</div>
<div class="item">
<a href="#"><img alt="" src="http://demo8.dnngo.net/portals/13/Home09-Images/home09-img08.jpg" /></a>
</div>
<div class="item">
<a href="#"><img alt="" src="http://demo8.dnngo.net/portals/13/Home09-Images/home09-img05.jpg" /></a>
</div>
<div class="item">
<a href="#"><img alt="" src="http://demo8.dnngo.net/portals/13/Home09-Images/home09-img06.jpg" /></a>
</div>
<div class="item">
<a href="#"><img alt="" src="http://demo8.dnngo.net/portals/13/Home09-Images/home09-img07.jpg" /></a>
</div>
<div class="item">
<a href="#"><img alt="" src="http://demo8.dnngo.net/portals/13/Home09-Images/home09-img08.jpg" /></a>
</div>
</div>
</div>Amazing Features (Full_Screen_PaneE)
Code:
html
<div class="home09-bg03"> <div class="container pt-60"> <div class="row animation"> <div style="text-align: left;" class="col-sm-6 col-sm-push-6"> <h3 class="home09-title03 animation_item fadeInRight delay1">Amazing Features</h3> <ul class="home09-ibox03"> <li class="animation_item fadeInRight delay2"> <div class="ico"><img alt="" src="http://demo8.dnngo.net/portals/13/Home09-Images/home09-icon05.png" /></div> <h5>Create Mobilesite</h5> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euism roin gravida dolor sit amet lacus accumsan </p> </li> <li class="animation_item fadeInRight delay3"> <div class="ico"><img alt="" src="http://demo8.dnngo.net/portals/13/Home09-Images/home09-icon06.png" /></div> <h5>Perfect Tone Quality</h5> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euism roin gravida dolor sit amet lacus accumsan </p> </li> <li class="animation_item fadeInRight delay4"> <div class="ico"><img alt="" src="http://demo8.dnngo.net/portals/13/Home09-Images/home09-icon07.png" /></div> <h5>Write A Message</h5> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euism roin gravida dolor sit amet lacus accumsan </p> </li> </ul> <a href="http://store.dnnsoftware.com/home/product-details/PackageID/36589/r/cd57d7207c9d4266bc34" class="home09-btn animation_item fadeInRight delay5">VIEW MORE</a> <div class="visible-sm visible-xs pb-60"></div> </div> <div class="col-sm-6 col-sm-pull-6 animation_item fadeInLeft"><img alt="" src="http://demo8.dnngo.net/portals/13/Home09-Images/home09-img10.png" class="img-responsive" /></div> </div> </div> </div>Our Capabilities (BottomPane)
Code:
html
<div class="animation fadeInUp pt-20 pb-10">
<h3 class="home09-title02" style="text-align: center;">Our Capabilities</h3>
<p class="pb-30" style="text-align: center;margin-bottom: 0;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus<br />accumsan et viverra justo commodo.</p>
<div class="home09-chart row">
<div class="col-md-3 col-sm-6">
<div class="home09-percentage a_t_c" data-percent="97">
<div class="percentage_inner"> <span>0</span>%</div>
</div>
<h5>Web Design</h5>
<p>Lorem ipsum dolor sit amet, euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan. </p>
</div>
<div class="col-md-3 col-sm-6">
<div class="home09-percentage a_t_c" data-percent="88">
<div class="percentage_inner"> <span>0</span>%</div>
</div>
<h5>HTML5 & CSS3</h5>
<p>Lorem ipsum dolor sit amet, euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan. </p>
</div>
<div class="clearfix visible-sm"></div>
<div class="col-md-3 col-sm-6">
<div class="home09-percentage a_t_c" data-percent="63">
<div class="percentage_inner"> <span>0</span>%</div>
</div>
<h5>JQuery</h5>
<p>Lorem ipsum dolor sit amet, euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan. </p>
</div>
<div class="col-md-3 col-sm-6">
<div class="home09-percentage a_t_c" data-percent="50">
<div class="percentage_inner"> <span>0</span>%</div>
</div>
<h5>Programme</h5>
<p>Lorem ipsum dolor sit amet, euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan. </p>
</div>
</div>
</div>Version history (Full_Screen_PaneH · 1)
Code:
html
<div class="home09-bg04"> <div class="container pt-60 pb-60"> <div class="home09-cont pt-10"> <h2 class="animation fadeInUp"> Version history</h2> <p class="pb-20 animation fadeInUp">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus<br />accumsan et viverra justo commodo.</p> <div class="home09-timeline animation"> <div class="time_year animation_item fadeIn"><span> 2014 </span></div> <div class="time_box_left animation_item fadeIn delay1"> <div class="time_photo"><img alt="" src="http://demo8.dnngo.net/portals/13/Home09-Images/home09-img11.png" /></div> <div class="time_content"> <div class="time_title">Responsive & Retina Ready </div> <div class="time_month"><span class="fa fa-calendar"></span> May 16 </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 </p> </div> </div> <div class="time_box_right animation_item fadeIn delay2"> <div class="time_photo"><img alt="" src="http://demo8.dnngo.net/portals/13/Home09-Images/home09-img12.png" /></div> <div class="time_content"> <div class="time_title">Blog Responsive Themes</div> <div class="time_month"><span class="fa fa-calendar"></span> July 23 </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 </p> </div> </div> <div class="time_year animation_item fadeIn delay3"><span> 2013</span></div> <div class="time_box_left animation_item fadeIn delay4"> <div class="time_photo"><img alt="" src="http://demo8.dnngo.net/portals/13/Home09-Images/home09-img13.png" /></div> <div class="time_content"> <div class="time_title">Responsive & Retina Ready </div> <div class="time_month"><span class="fa fa-calendar"></span> May 16 </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 </p> </div> </div> <div class="time_box_right animation_item fadeIn delay5"> <div class="time_photo"><img alt="" src="http://demo8.dnngo.net/portals/13/Home09-Images/home09-img14.png" /></div> <div class="time_content"> <div class="time_title">Blog Responsive Themes</div> <div class="time_month"><span class="fa fa-calendar"></span> July 23 </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 </p> </div> </div> </div> <div class="clear"></div> <a class="time_more3 animation_item fadeIn delay6" href="#">VIEW MORE</a> </div> </div> </div>Pricing Tables (Full_Screen_PaneH · 2)
Code:
html
<div class="container pt-60 animation fadeInUp">
<h3 class="home09-title02" style="text-align: center;">Pricing Tables</h3>
<p class="pb-40" style="text-align: center;margin-bottom: 0;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus<br />accumsan et viverra justo commodo.</p>
<div class="price-table home09-price row">
<div class="col-sm-12 col-md-4">
<div class="price_title">
<h2><span class="fa fa-heart-o"></span> BASIC PLAN</h2> </div>
<div class="price_holder">
<div class="price_box"><span class="sup">$</span><span class="price">199</span> <span class="unit">/m</span> </div>
<ul>
<li>1GB Storage Space</li>
<li>50GB Database</li>
<li>10 Portfolio Items</li>
<li>Unlimited Colors</li>
<li>Responsive Web</li>
</ul>
<a href="http://store.dnnsoftware.com/home/product-details/PackageID/36589/r/cd57d7207c9d4266bc34" class="btn ">BUY IT NOW</a>
</div>
</div>
<div class="col-sm-12 col-md-4 best_value">
<div class="price_title ">
<h2><span class="fa fa-star-o"></span> PROFESSIONAL</h2> </div>
<div class="price_holder">
<div class="price_box"><span class="sup">$</span><span class="price">299</span> <span class="unit">/m</span> </div>
<ul>
<li>1GB Storage Space</li>
<li>50GB Database</li>
<li>10 Portfolio Items</li>
<li>Unlimited Colors</li>
<li>Responsive Web</li>
</ul>
<a href="https://www.dnngo.net/DNNStore/tabid/58/ProductID/1647/Default.aspx" class="btn">BUY IT NOW</a>
</div>
</div>
<div class="col-sm-12 col-md-4">
<div class="price_title">
<h2><span class="fa fa-external-link"></span> EXTREME</h2> </div>
<div class="price_holder">
<div class="price_box"><span class="sup">$</span><span class="price">399</span> <span class="unit">/m</span> </div>
<ul>
<li>1GB Storage Space</li>
<li>50GB Database</li>
<li>10 Portfolio Items</li>
<li>Unlimited Colors</li>
<li>Responsive Web</li>
</ul>
<a href="http://store.dnnsoftware.com/home/product-details/PackageID/36589/r/cd57d7207c9d4266bc34" class="btn">BUY IT NOW</a>
</div>
</div>
</div>
</div>Download App (FooterBottomPaneA)
Code:
html
<div class="animation fadeInUp pt-30"> <div class="home09-cont"> <h2 style="text-align: center;">Download App</h2> <p style="text-align: center;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus<br />accumsan et viverra justo commodo.</p> </div> <div class="home09-social clearfix"> <a href="#"><span class="fa fa-twitter"></span></a> <a href="#"><span class="fa fa-tumblr"></span></a> <a href="#"><span class="fa fa-facebook"></span></a> <a href="#"><span class="fa fa-drupal"></span></a> <a href="#"><span class="fa fa-google-plus"></span></a> <a href="#"><span class="fa fa-youtube"></span></a> </div> <p class="pt-40 pb-20" style="text-align: center;"> <a class="home09-btn02" href="#"><span class="fa fa-apple"></span> GO TO APPLE APPS</a> <a class="home09-btn02" href="#"><span class="fa fa-android"></span> GO TO ANDROID APPS</a> </p> </div>App Site | Recent Post | Comments (FooterPane)
Code:
html
<a href="#">App Site</a> | <a href="#">Recent Post</a> | <a href="#">Comments</a>