Home Version 18 Page Code
Click to preview the Home Version 18 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.
why work with us (TopPane)
Code:
html
<div class="row pb-20"> <div class="col-sm-5 animation fadeInLeft "> <img alt="" class="img-responsive" src="http://demo8.dnngo.net/portals/13/Home18-Images/home18-pic01.jpg" /><div class="visible-xs pb-50"></div> </div> <div class="col-sm-7 animation fadeInRight"> <div class="home18-title"> <h3>why work with us</h3> <div class="line"></div> </div> <div class="home18-cont"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vulputate egestas sem, eu cursus ligula ullamcorper non. Curabitur tristique velit eu mauris venenatis egestas.</p> <div class="pt-10 pb-10"> <div class="panel-group home18-accordion" id="home18-acc01"> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a href="#home18-01-2" data-parent="#home18-acc01" data-toggle="collapse"> <span class="arrow"></span>Incredible support and development.</a> </h4> </div> <div class="panel-collapse collapse in" id="home18-01-2"> <div class="panel-body"> <p>Phasellus bibendum placerat metus, sed molestie magna semper ege. mauris venenatis molestie egestas, phasellus bibenum placerat metussed molestie magna semper eget. molestie magna semper eget, molestie magna semper eget, </p> </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a class="collapsed" href="#home18-01-3" data-parent="#home18-acc01" data-toggle="collapse"> <span class="arrow"></span>We will treat you as we would like to be treated!</a> </h4> </div> <div class="panel-collapse collapse" id="home18-01-3"> <div class="panel-body"> <p>Phasellus bibendum placerat metus, sed molestie magna semper ege. mauris venenatis molestie egestas, phasellus bibenum placerat metussed molestie magna semper eget. molestie magna semper eget, molestie magna semper eget, </p> </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a class="collapsed" href="#home18-01-4" data-parent="#home18-acc01" data-toggle="collapse"> <span class="arrow"></span>More features being added in future updates.</a> </h4> </div> <div class="panel-collapse collapse" id="home18-01-4"> <div class="panel-body"> <p>Phasellus bibendum placerat metus, sed molestie magna semper ege. mauris venenatis molestie egestas, phasellus bibenum placerat metussed molestie magna semper eget. molestie magna semper eget, molestie magna semper eget, </p> </div> </div> </div> </div> </div> <div><a target="_blank" href="http://store.dnnsoftware.com/home/product-details/PackageID/36589/r/cd57d7207c9d4266bc34" class="home18-btn">Purchase This Theme</a></div> </div> </div> </div>Power Off Nam a urna massa, a tempus dui. Pellente (Full_Screen_PaneB)
Code:
html
<div class="home18-bg animation"> <div class="container pt-60 pb-60"> <div class="home18-ibox row"> <div class="ibox-cont col-md-3 col-sm-6 animation_item fadeInUp delay1"> <div class="icon"> <em class="fa fa-power-off color_1_bg "></em> </div> <div class="title">Power Off</div> <div class="info"> <p>Nam a urna massa, a tempus dui. Pellente sque a neque vitae arcu sollicitudin mattis ut nec massa. Quisque consectetur leo sit.</p> <a href="http://store.dnnsoftware.com/home/product-details/PackageID/36589/r/cd57d7207c9d4266bc34" target="blank">> Learn More</a> </div> </div> <div class="ibox-cont col-md-3 col-sm-6 animation_item fadeInUp delay2"> <div class="icon"> <em class="fa fa-music color_2_bg"></em> </div> <div class="title">Listen To Music</div> <div class="info"> <p>Nam a urna massa, a tempus dui. Pellente sque a neque vitae arcu sollicitudin mattis ut nec massa. Quisque consectetur leo sit.</p> <a href="http://store.dnnsoftware.com/home/product-details/PackageID/36589/r/cd57d7207c9d4266bc34" target="blank">> Learn More</a> </div> </div> <div class="ibox-cont col-md-3 col-sm-6 animation_item fadeInUp delay3"> <div class="icon"> <em class="fa fa-clock-o color_3_bg"></em> </div> <div class="title">Time Clock</div> <div class="info"> <p>Nam a urna massa, a tempus dui. Pellente sque a neque vitae arcu sollicitudin mattis ut nec massa. Quisque consectetur leo sit.</p> <a href="http://store.dnnsoftware.com/home/product-details/PackageID/36589/r/cd57d7207c9d4266bc34" target="blank">> Learn More</a> </div> </div> <div class="ibox-cont col-md-3 col-sm-6 animation_item fadeInUp delay4"> <div class="icon"> <em class="fa fa-search-plus color_4_bg"></em> </div> <div class="title">SEO Friendly</div> <div class="info"> <p>Nam a urna massa, a tempus dui. Pellente sque a neque vitae arcu sollicitudin mattis ut nec massa. Quisque consectetur leo sit.</p> <a href="http://store.dnnsoftware.com/home/product-details/PackageID/36589/r/cd57d7207c9d4266bc34" target="blank">> Learn More</a> </div> </div> </div> </div> </div><div class="pb-30"></div>SHOW OFF YOUR PORTFOLIO (ContentPane)
Code:
html
<p class="text-center animation scaleUp" style="margin-bottom:0;">Lorem ipsum dolor sit amet consectetur </p> <div class="isotope_grid home18-isotope"> <div class="loading"> <div class="loading-container container1"> <div class="circle1"></div> <div class="circle2"></div> <div class="circle3"></div> <div class="circle4"></div> </div> <div class="loading-container container2"> <div class="circle1"></div> <div class="circle2"></div> <div class="circle3"></div> <div class="circle4"></div> </div> <div class="loading-container container3"> <div class="circle1"></div> <div class="circle2"></div> <div class="circle3"></div> <div class="circle4"></div> </div> </div> <div class="isotope_main" data-min-width="350"> <div class="isotope_item animation fadeInLeft"> <div class="photo_box"> <div class="pic_box"> <img alt="" src="http://demo8.dnngo.net/portals/13/Home18-Images/home18-pic02.jpg" /> <div class="content"> <div class="vertical_center_1"> <div class="vertical_center_2"> <div class="ico"> <a class="LightBox_image_gallery1" href="http://demo8.dnngo.net/portals/13/Home18-Images/home18-pic02.jpg"> <div class="Hline"></div> <div class="Vlive"></div> </a> </div> </div> </div> </div> <div class="shade"></div> </div> <div class="home18-text"> <div class="info"><em class="fa fa-heart-o"></em>576</div> <div class="photo_title">Large poster set</div> <div>photography</div> </div> </div> </div> <div class="isotope_item animation fadeIn"> <div class="photo_box"> <div class="pic_box"> <img alt="" src="http://demo8.dnngo.net/portals/13/Home18-Images/home18-pic03.jpg" /> <div class="content"> <div class="vertical_center_1"> <div class="vertical_center_2"> <div class="ico"> <a class="LightBox_image_gallery1" href="http://demo8.dnngo.net/portals/13/Home18-Images/home18-pic03.jpg"> <div class="Hline"></div> <div class="Vlive"></div> </a> </div> </div> </div> </div> <div class="shade"></div> </div> <div class="home18-text"> <div class="info"><em class="fa fa-heart-o"></em>576</div> <div class="photo_title">Large Poster Set</div> <div>photography</div> </div> </div> </div> <div class="isotope_item animation fadeInRight"> <div class="photo_box"> <div class="pic_box"> <img alt="" src="http://demo8.dnngo.net/portals/13/Home18-Images/home18-pic04.jpg" /> <div class="content"> <div class="vertical_center_1"> <div class="vertical_center_2"> <div class="ico"> <a class="LightBox_image_gallery1" href="http://demo8.dnngo.net/portals/13/Home18-Images/home18-pic04.jpg"> <div class="Hline"></div> <div class="Vlive"></div> </a> </div> </div> </div> </div> <div class="shade"></div> </div> <div class="home18-text"> <div class="info"><em class="fa fa-heart-o"></em>576</div> <div class="photo_title">Large Poster Set</div> <div>photography</div> </div> </div> </div> <div class="isotope_item animation fadeInLeft"> <div class="photo_box"> <div class="pic_box"> <img alt="" src="http://demo8.dnngo.net/portals/13/Home18-Images/home18-pic05.jpg" /> <div class="content"> <div class="vertical_center_1"> <div class="vertical_center_2"> <div class="ico"> <a class="LightBox_image_gallery1" href="http://demo8.dnngo.net/portals/13/Home18-Images/home18-pic05.jpg"> <div class="Hline"></div> <div class="Vlive"></div> </a> </div> </div> </div> </div> <div class="shade"></div> </div> <div class="home18-text"> <div class="info"><em class="fa fa-heart-o"></em>576</div> <div class="photo_title">Large Poster Set</div> <div>photography</div> </div> </div> </div> <div class="isotope_item animation fadeIn"> <div class="photo_box"> <div class="pic_box"> <img alt="" src="http://demo8.dnngo.net/portals/13/Home18-Images/home18-pic06.jpg" /> <div class="content"> <div class="vertical_center_1"> <div class="vertical_center_2"> <div class="ico"> <a class="LightBox_image_gallery1" href="http://demo8.dnngo.net/portals/13/Home18-Images/home18-pic06.jpg"> <div class="Hline"></div> <div class="Vlive"></div> </a> </div> </div> </div> </div> <div class="shade"></div> </div> <div class="home18-text"> <div class="info"><em class="fa fa-heart-o"></em>576</div> <div class="photo_title">Large Poster Set</div> <div>photography</div> </div> </div> </div> <div class="isotope_item animation fadeInRight"> <div class="photo_box"> <div class="pic_box"> <img alt="" src="http://demo8.dnngo.net/portals/13/Home18-Images/home18-pic07.jpg" /> <div class="content"> <div class="vertical_center_1"> <div class="vertical_center_2"> <div class="ico"> <a class="LightBox_image_gallery1" href="http://demo8.dnngo.net/portals/13/Home18-Images/home18-pic07.jpg"> <div class="Hline"></div> <div class="Vlive"></div> </a> </div> </div> </div> </div> <div class="shade"></div> </div> <div class="home18-text"> <div class="info"><em class="fa fa-heart-o"></em>576</div> <div class="photo_title">Large Poster Set</div> <div>photography</div> </div> </div> </div> </div> </div><div class="pb-20"></div>amazing dnngo FEATURE list (Full_Screen_PaneE · 1)
Code:
html
<div class="home18-bg02 animation pt-10">
<div class="container pt-60 pb-60">
<div class="home18-title02 animation_item scaleUp delay1">
<h3>amazing dnngo FEATURE list</h3>
<div class="line"></div>
<p class="animation_item scaleUp delay1 pb-10" style="margin-bottom: 0;">Lorum sociis natoque penatibus et magnis dish</p>
</div>
<div class="row">
<div class="col-sm-4">
<div class="home18-ibox02">
<div class="clearfix animation_item fadeInLeft delay4"> <em class="fa fa-camera-retro"></em>
<div class="text_hidden">
<h3>Analystic</h3>
<div>Lorum sociis natoque penatibus et magnis dish parturient montes nascetur ridiculus mus nascetur ridiculus.Lorem ipsum .</div>
</div>
</div>
<div class="clearfix animation_item fadeInLeft delay5"> <em class="fa fa-cog"></em>
<div class="text_hidden">
<h3>Web Design</h3>
<div>Lorum sociis natoque penatibus et magnis dish parturient montes nascetur ridiculus mus nascetur ridiculus.Lorem ipsum .</div>
</div>
</div>
<div class="clearfix animation_item fadeInLeft delay6"> <em class="fa fa-user"></em>
<div class="text_hidden">
<h3>User Experience</h3>
<div>Lorum sociis natoque penatibus et magnis dish parturient montes nascetur ridiculus mus nascetur ridiculus.Lorem ipsum .</div>
</div>
</div>
</div>
</div>
<div class="col-sm-4 animation_item fadeInUp delay3" style="text-align: center;"> <img alt="" src="http://demo8.dnngo.net/portals/13/Home18-Images/home18-pic08.png" class="img-responsive img_display" /> </div>
<div class="col-sm-4">
<div class="home18-ibox03">
<div class="clearfix animation_item fadeInRight delay4"> <em class="fa fa-desktop"></em>
<div class="text_hidden">
<h3>Wordpress</h3>
<div>Lorum sociis natoque penatibus et magnis dish parturient montes nascetur ridiculus mus nascetur ridiculus.Lorem ipsum .</div>
</div>
</div>
<div class="clearfix animation_item fadeInRight delay5"> <em class="fa fa-globe"></em>
<div class="text_hidden">
<h3>Graphic</h3>
<div>Lorum sociis natoque penatibus et magnis dish parturient montes nascetur ridiculus mus nascetur ridiculus.Lorem ipsum .</div>
</div>
</div>
<div class="clearfix animation_item fadeInRight delay6"> <em class="fa fa-chain-broken"></em>
<div class="text_hidden">
<h3>Customize Web</h3>
<div>Lorum sociis natoque penatibus et magnis dish parturient montes nascetur ridiculus mus nascetur ridiculus.Lorem ipsum .</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>featured news (Full_Screen_PaneE · 2)
Code:
html
<div class="home18-bg03 animation pt-10 pb-20">
<div class="container pt-60 pb-60">
<div class="home18-title03 animation_item scaleUp delay1">
<h3>featured news</h3>
<div class="line"></div>
<p class="scaleUp delay1 pb-10" style="margin-bottom: 0;">Lorem ipsum dolor sit amet consectetur</p>
</div>
<div class="row">
<div class="col-sm-12 col-md-6 animation_item fadeInLeft delay3">
<div data-pagination="false" data-navigation="false" class="carousel home18-carousel">
<div class="item"> <img alt="" src="http://demo8.dnngo.net/portals/13/Home18-Images/home18-pic09.jpg" />
<div class="carousel-cont text_bottom">
<h3>Your Blog Slider Title Here</h3>
<p>Lorem ipsum dolor sit amet consecteturLorem ipsum Lorem ipsum dolor sit Lorem ipsum dolor sit amet consectetur Lorem ipsum dolor sit amet consectetur consectetur.</p>
</div>
</div>
<div class="item"> <img alt="" src="http://demo8.dnngo.net/portals/13/Home18-Images/home18-pic10.jpg" />
<div class="carousel-cont text_bottom">
<h3>Your Blog Slider Title Here</h3>
<p>Lorem ipsum dolor sit amet consecteturLorem ipsum Lorem ipsum dolor sit Lorem ipsum dolor sit amet consectetur Lorem ipsum dolor sit amet consectetur consectetur.</p>
</div>
</div>
<div class="item"> <img alt="" src="http://demo8.dnngo.net/portals/13/Home18-Images/home18-pic11.jpg" />
<div class="carousel-cont text_bottom">
<h3>Your Blog Slider Title Here</h3>
<p>Lorem ipsum dolor sit amet consecteturLorem ipsum Lorem ipsum dolor sit Lorem ipsum dolor sit amet consectetur Lorem ipsum dolor sit amet consectetur consectetur.</p>
</div>
</div>
</div>
</div>
<div class="col-sm-12 col-md-6">
<div class="home18-ibox04 clearfix animation_item fadeInRight delay4">
<div class="photo_box">
<div class="pic_box"> <img alt="" src="http://demo8.dnngo.net/portals/13/Home18-Images/home18-pic12.jpg" />
<div class="ico">
<a target="_blank" href="http://store.dnnsoftware.com/home/product-details/packageid/34889/r/7ab93d48c5e846d6b199"><em class="fa fa-link"></em></a>
<a href="http://demo8.dnngo.net/portals/13/Home18-Images/home18-pic12.jpg" class="LightBox_image_gallery18"><em class="fa fa-search fa-rotate-90"></em></a>
</div>
<div class="shade"></div>
</div>
</div>
<div class="text-hidden">
<div class="text-top">
<h3>Your Blog Title Here</h3>
<div>Lorem ipsum dolor sit amet consecteturLorem ipsum dolor sit amet consectetur Lorem ipsum.</div>
</div>
<div class="text-bottom"><span>Graphic Design</span>
<a href="#">John Doe</a><span>Jan 26, 2015</span></div>
</div>
</div>
<div class="home18-ibox04 clearfix animation_item fadeInRight delay5">
<div class="photo_box">
<div class="pic_box"> <img alt="" src="http://demo8.dnngo.net/portals/13/Home18-Images/home18-pic13.jpg" />
<div class="ico">
<a target="_blank" href="http://store.dnnsoftware.com/home/product-details/packageid/34889/r/7ab93d48c5e846d6b199"><em class="fa fa-link"></em></a>
<a href="http://demo8.dnngo.net/portals/13/Home18-Images/home18-pic13.jpg" class="LightBox_image_gallery18"><em class="fa fa-search fa-rotate-90"></em></a>
</div>
<div class="shade"></div>
</div>
</div>
<div class="text-hidden">
<div class="text-top">
<h3>Your Blog Title Here</h3>
<div>Lorem ipsum dolor sit amet consecteturLorem ipsum dolor sit amet consectetur Lorem ipsum.</div>
</div>
<div class="text-bottom"><span>Graphic Design</span>
<a href="#">John Doe</a><span>Jan 26, 2015</span></div>
</div>
</div>
<div class="home18-ibox04 clearfix animation_item fadeInRight delay6">
<div class="photo_box">
<div class="pic_box"> <img alt="" src="http://demo8.dnngo.net/portals/13/Home18-Images/home18-pic14.jpg" />
<div class="ico">
<a target="_blank" href="http://store.dnnsoftware.com/home/product-details/packageid/34889/r/7ab93d48c5e846d6b199"><em class="fa fa-link"></em></a>
<a href="http://demo8.dnngo.net/portals/13/Home18-Images/home18-pic14.jpg" class="LightBox_image_gallery18"><em class="fa fa-search fa-rotate-90"></em></a>
</div>
<div class="shade"></div>
</div>
</div>
<div class="text-hidden">
<div class="text-top">
<h3>Your Blog Title Here</h3>
<div>Lorem ipsum dolor sit amet consecteturLorem ipsum dolor sit amet consectetur Lorem ipsum.</div>
</div>
<div class="text-bottom"><span>Graphic Design</span>
<a href="#">John Doe</a><span>Jan 26, 2015</span></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="pt-10 pb-60"></div>OUR TEAM (Full_Screen_PaneE · 3)
Code:
html
<div class="container">
<p class="text-center animation scaleUp pb-30" style="margin-bottom: 0;">Lorum sociis natoque penatibus et magnis dish</p>
<div class="home18-team-border clearfix animation scaleUp">
<div class="home18-team team-1 clearfix">
<div class="team-left text-center"> <img alt="" src="http://demo8.dnngo.net/portals/13/Home18-Images/home18-team01.jpg" />
<div class="team-social">
<a href="#"><em class="fa fa-twitter"></em></a>
<a href="#"><em class="fa fa-facebook"></em></a>
<a href="#"><em class="fa fa-linkedin"></em></a>
</div>
</div>
<div class="team-right ">
<div class="team-title">
<div>John Smith</div>
<div class="text-accent">Programmer</div>
</div>
<p>Lorem ipsum dolor sit amet consectetur Lorem ipsum dolor sitamet consectetur Lorem ipsum dolor sit ametconsectetur Lorem ipsum dolor sit amet consectetur Lorem ipsum sitamconsectetur Lorem ipsum dolor sit.</p>
</div>
</div>
<div class="home18-team team-2 clearfix">
<div class="team-left text-center"> <img alt="" src="http://demo8.dnngo.net/portals/13/Home18-Images/home18-team02.jpg" />
<div class="team-social">
<a href="#"><em class="fa fa-twitter"></em></a>
<a href="#"><em class="fa fa-facebook"></em></a>
<a href="#"><em class="fa fa-linkedin"></em></a>
</div>
</div>
<div class="team-right ">
<div class="team-title">
<div>Linda</div>
<div class="text-accent">Designer</div>
</div>
<p>Lorem ipsum dolor sit amet consectetur Lorem ipsum dolor sitamet consectetur Lorem ipsum dolor sit ametconsectetur Lorem ipsum dolor sit amet consectetur Lorem ipsum sitamconsectetur Lorem ipsum dolor sit.</p>
</div>
</div>
</div>
<div class="clearfix animation scaleUp">
<div class="home18-team team-3 clearfix">
<div class="team-left text-center"> <img alt="" src="http://demo8.dnngo.net/portals/13/Home18-Images/home18-team03.jpg" />
<div class="team-social">
<a href="#"><em class="fa fa-twitter"></em></a>
<a href="#"><em class="fa fa-facebook"></em></a>
<a href="#"><em class="fa fa-linkedin"></em></a>
</div>
</div>
<div class="team-right ">
<div class="team-title">
<div>Bela Chrisis</div>
<div class="text-accent">Manager</div>
</div>
<p>Lorem ipsum dolor sit amet consectetur Lorem ipsum dolor sitamet consectetur Lorem ipsum dolor sit ametconsectetur Lorem ipsum dolor sit amet consectetur Lorem ipsum sitamconsectetur Lorem ipsum dolor sit.</p>
</div>
</div>
<div class="home18-team team-4 clearfix">
<div class="team-left text-center"> <img alt="" src="http://demo8.dnngo.net/portals/13/Home18-Images/home18-team04.jpg" />
<div class="team-social">
<a href="#"><em class="fa fa-twitter"></em></a>
<a href="#"><em class="fa fa-facebook"></em></a>
<a href="#"><em class="fa fa-linkedin"></em></a>
</div>
</div>
<div class="team-right ">
<div class="team-title">
<div>Harralloy Chri</div>
<div class="text-accent">Dnngo Buyer </div>
</div>
<p>Lorem ipsum dolor sit amet consectetur Lorem ipsum dolor sitamet consectetur Lorem ipsum dolor sit ametconsectetur Lorem ipsum dolor sit amet consectetur Lorem ipsum sitamconsectetur Lorem ipsum dolor sit.</p>
</div>
</div>
</div>
</div>
<div class="pt-60 pb-10"></div>Online store ready (Full_Screen_PaneE · 4)
Code:
html
<div class="home18-bg pt-10 pb-10">
<div class="container pt-60 pb-60">
<div class="row">
<div class="col-sm-6 sm-12 animation fadeInLeft">
<div class="home18-title04">
<h3>Online store ready</h3>
<div class="line"></div>
<p>Lorum sociis natoque penatibus et magnis dish</p>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vulputate egestas sem, euinger cursusligula ullamcorper non. Curabitur tristique velit eu mauris venenatis egestas Lorem ipsu dolor sit amet, consectetur adipiscing elit. Morbi vulputate egestas sem.Curabitur tristique velmauris venenatis ege.</p>
<ul class="home18-list02">
<li><em class="fa fa-check-square-o"></em>Lorem ipsum dolor sit amet, consectetur adipiscing elitMorbi</li>
<li><em class="fa fa-check-square-o"></em>vulputate egestas sem, eu cursus ligula ullamcorper non Curabitur tristique</li>
<li><em class="fa fa-check-square-o"></em>velit eu mauris venenatis egestasvelit eu mauris venenatis egesta</li>
<li><em class="fa fa-check-square-o"></em>svulputate egestas sem, eu cursus ligula ullamcorper non</li>
</ul>
<div>
<a target="blank" href="http://store.dnnsoftware.com/home/product-details/PackageID/36589/r/cd57d7207c9d4266bc34" class="home18-btn">View More</a>
</div>
</div>
<div class="col-sm-6 sm-12 animation fadeInRight"> <img alt="" class="img-responsive mt-30" src="http://demo8.dnngo.net/portals/13/Home18-Images/home18-pic15.png" /> </div>
</div>
</div>
</div>testimonials (Full_Screen_PaneE · 5)
Code:
html
<div class="home18-bg04 pt-10 pb-10"> <div class="container pt-60 pb-60 animation scaleUp"> <div class="home18-title02"> <h3>testimonials</h3> <div class="line"></div> </div> <ul data-autoplay="0" data-height-auto="true" data-position="fade" class="Testimonials_tab home18-Testimonials"> <li> <blockquote> <p>"Lorem ipsum dolor sit amet consecteturing Lorem ipsum dolor sit amet consecteturing Lorem ipsum dolor sit amet consecteturingdolor sit amet consecteturing Lorem ipsum. "</p> <small><img alt="" src="http://demo8.dnngo.net/portals/13/Home18-Images/home18-pic16.jpg" /><span>Marry Chris</span>DNNGO Buyer</small> </blockquote> </li> <li> <blockquote> <p>"Nulla consequat massa quis enim.Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.In emnim justo, rhoncus ut, imperdiet a, venenatis vitae,juesto. "</p> <small><img alt="" src="http://demo8.dnngo.net/portals/13/Home18-Images/home18-pic17.jpg" /><span>Harroy Chris</span>DNNGO Buyer</small> </blockquote> </li> <li> <blockquote> <p>"Nulla consequat massa quis enim.Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.In emnim justo, rhoncus ut, imperdiet a, venenatis vitae,juesto. "</p> <small><img alt="" src="http://demo8.dnngo.net/portals/13/Home18-Images/home18-pic18.jpg" /><span>Harroy Chris</span>DNNGO Buyer</small> </blockquote> </li> </ul> </div> </div><div class="pb-30"></div>PRICING (BottomPane)
Code:
html
<div class="animation">
<p class="text-center animation_item scaleUp delay1" style="margin-bottom: 0;">Lorem ipsum dolor sit amet consecteturing</p>
<div class="price-table home18-price row">
<div class="col-md-3 col-sm-6 color_1 animation_item flipInY delay3">
<div class="price_border">
<div class="price_title">
<h2>EXTREME</h2>
<div class="line"></div>
</div>
<div class="price_box"><span class="sup">$</span><span class="price">100</span><span class="unit">monthly</span></div>
<div class="price_holder">
<ul>
<li><span class="accent_color">1</span> Wordpress Setup</li>
<li><span class="accent_color">1</span> Themeforest Account</li>
<li><span class="accent_color">5 Bonus</span> Points Every Month</li>
<li><span class="accent_color">2 Bonus</span> Support</li>
<li><span class="accent_color">10</span> Subdomains</li>
</ul>
<a target="_blank" class="btn " href="http://store.dnnsoftware.com/home/product-details/PackageID/36589/r/cd57d7207c9d4266bc34">Buy Now!</a>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6 color_2 animation_item flipInY delay5">
<div class="price_border">
<div class="price_title">
<h2>EXTREME</h2>
<div class="line"></div>
</div>
<div class="price_box"><span class="sup">$</span><span class="price">100</span><span class="unit">monthly</span></div>
<div class="price_holder">
<ul>
<li><span class="accent_color">1</span> Wordpress Setup</li>
<li><span class="accent_color">1</span> Themeforest Account</li>
<li><span class="accent_color">5 Bonus</span> Points Every Month</li>
<li><span class="accent_color">2 Bonus</span> Support</li>
<li><span class="accent_color">10</span> Subdomains</li>
</ul>
<a target="_blank" class="btn " href="http://store.dnnsoftware.com/home/product-details/PackageID/36589/r/cd57d7207c9d4266bc34">Buy Now!</a>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6 color_3 best_value animation_item flipInY delay7">
<div class="price_border">
<div class="price_title">
<h2>EXTREME</h2>
<div class="line"></div>
</div>
<div class="price_box"><span class="sup">$</span><span class="price">100</span><span class="unit">monthly</span></div>
<div class="price_holder">
<ul>
<li><span class="accent_color">1</span> Wordpress Setup</li>
<li><span class="accent_color">1</span> Themeforest Account</li>
<li><span class="accent_color">5 Bonus</span> Points Every Month</li>
<li><span class="accent_color">2 Bonus</span> Support</li>
<li><span class="accent_color">10</span> Subdomains</li>
</ul>
<a target="_blank" class="btn " href="http://store.dnnsoftware.com/home/product-details/PackageID/36589/r/cd57d7207c9d4266bc34">Buy Now!</a>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6 color_4 animation_item flipInY delay9">
<div class="price_border">
<div class="price_title">
<h2>EXTREME</h2>
<div class="line"></div>
</div>
<div class="price_box"><span class="sup">$</span><span class="price">100</span><span class="unit">monthly</span></div>
<div class="price_holder">
<ul>
<li><span class="accent_color">1</span> Wordpress Setup</li>
<li><span class="accent_color">1</span> Themeforest Account</li>
<li><span class="accent_color">5 Bonus</span> Points Every Month</li>
<li><span class="accent_color">2 Bonus</span> Support</li>
<li><span class="accent_color">10</span> Subdomains</li>
</ul>
<a target="_blank" class="btn " href="http://store.dnnsoftware.com/home/product-details/PackageID/36589/r/cd57d7207c9d4266bc34">Buy Now!</a>
</div>
</div>
</div>
</div>
</div>BottomOutPane Section (BottomOutPane · 1)
Code:
html
<div class="home18-bg"> <div class="container pt-60 pb-60"> <div data-pagination="false" data-autoheight="false" class="carousel home18-carousel02 animation scaleUp"> <div class="item"><img alt="" src="http://demo8.dnngo.net/portals/13/Home18-Images/home18-logo01.png" /></div> <div class="item"><img alt="" src="http://demo8.dnngo.net/portals/13/Home18-Images/home18-logo02.png" /></div> <div class="item"><img alt="" src="http://demo8.dnngo.net/portals/13/Home18-Images/home18-logo03.png" /></div> <div class="item"><img alt="" src="http://demo8.dnngo.net/portals/13/Home18-Images/home18-logo04.png" /></div> <div class="item"><img alt="" src="http://demo8.dnngo.net/portals/13/Home18-Images/home18-logo05.png" /></div> <div class="item"><img alt="" src="http://demo8.dnngo.net/portals/13/Home18-Images/home18-logo06.png" /></div> <div class="item"><img alt="" src="http://demo8.dnngo.net/portals/13/Home18-Images/home18-logo01.png" /></div> <div class="item"><img alt="" src="http://demo8.dnngo.net/portals/13/Home18-Images/home18-logo02.png" /></div> </div> </div> </div>Customers (BottomOutPane · 2)
Code:
html
<div class="home18-bg05"> <div class="container pt-60 pb-60"> <div class=" row animation"> <div class="col-sm-6 col-md-3 animation_item rotateIn delay1"> <div class="home18-number"> <span data-number="1265" class="animation number">0</span> <h3>Customers</h3> <p>Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem massa quismollis pretium.</p> </div> </div> <div class="col-sm-6 col-md-3 animation_item rotateIn delay2"> <div class="home18-number"><span data-number="51892" class="animation number">0</span> <h3>Downloads</h3> <p>Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem massa quismollis pretium.</p> </div> </div> <div class="col-sm-6 col-md-3 animation_item rotateIn delay3"> <div class="home18-number"> <span data-number="132" class="animation number">0</span> <h3>Themes</h3> <p>Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem massa quismollis pretium.</p> </div> </div> <div class="col-sm-6 col-md-3 animation_item rotateIn delay4"> <div class="home18-number"> <span data-number="26" class="animation number">0</span> <h3>Offices</h3> <p>Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem massa quismollis pretium.</p> </div> </div> </div> </div> </div>Photo Gallery (FootPaneD)
Code:
html
<ul class="home18-photolist animation scaleUp">
<li>
<div class="img_zoom">
<div class="pic_box"><a class="LightBox_image_gallery5" href="http://demo8.dnngo.net/portals/13/Home18-Images/home18-lightbox01.jpg"><img alt="" src="http://demo8.dnngo.net/portals/13/Home18-Images/home18-pic19.jpg" />
<span class="shade"></span> </a>
</div>
</div>
</li>
<li>
<div class="img_zoom">
<div class="pic_box"><a class="LightBox_image_gallery5" href="http://demo8.dnngo.net/portals/13/Home18-Images/home18-lightbox02.jpg"><img alt="" src="http://demo8.dnngo.net/portals/13/Home18-Images/home18-pic20.jpg" />
<span class="shade"></span></a>
</div>
</div>
</li>
<li>
<div class="img_zoom">
<div class="pic_box"><a class="LightBox_image_gallery5" href="http://demo8.dnngo.net/portals/13/Home18-Images/home18-lightbox03.jpg"><img alt="" src="http://demo8.dnngo.net/portals/13/Home18-Images/home18-pic21.jpg" />
<span class="shade"></span> </a>
</div>
</div>
</li>
<li>
<div class="img_zoom">
<div class="pic_box"><a class="LightBox_image_gallery5" href="http://demo8.dnngo.net/portals/13/Home18-Images/home18-lightbox04.jpg"><img alt="" src="http://demo8.dnngo.net/portals/13/Home18-Images/home18-pic22.jpg" />
<span class="shade"></span></a>
</div>
</div>
</li>
<li>
<div class="img_zoom">
<div class="pic_box"><a class="LightBox_image_gallery5" href="http://demo8.dnngo.net/portals/13/Home18-Images/home18-lightbox05.jpg"><img alt="" src="http://demo8.dnngo.net/portals/13/Home18-Images/home18-pic23.jpg" />
<span class="shade"></span></a>
</div>
</div>
</li>
<li>
<div class="img_zoom">
<div class="pic_box"><a class="LightBox_image_gallery5" href="http://demo8.dnngo.net/portals/13/Home18-Images/home18-lightbox06.jpg"><img alt="" src="http://demo8.dnngo.net/portals/13/Home18-Images/home18-pic24.jpg" />
<span class="shade"></span></a>
</div>
</div>
</li>
<li>
<div class="img_zoom">
<div class="pic_box"><a class="LightBox_image_gallery5" href="http://demo8.dnngo.net/portals/13/home18-lightbox07.jpg"><img alt="" src="http://demo8.dnngo.net/portals/13/Home18-Images/home18-pic25.jpg" />
<span class="shade"></span></a>
</div>
</div>
</li>
<li>
<div class="img_zoom">
<div class="pic_box"><a class="LightBox_image_gallery5" href="http://demo8.dnngo.net/portals/13/Home18-Images/home18-lightbox08.jpg"><img alt="" src="http://demo8.dnngo.net/portals/13/Home18-Images/home18-pic26.jpg" />
<span class="shade"></span></a>
</div>
</div>
</li>
<li>
<div class="img_zoom">
<div class="pic_box"><a class="LightBox_image_gallery5" href="http://demo8.dnngo.net/portals/13/Home18-Images/home18-lightbox09.jpg"><img alt="" src="http://demo8.dnngo.net/portals/13/Home18-Images/home18-pic27.jpg" />
<span class="shade"></span></a>
</div>
</div>
</li>
</ul>Recent News (FootPaneE)
Code:
html
<ul class="home18-newslist animation scaleUp">
<li>Lorem ipsum dolor sit amet consectet uer adipiscin.<br />
<a href="http://store.dnnsoftware.com/home/product-details/packageid/34889/r/7ab93d48c5e846d6b199" target="blank">February 12, 2013</a>
</li>
<li> Lorem ipsum dolor sit amet consectet uer adipiscin.
<a href="http://store.dnnsoftware.com/home/product-details/packageid/34889/r/7ab93d48c5e846d6b199" target="blank"><br />March 12, 2013</a>
</li>
<li> Lorem ipsum dolor sit amet consectet uer adipiscin.<br />
<a href="http://store.dnnsoftware.com/home/product-details/packageid/34889/r/7ab93d48c5e846d6b199" target="blank">March 12, 2013</a>
</li>
</ul>Follow Us (FootPaneF)
Code:
html
<ul class="home18-social02 animation scaleUp">
<li><a href="#"><em class="fa fa-facebook"></em>Facebook</a></li>
<li><a href="#"><em class="fa fa-twitter"></em>Twitter</a></li>
<li><a href="#"><em class="fa fa-linkedin"></em>LinkedIn</a></li>
<li><a href="#"><em class="fa fa-share-alt"></em>Share Alt</a></li>
<li><a href="#"><em class="fa fa-google-plus"></em>Google +</a></li>
<li><a href="#"><em class="fa fa-rss"></em>RSS</a></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>