Home Version 12 Page Code
Click to preview the Home Version 12 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.
CONSULT ONLINE (TopPane)
Code:
html
<div class="row animation pb-30">
<div class="col-md-3 col-sm-6 animation_item scaleUp delay1">
<div class="home12-ibox">
<div class="ico"><span class="fa fa-fire"></span></div>
<h5>CONSULT ONLINE</h5>
<p>Lorem ipsum dolor sit amet, conse ctetuer adipiscing elit.</p>
<p>
<a href="https://www.dnngo.net/DNNStore/tabid/58/ProductID/1647/Default.aspx">READ MORE ></a>
</p>
</div>
<div class="visible-sm visible-xs pb-60"></div>
</div>
<div class="col-md-3 col-sm-6 animation_item scaleUp delay2">
<div class="home12-ibox">
<div class="ico"><span class="fa fa-clock-o"></span></div>
<h5>CLEAN DESIGN</h5>
<p>Lorem ipsum dolor sit amet, conse ctetuer adipiscing elit.</p>
<p>
<a href="http://store.dnnsoftware.com/home/product-details/PackageID/36589/r/cd57d7207c9d4266bc34">READ MORE ></a>
</p>
</div>
<div class="visible-sm visible-xs pb-60"></div>
</div>
<div class="clearfix visible-sm"></div>
<div class="col-md-3 col-sm-6 animation_item scaleUp delay3">
<div class="home12-ibox">
<div class="ico"><span class="fa fa-flag"></span></div>
<h5>CUSTOMIZE WEB </h5>
<p>Lorem ipsum dolor sit amet, conse ctetuer adipiscing elit.</p>
<p>
<a href="https://www.dnngo.net/DNNStore/tabid/58/ProductID/1647/Default.aspx">READ MORE ></a>
</p>
</div>
<div class="visible-xs pb-60"></div>
</div>
<div class="col-md-3 col-sm-6 animation_item scaleUp delay4">
<div class="home12-ibox">
<div class="ico"><span class="fa fa-leaf"></span></div>
<h5>FILE ADOPTED</h5>
<p>Lorem ipsum dolor sit amet, conse ctetuer adipiscing elit.</p>
<p>
<a href="http://store.dnnsoftware.com/home/product-details/PackageID/36589/r/cd57d7207c9d4266bc34">READ MORE ></a>
</p>
</div>
</div>
</div>THE MOST POPULAR WORKS (Full_Screen_PaneB · 1)
Code:
html
<div class="home12-bg pt-60 pb-60 "><div class="pt-20"></div> <h3 class="home12-title animation scaleUp" style="margin-top:0;">THE MOST POPULAR WORKS</h3> <div class="home12-line"></div> <p class="animation scaleUp">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, eius perferendis temporibus sequi magni<br />odit repellat iure accusamus minima fugiat. </p> <div class="carousel home12-carousel mt-30 animation scaleUp" data-pagination="false"> <div class="item"> <div class="photo_box img_zoom ico_zoom"> <a href="#"> <div class="pic_box"> <img alt="" src="http://demo8.dnngo.net/portals/13/Home12-Images/home12-pic01.jpg" /> <div class="content"> <div class="vertical_center_1"> <div class="vertical_center_2"> <div class="ico"><span class="fa fa-search"></span></div> <h3>IMAGE TITLE</h3> <p>Photos,Design</p> </div> </div> </div> <div class="shade"></div> </div> </a> </div> </div> <div class="item"> <div class="photo_box img_zoom ico_zoom"> <a href="#"> <div class="pic_box"> <img alt="" src="http://demo8.dnngo.net/portals/13/Home12-Images/home12-pic02.jpg" /> <div class="content"> <div class="vertical_center_1"> <div class="vertical_center_2"> <div class="ico"><span class="fa fa-search"></span></div> <h3>IMAGE TITLE</h3> <p>Photos,Design</p> </div> </div> </div> <div class="shade"></div> </div> </a> </div> </div> <div class="item"> <div class="photo_box img_zoom ico_zoom"> <a href="#"> <div class="pic_box"> <img alt="" src="http://demo8.dnngo.net/portals/13/Home12-Images/home12-pic03.jpg" /> <div class="content"> <div class="vertical_center_1"> <div class="vertical_center_2"> <div class="ico"><span class="fa fa-search"></span></div> <h3>IMAGE TITLE</h3> <p>Photos,Design</p> </div> </div> </div> <div class="shade"></div> </div> </a> </div> </div> <div class="item"> <div class="photo_box img_zoom ico_zoom"> <a href="#"> <div class="pic_box"> <img alt="" src="http://demo8.dnngo.net/portals/13/Home12-Images/home12-pic04.jpg" /> <div class="content"> <div class="vertical_center_1"> <div class="vertical_center_2"> <div class="ico"><span class="fa fa-search"></span></div> <h3>IMAGE TITLE</h3> <p>Photos,Design</p> </div> </div> </div> <div class="shade"></div> </div> </a> </div> </div> <div class="item"> <div class="photo_box img_zoom ico_zoom"> <a href="#"> <div class="pic_box"> <img alt="" src="http://demo8.dnngo.net/portals/13/Home12-Images/home12-pic01.jpg" /> <div class="content"> <div class="vertical_center_1"> <div class="vertical_center_2"> <div class="ico"><span class="fa fa-search"></span></div> <h3>IMAGE TITLE</h3> <p>Photos,Design</p> </div> </div> </div> <div class="shade"></div> </div> </a> </div> </div> <div class="item"> <div class="photo_box img_zoom ico_zoom"> <a href="#"> <div class="pic_box"> <img alt="" src="http://demo8.dnngo.net/portals/13/Home12-Images/home12-pic02.jpg" /> <div class="content"> <div class="vertical_center_1"> <div class="vertical_center_2"> <div class="ico"><span class="fa fa-search"></span></div> <h3>IMAGE TITLE</h3> <p>Photos,Design</p> </div> </div> </div> <div class="shade"></div> </div> </a> </div> </div> <div class="item"> <div class="photo_box img_zoom ico_zoom"> <a href="#"> <div class="pic_box"> <img alt="" src="http://demo8.dnngo.net/portals/13/Home12-Images/home12-pic03.jpg" /> <div class="content"> <div class="vertical_center_1"> <div class="vertical_center_2"> <div class="ico"><span class="fa fa-search"></span></div> <h3>IMAGE TITLE</h3> <p>Photos,Design</p> </div> </div> </div> <div class="shade"></div> </div> </a> </div> </div> <div class="item"> <div class="photo_box img_zoom ico_zoom"> <a href="#"> <div class="pic_box"> <img alt="" src="http://demo8.dnngo.net/portals/13/Home12-Images/home12-pic04.jpg" /> <div class="content"> <div class="vertical_center_1"> <div class="vertical_center_2"> <div class="ico"><span class="fa fa-search"></span></div> <h3>IMAGE TITLE</h3> <p>Photos,Design</p> </div> </div> </div> <div class="shade"></div> </div> </a> </div> </div> </div> <div class="pt-20"></div></div>DNN SKIN AND MODULE CUSTOMIZATION (Full_Screen_PaneB · 2)
Code:
html
<div class="container pt-60"> <div class="row"> <div class="col-sm-4 animation fadeInLeft" style="text-align: center;"><img alt="" class="img-responsive" src="http://demo8.dnngo.net/portals/13/Home12-Images/home12-pic05.png" /></div> <div class="col-sm-8 animation fadeInRight"> <div class="home12-title02 pt-20"> <h3>DNN SKIN AND MODULE CUSTOMIZATION</h3> <h6>Am aliquet rutrum eros eu mattis. </h6> </div> <p class="pb-10">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, eius perferendis temporibus sequi magni odit repellat iure accusamus minima fugiat.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit ametLorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae.</p> <p class="pb-10">Eius perferendis temporibus sequi magni odit repellat iure accusamus minima fugiat.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet .Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, eius perferendis temporibus sequi magni odit repellat iure accusamus minima fugiat. Am aliquet rutrum eros eu mattis.</p> <a class="home12-btn" href="http://store.dnnsoftware.com/home/product-details/PackageID/36589/r/cd57d7207c9d4266bc34">READ MORE</a><div class="visible-lg pb-30"></div> </div> </div> </div>WHAT OUR CLIENTS SAY (Full_Screen_PaneC · 1)
Code:
html
<div class="home12-bg02 pt-60 pb-60">
<div class="container pt-10 pb-20">
<h2 class="home12-title03 animation scaleUp">WHAT OUR CLIENTS SAY</h2>
<div class="home12-line02 mb-40 animation scaleUp"></div>
<div class="pb-20"></div>
<ul data-display-navigation="false" data-autoplay="0" data-position="fade" class=" Testimonials_tab home12-Testimonials animation scaleUp">
<li>
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, eius perferendis temporibus sequi magni odit repellat iure accusamus minima fugiat.Lorem ipsum dolor sit amet eius perferendis temporibus sequi magni .</p> <small>John Smith,<span>The CEO of the company,2008</span> </small> </blockquote>
</li>
<li>
<blockquote>
<p>Develop strong and flexible solutions that are fitted to the needs of our customers. </p> <small>John Smith,<span>The CEO of the company,2008</span></small> </blockquote>
</li>
<li>
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, eius perferendis temporibus sequi magni odit repellat iure accusamus minima fugiat.Lorem ipsum dolor sit amet eius perferendis temporibus sequi magni .</p> <small>John Smith,<span>The CEO of the company,2008</span></small> </blockquote>
</li>
<li>
<blockquote>
<p>Donec in ut odio libero, at vulputate urna. Nulla tristique mi a massa convallis cursus. Nulla eu mi magna.</p> <small>John Smith,<span>The CEO of the company,2008</span></small> </blockquote>
</li>
</ul>
</div>
</div>SEE ALL CUSTOMER REVIEWS > (Full_Screen_PaneC · 2)
Code:
html
<div class="home12-bg03 pt-30 pb-30"> <div class="container"> <p style="margin-bottom:0;"> <span class="big_size animation scaleUp"><a href="#">SEE ALL CUSTOMER REVIEWS ></a></span></p> </div> </div>WHY CHOOSE US? (Full_Screen_PaneC · 3)
Code:
html
<div class="container pt-60">
<div class="clearfix animation scaleUp" style="text-align: center;"> <img alt="" class="img-responsive" src="http://demo8.dnngo.net/portals/13/Home12-Images/home12-pic06.png" style="text-align: center;" /> </div>
</div>
<div class="home12-bg04 pt-60 pb-40">
<div class="container pt-10">
<h3 class="home12-title03 animation scaleUp">WHY CHOOSE US?</h3>
<div class="home12-line02 animation scaleUp"></div>
<div class="row animation">
<div class="col-sm-4 animation_item scaleUp delay1">
<div class="home12-ibox02">
<div class="ico"><span class="fa fa-headphones"></span></div> Am aliquet rutrum eros eu mattis. Morbi tempus dapibus mattis. Aliquam arcu erat, pharetra vitae consectetur eu. </div>
</div>
<div class="col-sm-4 animation_item scaleUp delay2">
<div class="home12-ibox02">
<div class="ico"><span class="fa fa-edit"></span></div> Am aliquet rutrum eros eu mattis. Morbi tempus dapibus mattis. Aliquam arcu erat, pharetra vitae consectetur eu.</div>
</div>
<div class="col-sm-4 animation_item scaleUp delay3">
<div class="home12-ibox02">
<div class="ico"><span class="fa fa-globe"></span></div> Am aliquet rutrum eros eu mattis. Morbi tempus dapibus mattis. Aliquam arcu erat, pharetra vitae consectetur eu.</div>
</div>
</div>
<div class="row animation">
<div class="col-sm-4 animation_item scaleUp delay1">
<div class="home12-ibox02">
<div class="ico"><span class="fa fa-check"></span></div> Am aliquet rutrum eros eu mattis. Morbi tempus dapibus mattis. Aliquam arcu erat, pharetra vitae consectetur eu. </div>
</div>
<div class="col-sm-4 animation_item scaleUp delay2">
<div class="home12-ibox02">
<div class="ico"><span class="fa fa-shopping-cart"></span></div> Am aliquet rutrum eros eu mattis. Morbi tempus dapibus mattis. Aliquam arcu erat, pharetra vitae consectetur eu.</div>
</div>
<div class="col-sm-4 animation_item scaleUp delay3">
<div class="home12-ibox02">
<div class="ico"><span class="fa fa-fire"></span></div> Am aliquet rutrum eros eu mattis. Morbi tempus dapibus mattis. Aliquam arcu erat, pharetra vitae consectetur eu.</div>
</div>
</div>
</div>
</div>Content Section (ContentPane · 1)
Code:
html
OUR CLIENTS (ContentPane · 2)
Code:
html
<div class="pb-40 animation scaleUp" style="text-align: center;"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, eius perferendis temporibus sequi magni odit<br />repellat iure accusamus minima fugiat. </div> <div data-pagination="false" class="carousel home12-carousel02 animation scaleUp"> <div class="item"><a href="#"><img alt="" src="http://demo8.dnngo.net/portals/13/Home12-Images/home12-logo01.png" /></a></div> <div class="item"><a href="#"><img alt="" src="http://demo8.dnngo.net/portals/13/Home12-Images/home12-logo02.png" /></a></div> <div class="item"><a href="#"><img alt="" src="http://demo8.dnngo.net/portals/13/Home12-Images/home12-logo03.png" /></a></div> <div class="item"><a href="#"><img alt="" src="http://demo8.dnngo.net/portals/13/Home12-Images/home12-logo04.png" /></a></div> <div class="item"><a href="#"><img alt="" src="http://demo8.dnngo.net/portals/13/Home12-Images/home12-logo05.png" /></a></div> <div class="item"><a href="#"><img alt="" src="http://demo8.dnngo.net/portals/13/Home12-Images/home12-logo01.png" /></a></div> <div class="item"><a href="#"><img alt="" src="http://demo8.dnngo.net/portals/13/Home12-Images/home12-logo02.png" /></a></div> <div class="item"><a href="#"><img alt="" src="http://demo8.dnngo.net/portals/13/Home12-Images/home12-logo03.png" /></a></div> <div class="item"><a href="#"><img alt="" src="http://demo8.dnngo.net/portals/13/Home12-Images/home12-logo04.png" /></a></div> <div class="item"><a href="#"><img alt="" src="http://demo8.dnngo.net/portals/13/Home12-Images/home12-logo05.png" /></a></div> </div><div class="pb-20"></div>CONTACT US (Full_Screen_PaneE · 1)
Code:
html
<div class="home12-bg05 pt-60 pb-60">
<div class="container pt-10">
<h3 class="home12-title03 animation scaleUp">CONTACT US</h3>
<div class="home12-line02"></div><br />
<div class="row animation">
<div class="col-md-3 col-sm-6 animation_item scaleUp delay1">
<div class="home12-info"> <span class="fa fa-map-marker"></span>
<p>usto duo dolores et ea sum no.12345 nvallis egestas rhoncus</p>
</div>
<div class="visible-sm visible-xs pb-40"></div>
</div>
<div class="col-md-3 col-sm-6 animation_item scaleUp delay2">
<div class="home12-info"> <span class="fa fa-mobile-phone"></span>
<p>Phone: +(123)-456-789 </p>
</div>
<div class="visible-sm visible-xs pb-40"></div>
</div>
<div class="clearfix visible-sm"></div>
<div class="col-md-3 col-sm-6 animation_item scaleUp delay3">
<div class="home12-info"> <span class="fa fa-fax"></span>
<p>Fax: +(123)-86-456-789 </p>
</div>
<div class="visible-xs pb-40"></div>
</div>
<div class="col-md-3 col-sm-6 animation_item scaleUp delay4">
<div class="home12-info"> <span class="fa fa-envelope"></span>
<p>Email: [email protected] </p>
</div>
</div>
</div>
</div>
</div>CLICK HERE TO VIEW ON OUR MAP > (Full_Screen_PaneE · 2)
Code:
html
<div class="home12-bg06 pt-30 pb-30"> <div class="map_toggle"> <p style="text-align: center;margin-bottom:0;"> <span class="big_size animation scaleUp"><a style="color: #393939;" href="#">CLICK HERE TO VIEW ON OUR MAP ></a></span> </p> </div> </div><div class="pb-30"></div>ABOUT US (RowSeventeen_Grid6_Pane1)
Code:
html
<div class="animation fadeInLeft"> <p class="pb-20">Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. </p> <p class="pb-20">Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. </p> <ul class="home12-list"> <li>CSS3 Animations</li> <li>Unlimited-color Skin</li> <li>Customize Skin & Module</li> <li>Create Website</li> <li>Create Skin Design</li> <li>Boxed & Wide Layout</li> </ul> <p class="pb-20">Dapibus mattis. Aliquam arcu erat, pharetra vitae consectetur eu, pellentesque eget ipsum Aliqu.am. Etiam aliquet massa et lorem. </p> <p> <a href="http://store.dnnsoftware.com/home/product-details/PackageID/36589/r/cd57d7207c9d4266bc34" class="big_size">Read More</a> </p> </div>EMAIL US (RowSeventeen_Grid6_Pane2)
This section uses the DNNGo PowerForms module — see PowerForms.
Craft Web solutions for your online business. Our (FootPaneH)
Code:
html
<div class="animation scaleUp"> <p style="text-align: center;"><img alt="" src="http://demo8.dnngo.net/portals/13/Home12-Images/home12-logo07.png" /> </p><br /><p style="text-align: center;">Craft Web solutions for your online business. Our skins and modules<br />can apply to your corporation economy.</p><br /></div>App Site | Recent Post | Comments (FooterPane)
Code:
html
<a href="#">App Site</a> | <a href="#">Recent Post</a> | <a href="#">Comments</a>