Home Version 4 Page Code

Click to preview the Home Version 4 demo. View demo

Preview:

Email: [email protected] Monday to Friday (HeaderPane)

Code:

<span class="fa fa-envelope-o"></span> &nbsp;&nbsp;Email: [email protected] &nbsp; &nbsp; <span class="fa fa-clock-o"></span> &nbsp;&nbsp;Monday to Friday

HeaderPaneB Section (HeaderPaneB)

Code:

<div class="home04-social">
<a href="#"><span class="fa fa-facebook-square color-1"></span> </a>
<a href="#"><span class="fa fa-twitter-square color-2"></span> </a>
<a href="#"><span class="fa fa-linkedin-square color-3"></span> </a>
</div>

Banner Section (BannerPane)

This section uses the DNNGo LayerGallery Pro module.

The download package provides import data for this page (Home4-ContentListEntity.xml in the DNNGo_LayerGalleryPro Module folder). Import it via Manager → Import & Export to recreate the demo banner — see LayerGallery Pro.

WHAT WE DO (TopPane)

Code:

<div class="animation">
<div class="home04-text pb-40 animation scaleUp delay1">Fusce ac dui eu odio molestie cursus in vitae nisl atury unc at viverra nisl, eu blandit massa uspendisse est augue, sceleri sque ac interdu.</div>

<div class="pt-20 pt-20">
<div class="row">
<div class="col-md-3 col-sm-6 animation scaleUp delay2">
<div class="home04-ibox">
<div class="ico"><span class="fa fa-flask"></span></div>

<h5>Unlimited Colors</h5>

<p>Sed rhoncus neque sed adipiscing bibendum. Ut euismod et metus non pulvinar. Curabitur rutrum et lectus egestas sollicitudin.</p>
</div>
</div>

<div class="col-md-3 col-sm-6 animation scaleUp delay3">
<div class="home04-ibox">
<div class="ico"><span class="fa fa-gift"></span></div>

<h5>Free Download</h5>

<p>Sed rhoncus neque sed adipiscing bibendum. Ut euismod et metus non pulvinar. Curabitur rutrum et lectus egestas sollicitudin.</p>
</div>
</div>

<div class="clearfix visible-sm">&nbsp;</div>

<div class="col-md-3 col-sm-6 animation scaleUp delay4">
<div class="home04-ibox">
<div class="ico"><span class="fa fa-desktop"></span></div>

<h5>Retina Ready</h5>

<p>Sed rhoncus neque sed adipiscing bibendum. Ut euismod et metus non pulvinar. Curabitur rutrum et lectus egestas sollicitudin.</p>
</div>
</div>

<div class="col-md-3 col-sm-6 animation scaleUp delay5">
<div class="home04-ibox">
<div class="ico"><span class="fa fa-calendar-o"></span></div>

<h5>Effective Work</h5>

<p>Sed rhoncus neque sed adipiscing bibendum. Ut euismod et metus non pulvinar. Curabitur rutrum et lectus egestas sollicitudin.</p>
</div>
</div>
</div>
</div>

<p class="pt-40 animation scaleUp delay6" style="text-align: center;"><img alt="" class="img-responsive" src="http://demo8.dnngo.net/portals/13/Home04-Images/home04-img01.png" style="text-align: center;" /></p>
</div>

OUR SERVICES (Full_Screen_PaneB)

Code:

