Home Version 20 Page Code
Click to preview the Home Version 20 demo. View demo
Preview:
Banner Section (BannerPane · 1)
Code:
html
<div id="home20-next">
<span class="fa fa-angle-double-down"></span>
</div>Banner Section (BannerPane)
This section uses the DNNGo LayerGallery Pro module.
Add the slides (images, text, links) manually in the module — see LayerGallery Pro.
DNN Modules (Full_Screen_PaneA · 1)
Code:
html
<div class="container pb-20"> <div class="row animation"> <div class="col-sm-6 col-md-3"> <div class="home20-ibox01 mb-60 animation_item scaleUp delay1"> <div class="icon_box"> <span class="fa fa-archive"></span> </div> <h5>DNN Modules</h5> <p>Donec in ut odio libero, at vulputate urna nulla tristique mi a massa convallis cursus. etiam.</p> <a href="http://store.dnnsoftware.com/home/product-details/PackageID/36589/r/cd57d7207c9d4266bc34" target="blank">Read More</a> </div> </div> <div class="col-sm-6 col-md-3"> <div class="home20-ibox01 mb-60 animation_item scaleUp delay2"> <div class="icon_box"> <span class="fa fa-briefcase"></span> </div> <h5>New Product</h5> <p>Donec in ut odio libero, at vulputate urna nulla tristique mi a massa convallis cursus. etiam.</p> <a href="http://store.dnnsoftware.com/home/product-details/PackageID/36589/r/cd57d7207c9d4266bc34" target="blank">Read More</a> </div> </div> <div class="col-sm-6 col-md-3"> <div class="home20-ibox01 mb-60 animation_item scaleUp delay3"> <div class="icon_box"> <span class="fa fa-coffee"></span> </div> <h5>Coffee Time</h5> <p>Donec in ut odio libero, at vulputate urna nulla tristique mi a massa convallis cursus. etiam.</p> <a href="http://store.dnnsoftware.com/home/product-details/PackageID/36589/r/cd57d7207c9d4266bc34" target="blank">Read More</a> </div> </div> <div class="col-sm-6 col-md-3"> <div class="home20-ibox01 mb-60 animation_item scaleUp delay4"> <div class="icon_box"> <span class="fa fa-envelope"></span> </div> <h5>Write Email</h5> <p>Donec in ut odio libero, at vulputate urna nulla tristique mi a massa convallis cursus. etiam.</p> <a href="http://store.dnnsoftware.com/home/product-details/PackageID/36589/r/cd57d7207c9d4266bc34#" target="blank">Read More</a> </div> </div> </div> </div>Amazing Featured Theme (Full_Screen_PaneA · 2)
Code:
html
<div class="home20-bg01 pb-60 pt-60"> <div class="container pt-20 pb-20 xs-pt-0 sm-pt-0"> <div class="row"> <div class="col-sm-12 col-md-5"> <div class="home20-ibox02 animation fadeInLeft"> <img alt="" src="http://demo8.dnngo.net/portals/13/Home20-Images/home20-img01.png" class="img-responsive" /><div class="visible-xs visible-sm pb-60"></div> </div> </div> <div class="col-sm-12 col-md-7"> <div class="home20-ibox02 animation fadeInRight"> <h3>Amazing Featured Theme</h3> <div class="line"></div> <p>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 tellus sedeu placerat ligula aliquam eu sapien eros enatis at dapibu.</p> <ul> <li><span class="fa fa-power-off"></span>Morbi vel dui nec arcu suscipit orem ipsu</li> <li><span class="fa fa-refresh"></span>Pellentesque lectus eget quam</li> <li><span class="fa fa-star"></span>Ullamcorper consectetur mauris sit</li> <li><span class="fa fa-gear"></span>Vestibulum vitae risus a erat</li> </ul> <ul> <li><span class="fa fa-cloud-download"></span>Lorem ipsum dolor sit amet, consec</li> <li><span class="fa fa-arrows"></span>Tetuer adipiscing elit. Donec libero</li> <li><span class="fa fa-dot-circle-o"></span>Suspendisse purus nec placerat bibend</li> <li><span class="fa fa-crop"></span>Bibendum. Cras id urna. Morbi tinci</li> </ul> <div class="clearfix"></div> <a href="http://store.dnnsoftware.com/home/product-details/PackageID/36589/r/cd57d7207c9d4266bc34" target="blank">More Features</a> </div> </div> </div> </div> </div>Appealing skins and versatile modules (Full_Screen_PaneA · 3)
Code:
html
<div class="home20-bg02"> <div class="container"> <div class="row"> <div class="col-sm-12"> <div class="home20-full animation zoomIn"> <h1> Appealing skins and <span>versatile</span> modules</h1> <p>Our skins and modules are creative, SEO friendly and engaging.</p> <a class="home20-btn" href="http://store.dnnsoftware.com/home/product-details/PackageID/36589/r/cd57d7207c9d4266bc34" target="blank">Learn More</a><a class="home20-btn" href="https://www.dnngo.net/DNNStore/tabid/58/ProductID/1647/Default.aspx" target="blank">View Demo</a> </div> </div> </div> </div> </div>How We Work (Full_Screen_PaneA · 4)
Code:
html
<div class="pb-40 pt-60">
<div class="container pt-20">
<div class="row">
<div class="col-sm-12">
<h6 class="home20-title01">How We Work</h6>
<h3 class="home20-title02">Work Process</h3>
<div class="home20-line"></div>
<div class="home20-p">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.</div>
<ul class="home20-ibox04 clearfix animation zoomIn ">
<li class="mt-20">
<div class="icon_box"> 01 </div>
<h5>DNN Analysis</h5>
<div class="line"></div>
<p>Morbi tincidunt, convallis aliquam, lectus turpis varius lorem, suere nunc.</p>
</li>
<li class="mt-20">
<div class="icon_box"> 02 </div>
<h5>Web Design</h5>
<div class="line"></div>
<p>Morbi tincidunt, convallis aliquam, lectus turpis varius lorem, suere nunc.</p>
</li>
<li class="mt-20">
<div class="icon_box"> 03 </div>
<h5>Develop Skin</h5>
<div class="line"></div>
<p>Morbi tincidunt, convallis aliquam, lectus turpis varius lorem, suere nunc.</p>
</li>
<li class="mt-20">
<div class="icon_box"> 04 </div>
<h5>Program Test</h5>
<div class="line"></div>
<p>Morbi tincidunt, convallis aliquam, lectus turpis varius lorem, suere nunc.</p>
</li>
<li class="mt-20">
<div class="icon_box"> 05 </div>
<h5>Renovate Bugs</h5>
<div class="line"></div>
<p>Morbi tincidunt, convallis aliquam, lectus turpis varius lorem, suere nunc.</p>
</li>
</ul>
</div>
</div>
</div>
</div>What We Do (Full_Screen_PaneA · 5)
Code:
html
<div class="home20-bg01 pt-60">
<div class="container pt-20">
<div class="row">
<div class="col-sm-12">
<h6 class="home20-title01">What We Do</h6>
<h3 class="home20-title02">OUR LATEST WORKS</h3>
<div class="home20-line"></div>
</div>
</div>
</div>
<div data-pagination="false" data-autoheight="false" class="carousel home20-carousel pt-20 animation zoomIn">
<div class="item ">
<div class="photo_box ico_LeftAndRight_enter content_bottom_push_in">
<div class="pic_box"> <img alt="" src="http://demo8.dnngo.net/portals/13/Home20-Images/home20-img02.jpg" />
<div class="content">
<h3>Modules Development</h3>
<p>December 15th, 2014</p>
</div>
</div>
</div>
</div>
<div class="item ">
<div class="photo_box ico_LeftAndRight_enter content_bottom_push_in">
<div class="pic_box"> <img alt="" src="http://demo8.dnngo.net/portals/13/Home20-Images/home20-img03.jpg" />
<div class="content">
<h3>Modules Development</h3>
<p>December 15th, 2014</p>
</div>
</div>
</div>
</div>
<div class="item ">
<div class="photo_box ico_LeftAndRight_enter content_bottom_push_in">
<div class="pic_box"> <img alt="" src="http://demo8.dnngo.net/portals/13/Home20-Images/home20-img04.jpg" />
<div class="content">
<h3>Modules Development</h3>
<p>December 15th, 2014</p>
</div>
</div>
</div>
</div>
<div class="item ">
<div class="photo_box ico_LeftAndRight_enter content_bottom_push_in">
<div class="pic_box"> <img alt="" src="http://demo8.dnngo.net/portals/13/Home20-Images/home20-img05.jpg" />
<div class="content">
<h3>Modules Development</h3>
<p>December 15th, 2014</p>
</div>
</div>
</div>
</div>
<div class="item">
<div class="photo_box ico_LeftAndRight_enter content_bottom_push_in">
<div class="pic_box"> <img alt="" src="http://demo8.dnngo.net/portals/13/Home20-Images/home20-img21.jpg" />
<div class="content">
<h3>Modules Development</h3>
<p>December 15th, 2014</p>
</div>
</div>
</div>
</div>
<div class="item">
<div class="photo_box ico_LeftAndRight_enter content_bottom_push_in">
<div class="pic_box"> <img alt="" src="http://demo8.dnngo.net/portals/13/Home20-Images/home20-img22.jpg" />
<div class="content">
<h3>Modules Development</h3>
<p>December 15th, 2014</p>
</div>
</div>
</div>
</div>
</div>
</div>Who We Are (Full_Screen_PaneA · 6)
Code:
html
<div class="pt-60">
<div class="container pt-20 pb-20">
<div class="row">
<div class="col-sm-12">
<h6 class="home20-title01">Who We Are</h6>
<h3 class="home20-title02">Our Employees</h3>
<div class="home20-line"></div>
<div class="home20-ibox03 pt-20 clearfix animation">
<div class="leftbox clearfix mb-50 animation_item scaleUp delay1"> <img alt="" src="http://demo8.dnngo.net/portals/13/Home20-Images/home20-img10.jpg" />
<h6>Steven Doe</h6> <span>Web Designer</span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nibh diam, blandit vitae vehicula dapibus. Fusce et ornare sapien, non euismod felis. Integer et risus quis arcu.</p>
<a class="color-1 fa fa-twitter" href="#"></a>
<a class="color-2 fa fa-facebook" href="#"></a>
<a class="color-3 fa fa-dribbble" href="#"></a>
</div>
<div class="rightbox clearfix mb-50 animation_item scaleUp delay2"> <img alt="" src="http://demo8.dnngo.net/portals/13/Home20-Images/home20-img11.jpg" />
<h6>Harro Tolly</h6> <span>Skin Developer</span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nibh diam, blandit vitae vehicula dapibus. Fusce et ornare sapien, non euismod felis. Integer et risus quis arcu.</p>
<a class="color-1 fa fa-twitter" href="#"></a>
<a class="color-2 fa fa-facebook" href="#"></a>
<a class="color-3 fa fa-dribbble" href="#"></a>
</div>
<div class="line mb-40"></div>
<div class="leftbox clearfix mb-60 animation_item scaleUp delay3"> <img alt="" src="http://demo8.dnngo.net/portals/13/Home20-Images/home20-img12.jpg" />
<h6>Raney Chris</h6> <span>DNN Programmer</span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nibh diam, blandit vitae vehicula dapibus. Fusce et ornare sapien, non euismod felis. Integer et risus quis arcu.</p>
<a class="color-1 fa fa-twitter" href="#"></a>
<a class="color-2 fa fa-facebook" href="#"></a>
<a class="color-3 fa fa-dribbble" href="#"></a>
</div>
<div class="rightbox clearfix mb-60 animation_item scaleUp delay4"> <img alt="" src="http://demo8.dnngo.net/portals/13/Home20-Images/home20-img13.jpg" />
<h6>Frank Miller</h6> <span>CEO Manager</span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nibh diam, blandit vitae vehicula dapibus. Fusce et ornare sapien, non euismod felis. Integer et risus quis arcu.</p>
<a class="color-1 fa fa-twitter" href="#"></a>
<a class="color-2 fa fa-facebook" href="#"></a>
<a class="color-3 fa fa-dribbble" href="#"></a>
</div>
</div>
</div>
</div>
</div>
</div>What They Say (Full_Screen_PaneA · 7)
Code:
html
<div class="home20-bg03 pt-60 pb-60">
<div class="container pt-20 pb-20">
<div class="row">
<div class="col-sm-12">
<h6 class="home20-title01">What They Say</h6>
<h3 class="home20-title03">Testimonials</h3>
<div class="home20-line02"></div>
<div class="pt-20"></div>
<div data-autoplay="3000" class="Testimonials_tab home20-testimonials animation zoomIn" data-display-arrows="false" data-autoheight="false">
<ul>
<li>
<blockquote>
<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, the teams have been great in making the minor changes we request. We love that you aren't a company that nickels and dimes their customers and I can see us having a nice long relationship.</p>
<h2>Janney Joy</h2>
</blockquote>
</li>
<li>
<blockquote>
<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, the teams have been great in making the minor changes we request. We love that you aren't a company that nickels and dimes their customers and I can see us.</p>
<h2>Janney Joy</h2>
</blockquote>
</li>
<li>
<blockquote>
<p> The skin looks exactly as we expected. We have now done several skins and even skins that were done 6 months ago, the teams have been great in making the minor changes we request. We love that you aren't a company that nickels and dimes their customers and I can see us having a nice long relationship.</p>
<h2>Rante Smith</h2>
</blockquote>
</li>
</ul>
<div class="dot"> <a href="javascript:;"><img alt="" src="http://demo8.dnngo.net/portals/13/Home20-Images/home20-img14.jpg" /></a> <a href="javascript:;"><img alt="" src="http://demo8.dnngo.net/portals/13/Home20-Images/home20-img15.jpg" /></a> <a href="javascript:;"><img alt="" src="http://demo8.dnngo.net/portals/13/Home20-Images/home20-img16.jpg" /></a> </div>
</div>
</div>
</div>
</div>
</div>What We Can (Full_Screen_PaneA · 8)
Code:
html
<div class="pt-60 pb-30">
<div class="container pt-20">
<div class="row">
<div class="col-sm-12">
<h6 class="home20-title01">What We Can</h6>
<h3 class="home20-title02">Our Capability</h3>
<div class="home20-line"></div>
<div class="home20-p">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.</div>
</div>
<div class="col-sm-6 animation fadeInLeft">
<div class="home20-loadedlist color-1 mt-30">
<p>Photoshop</p>
<div class="progress progress-striped active">
<div data-width="90%" class="bar animation animationwidth"><span></span></div>
</div>
<p>Web Design</p>
<div class="progress progress-striped active">
<div data-width="93%" class="bar animation animationwidth"><span></span></div>
</div>
<p>Mobile Site</p>
<div class="progress progress-striped active">
<div data-width="91%" class="bar animation animationwidth"><span></span> </div>
</div>
<p>HTML5 & CSS3</p>
<div class="the4 progress progress-striped active">
<div data-width="96%" class="bar animation animationwidth"><span></span></div>
</div>
</div>
</div>
<div class="col-sm-6 animation fadeInRight">
<div class="home20-loadedlist color-2 mt-30">
<p>JavaScript</p>
<div class="progress progress-striped active">
<div data-width="88%" class="bar animation animationwidth"><span></span></div>
</div>
<p>DNN</p>
<div class="progress progress-striped active">
<div data-width="92%" class="bar animation animationwidth"><span></span></div>
</div>
<p>Asp.net</p>
<div class="progress progress-striped active">
<div data-width="84%" class="bar animation animationwidth"><span></span> </div>
</div>
<p>SEO</p>
<div class="the4 progress progress-striped active">
<div data-width="91%" class="bar animation animationwidth"><span></span></div>
</div>
</div>
</div>
</div>
</div>
</div>Full_Screen_FootPaneA Section (Full_Screen_FootPaneA)
Code:
html
<div class="home20-bg04 pt-60 pb-60"> <div class="container pt-20 pb-20"> <div class="row"> <div class="col-sm-12 animation zoomIn"> <div class="carousel home20-carousel02" data-autoplay="3000" data-navigation="false" data-pagination="false" data-autoheight="false"> <div class="item"> <a href="#" target="blank"><img alt="" src="http://demo8.dnngo.net/portals/13/Home20-Images/home20-img141.jpg" /></a> </div> <div class="item"> <a href="#" target="blank"><img alt="" src="http://demo8.dnngo.net/portals/13/Home20-Images/home20-img151.jpg" /></a> </div> <div class="item"><a href="#" target="blank"> <img alt="" src="http://demo8.dnngo.net/portals/13/Home20-Images/home20-img161.jpg" /></a> </div> <div class="item"><a href="#" target="blank"> <img alt="" src="http://demo8.dnngo.net/portals/13/Home20-Images/home20-img171.jpg" /></a> </div> <div class="item"><a href="#" target="blank"> <img alt="" src="http://demo8.dnngo.net/portals/13/Home20-Images/home20-img181.jpg" /></a> </div> <div class="item"> <a href="#" target="blank"><img alt="" src="http://demo8.dnngo.net/portals/13/Home20-Images/home20-img141.jpg" /></a> </div> <div class="item"> <a href="#" target="blank"><img alt="" src="http://demo8.dnngo.net/portals/13/Home20-Images/home20-img151.jpg" /></a> </div> <div class="item"><a href="#" target="blank"> <img alt="" src="http://demo8.dnngo.net/portals/13/Home20-Images/home20-img161.jpg" /></a> </div> <div class="item"><a href="#" target="blank"> <img alt="" src="http://demo8.dnngo.net/portals/13/Home20-Images/home20-img171.jpg" /></a> </div> <div class="item"><a href="#" target="blank"> <img alt="" src="http://demo8.dnngo.net/portals/13/Home20-Images/home20-img181.jpg" /></a> </div> </div> </div> </div> </div> </div>Follow Us (FootPaneD)
Code:
html
<div class="home20-footer01 clearfix">
<p>Nunc nibh diam, blandit vitae vehicula dapibus. Fusce et ornare sapien, non euismod felis. Integer et risus quis arcu commodo, mauris sit condim eser ntumsi nibh.</p>
<ul class="color-1">
<li><a href="#"><span class="fa fa-facebook color1-1"></span>Facebook</a></li>
<li><a href="#"><span class="fa fa-google-plus color2-2"></span>Google+</a></li>
<li><a href="#"><span class="fa fa-linkedin color3-3"></span>linkedin</a></li>
</ul>
<ul class="color-2">
<li><a href="#"><span class="fa fa-twitter color4-4"></span>Twitter</a></li>
<li><a href="#"><span class="fa fa-dribbble color5-5"></span>dribbble</a></li>
<li><a href="#"><span class="fa fa-rss color6-6"></span>Rss Feed</a></li>
</ul>
</div>Links (FootPaneE)
Code:
html
<ul class="home20-footer02">
<li><a href="#" target="blank"><span class="fa fa-play-circle"></span>Top Products</a></li>
<li><a href="#" target="blank"><span class="fa fa-play-circle"></span>Unlimited Colors</a></li>
<li><a href="#" target="blank"><span class="fa fa-play-circle"></span>DNN Skin Store</a></li>
<li><a href="#" target="blank"><span class="fa fa-play-circle"></span>Mobilesite Development</a></li>
<li><a href="#" target="blank"><span class="fa fa-play-circle"></span>Help Center</a></li>
</ul>Recent News (FootPaneF)
Code:
html
<ul class="home20-footer03">
<li>
<div class="img"><img alt="" src="http://demo8.dnngo.net/portals/13/Home20-Images/home20-img19.jpg" /></div>
<p>Donec in odio libero, vulputate urna nulla tristique mi a massa commodo gravida.</p>
<span class="date">April 15th, 2014</span>
</li>
<div class="line"></div>
<li>
<div class="img"><img alt="" src="http://demo8.dnngo.net/portals/13/Home20-Images/home20-img20.jpg" /></div>
<p>Donec in odio libero, vulputate urna nulla tristique mi a massa commodo gravida.</p>
<span class="date">Juyl 08th, 2014</span>
</li>
</ul>Contact Us (FootPaneG)
This section uses the DNNGo PowerForms module — see PowerForms.
App Site | Recent Post | Comments (FooterPane)
Code:
html
<a href="#">App Site</a> | <a href="#">Recent Post</a> | <a href="#">Comments</a>