Home Version 5 Page Code
Click to preview the Home Version 5 demo. View demo
Preview:
Email : [email protected] (HeaderPane)
Code:
html
<span class=" fa fa-envelope"></span> Email : [email protected]My Cart (0) Items (HeaderPaneB)
Code:
html
<div class="home05-shop-info"> <img alt="" src="http://demo8.dnngo.net/portals/13/Home05-Images/home05-shop-info.png" />
<div class="shop-text"> My Cart<br />
<span>(0) Items</span> </div>
</div>Banner Section (BannerPane)
This section uses the DNNGo LayerGallery Pro module.
The download package provides import data for this page (Home5-ContentListEntity.xml in the DNNGo_LayerGalleryPro Module folder). Import it via Manager → Import & Export to recreate the demo banner — see LayerGallery Pro.
FEATURED PRODUCTS (TopPane)
Code:
html
<p style="text-align: center;" class=" pb-30 animation scaleUp">Sed sollicitudin mi quis sem consequat vehicula. Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br />Vivamus quis lorem neque sit amet vestibulum nibh malesuada.</p>
<div class="phone_center animation ">
<div class="row">
<div class="col-md-3 col-sm-6 animation_item scaleUp delay1">
<div class="home05-productlist">
<div class="img"><img alt="" src="http://demo8.dnngo.net/portals/13/Home05-Images/home05-img01.jpg" /> </div>
<h3>Color circle pattern T’shirt</h3>
<div class="ratings"> <span class="fa fa-star"></span><span class="fa fa-star"></span><span class="fa fa-star"></span><span class="fa fa-star"></span><span class="fa fa-star-o"></span> </div>
<div class="price">$48.00</div>
<div class="link">
<a href="#"><span class="shopping"></span>Add to cart</a>
<a href="#"><span class="view"></span>View Detail</a>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6 animation_item scaleUp delay2">
<div class="home05-productlist">
<div class="img">
<div class="sales">SALE</div> <img alt="" src="http://demo8.dnngo.net/portals/13/Home05-Images/home05-img02.jpg" /> </div>
<h3>Men's running shoes</h3>
<div class="ratings"> <span class="fa fa-star"></span><span class="fa fa-star"></span><span class="fa fa-star"></span><span class="fa fa-star-o"></span><span class="fa fa-star-o"></span> </div>
<div class="price">$256.00</div>
<div class="link">
<a href="#"><span class="shopping"></span>Add to cart</a>
<a href="#"><span class="view"></span>View Detail</a>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6 animation_item scaleUp delay3">
<div class="home05-productlist">
<div class="img"><img alt="" src="http://demo8.dnngo.net/portals/13/Home05-Images/home05-img03.jpg" /> </div>
<h3>Ms. fine bag (yellow)</h3>
<div class="ratings"> <span class="fa fa-star"></span><span class="fa fa-star"></span><span class="fa fa-star"></span><span class="fa fa-star"></span><span class="fa fa-star-o"></span> </div>
<div class="price">$189.00</div>
<div class="link">
<a href="#"><span class="shopping"></span>Add to cart</a>
<a href="#"><span class="view"></span>View Detail</a>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6 animation_item scaleUp delay4">
<div class="home05-productlist">
<div class="img"><img alt="" src="http://demo8.dnngo.net/portals/13/Home05-Images/home05-img04.jpg" /> </div>
<h3>Blue men long jeans</h3>
<div class="ratings"> <span class="fa fa-star"></span><span class="fa fa-star"></span><span class="fa fa-star"></span><span class="fa fa-star"></span><span class="fa fa-star-o"></span> </div>
<div class="price">$57.00</div>
<div class="link">
<a href="#"><span class="shopping"></span>Add to cart</a>
<a href="#"><span class="view"></span>View Detail</a>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-3 col-sm-6 animation_item scaleUp delay5">
<div class="home05-productlist">
<div class="img"><img alt="" src="http://demo8.dnngo.net/portals/13/Home05-Images/home05-img05.jpg" /> </div>
<h3>Ladies travel shoulder bag</h3>
<div class="ratings"> <span class="fa fa-star"></span><span class="fa fa-star"></span><span class="fa fa-star"></span><span class="fa fa-star"></span><span class="fa fa-star"></span> </div>
<div class="price">$108.00</div>
<div class="link">
<a href="#"><span class="shopping"></span>Add to cart</a>
<a href="#"><span class="view"></span>View Detail</a>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6 animation_item scaleUp delay6">
<div class="home05-productlist">
<div class="img"><img alt="" src="http://demo8.dnngo.net/portals/13/Home05-Images/home05-img06.jpg" /> </div>
<h3>Pink chiffon dress</h3>
<div class="ratings"> <span class="fa fa-star"></span><span class="fa fa-star"></span><span class="fa fa-star"></span><span class="fa fa-star"></span><span class="fa fa-star-o"></span> </div>
<div class="price">$220.00</div>
<div class="link">
<a href="#"><span class="shopping"></span>Add to cart</a>
<a href="#"><span class="view"></span>View Detail</a>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6 animation_item scaleUp delay7">
<div class="home05-productlist">
<div class="img"><img alt="" src="http://demo8.dnngo.net/portals/13/Home05-Images/home05-img07.jpg" /> </div>
<h3>Summer denim shorts</h3>
<div class="ratings"> <span class="fa fa-star"></span><span class="fa fa-star"></span><span class="fa fa-star"></span><span class="fa fa-star"></span><span class="fa fa-star"></span> </div>
<div class="price">$69.00</div>
<div class="link">
<a href="#"><span class="shopping"></span>Add to cart</a>
<a href="#"><span class="view"></span>View Detail</a>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6 animation_item scaleUp delay8">
<div class="home05-productlist">
<div class="img"><div class="sales">SALE</div> <img alt="" src="http://demo8.dnngo.net/portals/13/Home05-Images/home05-img08.jpg" /> </div>
<h3>Comfort cooling flat shoes</h3>
<div class="ratings"> <span class="fa fa-star"></span><span class="fa fa-star"></span><span class="fa fa-star"></span><span class="fa fa-star-o"></span><span class="fa fa-star-o"></span> </div>
<div class="price">$35.00</div>
<div class="link">
<a href="#"><span class="shopping"></span>Add to cart</a>
<a href="#"><span class="view"></span>View Detail</a>
</div>
</div>
</div>
</div>
</div>
<p style="text-align: center;" class="pt-10 animation scaleUp pb-20">
<a href="#" class="home05-btn">LOAD MORE</a>
<a href="#" class="home05-btn">GO TO STORE</a>
</p>Wondering what customerssay about our services (Full_Screen_PaneB)
Code:
html
<div class="home05-bg"> <div class="container pt-60"> <div class="row"> <div class="col-md-5 col-sm-6 animation"> <div class="pt-40"><h3 class="home05-title02 animation_item fadeInLeft delay1"> <span>Wondering what customers<br />say about our services </span></h3></div> <div class="mt-40"></div> <blockquote class="home05-quote animation_item fadeInLeft delay2"> <p>“ Mauris viverra, dui at cursus suscipit, lectus odio hendrerit ante, nec iaculis felis nulla quis tellus. In rhoncus pharetra quam. Sed vel mauris ut libero malesuada posuere quis id risus ulla vitae ipsum ac est sagittis luctus at id lacus. ”</p> <small>David Smith<span>—— THE DNNGO BUYER</span></small> </blockquote> <div class="pb-10"> <div class="pt-50 pb-60 home05-linklist animation_item fadeInLeft delay3"> <a href="#"><img alt="" src="http://demo8.dnngo.net/portals/13/Home05-Images/home05-logo07.png" /></a> <a href="#"><img alt="" src="http://demo8.dnngo.net/portals/13/Home05-Images/home05-logo08.png" /></a> <a href="#"><img alt="" src="http://demo8.dnngo.net/portals/13/Home05-Images/home05-logo09.png" /></a> <a href="#"><img alt="" src="http://demo8.dnngo.net/portals/13/Home05-Images/home05-logo10.png" /></a> </div> </div> </div> <div class="col-md-1 hidden-sm"></div> <div class="col-sm-6 right_bg "> </div> </div> </div> </div>Content Section (ContentPane · 1)
Code:
html
WHAT WE HAVE (ContentPane · 2)
Code:
html
<p class=" pb-30 animation scaleUp" style="text-align: center;margin-bottom:0;">Sed sollicitudin mi quis sem consequat vehicula. Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br />Vivamus quis lorem neque sit amet vestibulum nibh malesuada.</p> <div class="row"> <div class="col-md-3 col-sm-6"> <ul class="home05-list animation"> <li class="animation_item scaleUp delay1"><span class="fa fa-check"></span><a href="#">Unlimited Skins/Styles/Colors</a></li> <li class="animation_item scaleUp delay2"><span class="fa fa-check"></span><a href="#">Ultra Responsive Design</a></li> <li class="animation_item scaleUp delay3"><span class="fa fa-check"></span><a href="#">CSS3 & HTML 5</a></li> <li class="animation_item scaleUp delay4"><span class="fa fa-check"></span><a href="#">SEO Friendly</a></li> <li class="animation_item scaleUp delay5"><span class="fa fa-check"></span><a href="#">Hundreds Of Google Fonts</a></li> <li class="animation_item scaleUp delay6"><span class="fa fa-check"></span><a href="#">470 Font Icons</a></li> </ul> </div> <div class="col-md-3 col-sm-6"> <ul class="home05-list animation"> <li class="animation_item scaleUp delay1"><span class="fa fa-check"></span><a href="#">Cutting-edge CSS3 Animations</a></li> <li class="animation_item scaleUp delay2"><span class="fa fa-check"></span><a href="#">Boxed & Wide Layout</a></li> <li class="animation_item scaleUp delay3"><span class="fa fa-check"></span><a href="#">Responsive Full Width Slider Banner</a></li> <li class="animation_item scaleUp delay4"><span class="fa fa-check"></span><a href="#">5 Different Grid Responsive Layouts</a></li> <li class="animation_item scaleUp delay5"><span class="fa fa-check"></span><a href="#">14 Matching Containers</a></li> <li class="animation_item scaleUp delay6"><span class="fa fa-check"></span><a href="#">5 Header Styles</a></li> </ul> </div> <div class="col-md-3 col-sm-6"> <ul class="home05-list animation"> <li class="animation_item scaleUp delay1"><span class="fa fa-check"></span><a href="#">4 Breadcrumb Layouts</a></li> <li class="animation_item scaleUp delay2"><span class="fa fa-check"></span><a href="#">5 Premium Sliders</a></li> <li class="animation_item scaleUp delay3"><span class="fa fa-check"></span><a href="#">2 Footer Styles</a></li> <li class="animation_item scaleUp delay4"><span class="fa fa-check"></span><a href="#">Compatible With Most Browsers</a></li> <li class="animation_item scaleUp delay5"><span class="fa fa-check"></span><a href="#">DNN 7 Page Template</a></li> <li class="animation_item scaleUp delay6"><span class="fa fa-check"></span><a href="#">About Us Pages</a></li> </ul> </div> <div class="col-md-3 col-sm-6"> <ul class="home05-list animation"> <li class="animation_item scaleUp delay1"><span class="fa fa-check"></span><a href="#">2 Coming Soon Pages</a></li> <li class="animation_item scaleUp delay2"><span class="fa fa-check"></span><a href="#">404 Error Page</a></li> <li class="animation_item scaleUp delay3"><span class="fa fa-check"></span><a href="#">Contact Us Pages</a></li> <li class="animation_item scaleUp delay4"><span class="fa fa-check"></span><a href="#">Short Codes</a></li> <li class="animation_item scaleUp delay5"><span class="fa fa-check"></span><a href="#">Typography</a></li> <li class="animation_item scaleUp delay6"><span class="fa fa-check"></span><a href="#">DNNGo_GoMenu</a></li> </ul> </div> </div> <div class="pb-60"></div>THE LATEST PRODUCT RED JACKET FOR THIS AUTUMN THE (ContentPane · 3)
Code:
html
<div class="home05-photo animation pb-30"> <div class="left animation fadeInLeft"> <div class="photo_box_1"> <img alt="" src="http://demo8.dnngo.net/portals/13/Home05-Images/home05-img09.jpg" /> <div class="photo_content"> <div class="title_1">THE LATEST PRODUCT</div> <div class="title_2">RED JACKET</div> <div class="title_3">FOR THIS AUTUMN</div> </div> </div> </div> <div class="right animation fadeInRight"> <div class="photo_box_2"> <img alt="" src="http://demo8.dnngo.net/portals/13/Home05-Images/home05-img10.jpg" /> <div class="photo_content"> <div class="title_1">THE BEST CLOTHES</div> <div class="title_2">FOR CHILD</div> <div class="more"><a href="#">CHECK IT NOW</a></div> </div> </div> <div class="photo_box_3"> <img alt="" src="http://demo8.dnngo.net/portals/13/Home05-Images/home05-img11.jpg" /> <div class="photo_content"> <div class="title_1">80% DISCOUNT</div> <div class="title_2">SPORT SHOES</div> <div class="more"><a href="#">ADD TO CART</a></div> </div> </div> </div> </div>PRE-SALE (BottomOutPane)
Code:
html
<div class="home05-bg02">
<div class="container pt-60 pb-60">
<div class="row pt-20 pb-20">
<div class="col-md-4 animation">
<h3 class="home05-title03 animation_item scaleUp delay1"> <span>PRE-SALE</span></h3>
<ul class="home05-productlist02 animation">
<li class="animation_item scaleUp delay2">
<div class="img"><img alt="" src="http://demo8.dnngo.net/portals/13/Home05-Images/home05-img12.jpg" /></div>
<div class="content">
<h3>Color circle pattern T’shirt</h3>
<div class="price"><span class="current">$48.00</span> <span class="info">(Deliver in seven days)</span></div>
</div>
</li>
<li class="animation_item scaleUp delay3">
<div class="img"><img alt="" src="http://demo8.dnngo.net/portals/13/Home05-Images/home05-img13.jpg" /></div>
<div class="content">
<h3>Men's running shoes</h3>
<div class="price"><span class="current">$256.00</span> <span class="info">(Deliver in seven days)</span></div>
</div>
</li>
<li class="animation_item scaleUp delay4">
<div class="img"><img alt="" src="http://demo8.dnngo.net/portals/13/Home05-Images/home05-img14.jpg" /></div>
<div class="content">
<h3>Ms. fine bag (yellow)</h3>
<div class="price"><span class="current">$189.00</span> <span class="info">(Deliver in seven days)</span></div>
</div>
</li>
<li class="animation_item scaleUp delay5">
<div class="img"><img alt="" src="http://demo8.dnngo.net/portals/13/Home05-Images/home05-img15.jpg" /></div>
<div class="content">
<h3>Blue men long jeans</h3>
<div class="price"><span class="current">$57.00</span> <span class="info">(Deliver in seven days)</span></div>
</div>
</li>
</ul>
</div>
<div class="col-md-4 animation">
<h3 class="home05-title03 animation_item scaleUp delay1"> <span>DISCOUNT SALE</span></h3>
<ul class="home05-productlist02">
<li class="animation_item scaleUp delay2">
<div class="img"><img alt="" src="http://demo8.dnngo.net/portals/13/Home05-Images/home05-img16.jpg" /></div>
<div class="content">
<h3>Ladies Travel Shoulder Bag</h3>
<div class="price"><span class="original">$108.00</span> <span class="current">$96.00</span> <span class="info">(save $12)</span></div>
</div>
</li>
<li class="animation_item scaleUp delay3">
<div class="img"><img alt="" src="http://demo8.dnngo.net/portals/13/Home05-Images/home05-img17.jpg" /></div>
<div class="content">
<h3>Pink Chiffon Dress</h3>
<div class="price"><span class="original">$220.00</span> <span class="current">$110.00</span> <span class="info">(save $110)</span></div>
</div>
</li>
<li class="animation_item scaleUp delay4">
<div class="img"><img alt="" src="http://demo8.dnngo.net/portals/13/Home05-Images/home05-img18.jpg" /></div>
<div class="content">
<h3>Summer denim shorts</h3>
<div class="price"><span class="original">$69.00</span> <span class="current">$60.00</span> <span class="info">(save $9)</span></div>
</div>
</li>
<li class="animation_item scaleUp delay5">
<div class="img"><img alt="" src="http://demo8.dnngo.net/portals/13/Home05-Images/home05-img19.jpg" /></div>
<div class="content">
<h3>Comfort cooling flat shoes</h3>
<div class="price"><span class="original">$35.00</span> <span class="current">$29.00</span> <span class="info">(save $6)</span></div>
</div>
</li>
</ul>
</div>
<div class="col-md-4 animation">
<h3 class="home05-title03 animation_item scaleUp delay1"> <span>HOT PRODUCTS</span></h3>
<ul class="home05-productlist02">
<li class="animation_item scaleUp delay2">
<div class="img"><img alt="" src="http://demo8.dnngo.net/portals/13/Home05-Images/home05-img20.jpg" /></div>
<div class="content">
<h3>Men gray cartoon T-shirt</h3>
<div class="ratings"> <span class="fa fa-star"></span><span class="fa fa-star"></span><span class="fa fa-star"></span><span class="fa fa-star"></span><span class="fa fa-star-o"></span> </div>
<div class="price"><span class="current">$50.00</span></div>
</div>
</li>
<li class="animation_item scaleUp delay3">
<div class="img"><img alt="" src="http://demo8.dnngo.net/portals/13/Home05-Images/home05-img21.jpg" /></div>
<div class="content">
<h3>Blue couple T-shirt</h3>
<div class="ratings"> <span class="fa fa-star"></span><span class="fa fa-star"></span><span class="fa fa-star"></span><span class="fa fa-star"></span><span class="fa fa-star-o"></span> </div>
<div class="price"><span class="current">$120.00</span></div>
</div>
</li>
<li class="animation_item scaleUp delay4">
<div class="img"><img alt="" src="http://demo8.dnngo.net/portals/13/Home05-Images/home05-img22.jpg" /></div>
<div class="content">
<h3>Lady orange skirt</h3>
<div class="ratings"> <span class="fa fa-star"></span><span class="fa fa-star"></span><span class="fa fa-star"></span><span class="fa fa-star"></span><span class="fa fa-star-o"></span> </div>
<div class="price"><span class="current">$47.00</span></div>
</div>
</li>
<li class="animation_item scaleUp delay5">
<div class="img"><img alt="" src="http://demo8.dnngo.net/portals/13/Home05-Images/home05-img23.jpg" /></div>
<div class="content">
<h3>Men's stripped shirt</h3>
<div class="ratings"> <span class="fa fa-star"></span><span class="fa fa-star"></span><span class="fa fa-star"></span><span class="fa fa-star"></span><span class="fa fa-star-o"></span> </div>
<div class="price"><span class="current">$68.00</span></div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>ABOUT US (FootPaneD)
Code:
html
<div class="animation scaleUp"> <p><img alt="" src="http://demo8.dnngo.net/portals/13/Home05-Images/home05-logo.png" /></p> <p>Luauris viverra, dui at cursus suscipit, lectus odio hendrerit ante, nec iaculis felis nulla quis tellus male suada posuere quis id risus ulla vitae ipsum ac est sagittis luctus.</p><p>Aliquam eu aliquam nisi. Suspendisse suscipit libero vitae scelerisque molestie. ”</p><p><a href="http://store.dnnsoftware.com/home/product-details/PackageID/36589/r/cd57d7207c9d4266bc34">LEARN MORE</a></p> </div>CATEGORIES (FootPaneE)
Code:
html
<ul class="home05-list02 animation scaleUp">
<li><span class="fa fa-file-text-o"></span><a href="#">Modules Development</a></li>
<li><span class="fa fa-file-text-o"></span><a href="#">Create DNN Website</a></li>
<li><span class="fa fa-file-text-o"></span><a href="#">Browsers Compatiblity</a></li>
<li><span class="fa fa-file-text-o"></span><a href="#">Go to DNN Store</a></li>
<li><span class="fa fa-file-text-o"></span><a href="#">Call support service</a></li>
</ul>TAGS (FootPaneF)
Code:
html
<div class="home05-taglist animation scaleUp"> <a href="https://www.dnngo.net">DNNGo</a> <a href="https://www.dnngo.net">HTML5</a> <a href="https://www.dnngo.net">CSS3</a> <a href="https://www.dnngo.net">Skin Pack</a> <a href="https://www.dnngo.net">Catalook</a> <a href="https://www.dnngo.net">Blog</a> <a href="https://www.dnngo.net">Features</a> <a href="https://www.dnngo.net">Gallery Sliders</a> <a href="https://www.dnngo.net">Photos</a> <a href="https://www.dnngo.net">News</a> <a href="https://www.dnngo.net">Form</a> <a href="https://www.dnngo.net">Short Code</a> <a href="https://www.dnngo.net">Mobilesite</a> </div>CONTACT (FootPaneG)
Code:
html
<div class="animation scaleUp">
<p>Vestibulum hendrerit risus non libero sollicitudin fermentum, massa nulla facilisis felis, in vehicula dui enim nec tortor. </p>
<br />
<p>Address : XingAn Street No.287</p>
<p>Phone : (+086)-123-456-78910</p>
<p>Email : [email protected]</p>
<p>Skype : dnngo-linda</p>
<p>Website : www.dnngo.net</p>
</div>App Site | Recent Post | Comments (FooterPane)
Code:
html
<a href="#">App Site</a> | <a href="#">Recent Post</a> | <a href="#">Comments</a>