<div class="home04-bg pt-60"> <div class="container "> <div class="clearfix "> <div class="row "> <div class="col-md-6 left_bg ">&nbsp; <div 0="" class="img_bg" home04-images="" home04-img02.jpg="" portals="" style="background-image:url('http://demo8.dnngo.net/portals/13/Home04-Images/home04-img02.jpg')">&nbsp;</div> </div> <div class="col-md-6 right_bg pb-60"> <div class="home04-pl animation pt-30 pb-30"> <h3 class="home04-title animation_item fadeInRight delay1">OUR SERVICES</h3> <p class="pb-20 animation_item fadeInRight delay2">Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore.</p> <ul class="home04-list animation_item fadeInRight delay3"> <li><span class="fa fa-folder-o"></span><a href="https://www.dnngo.net">DNN Design &amp; Skin</a></li> <li><span class="fa fa-folder-o"></span><a href="https://www.dnngo.net">CSS3 animations</a></li> <li><span class="fa fa-folder-o"></span><a href="https://www.dnngo.net/DNNStore.aspx">Module Development</a></li> <li><span class="fa fa-folder-o"></span><a href="https://www.dnngo.net">Ultra Responsive design</a></li> <li><span class="fa fa-folder-o"></span><a href="https://www.dnngo.net">Unlimited-color Skin</a></li> <li><span class="fa fa-folder-o"></span><a href="https://www.dnngo.net">DNN6 &amp; DNN7</a></li> <li><span class="fa fa-folder-o"></span><a href="https://www.dnngo.net">Create Website</a></li> <li><span class="fa fa-folder-o"></span><a href="https://www.dnngo.net">Boxed &amp; Wide Layout</a></li> </ul> <p class="pt-30 animation_item fadeInRight delay4" style="margin:0;"><a class="home04-btn" href="#">VIEW DEMO</a> <a class="home04-btn" href="http://store.dnnsoftware.com/home/product-details/PackageID/36589/r/cd57d7207c9d4266bc34">BUY NOW</a></p> </div> </div> </div> </div> </div> </div>

Content Section (ContentPane · 1)

Code:

RECENT WORKS (ContentPane · 2)

Code:

<p class="home04-text animation scaleUp">Fusce ac dui eu odio molestie cursus in vitae nisl atury unc at viverra nisl, eu blandit massa uspendisse est augue, sceleri sque ac interdu.</p> <div class="isotope_grid home04-isotope animation scaleUp"> <div class="loading animation scaleUp"> <div class="loading-container container1"> <div class="circle1">&nbsp;</div> <div class="circle2">&nbsp;</div> <div class="circle3">&nbsp;</div> <div class="circle4">&nbsp;</div> </div> <div class="loading-container container2"> <div class="circle1">&nbsp;</div> <div class="circle2">&nbsp;</div> <div class="circle3">&nbsp;</div> <div class="circle4">&nbsp;</div> </div> <div class="loading-container container3"> <div class="circle1">&nbsp;</div> <div class="circle2">&nbsp;</div> <div class="circle3">&nbsp;</div> <div class="circle4">&nbsp;</div> </div> </div> <div class="isotope_main animation" data-min-width="230"> <div class="isotope_item"> <div class="photo"><a href="#"><img alt="" src="http://demo8.dnngo.net/portals/13/Home04-Images/home04-img06.jpg" /> <span class="fa fa-heart"></span> </a></div> </div> <div class="isotope_item" data-zoom="2"> <div class="photo"><a href="#"><img alt="" src="http://demo8.dnngo.net/portals/13/Home04-Images/home04-img07.jpg" /> <span class="fa fa-heart"></span> </a></div> </div> <div class="isotope_item" data-zoom="2"> <div class="photo"><a href="#"><img alt="" src="http://demo8.dnngo.net/portals/13/Home04-Images/home04-img08.jpg" /> <span class="fa fa-heart"></span> </a></div> </div> <div class="isotope_item" data-zoom="2"> <div class="photo"><a href="#"><img alt="" src="http://demo8.dnngo.net/portals/13/Home04-Images/home04-img09.jpg" /> <span class="fa fa-heart"></span> </a></div> </div> <div class="isotope_item"> <div class="photo"><a href="#"><img alt="" src="http://demo8.dnngo.net/portals/13/Home04-Images/home04-img10.jpg" /> <span class="fa fa-heart"></span> </a></div> </div> </div> </div> <p class="pt-60 pb-30" style="text-align: center;margin:0;"><a class="home04-btn02" href="#" style="margin:0;">LOAD ALL WORKS</a></p>

HOW WE WORK (Full_Screen_PaneE · 1)

Code:

