Home Version 24 Page Code
Home Version 24 is a One Page version — see One Page for how the anchor mechanism works.
Click to preview the Home Version 24 demo. View demo
Preview:

Cover Section (CoverPane)
Code:
html
<div data-iconame="fa fa-home" data-menuanchor="true" data-scrollshownav="true" data-offset="0" class=" anchorTag" data-title="Home"></div>Email: [email protected] Time: Monday to Friday (HeaderPane)
Code:
html
<div class="pt-20 visible-xs visible-sm "></div>
Email: [email protected] Time: Monday to Friday
<div class="pt-20 visible-xs visible-sm "></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.
TopOutPane Section (TopOutPane)
Code:
html
<div class="home24-icenter">
<span class="fa fa-home"></span>
</div>NEW PRODUCTS (TopPane · 1)
Code:
html
<div class="home24-ibox animation">
<div class="row">
<div class="col-sm-6 col-md-3 animation_item scaleUp delay1">
<div class="flip_box">
<div class="rotate">
<div class="front"> <span class="fa fa-briefcase"></span>
<h3>NEW PRODUCTS</h3>
<p>Donec in ut odio libero, at vulpu tate urna nulla tristique mia massa convallis cursus. etiam commodo gravida. </p>
</div>
<div class="back">
<h3>FLIP BOX</h3>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam. </p>
<a class="btn" href="http://store.dnnsoftware.com/home/product-details/PackageID/36589/r/cd57d7207c9d4266bc34" target="blank">Read More</a>
</div>
</div>
</div>
</div>
<div class="col-sm-6 col-md-3 animation_item scaleUp delay2">
<div class="flip_box">
<div class="rotate">
<div class="front"> <span class="fa fa-gavel"></span>
<h3>SITE SETTINGS</h3>
<p>Donec in ut odio libero, at vulpu tate urna nulla tristique mia massa convallis cursus. etiam commodo gravida. </p>
</div>
<div class="back">
<h3>FLIP BOX</h3>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam. </p>
<a class="btn" href="http://store.dnnsoftware.com/home/product-details/PackageID/36589/r/cd57d7207c9d4266bc34" target="blank">Read More</a>
</div>
</div>
</div>
</div>
<div class="col-sm-6 col-md-3 animation_item scaleUp delay3">
<div class="flip_box sm-mt-0">
<div class="rotate">
<div class="front"> <span class="fa fa-street-view"></span>
<h3>TOP SELLER</h3>
<p>Donec in ut odio libero, at vulpu tate urna nulla tristique mia massa convallis cursus. etiam commodo gravida. </p>
</div>
<div class="back">
<h3>FLIP BOX</h3>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam. </p>
<a class="btn" href="http://store.dnnsoftware.com/home/product-details/PackageID/36589/r/cd57d7207c9d4266bc34" target="blank">Read More</a>
</div>
</div>
</div>
</div>
<div class="col-sm-6 col-md-3 animation_item scaleUp delay4">
<div class="flip_box sm-mt-0 xs-mt-0">
<div class="rotate">
<div class="front"> <span class="fa fa-laptop"></span>
<h3>CUSTOM WEB</h3>
<p>Donec in ut odio libero, at vulpu tate urna nulla tristique mia massa convallis cursus. etiam commodo gravida. </p>
</div>
<div class="back">
<h3>FLIP BOX</h3>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam. </p>
<a class="btn" href="http://store.dnnsoftware.com/home/product-details/PackageID/36589/r/cd57d7207c9d4266bc34" target="blank">Read More</a>
</div>
</div>
</div>
</div>
</div>
</div>Welcome To Dnngo.net (TopPane · 2)
Code:
html
<div class="pt-50 hidden-xs"></div> <div class="home24-boxes animation fadeInUp"> <div class="boxes"> <h3 class="boxes-title">Welcome To Dnngo.net</h3> <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 archi tecto beatae. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nibh diam, blan dit vitae vehicula dapibus. </p> <div><a href="http://store.dnnsoftware.com/home/product-details/PackageID/36589/r/cd57d7207c9d4266bc34" target="blank" class="btn">VIEW DEMO</a><a href="http://www.dnngo.net" target="blank" class="btn">START HERE</a></div> </div> </div> <div class="pt-30"></div>BEAUTIFUL THEME (Full_Screen_PaneB · 1)
Code:
html
<div data-iconame="fa fa-image" data-menuanchor="true" data-scrollshownav="true" data-offset="-60" class=" anchorTag" data-title="Portfolio"></div>
<div class="home24-icenter"> <span class="fa fa-image"></span> </div>
<div class="home3con_b">
<div class="isotope_grid home24-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="390">
<div class="isotope_item">
<div class="photo_box ico_LeftAndRight_enter">
<div class="pic_box"> <img alt="" class="img-responsive" src="http://demo8.dnngo.net/portals/18/Home24-Images/home24-pic01.jpg" />
<div class="content">
<div class="vertical_center_1">
<div class="vertical_center_2">
<h3>BEAUTIFUL THEME</h3>
<div class="category"><a href="#" target="blank">Websites</a>, <a href="#" target="blank">Design</a> </div>
</div>
</div>
</div>
<div class="shade"></div>
</div>
</div>
</div>
<div class="isotope_item">
<div class="photo_box ico_LeftAndRight_enter">
<div class="pic_box"> <img alt="" class="img-responsive" src="http://demo8.dnngo.net/portals/18/Home24-Images/home24-pic02.jpg" />
<div class="content">
<div class="vertical_center_1">
<div class="vertical_center_2">
<h3>BEAUTIFUL THEME</h3>
<div class="category"><a href="#" target="blank">Websites</a>, <a href="#" target="blank">Design</a> </div>
</div>
</div>
</div>
<div class="shade"></div>
</div>
</div>
</div>
<div class="isotope_item" data-zoom="2">
<div class="photo_box ico_LeftAndRight_enter">
<div class="pic_box"> <img alt="" class="img-responsive" src="http://demo8.dnngo.net/portals/18/Home24-Images/home24-pic03.jpg" />
<div class="content">
<div class="vertical_center_1">
<div class="vertical_center_2">
<h3>BEAUTIFUL THEME</h3>
<div class="category"><a href="#" target="blank">Websites</a>, <a href="#" target="blank">Design</a> </div>
</div>
</div>
</div>
<div class="shade"></div>
</div>
</div>
</div>
<div class="isotope_item">
<div class="photo_box ico_LeftAndRight_enter">
<div class="pic_box"> <img alt="" class="img-responsive" src="http://demo8.dnngo.net/portals/18/Home24-Images/home24-pic04.jpg" />
<div class="content">
<div class="vertical_center_1">
<div class="vertical_center_2">
<h3>BEAUTIFUL THEME</h3>
<div class="category"><a href="#" target="blank">Websites</a>, <a href="#" target="blank">Design</a> </div>
</div>
</div>
</div>
<div class="shade"></div>
</div>
</div>
</div>
<div class="isotope_item">
<div class="photo_box ico_LeftAndRight_enter">
<div class="pic_box"> <img alt="" class="img-responsive" src="http://demo8.dnngo.net/portals/18/Home24-Images/home24-pic05.jpg" />
<div class="content">
<div class="vertical_center_1">
<div class="vertical_center_2">
<h3>BEAUTIFUL THEME</h3>
<div class="category"><a href="#" target="blank">Websites</a>, <a href="#" target="blank">Design</a> </div>
</div>
</div>
</div>
<div class="shade"></div>
</div>
</div>
</div>
</div>
</div>
</div>PHOTO GALLERY (Full_Screen_PaneB · 2)
Code:
html
<div class="home24-bg pt-60 pb-60"> <div class="container pt-20 pb-20"> <div class="pane_layout clearfix"> <div class="row"> <div class="col-sm-12 animation scaleUp "> <div data-autoplay="3000" data-autoheight="false" data-pagination="false" class="carousel home24-carousel"> <div class="item"> <div class="ico"><span class="fa fa-camera"></span></div> <h3>PHOTO GALLERY</h3> <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 verita. </p> </div> <div class="item"> <div class="ico"><span class="fa fa-fire"></span></div> <h3>THE FLAMES</h3> <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 verita. </p> </div> <div class="item"> <div class="ico"><span class="fa fa-glass"></span></div> <h3>BEST SELLER</h3> <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 verita. </p> </div> <div class="item"> <div class="ico"><span class="fa fa-camera"></span></div> <h3>PHOTO GALLERY</h3> <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 verita. </p> </div> <div class="item"> <div class="ico"><span class="fa fa-fire"></span></div> <h3>THE FLAMES</h3> <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 verita. </p> </div> <div class="item"> <div class="ico"><span class="fa fa-glass"></span></div> <h3>BEST SELLER</h3> <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 verita. </p> </div> </div> </div> </div> </div> </div> </div>Full_Screen_PaneB Section (Full_Screen_PaneB · 3)
Code:
html
<div data-iconame="fa fa-pencil" data-menuanchor="true" data-scrollshownav="true" data-offset="-60" class=" anchorTag" data-title="Blog"></div> <div class="home24-icenter"> <span class="fa fa-pencil"></span> </div> <div class="pt-30"></div>Recent Blogs (RowFour_Grid6_Pane1)
Code:
html
<ul class="home24-bolglist animation fadeInLeft"> <li> <div class="date"><span class="nob">29</span><span class="mon">Sep</span></div> <div class="rightbox"> <h6>Create A New Template </h6> <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium dolore mque laudan tium, totam rem aperiam.</p> <div><a href="#" target="blank">Web Design</a><span class="sep">|</span><a href="http://store.dnnsoftware.com/home/product-details/PackageID/36589/r/cd57d7207c9d4266bc34" target="blank">Read More</a></div> </div> </li> <li> <div class="date"><span class="nob">03</span><span class="mon">Nov</span></div> <div class="rightbox"> <h6>Working Meetings </h6> <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium dolore mque laudan tium, totam rem aperiam.</p> <div><a href="#" target="blank">Photos</a><span class="sep">|</span><a href="http://store.dnnsoftware.com/home/product-details/PackageID/36589/r/cd57d7207c9d4266bc34" target="blank">Read More</a></div> </div> </li> <li> <div class="date"><span class="nob">16</span><span class="mon">Dec</span></div> <div class="rightbox"> <h6>Functional Skins </h6> <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium dolore mque laudan tium, totam rem aperiam.</p> <div><a href="#" target="blank">Videos</a><span class="sep">|</span><a href="http://store.dnnsoftware.com/home/product-details/PackageID/36589/r/cd57d7207c9d4266bc34" target="blank">Read More</a></div> </div> </li> </ul>Our Skills (RowFour_Grid6_Pane2)
Code:
html
<div class="animation fadeInRight">
<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 archi tecto beatae dolor sit amet, consectetur adipiscing elit. </p>
<div class="pt-10"></div>
<div class="home24-loadlist">
<p> Web Design </p>
<div class="progress progress-striped active">
<div data-width="88%" class="bar animation animationwidth"><span></span></div>
</div>
<p> Html5 & CSS3</p>
<div class="progress progress-striped active">
<div data-width="70%" class="bar animation animationwidth"><span></span></div>
</div>
<p>DNN</p>
<div class="progress progress-striped active">
<div data-width="95%" class="bar animation animationwidth"><span></span> </div>
</div>
<p>Photoshop</p>
<div class="progress progress-striped active">
<div data-width="60%" class="bar animation animationwidth"><span></span></div>
</div>
<p> Jquery </p>
<div class="progress progress-striped active">
<div data-width="90%" class="bar animation animationwidth"><span></span></div>
</div>
<p> ASp.net </p>
<div class="progress progress-striped active">
<div data-width="80%" class="bar animation animationwidth"><span></span></div>
</div>
</div>
</div>Full_Screen_PaneC Section (Full_Screen_PaneC · 1)
Code:
html
<div class="pt-30"></div> <div data-iconame="fa fa-suitcase" data-menuanchor="true" data-scrollshownav="true" data-offset="-60" class=" anchorTag" data-title="Features"></div> <div class="home24-icenter"> <span class="fa fa-suitcase"></span> </div>Powerful, Responsive, Awesome Theme (Full_Screen_PaneC · 2)
Code:
html
<div class="home24-bg02 pt-60"> <div class="container clearfix pt-10"> <div class="row"> <div class="col-sm-12"> <div class="home24-cont animation fadeInUp"> <h3 class="title">Powerful, Responsive, Awesome 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.</p> <div><a class="btn" href="#" target="blank">BUY THIS THEME</a> <a class="btn" href="#" target="blank">LIVE DEMO</a></div> </div> </div> <div class="col-sm-12 pt-20"> <div class="home24-imgbox"> <div class="mac animation periodic1"> <img alt="" src="http://demo8.dnngo.net/portals/18/Home24-Images/home24-pic06.png" class="img-responsive" /> </div> <div class="ipad animation periodic2"> <img alt="" src="http://demo8.dnngo.net/portals/18/Home24-Images/home24-pic07.png" class="img-responsive" /> </div> <div class="phone animation periodic3"> <img alt="" src="http://demo8.dnngo.net/portals/18/Home24-Images/home24-pic08.png" class="img-responsive" /> </div> <div class="cirde animation periodic4"> <img alt="" src="http://demo8.dnngo.net/portals/18/Home24-Images/home24-pic09.png" class="img-responsive" /> </div> </div> </div> </div> </div> </div>Full_Screen_PaneC Section (Full_Screen_PaneC · 3)
Code:
html
<div data-iconame="fa fa-clock-o" data-menuanchor="true" data-scrollshownav="true" data-offset="-60" class=" anchorTag" data-title="Our History"></div> <div class="home24-icenter"> <span class="fa fa-clock-o"></span> </div> <div class="pt-30"></div>Our History (ContentPane)
Code:
html
<div class="home24-timeline"> <div class="timeline-year">2014</div> <div class="timeline-content clearfix"> <div class="timeline-left animation fadeInLeft"> <div class="photo_box ico_right_enter"> <div class="pic_box"><a href="#" target="blank"><img alt="" src="http://demo8.dnngo.net/portals/18/Home24-Images/home24-pic10.jpg" /> </a> <div class="ico"><a href="#" target="blank"><span class="fa fa-plus"></span> </a></div> <a href="#" target="blank"> </a> <div class="shade"> </div> <a href="#" target="blank"> </a></div> </div> <h3>Version 1.0 Updated</h3> <p>Donec in ut odio libero, at vulputate urna nulla tristique mi a massa convallis cursus. etiamnon euismod felis. Integer et risus quis commodo diam gravida.</p> <div><a href="#" target="blank">August 20th</a> <span class="sep">|</span> <a href="http://store.dnnsoftware.com/home/product-details/PackageID/36589/r/cd57d7207c9d4266bc34" target="blank">Read More</a></div> <div class="dot">1</div> </div> <div class="timeline-right animation fadeInRight"> <div class="photo_box ico_right_enter"> <div class="pic_box"><a href="#" target="blank"><img alt="" src="http://demo8.dnngo.net/portals/18/Home24-Images/home24-pic11.jpg" /> </a> <div class="ico"><a href="#" target="blank"><span class="fa fa-plus"></span> </a></div> <a href="#" target="blank"> </a> <div class="shade"> </div> <a href="#" target="blank"> </a></div> </div> <h3>DNN6 & DNN7</h3> <p>Donec in ut odio libero, at vulputate urna nulla tristique mi a massa convallis cursus. etiamnon euismod felis. Integer et risus quis commodo diam gravida.</p> <div><a href="#" target="blank">June 06th</a> <span class="sep">|</span> <a href="http://store.dnnsoftware.com/home/product-details/PackageID/36589/r/cd57d7207c9d4266bc34" target="blank">Read More</a></div> <div class="dot">2</div> </div> </div> <div class="timeline-year">2013</div> <div class="timeline-content clearfix"> <div class="timeline-left animation fadeInLeft"> <div class="photo_box ico_right_enter"> <div class="pic_box"><a href="#" target="blank"><img alt="" src="http://demo8.dnngo.net/portals/18/Home24-Images/home24-pic12.jpg" /> </a> <div class="ico"><a href="#" target="blank"><span class="fa fa-plus"></span> </a></div> <a href="#" target="blank"> </a> <div class="shade"> </div> <a href="#" target="blank"> </a></div> </div> <h3>Front-end Technology</h3> <p>Donec in ut odio libero, at vulputate urna nulla tristique mi a massa convallis cursus. etiamnon euismod felis. Integer et risus quis commodo diam gravida.</p> <div><a href="#" target="blank">May 13</a> <span class="sep">|</span> <a href="http://store.dnnsoftware.com/home/product-details/PackageID/36589/r/cd57d7207c9d4266bc34" target="blank">Read More</a></div> <div class="dot">3</div> </div> <div class="timeline-right animation fadeInRight"> <div class="photo_box ico_right_enter"> <div class="pic_box"><a href="#" target="blank"><img alt="" src="http://demo8.dnngo.net/portals/18/Home24-Images/home24-pic13.jpg" /> </a> <div class="ico"><a href="#" target="blank"><span class="fa fa-plus"></span> </a></div> <a href="#" target="blank"> </a> <div class="shade"> </div> <a href="#" target="blank"> </a></div> </div> <h3>Retina Ready</h3> <p>Donec in ut odio libero, at vulputate urna nulla tristique mi a massa convallis cursus. etiamnon euismod felis. Integer et risus quis commodo diam gravida.</p> <div><a href="#" target="blank">February 05th</a> <span class="sep">|</span> <a href="http://store.dnnsoftware.com/home/product-details/PackageID/36589/r/cd57d7207c9d4266bc34" target="blank">Read More</a></div> <div class="dot">4</div> </div> </div> </div>Full_Screen_PaneE Section (Full_Screen_PaneE · 1)
Code:
html
<div class="pt-30"></div> <div data-iconame="fa fa-cog" data-menuanchor="true" data-scrollshownav="true" data-offset="-60" class=" anchorTag" data-title="Our Services"></div> <div class="home24-icenter"> <span class="fa fa-cog"></span> </div>Our Services (Full_Screen_PaneE · 2)
Code:
html
<div class="home24-bg03 pt-60 pb-60"><div class="container clearfix pt-10 pb-20"> <div class="home24-title animation fadeInUp"> <div class="line"> <h3>Our Services</h3> </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. </p> </div> <ul class="home24-list animation fadeInUp"> <li> <div class="top"> <h3>WEB DESIGN</h3> <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo dicta sunt explicabo.</p> <a class="link" href="http://store.dnnsoftware.com/home/product-details/PackageID/36589/r/cd57d7207c9d4266bc34" target="blank">More Information ></a> </div> <a href="http://dnngo.net" target="blank" class="btn"> START HERE <span class="fa fa-chevron-right"></span></a> </li> <li> <div class="top"> <h3>DEVELOP SKIN</h3> <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo dicta sunt explicabo.</p> <a class="link" href="http://store.dnnsoftware.com/home/product-details/PackageID/36589/r/cd57d7207c9d4266bc34" target="blank">More Information ></a> </div> <a href="http://store.dnnsoftware.com/home/product-details/PackageID/36589/r/cd57d7207c9d4266bc34" target="blank" class="btn">PURCHASE IT <span class="fa fa-chevron-right"></span></a> </li> <li> <div class="top"> <h3>DNN MODULES</h3> <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo dicta sunt explicabo.</p> <a class="link" href="http://store.dnnsoftware.com/home/product-details/PackageID/36589/r/cd57d7207c9d4266bc34" target="blank">More Information ></a> </div> <a href="http://dnngo.net" target="blank" class="btn"> CUSTOM THEME <span class="fa fa-chevron-right"></span></a> </li> </ul> <div class="text-center pt-40 animation fadeInUp"><a href="#" target="blank" class="home24-btn">Custom Service</a><a href="#" target="blank" class="home24-btn">Make Website</a></div> </div></div>Full_Screen_PaneE Section (Full_Screen_PaneE · 3)
Code:
html
<div data-iconame="fa fa-tag" data-menuanchor="true" data-scrollshownav="true" data-offset="-60" class=" anchorTag" data-title="Pricing"></div> <div class="home24-icenter"> <span class="fa fa-tag"></span> </div> <div class="pt-30"></div>Pricing (BottomPane)
Code:
html
<p class="home24-textcenter pb-40 animation fadeInUp">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.</p> <div class="price-table home24-price row animation"> <div class="col-md-3 col-sm-6 color-1 animation_item scaleUp delay1"> <div class="price_border"> <div class="price_title"> <h2>Basic Plan</h2> </div> <div class="price_holder"> <div class="price_box"><span class="sup">$</span><span class="price">100</span><span class="unit">Per Month</span></div> <ul> <li>Responsive Web</li> <li>Sample Pages</li> <li>Unlimited Colors</li> <li>50 Databases</li> <li>100GB Space</li> </ul> <a href="http://store.dnnsoftware.com/home/product-details/PackageID/36589/r/cd57d7207c9d4266bc34" target="blank" class="btn ">BUY NOW!</a> </div> </div> </div> <div class="col-md-3 col-sm-6 color-2 animation_item scaleUp delay2"> <div class="price_border"> <div class="price_title "> <h2>Professional</h2> </div> <div class="price_holder"> <div class="price_box"><span class="sup">$</span><span class="price">200</span><span class="unit">Per Month</span></div> <ul> <li>Responsive Web</li> <li>Sample Pages</li> <li>Unlimited Colors</li> <li>100 Databases</li> <li>200GB Space</li> </ul> <a href="http://store.dnnsoftware.com/home/product-details/PackageID/36589/r/cd57d7207c9d4266bc34" target="blank" class="btn">BUY NOW!</a> </div> </div> </div> <div class="col-md-3 col-sm-6 color-3 animation_item scaleUp delay3"> <div class="price_border"> <div class="price_title"> <h2>Maxmium</h2> </div> <div class="price_holder"> <div class="price_box"><span class="sup">$</span><span class="price">300</span><span class="unit">Per Month</span></div> <ul> <li>Responsive Web</li> <li>Sample Pages</li> <li>Unlimited Colors</li> <li>150 Databases</li> <li>300GB Space</li> </ul> <a href="http://store.dnnsoftware.com/home/product-details/PackageID/36589/r/cd57d7207c9d4266bc34" target="blank" class="btn">BUY NOW!</a> </div> </div> </div> <div class="col-md-3 col-sm-6 color-4 animation_item scaleUp delay4"> <div class="price_border"> <div class="price_title"> <h2>Extreme</h2> </div> <div class="price_holder"> <div class="price_box"><span class="sup">$</span><span class="price">400</span><span class="unit">Per Month</span></div> <ul> <li>Responsive Web</li> <li>Sample Pages</li> <li>Unlimited Colors</li> <li>200 Databases</li> <li>400GB Space</li> </ul> <a href="http://store.dnnsoftware.com/home/product-details/PackageID/36589/r/cd57d7207c9d4266bc34" target="blank" class="btn">BUY NOW!</a> </div> </div> </div> </div><div class="pb-20"></div>BottomOutPane Section (BottomOutPane · 1)
Code:
html
<div data-iconame="fa fa-map-marker" data-menuanchor="true" data-scrollshownav="true" data-offset="-60" class=" anchorTag" data-title="Contact Us"></div>
<div class="home24-icenter shadow"> <span class="fa fa-map-marker"></span> </div>BottomOutPane Section (BottomOutPane · 2)
Code:
html
<div id="gmap01" class="map-shadow"></div>Full_Screen_FootPaneA Section (Full_Screen_FootPaneA)
Code:
html
<div class="pt-30 visible-xs "></div>PHOTOS (FootPaneD)
Code:
html
<ul class="home24-piclist animation fadeInUp">
<li><a class="LightBox_image_gallery24" href="http://demo8.dnngo.net/portals/18/Home24-Images/home24-pic14-big.jpg"><img alt="" src="http://demo8.dnngo.net/portals/18/Home24-Images/home24-pic14.jpg" /></a></li>
<li><a class="LightBox_image_gallery24" href="http://demo8.dnngo.net/portals/18/Home24-Images/home24-pic15-big.jpg"><img alt="" src="http://demo8.dnngo.net/portals/18/Home24-Images/home24-pic15.jpg" /></a></li>
<li><a class="LightBox_image_gallery24" href="http://demo8.dnngo.net/portals/18/Home24-Images/home24-pic16-big.jpg"><img alt="" src="http://demo8.dnngo.net/portals/18/Home24-Images/home24-pic16.jpg" /></a></li>
<li><a class="LightBox_image_gallery24" href="http://demo8.dnngo.net/portals/18/Home24-Images/home24-pic17-big.jpg"><img alt="" src="http://demo8.dnngo.net/portals/18/Home24-Images/home24-pic17.jpg" /></a></li>
<li><a class="LightBox_image_gallery24" href="http://demo8.dnngo.net/portals/18/Home24-Images/home24-pic18-big.jpg"><img alt="" src="http://demo8.dnngo.net/portals/18/Home24-Images/home24-pic18.jpg" /></a></li>
<li><a class="LightBox_image_gallery24" href="http://demo8.dnngo.net/portals/18/Home24-Images/home24-pic19-big.jpg"><img alt="" src="http://demo8.dnngo.net/portals/18/Home24-Images/home24-pic19.jpg" /></a></li>
<li><a class="LightBox_image_gallery24" href="http://demo8.dnngo.net/portals/18/Home24-Images/home24-pic20-big.jpg"><img alt="" src="http://demo8.dnngo.net/portals/18/Home24-Images/home24-pic20.jpg" /></a></li>
<li><a class="LightBox_image_gallery24" href="http://demo8.dnngo.net/portals/18/Home24-Images/home24-pic21-big.jpg"><img alt="" src="http://demo8.dnngo.net/portals/18/Home24-Images/home24-pic21.jpg" /></a></li>
<li><a class="LightBox_image_gallery24" href="http://demo8.dnngo.net/portals/18/Home24-Images/home24-pic22-big.jpg"><img alt="" src="http://demo8.dnngo.net/portals/18/Home24-Images/home24-pic22.jpg" /></a></li>
</ul>LINKS (FootPaneE)
Code:
html
<ul class="home24-list02 animation fadeInUp"> <li><a href="http://store.dnnsoftware.com/home/product-details/PackageID/36589/r/cd57d7207c9d4266bc34" target="blank"><span class="fa fa-angle-right"></span>Design & Skinning</a></li> <li><a href="http://dnngo.net" target="blank"><span class="fa fa-angle-right"></span>Help Center</a></li> <li><a href="http://dnngo.net" target="blank"><span class="fa fa-angle-right"></span>Module Development</a></li> <li><a href="http://store.dnnsoftware.com/home/product-details/PackageID/36589/r/cd57d7207c9d4266bc34" target="blank"><span class="fa fa-angle-right"></span>Download Center</a></li> <li><a href="http://store.dnnsoftware.com/home/product-details/PackageID/36589/r/cd57d7207c9d4266bc34" target="blank"><span class="fa fa-angle-right"></span>Make Your Business</a></li> <li><a href="http://dnngo.net" target="blank"><span class="fa fa-angle-right"></span>Find Our Location</a></li> </ul>CONTACT (FootPaneF)
Code:
html
<div class="home24-contact animation fadeInUp "> <dl> <dt>OFFICE ADDRESS:</dt> <dd>XinHua Hotel 15th Floor No.2903</dd> </dl> <dl> <dt>PHONE NUMBER:</dt> <dd>(0086)-23665877, (0086)-23885899</dd> </dl> <dl> <dt>EMAIL US:</dt> <dd>[email protected]</dd> </dl> </div>EMAIL US (FootPaneG)
This section uses the DNNGo PowerForms module — see PowerForms.
