Home Version 40 Page Code
Click to preview the Home Version 40 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.
WELCOME TO OUR WEBSITE (Full_Screen_PaneA · 1)
Code:
html
<div class="dnn_layout"> <div class="content_mid clearfix"> <div class="home40-title_style mb-40 animation fadeInUp"> <div data-title="WELCOME TO OUR WEBSITE" class="anchorTag" data-offset="-60" data-scrollshownav="true" data-menuanchor="true"> </div> <h2>WELCOME TO OUR WEBSITE</h2> <p>The Best Selling DNN themes in 2016 on DNN Store.</p> </div> <div class="row home40-tablet_pos"> <div class="col-sm-6 col-sm-push-6 animation fadeInRight"> <div class="home40-welcome mt-10"> <div class="welcome_title"> <h3>WHAT WE DO</h3> <p>Here is sub title / You can change it super easy</p> </div> <p class="pt-20 pb-20" style="margin-bottom: 0;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo. Proin sodales pulvinar tempor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. </p> <ul> <li>Sed ut perspiciatis unde omnis iste natus error sit voluptatem</li> <li>Accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae</li> <li>Ibillo inventore veritatis et quasi architecto</li> <li>Dolor sit amet, consectetur, adipisci velit, sed quia non numquam</li> </ul> <a class="mt-20 mb-40" href="#" target="blank">More Information ></a></div> </div> <div class="col-sm-6 col-sm-pull-6 home40-tablet_abs animation fadeInLeft"> <img alt="" class="img-responsive" src="http://demo8.dnngo.net/Portals/13/Home40-Images/home40-img01.png" /> </div> </div> </div> </div>OUR SERVICE (Full_Screen_PaneA · 2)
Code:
html
<div class="anchorTag" data-menuanchor="true" data-offset="-20" data-title="OUR SERVICE"></div> <div class="home40-background01"> <div class="dnn_layout pt-40 pb-40 animation fadeInRight"> <div class="content_mid clearfix"> <div class="home40-service"> <h2>OUR SERVICE</h2> <p>Lorem ipsum dolor sit amet, consec</p> </div> </div> </div> </div>WEB DESIGN (Full_Screen_PaneA · 3)
Code:
html
<div class="home40-ServeList animation ">
<ul class="row">
<li class="animation_item fadeIn ">
<div class="ico"><img src="http://demo8.dnngo.net/Portals/13/Home40-Images/home40-img02.png" alt=""></div>
<h4>WEB DESIGN</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo. Proin sodales pulvinar tempor.</p>
<a href="#" class="btn">VIEW MORE ></a> </li>
<li class="animation_item fadeIn delay1">
<div class="ico"><img src="http://demo8.dnngo.net/Portals/13/Home40-Images/home40-img03.png" alt=""></div>
<h4>ADVERTISING</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo. Proin sodales pulvinar tempor.</p>
<a href="#" class="btn">VIEW MORE ></a> </li>
<li class="animation_item fadeIn delay2">
<div class="ico"><img src="http://demo8.dnngo.net/Portals/13/Home40-Images/home40-img04.png" alt=""></div>
<h4>VIDEO</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo. Proin sodales pulvinar tempor.</p>
<a href="#" class="btn">VIEW MORE ></a> </li>
<li class="animation_item fadeIn delay3">
<div class="ico"><img src="http://demo8.dnngo.net/Portals/13/Home40-Images/home40-img05.png" alt=""></div>
<h4>SOUND</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo. Proin sodales pulvinar tempor.</p>
<a href="#" class="btn">VIEW MORE ></a> </li>
</ul>
<ul class="row">
<li class="animation_item fadeIn delay4">
<div class="ico"><img src="http://demo8.dnngo.net/Portals/13/Home40-Images/home40-img06.png" alt=""></div>
<h4>PHOTOGRAPHY</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo. Proin sodales pulvinar tempor.</p>
<a href="#" class="btn">VIEW MORE ></a> </li>
<li class="animation_item fadeIn delay5">
<div class="ico"><img src="http://demo8.dnngo.net/Portals/13/Home40-Images/home40-img07.png" alt=""></div>
<h4>PRINT DESIGN</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo. Proin sodales pulvinar tempor.</p>
<a href="#" class="btn">VIEW MORE ></a> </li>
<li class="animation_item fadeIn delay6">
<div class="ico"><img src="http://demo8.dnngo.net/Portals/13/Home40-Images/home40-img08.png" alt=""></div>
<h4>CONSULT ONLINE </h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo. Proin sodales pulvinar tempor.</p>
<a href="#" class="btn">VIEW MORE ></a> </li>
<li class="animation_item fadeIn delay7">
<div class="ico"><img src="http://demo8.dnngo.net/Portals/13/Home40-Images/home40-img09.png" alt=""></div>
<h4>CLEAN DESIGN</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo. Proin sodales pulvinar tempor.</p>
<a href="#" class="btn">VIEW MORE ></a> </li>
</ul>
</div>THE POPULAR PRODUCTS (Full_Screen_PaneB)
Code:
html
<div class="home40-title_style mb-30 animation fadeInUp animated pt-30"> <div data-title="THE POPULAR PRODUCTS" class="anchorTag" data-offset="-60" data-menuanchor="true"> </div> <h2>THE POPULAR PRODUCTS</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p> </div> <div class="isotope_grid home40-isotope_grid animation fadeInUp"> <div class="isotope_main" data-min-width="389"> <div class="isotope_item"><a href="#"> <div class="photo_box icon_tag_push img_zoom"> <div class="pic_box"> <img alt="" src="http://demo8.dnngo.net/Portals/13/Home40-Images/home40-img10.jpg" /></div> <div class="ico_t"><span class="ico_b"></span></div> </div> </a> </div> <div class="isotope_item" data-zoom="2"><a href="#"> <div class="photo_box icon_tag_push img_zoom"> <div class="pic_box"><img alt="" src="http://demo8.dnngo.net/Portals/13/Home40-Images/home40-img12.jpg" /></div> <div class="ico_t"><span class="ico_b"></span></div> </div> </a> </div> <div class="isotope_item"><a href="#"> <div class="photo_box icon_tag_push img_zoom"> <div class="pic_box"> <img alt="" src="http://demo8.dnngo.net/Portals/13/Home40-Images/home40-img13.jpg" /></div> <div class="ico_t"><span class="ico_b"></span></div> </div> </a> </div> <div class="isotope_item"><a href="#"> <div class="photo_box icon_tag_push img_zoom"> <div class="pic_box"><img alt="" src="http://demo8.dnngo.net/Portals/13/Home40-Images/home40-img11.jpg" /></div> <div class="ico_t"><span class="ico_b"></span></div> </div> </a> </div> <div class="isotope_item"><a href="#"> <div class="photo_box icon_tag_push img_zoom"> <div class="pic_box"> <img alt="" src="http://demo8.dnngo.net/Portals/13/Home40-Images/home40-img14.jpg" /></div> <div class="ico_t"><span class="ico_b"></span></div> </div> </a> </div> <div class="isotope_item"><a href="#"> <div class="photo_box icon_tag_push img_zoom"> <div class="pic_box"> <img alt="" src="http://demo8.dnngo.net/Portals/13/Home40-Images/home40-img19.jpg" /></div> <div class="ico_t"><span class="ico_b"></span></div> </div> </a> </div> <div class="isotope_item"><a href="#"> <div class="photo_box icon_tag_push img_zoom"> <div class="pic_box"> <img alt="" src="http://demo8.dnngo.net/Portals/13/Home40-Images/home40-img15.jpg" /></div> <div class="ico_t"><span class="ico_b"></span></div> </div> </a> </div> <div class="isotope_item"><a href="#"> <div class="photo_box icon_tag_push img_zoom"> <div class="pic_box"> <img alt="" src="http://demo8.dnngo.net/Portals/13/Home40-Images/home40-img17.jpg" /></div> <div class="ico_t"><span class="ico_b"></span></div> </div> </a> </div> <div class="isotope_item"><a href="#"> <div class="photo_box icon_tag_push img_zoom"> <div class="pic_box"> <img alt="" src="http://demo8.dnngo.net/Portals/13/Home40-Images/home40-img20.jpg" /></div> <div class="ico_t"><span class="ico_b"></span></div> </div> </a> </div> <div class="isotope_item"><a href="#"> <div class="photo_box icon_tag_push img_zoom"> <div class="pic_box"> <img alt="" src="http://demo8.dnngo.net/Portals/13/Home40-Images/home40-img16.jpg" /></div> <div class="ico_t"><span class="ico_b"></span></div> </div> </a> </div> <div class="isotope_item"><a href="#"> <div class="photo_box icon_tag_push img_zoom"> <div class="pic_box"> <img alt="" src="http://demo8.dnngo.net/Portals/13/Home40-Images/home40-img18.jpg" /></div> <div class="ico_t"><span class="ico_b"></span></div> </div> </a> </div> </div> </div>CHECK OUR PLANS (ContentPane)
Code:
html
<div class="home40-title_style mb-30 animation fadeInUp animated pt-30"> <div class="anchorTag" data-title="CHECK OUR PLANS" data-offset="-60" data-menuanchor="true"> </div> <h2>CHECK OUR PLANS</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p> </div> <div class="price-table home40-price_table row animation fadeInUp"> <p style="text-align: center;" class="mb-40 animation fadeInUp">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet<br />lacus accumsan et viverra justo commodo.</p> <div class="col-md-3 col-sm-6"> <div class="price_title"> <h3> BASIC</h3> </div> <div class="price_holder"> <div class="price_box"><span class="sup">$</span><span class="price">10</span> <span class="unit">/month</span> </div> <ul> <li>RESPONSIVE</li> <li>BLOG</li> <li>UNLIMITED COLORS</li> <li>HOSTING</li> <li>WEBSITE LAYOUTS</li> <li>HEADER STYLE</li> <li>ONLINE STORE</li> </ul> <a class="btn">BUY NOW</a> </div> </div> <div class="col-md-3 col-sm-6 "> <div class="price_title "> <h3> PROFESSIONAL</h3> </div> <div class="price_holder"> <div class="price_box"><span class="sup">$</span><span class="price">20</span> <span class="unit">/month</span> </div> <ul> <li>RESPONSIVE</li> <li>BLOG</li> <li>UNLIMITED COLORS</li> <li>HOSTING</li> <li>WEBSITE LAYOUTS</li> <li>HEADER STYLE</li> <li>ONLINE STORE</li> </ul> <a href="#" class="btn">BUY NOW</a> </div> </div> <div class="col-md-3 col-sm-6 best_value"> <div class="price_title"> <h3> BUSINESS</h3> </div> <div class="price_holder"> <div class="price_box"><span class="sup">$</span><span class="price">30</span> <span class="unit">/month</span> </div> <ul> <li>RESPONSIVE</li> <li>BLOG</li> <li>UNLIMITED COLORS</li> <li>HOSTING</li> <li>WEBSITE LAYOUTS</li> <li>HEADER STYLE</li> <li>ONLINE STORE</li> </ul> <a class="btn">BUY NOW</a> </div> </div> <div class="col-md-3 col-sm-6"> <div class="price_title"> <h3>MAXIMUM</h3> </div> <div class="price_holder"> <div class="price_box"><span class="sup">$</span><span class="price">40</span> <span class="unit">/month</span> </div> <ul> <li>RESPONSIVE</li> <li>BLOG</li> <li>UNLIMITED COLORS</li> <li>HOSTING</li> <li>WEBSITE LAYOUTS</li> <li>HEADER STYLE</li> <li>ONLINE STORE</li> </ul> <a class="btn">BUY NOW</a> </div> </div> </div><div class="pb-10"></div>CHECK OUR CLIENTS (BottomOutPane · 1)
Code:
html
<div data-title="CHECK OUR CLIENTS" class="anchorTag" data-menuanchor="true"> </div> <div class="home40-background02"> <div class="dnn_layout pt-60 pb-60 animation fadeIn"> <div class="content_mid clearfix pb-20"> <div class="home40-title_style02 mb-20"> <h2>CHECK OUR CLIENTS</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p> </div> <p class="home40-smallp">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet<br />lacus accumsan et viverra justo commodo.</p> <ul class="home40-imageslist"> <li><img alt="" src="http://demo8.dnngo.net/Portals/13/Home40-Images/home40-img21.png" /></li> <li><img alt="" src="http://demo8.dnngo.net/Portals/13/Home40-Images/home40-img22.png" /></li> <li><img alt="" src="http://demo8.dnngo.net/Portals/13/Home40-Images/home40-img23.png" /></li> <li><img alt="" src="http://demo8.dnngo.net/Portals/13/Home40-Images/home40-img24.png" /></li> <li><img alt="" src="http://demo8.dnngo.net/Portals/13/Home40-Images/home40-img25.png" /></li> <li><img alt="" src="http://demo8.dnngo.net/Portals/13/Home40-Images/home40-img26.png" /></li> <li><img alt="" src="http://demo8.dnngo.net/Portals/13/Home40-Images/home40-img27.png" /></li> <li><img alt="" src="http://demo8.dnngo.net/Portals/13/Home40-Images/home40-img28.png" /></li> <li><img alt="" src="http://demo8.dnngo.net/Portals/13/Home40-Images/home40-img29.png" /></li> <li><img alt="" src="http://demo8.dnngo.net/Portals/13/Home40-Images/home40-img30.png" /></li> </ul> </div> </div> </div>CONTACT US (BottomOutPane · 2)
Code:
html
<div data-title="CONTACT US" class="anchorTag" data-menuanchor="true"> </div>
<div class="home40-contact">
<div class="dnn_layout">
<div class="content_mid clearfix">
<div id="gmap01" class="left animation fadeInLeft"> </div>
<div class="right pt-60 pb-60 animation fadeInRight">
<div class="pt-10"></div>
<div class="home40-title_style home40-textleft mb-20">
<h2>CONTACT US</h2>
<p>Lorem ipsum dolor sit amet, consetur adicng elit</p>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo. Proin sodales pulvinar tempor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
<div class="mt-30 mb-30">
<ul class="contact_info ">
<li> <span class="fa fa-map-marker"></span> <span>ADDRESS:</span>
<p>usto duo dolores et ea sum dolor sit amet, consectetur <br>no.12345 nvallis egestas rhoncus</p>
</li>
<li> <span class="fa fa-mobile-phone"></span> <span>PHONE : </span>
<p>+(123)-456-789</p>
</li>
<li> <span class="fa fa-envelope"></span> <span>EMAIL : </span>
<p>[email protected]</p>
</li>
</ul>
</div>
<div class="icons_link clearfix">
<a href="#"><span class="fa fa-facebook"></span></a>
<a href="#"><span class="fa fa-dribbble"></span></a>
<a href="#"><span class="fa fa-twitter"></span></a>
<a href="#"><span class="fa fa-google-plus"></span></a>
<a href="#"><span class="fa fa-share-alt"></span></a>
<a href="#"><span class="fa fa-rss"></span></a>
<a href="#"><span class="fa fa-linkedin"></span></a>
<a href="#"><span class="fa fa-pinterest-p"></span></a>
</div>
<div class="pt-10"></div>
</div>
</div>
</div>
</div>About us (FootPaneD)
Code:
html
<div class="home40-aboutus animation fadeInUp"> <p>Lorem ipsu dolor sit amet, consectetur elit. dictum felis eu pedeLorem ipsu dolor sit amet, consectetur adipisicing elit. Lorem ipsu dolor sit amet, consectetur elit. </p> <a href="#">Read More</a> </div>Our services (FootPaneE)
Code:
html
<ul class="home40-ourservice animation fadeInUp delay1">
<li><span class="fa fa-check"></span>Web design</li>
<li><span class="fa fa-check"></span>Web design</li>
<li><span class="fa fa-check"></span>Print Design</li>
<li><span class="fa fa-check"></span>Print Design</li>
<li><span class="fa fa-check"></span>Photography</li>
<li><span class="fa fa-check"></span>Photography</li>
<li><span class="fa fa-check"></span>HTLM&CSS </li>
<li><span class="fa fa-check"></span>HTLM&CSS </li>
</ul>Recent Projects (FootPaneF)
Code:
html
<ul class="home40-projectlist animation fadeInUp delay2">
<li> <a href="http://demo8.dnngo.net/Portals/13/Home40-Images/home40-img31-big.jpg" class="LightBox_image_gallery01">
<span class="fa fa-search-plus"></span>
<img alt="" src="http://demo8.dnngo.net/Portals/13/Home40-Images/home40-img31.jpg" class="img-responsive" /> </a> </li>
<li> <a href="http://demo8.dnngo.net/Portals/13/Home40-Images/home40-img32-big.jpg" class="LightBox_image_gallery01">
<span class="fa fa-search-plus"></span>
<img alt="" src="http://demo8.dnngo.net/Portals/13/Home40-Images/home40-img32.jpg" class="img-responsive" /> </a> </li>
<li> <a href="http://demo8.dnngo.net/Portals/13/Home40-Images/home40-img33-big.jpg" class="LightBox_image_gallery01">
<span class="fa fa-search-plus"></span>
<img alt="" src="http://demo8.dnngo.net/Portals/13/Home40-Images/home40-img33.jpg" class="img-responsive" /> </a> </li>
<li> <a href="http://demo8.dnngo.net/Portals/13/Home40-Images/home40-img34-big.jpg" class="LightBox_image_gallery01">
<span class="fa fa-search-plus"></span>
<img alt="" src="http://demo8.dnngo.net/Portals/13/Home40-Images/home40-img34.jpg" class="img-responsive" /> </a> </li>
<li> <a href="http://demo8.dnngo.net/Portals/13/Home40-Images/home40-img35-big.jpg" class="LightBox_image_gallery01">
<span class="fa fa-search-plus"></span>
<img alt="" src="http://demo8.dnngo.net/Portals/13/Home40-Images/home40-img35.jpg" class="img-responsive" /> </a> </li>
<li> <a href="http://demo8.dnngo.net/Portals/13/Home40-Images/home40-img36-big.jpg" class="LightBox_image_gallery01">
<span class="fa fa-search-plus"></span>
<img alt="" src="http://demo8.dnngo.net/Portals/13/Home40-Images/home40-img36.jpg" class="img-responsive" /> </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>