<div class="home04-bg02 pt-60 pb-60"> <div class="container pb-40 pt-20 animation"> <h3 class="home04-title02 animation scaleUp delay1">HOW WE WORK</h3> <p class="pt-20 pb-60 home04-text animation scaleUp delay2">Fusce ac dui eu odio molestie cursus in vitae nisl atury unc at viverra nisl, eu blandit massa uspendisse est augue, sceleri sque ac interdu.</p> <div class="row"> <div class="col-md-3 col-sm-6 animation fadeInRight delay3"> <div class="home04-ibox02 mt"> <span class="number">1</span> <span class="fa fa-bolt"></span> Demand<br />Analysis </div> </div> <div class="col-md-3 col-sm-6 animation fadeInRight delay4"> <div class="home04-ibox02"> <span class="number">2</span> <span class="fa fa-leaf"></span> Web<br />Design </div> </div> <div class="clearfix visible-sm"></div> <div class="col-md-3 col-sm-6 animation fadeInRight delay5"> <div class="home04-ibox02 mt"> <span class="number">3</span> <span class="fa fa-edit"></span> Develop<br />Skin </div> </div> <div class="col-md-3 col-sm-6 animation fadeInRight delay6"> <div class="home04-ibox02"> <span class="number">4</span> <span class="fa fa-key"></span> Complete<br />Submission </div> </div> </div> </div> </div>

HOW WE WORK (Full_Screen_PaneE · 2)

Code:

<div class="home04-bg03 pt-60 pb-60 color-white "> <div class="container pb-10 pt-20 animation"> <h3 class="home04-title03 animation_item scaleUp delay1">HOW WE WORK</h3> <p class="pt-20 pb-60 home04-text animation_item scaleUp delay2">Fusce ac dui eu odio molestie cursus in vitae nisl atury unc at viverra nisl, eu blandit massa uspendisse est augue, sceleri sque ac interdu.</p> <div class="row"> <div class="col-md-6"> <ul class="home04-ibox03"> <li class="animation_item scaleUp delay3"><span class="fa fa-flask"></span> <h3>Unlimited Colors</h3> <p>Quisque tortor odio, feugiat vitae velit at, feugiat euismod nunc. Morbi lectus neque, mollis quis tellus eget, placerat viverra enim. Sed rhoncus neque sed adipiscing bibendum. Ut euismod et metus.</p> </li> <li class="animation_item scaleUp delay4"><span class="fa fa-desktop"></span> <h3>Retina Ready</h3> <p>Quisque tortor odio, feugiat vitae velit at, feugiat euismod nunc. Morbi lectus neque, mollis quis tellus eget, placerat viverra enim. Sed rhoncus neque sed adipiscing bibendum. Ut euismod et metus.</p> </li> </ul> </div> <div class="col-md-6 animation_item scaleUp delay5"><img alt="" class="img-responsive" src="http://demo8.dnngo.net/portals/13/Home04-Images/home04-img03.png" /></div> </div> </div> </div>

BottomPane Section (BottomPane · 1)

Code:

TESTIMONIALS & CLIENTS (BottomPane · 2)

Code:

<ul class="Testimonials_tab home4-testimonials animation scaleUp" data-autoplay="8000" data-display-navigation="false" data-position="fade">
 <li><span class="pic"><img alt="" src="http://demo8.dnngo.net/portals/13/Home04-Images/home04-portrait01.jpg" /></span>
 <blockquote>
 <p>&ldquo; Quisque tortor odio, feugiat vitae velit at, feugiat euismod nunc. Morbi lectus neque, mollis quis tellus eget, placerat viverra enim. Sed rhoncus neque sed adipiscing bibendum. Ut euismod et metus non pulvinar. &rdquo;</p>
 <small>Frank Miller<span>The DNNGo buyer</span></small></blockquote>
 </li>
 <li><span class="pic"><img alt="" src="http://demo8.dnngo.net/portals/13/Home04-Images/home04-portrait02.jpg" /></span>
 <blockquote>
 <p>&ldquo; Suspendisse libero odio, rhoncus nec blandit eget, semper nec mi. Fusce dapibus tellus eu interdum varius. Quisque tempor faucibus turpis sit amet mollis. Vivamus enim ligula, porta vel velit nec, varius sagittis quam. Integer fringilla blandit diam, quis tempus ligula. Sed vel ultricies lacus, in facilisis leo. Vestibulum et turpio. &rdquo;</p>
 <small>Frank Miller<span>The DNNGo buyer</span></small></blockquote>
 </li>
 <li><span class="pic"><img alt="" src="http://demo8.dnngo.net/portals/13/Home04-Images/home04-portrait03.jpg" /></span>
 <blockquote>
 <p>&ldquo; Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore. &rdquo;</p>
 <small>Frank Miller<span>The DNNGo buyer</span></small></blockquote>
 </li>
</ul>

BottomPane Section (BottomPane · 3)

Code:

<div class="pt-60 pb-30"><ul class="home04-logolist animation scaleUp"> <li><a href="#"><img alt="" src="http://demo8.dnngo.net/portals/13/Home04-Images/home04-logo01.jpg" /></a></li> <li><a href="#"><img alt="" src="http://demo8.dnngo.net/portals/13/Home04-Images/home04-logo02.jpg" /></a></li> <li><a href="#"><img alt="" src="http://demo8.dnngo.net/portals/13/Home04-Images/home04-logo03.jpg" /></a></li> <li><a href="#"><img alt="" src="http://demo8.dnngo.net/portals/13/Home04-Images/home04-logo04.jpg" /></a></li> <li><a href="#"><img alt="" src="http://demo8.dnngo.net/portals/13/Home04-Images/home04-logo05.jpg" /></a></li> <li><a href="#"><img alt="" src="http://demo8.dnngo.net/portals/13/Home04-Images/home04-logo06.jpg" /></a></li> </ul> </div>

MEET OUR TEAMS (Full_Screen_PaneH · 1)

Code:

<div class="home04-bg02 pt-60 pb-60 mb-60"> <div class="container pt-20 animation"> <h3 class="home04-title02 animation_item scaleUp delay1">MEET OUR TEAMS</h3> <p class="pt-20 pb-50 home04-text animation_item scaleUp delay2">Fusce ac dui eu odio molestie cursus in vitae nisl atury unc at viverra nisl, eu blandit massa uspendisse est augue, sceleri sque ac interdu.</p> <div class="row"> <div class="col-sm-3"> <div class="home04-ibox04 animation_item scaleUp delay3"> <div class="pic"><img alt="" src="http://demo8.dnngo.net/portals/13/Home04-Images/home04-portrait04.jpg" /></div> <p>Kate Chris <span>Web Designer</span></p> </div> </div> <div class="col-sm-3"> <div class="home04-ibox04 animation_item scaleUp delay4"> <div class="pic"><img alt="" src="http://demo8.dnngo.net/portals/13/Home04-Images/home04-portrait05.jpg" /></div> <p>Harro Holloy<span>Skin Developer</span></p> </div> </div> <div class="col-sm-3"> <div class="home04-ibox04 animation_item scaleUp delay5"> <div class="pic"><img alt="" src="http://demo8.dnngo.net/portals/13/Home04-Images/home04-portrait06.jpg" /></div> <p>Mary Smith<span>Programmer</span></p> </div> </div> <div class="col-sm-3"> <div class="home04-ibox04 animation_item scaleUp delay6"> <div class="pic"><img alt="" src="http://demo8.dnngo.net/portals/13/Home04-Images/home04-portrait07.jpg" /></div> <p>Bane Luois<span>CEO Manager</span></p> </div> </div> </div> </div> </div>

OUR SKILLS (Full_Screen_PaneH · 2)

Code:

<div class="container animation pb-20"> <p class="pb-40 home04-text animation scaleUp">Fusce ac dui eu odio molestie cursus in vitae nisl atury unc at viverra nisl, eu blandit massa uspendisse est augue, sceleri sque ac interdu.</p> <div class="row pt-10"> <div class="col-sm-6 animation fadeInLeft"> <div class="home04-loadlist text-left"> <p>Web Design </p> <div class="progress"> <div data-width="87%" class="bar animation animationwidth a_bg_c"> <span></span> </div> </div> <p>Photoshop</p> <div class="progress"> <div data-width="95%" class="bar animation animationwidth a_bg_c"> <span></span> </div> </div> <p>Html5 &amp; Css3</p> <div class="progress"> <div data-width="75%" class="bar animation animationwidth a_bg_c"> <span></span> </div> </div> <p>Javascript</p> <div class="progress"> <div data-width="68%" class="bar animation animationwidth a_bg_c"> <span></span> </div> </div> </div> </div> <div class="col-sm-6 animation fadeInRight"> <div class="home04-loadlist text-left"> <p>Program</p> <div class="progress"> <div data-width="80%" class="bar animation animationwidth a_bg_c"> <span></span> </div> </div> <p>ASP.net</p> <div class="progress"> <div data-width="74%" class="bar animation animationwidth a_bg_c"> <span></span> </div> </div> <p>C++</p> <div class="progress"> <div data-width="95%" class="bar animation animationwidth a_bg_c"> <span></span> </div> </div> <p>Dnn</p> <div class="progress"> <div data-width="75%" class="bar animation animationwidth a_bg_c"> <span></span> </div> </div> </div> </div> </div> </div>

ENJOY INNOVATIVE AND POWERFUL SERVICES Develop str (BottomOutPane)

Code:

<div class="home04-bg04 pt-60 pb-60 color-white "> <div class="container pt-20 pb-60"> <div class="home04-cont animation"> <div class="ico animation_item scaleUp delay1"><span class="fa fa-twitter"></span></div> <div class="title animation_item scaleUp delay1">ENJOY INNOVATIVE AND POWERFUL SERVICES</div> <p class="animation_item scaleUp delay1"> Develop strong and flexible solutions that are fitted to the needs of our customers.</p> <p class="pt-20 animation_item scaleUp delay1"> <a class="home04-btn03" href="#">FOLLOW US</a><a class="home04-btn03" href="#">CLICK HERE</a> </p> </div> </div> </div>

About DNNGo (FootPaneD)

Code:

<div class="animation scaleUp"> <p>Interdum et malesuada fames ac ante ipsum primis in faucibus. Mauris quis vehicula diam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ut pellentesque massa, ut porttitor risus. </p> <p class="pt-10 pb-10">Aliquam volutpat congue scelerisque. Nam eget fringilla risus, vitae posuere nisl Vivamu. </p> <a href="#">More Information &gt;</a> </div>

Categories (FootPaneE)

Code:

<ul class="home04-list02 animation scaleUp"> <li><span class="fa fa-th-large"></span><a href="https://www.dnngo.net">Modules Development</a></li> <li><span class="fa fa-th-large"></span><a href="https://www.dnngo.net/DNNStore.aspx">Responsive Skin &amp; Design</a></li> <li><span class="fa fa-th-large"></span><a href="https://www.dnngo.net">Amazing Portfolios</a></li> <li><span class="fa fa-th-large"></span><a href="https://www.dnngo.net/DNNStore.aspx">CSS3 Animationst</a></li> </ul>

Recent News (FootPaneF)

Code:

<ul class="home4-ibox animation scaleUp">
 <li><img alt="" src="http://demo8.dnngo.net/portals/13/Home04-Images/
home04-img04.jpg" />
 <p>Ut wisi enim ad minim veniam, amcorper suscipit lobortis nislut liquip exea commodo.</p>
 <a href="#">Read More</a></li>
 <li><img alt="" src="http://demo8.dnngo.net/portals/13/Home04-Images/
home04-img05.jpg" />
 <p>Ut wisi enim ad minim veniam, amcorper suscipit lobortis nislut liquip exea commodo.</p>
 <a href="#">Read More</a></li>
</ul>

Follow Us (FootPaneG)

Code:

<div class="animation scaleUp"> <p>Morbi tempus dapibus mattis. Aliquam arcu erat, pharetra vitae consectetur eu, pellentesque eget ipsum nibh auctor.</p> <div class="pt-10 pb-10"> <p style="margin-bottom:5px;">Email : [email protected]</p> <p>Skype : dnngo-linda</p> </div> <div class="home04-social02"> <a href="#"><span class="fa fa-twitter"></span></a> <a href="#"><span class="fa fa-facebook"></span></a> <a href="#"><span class="fa fa-apple"></span></a> <a href="#"><span class="fa fa-android"></span></a> </div> </div>

App Site | Recent Post | Comments (FooterPane)

Code:

<a href="#">App Site</a> &nbsp;&nbsp; | &nbsp;&nbsp; <a href="#">Recent Post</a> &nbsp;&nbsp; | &nbsp;&nbsp; <a href="#">Comments</a>