Home Version 10 Page Code
Click to preview the Home Version 10 demo. View demo
Preview:
Email | Phone | Skype | Ticket (HeaderPane)
Code:
html
<div class="home10-linklist"> <a href="#">Email</a><span class="sep">|</span><a href="#">Phone</a><span class="sep">|</span><a href="#">Skype</a><span class="sep">|</span><a href="#">Ticket</a> </div>Facebook Link us & share Twitter Follow us & stay (HeaderPaneB)
Code:
html
<ul class="home10-social clearfix">
<li class="color-1"><a href="#"><span class="fa fa-facebook"></span></a>Facebook
<p>Link us & share</p>
</li>
<li class="color-2"><a href="#"><span class="fa fa-twitter"></span></a>Twitter
<p>Follow us & stay tuned</p>
</li>
</ul>Banner Section (BannerPane)
This section uses the DNNGo LayerGallery Pro module.
The download package provides import data for this page (Home10-ContentListEntity.xml in the DNNGo_LayerGalleryPro Module folder). Import it via Manager → Import & Export to recreate the demo banner — see LayerGallery Pro.
The Flames Lorem ipsum dolor sit amet, consectetur (TopPane)
Code:
html
<div class="home10-ibox row animation pb-30"> <div class="col-md-3 col-sm-6 animation_item scaleUp delay1"> <div class="ibox-cont"> <div class="icon"><em class="fa fa-fire"></em></div> <div class="title">The Flames</div> <div class="info"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vulputate eros nec odio egestas in dictum nisi vehicula.</p> <a target="blank" href="http://store.dnnsoftware.com/home/product-details/PackageID/36589/r/cd57d7207c9d4266bc34">READ MORE</a> </div> </div> </div> <div class="col-md-3 col-sm-6 animation_item scaleUp delay2"> <div class="ibox-cont"> <div class="icon"><em class="fa fa-cog"></em></div> <div class="title">Site Settings</div> <div class="info"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vulputate eros nec odio egestas in dictum nisi vehicula.</p> <a target="blank" href="http://store.dnnsoftware.com/home/product-details/PackageID/36589/r/cd57d7207c9d4266bc34">READ MORE</a> </div> </div> </div> <div class="col-md-3 col-sm-6 animation_item scaleUp delay3"> <div class="ibox-cont"> <div class="icon"><em class="fa fa-search"></em></div> <div class="title">SEO Friendly</div> <div class="info"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vulputate eros nec odio egestas in dictum nisi vehicula.</p> <a target="blank" href="https://www.dnngo.net/DNNStore/tabid/58/ProductID/1647/Default.aspx">READ MORE</a> </div> </div> </div> <div class="col-md-3 col-sm-6 animation_item scaleUp delay4"> <div class="ibox-cont"> <div class="icon"><em class="fa fa-thumbs-up"></em></div> <div class="title">Do The Best</div> <div class="info"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vulputate eros nec odio egestas in dictum nisi vehicula. </p> <a target="blank" href="https://www.dnngo.net/DNNStore/tabid/58/ProductID/1647/Default.aspx">READ MORE</a> </div> </div> </div> </div>Advanced frontend technology of HTML5 & CSS3. (Full_Screen_PaneB · 1)
Code:
html
<div class="home10-bg pt-60 pb-60"> <div class="container pt-10 pb-10"> <div class="clearfix animation scaleUp "> <div class="row home10-cont"> <div class="col-sm-8 col-md-9 cont-left"> <h3>Advanced frontend technology of HTML5 & CSS3. </h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vulputate egestas sem, eu cursus ligula ullamcorper non. Curabitur tristique velit eu mauris venenatis egestas. Phasellus bibendum placerat metus, sed molestie magna semper eget. Lorem Ipsum.</p> </div> <div class="col-sm-4 col-md-3 cont-right"> <a class="home10-btn" href="http://store.dnnsoftware.com/home/product-details/PackageID/36589/r/cd57d7207c9d4266bc34" target="blank">LEARN MORE</a></div> </div> </div> </div> </div>provide professional and beautiful design (Full_Screen_PaneB · 2)
Code:
html
<div class="home10-bg02 mb-40"> <div class="home10-bg-shade"> <div class="container pt-40"> <div class="row home10-flexrow"> <div class="col-sm-6 animation fadeInLeft"> <img alt="" class="img-responsive" src="http://demo8.dnngo.net/portals/13/Home10-Images/home10-img01.png" /> </div> <div class="col-sm-6 animation fadeInRight"> <div class="home10-cont02"> <h3>provide professional and <br>beautiful design</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vulputate egestas cursus ligula ullamcorper non.</p> <ul class="home10-list"> <li><em class="fa fa-pencil-square"></em>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vulputate dolor</li> <li><em class="fa fa-pencil-square"></em>egestasLorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vulputate ateinge</li> <li><em class="fa fa-pencil-square"></em>ingateingvulpegestasLorem ipsum dolor sit amet, consectetur adipiscing elit egesta</li> <li><em class="fa fa-pencil-square"></em>consectetur adipiscing elit. Morbi consectetur adipiscing</li> </ul> <p><a href="http://store.dnnsoftware.com/home/product-details/PackageID/36589/r/cd57d7207c9d4266bc34" class="home10-btn02">Purchase Now</a></p> </div> </div> </div> </div> </div> </div>Our Blog (ContentPane)
Code:
html
<div class="animation scaleUp pt-20 pb-30"> <div class="home10-title"> <div>Experts</div> <h3>Our Blog</h3> <div class="line"></div> </div> <div class="home10-cont03 clearfix"> <div class="cont_left" style="background-image:url('http://demo8.dnngo.net/portals/13/Home10-Images/home10-img02.jpg')"></div> <div class="cont_right"> <h3>Blog Title Here</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vulputate egestas sem, eu cursus ligula ullamcorper non. Curabitur tristique velit eu mauris venenatis venenatis egestas. Phasellus bibendum placerat metus, sed molestie magna semper eget. Lorem Ipsum. Proin gravida nibh vel velit auctor gravida nibh vel velit auctoraliquet.</p> <div class="date hidden_xs">01<span>March</span></div> </div> </div> <div class="home10-cont04 clearfix"> <div class="cont_right" style="background-image:url('http://demo8.dnngo.net/portals/13/Home10-Images/home10-img03.jpg')"></div> <div class="cont_left"> <h3>Blog Title Here</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vulputate egestas sem, eu cursus ligula ullamcorper non. Curabitur tristique velit eu mauris venenatis venenatis egestas. Phasellus bibendum placerat metus, sed molestie magna semper eget. Lorem Ipsum. Proin gravida nibh vel velit auctor gravida nibh vel velit auctoraliquet.</p> <div class="date hidden_xs">02<span>April</span></div> </div> </div> </div>Latest Prodcts (Full_Screen_PaneE · 1)
Code:
html
<div class="home10-bg03 pt-60 pb-60">
<div class="container pt-10">
<div class="clearfix animation scaleUp ">
<div class="home10-title">
<div>Recent Work</div>
<h3>Latest Prodcts</h3>
<div class="line"></div>
</div>
<div class="carousel home10-carousel" data-navigation="false" data-autoheight="false">
<div class="item">
<div class="photo_box">
<a class="LightBox_image_gallery10" href="http://demo8.dnngo.net/portals/13/Home10-Images/home10-img04.jpg">
<div class="pic_box"> <img alt="" src="http://demo8.dnngo.net/portals/13/Home10-Images/home10-img04.jpg" />
<div class="ico"><span class="fa fa-search"></span></div>
<div class="shade"></div>
</div>
</a>
<div class="text">
<h3>Fully Support</h3>
<p>Mauris rhoncus pretium porttitor. Cras scelerisque Phasellus dolor enim, faucibus egestas</p>
</div>
</div>
</div>
<div class="item">
<div class="photo_box">
<a class="LightBox_image_gallery10" href="http://demo8.dnngo.net/portals/13/Home10-Images/home10-img05.jpg">
<div class="pic_box"> <img alt="" src="http://demo8.dnngo.net/portals/13/Home10-Images/home10-img05.jpg" />
<div class="ico"><span class="fa fa-search"></span></div>
<div class="shade"></div>
</div>
</a>
<div class="text">
<h3>Advanced Technology</h3>
<p>Mauris rhoncus pretium porttitor. Cras scelerisque Phasellus dolor enim, faucibus egestas</p>
</div>
</div>
</div>
<div class="item">
<div class="photo_box">
<a class="LightBox_image_gallery10" href="http://demo8.dnngo.net/portals/13/Home10-Images/home10-img06.jpg">
<div class="pic_box"> <img alt="" src="http://demo8.dnngo.net/portals/13/Home10-Images/home10-img06.jpg" />
<div class="ico"><span class="fa fa-search"></span></div>
<div class="shade"></div>
</div>
</a>
<div class="text">
<h3>Responsive Design</h3>
<p>Mauris rhoncus pretium porttitor. Cras scelerisque Phasellus dolor enim, faucibus egestas</p>
</div>
</div>
</div>
<div class="item">
<div class="photo_box">
<a class="LightBox_image_gallery10" href="http://demo8.dnngo.net/portals/13/Home10-Images/home10-img04.jpg">
<div class="pic_box"> <img alt="" src="http://demo8.dnngo.net/portals/13/Home10-Images/home10-img04.jpg" />
<div class="ico"><span class="fa fa-search"></span></div>
<div class="shade"></div>
</div>
</a>
<div class="text">
<h3>Fully Support</h3>
<p>Mauris rhoncus pretium porttitor. Cras scelerisque Phasellus dolor enim, faucibus egestas</p>
</div>
</div>
</div>
<div class="item">
<div class="photo_box">
<a class="LightBox_image_gallery10" href="http://demo8.dnngo.net/portals/13/Home10-Images/home10-img05.jpg">
<div class="pic_box"> <img alt="" src="http://demo8.dnngo.net/portals/13/Home10-Images/home10-img05.jpg" />
<div class="ico"><span class="fa fa-search"></span></div>
<div class="shade"></div>
</div>
</a>
<div class="text">
<h3>Advanced Technology</h3>
<p>Mauris rhoncus pretium porttitor. Cras scelerisque Phasellus dolor enim, faucibus egestas</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>Our Service (Full_Screen_PaneE · 2)
Code:
html
<div class="home10-bg04 pt-60 "> <div class="container animation scaleUp pt-10 pb-20"> <div class="home10-title"> <div>Recent Work</div> <h3>Our Service</h3> <div class="line"></div> </div> </div> </div>Free Updates & Support (Full_Screen_PaneE · 3)
Code:
html
<div class="home10-bg05 pt-20 pb-60"> <div class="home10-ibox02 animation pb-20"> <div class="row"> <div class="col-lg-3 col-md-6 animation_item scaleUp delay1"> <div class="itmes"> <div><em class="fa fa-thumbs-o-up"></em></div> <h3>Free Updates & Support</h3> <div class="line"></div> <p>Mauris rhoncus pretium porttitor Cras scelerisque Phasellus dolor enim faucibusess egestas scelerisque Phasellus doloringer eninxfaucibus ing</p> </div> </div> <div class="col-lg-3 col-md-6 animation_item scaleUp delay2"> <div class="itmes"> <div><em class="fa fa-desktop"></em></div> <h3>Ultra Responsive</h3> <div class="line"></div> <p>Mauris rhoncus pretium porttitor Cras scelerisque Phasellus dolor enim faucibusess egestas scelerisque Phasellus doloringer eninxfaucibus ing</p> </div> </div> <div class="clearfix visible-sm"></div> <div class="col-lg-3 col-md-6 animation_item scaleUp delay3"> <div class="itmes"> <div><em class="fa fa-history"></em></div> <h3>Fast Page Speed</h3> <div class="line"></div> <p>Mauris rhoncus pretium porttitor Cras scelerisque Phasellus dolor enim faucibusess egestas scelerisque Phasellus doloringer eninxfaucibus ing</p> </div> </div> <div class="col-lg-3 col-md-6 animation_item scaleUp delay4"> <div class="itmes"> <div><em class="fa fa-stack-exchange"></em></div> <h3>Powerful Page Builder</h3> <div class="line"></div> <p>Mauris rhoncus pretium porttitor Cras scelerisque Phasellus dolor enim faucibusess egestas scelerisque Phasellus doloringer eninxfaucibus ing</p> </div> </div> </div> </div> </div>Meet The Dnngo’s Team (BottomPane)
Code:
html
<div class="animation scaleUp pt-20 pb-30">
<div class="home10-title">
<div>Business</div>
<h3>Meet The Dnngo’s Team</h3>
<div class="line"></div>
</div>
<div class="carousel home10-carousel02" data-autoheight="false" data-pagination="false">
<div class="item ">
<div class="main"> <img alt="" src="http://demo8.dnngo.net/portals/13/Home10-Images/home10-team01.jpg" />
<h3>Andrea Arkov<span>Web Designer</span></h3>
<p>Mauris rhoncus pretium porttitor Crasingerss scelerisque Phasellus dolor enimin faibusesse egestas scelerisqueinger inmothing</p>
</div>
</div>
<div class="item">
<div class="main"> <img alt="" src="http://demo8.dnngo.net/portals/13/Home10-Images/home10-team02.jpg" />
<h3>Harralloy Chri<span>DNNGo Buyer</span></h3>
<p>Mauris rhoncus pretium porttitor Crasingerss scelerisque Phasellus dolor enimin faibusesse egestas scelerisqueinger inmothing</p>
</div>
</div>
<div class="item">
<div class="main"> <img alt="" src="http://demo8.dnngo.net/portals/13/Home10-Images/home10-team03.jpg" />
<h3>John Smith<span>Progrmmer</span></h3>
<p>Mauris rhoncus pretium porttitor Crasingerss scelerisque Phasellus dolor enimin faibusesse egestas scelerisqueinger inmothing</p>
</div>
</div>
<div class="item">
<div class="main"> <img alt="" src="http://demo8.dnngo.net/portals/13/Home10-Images/home10-team04.jpg" />
<h3>Bela Chrisis<span>Manager</span></h3>
<p>Mauris rhoncus pretium porttitor Crasingerss scelerisque Phasellus dolor enimin faibusesse egestas scelerisqueinger inmothing</p>
</div>
</div>
<div class="item">
<div class="main"> <img alt="" src="http://demo8.dnngo.net/portals/13/Home10-Images/home10-team01.jpg" />
<h3>Andrea Arkov<span>Web Designer</span></h3>
<p>Mauris rhoncus pretium porttitor Crasingerss scelerisque Phasellus dolor enimin faibusesse egestas scelerisqueinger inmothing</p>
</div>
</div>
</div>
<div class="text-center home10-btn03">
<a href="http://store.dnnsoftware.com/home/product-details/PackageID/36589/r/cd57d7207c9d4266bc34">LOAD MORE</a>
</div>
</div>WHO WE ARE EXPERTS (Home10PaneA · 1)
Code:
html
<div class="home10-title02 mt-60 animation fadeInLeft">
WHO WE ARE <span class="line"></span><span>EXPERTS</span>
</div>Services We Provide (Home10PaneA · 2)
Code:
html
<div class="animation fadeInLeft"> <img alt="" class="img-responsive" src="http://demo8.dnngo.net/portals/13/Home10-Images/home10-img14.jpg" /> <div id="home10-accordion" class="panel-group home10-accordion"> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a href="#collapse10_1" data-parent="#home10-accordion" data-toggle="collapse"><span class="accordion_icon"></span>Services We Provide</a> </h4> </div> <div class="panel-collapse collapse in" id="collapse10_1"> <div class="panel-body">Mauris rhoncus pretium porttitor Crasingerss scelerisque Phasellus doloroun enimin faibusesse egestas scelerisqueinger inmothing.</div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a class="collapsed" href="#collapse10_2" data-parent="#home10-accordion" data-toggle="collapse"><span class="accordion_icon"></span>DNNGo Corporate Responsibililty</a> </h4> </div> <div class="panel-collapse collapse" id="collapse10_2"> <div class="panel-body">Mauris rhoncus pretium porttitor Crasingerss scelerisque Phasellus doloroun enimin faibusesse egestas scelerisqueinger inmothing.</div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a class="collapsed" href="#collapse10_3" data-parent="#home10-accordion" data-toggle="collapse"><span class="accordion_icon"></span>DNNGo Corporate Responsibililty</a> </h4> </div> <div class="panel-collapse collapse" id="collapse10_3"> <div class="panel-body">Mauris rhoncus pretium porttitor Crasingerss scelerisque Phasellus doloroun enimin faibusesse egestas scelerisqueinger inmothing.</div> </div> </div> </div> </div>KEEP IN TOUCH BUSINESS (Home10PaneB · 1)
Code:
html
<div class="home10-title02 mt-60 animation fadeInRight">
KEEP IN TOUCH<span class="line"></span><span>BUSINESS</span>
</div>Form Section (Home10PaneB)
This section uses the DNNGo PowerForms module — see PowerForms.
Picture Show (Home10PaneC)
Code:
html
<div class="pt-60 mt-10"> <div class="home10-title animation scaleUp "> <div>Plans</div> <h3>Picture Show</h3> <div class="line"> </div> </div> <p class="text-center text_padding pl-10 pr-10 pb-20 animation scaleUp ">Mauris rhoncus pretium porttitor Crasingerss scelerisque Phasellus dolor enimin faibusesse egestas scelerisqueinger inmothingeringess Mauris rhoncus pretium porttitor Crasingerss scelerisque Phasellus dolor enimin faibusesse egestas scelerisqueinger inmothingeringess Mauris rhoncus</p> </div> <div class="home10-imglist clearfix animation pb-30"> <div class="padding animation_item flip delay1"> <div class="photo_box"> <div class="pic_box"><a class="LightBox_image_gallery1" href="http://demo8.dnngo.net/portals/13/Home10-Images/home10-lightbox01.jpg" title="Image Gallery"><img alt="" src="http://demo8.dnngo.net/portals/13/Home10-Images/home10-img07.jpg" /> <span class="ico"><span class="fa fa-search"></span></span> <span class="shade"> </span> </a> </div> </div> </div> <div class="padding animation_item flip delay2"> <div class="photo_box"> <div class="pic_box"><a class="LightBox_image_gallery1" href="http://demo8.dnngo.net/portals/13/Home10-Images/home10-lightbox02.jpg" title="Image Gallery"><img alt="" src="http://demo8.dnngo.net/portals/13/Home10-Images/home10-img08.jpg" /> <span class="ico"><span class="fa fa-search"></span></span> <span class="shade"> </span> </a> </div> </div> </div> <div class="padding animation_item flip delay3"> <div class="photo_box"> <div class="pic_box"><a class="LightBox_image_gallery1" href="http://demo8.dnngo.net/portals/13/Home10-Images/home10-lightbox03.jpg" title="Image Gallery"><img alt="" src="http://demo8.dnngo.net/portals/13/Home10-Images/home10-img09.jpg" /> <span class="ico"><span class="fa fa-search"></span> </span> <span class="shade"> </span> </a> </div> </div> </div> <div class="padding animation_item flip delay4"> <div class="photo_box"> <div class="pic_box"><a class="LightBox_image_gallery1" href="http://demo8.dnngo.net/portals/13/Home10-Images/home10-lightbox04.jpg" title="Image Gallery"><img alt="" src="http://demo8.dnngo.net/portals/13/Home10-Images/home10-img10.jpg" /> <span class="ico"><span class="fa fa-search"></span> </span> <span class="shade"> </span> </a> </div> </div> </div> <div class="padding animation_item flip delay5"> <div class="photo_box"> <div class="pic_box"><a class="LightBox_image_gallery1" href="http://demo8.dnngo.net/portals/13/Home10-Images/home10-lightbox05.jpg" title="Image Gallery"><img alt="" src="http://demo8.dnngo.net/portals/13/Home10-Images/home10-img11.jpg" /> <span class="ico"><span class="fa fa-search"></span></span> <span class="shade"> </span></a> </div> </div> </div> <div class="padding animation_item flip delay6"> <div class="photo_box"> <div class="pic_box"><a class="LightBox_image_gallery1" href="http://demo8.dnngo.net/portals/13/Home10-Images/home10-lightbox06.jpg" title="Image Gallery"><img alt="" src="http://demo8.dnngo.net/portals/13/Home10-Images/home10-img12.jpg" /> <span class="ico"><span class="fa fa-search"></span> </span> <span class="shade"> </span></a> </div> </div> </div> <div class="padding animation_item flip delay7"> <div class="photo_box"> <div class="pic_box"><a class="LightBox_image_gallery1" href="http://demo8.dnngo.net/portals/13/Home10-Images/home10-lightbox07.jpg" title="Image Gallery"><img alt="" src="http://demo8.dnngo.net/portals/13/Home10-Images/home10-img13.jpg" /> <span class="ico"><span class="fa fa-search"></span> </span> <span class="shade"> </span></a> </div> </div> </div> </div>ABOUT US (FootPaneA)
Code:
html
<div class="foot_about animation scaleUp"><img alt="" class="img-responsive mb-10" src="http://demo8.dnngo.net/portals/13/Home10-Images/home10-logo.png" />
<p>Mauris rhoncus pretium porttitor, rasingerss scelerisque Phasell enimin faibusesse. Egestas scelerisqueinger enimin faibusesse egestas scelerisqueinger.</p>
<p><a href="#"><em class="fa fa-chevron-circle-right"></em> READ MORE</a></p>
<div class="home10-goemail">[email protected] <a href="#" target="_blank"><span class="fa fa-angle-right"></span> </a></div>
</div>LATEST NEWS (FootPaneB)
Code:
html
<div class="animation scaleUp">
<div class="home10-ibox03 clearfix"> <img alt="" src="http://demo8.dnngo.net/portals/13/Home10-Images/home10-img15.jpg" />
<div class="text-hidden">
<h3>Your Blog Title Here</h3>
<p>suspendisse consectetur ligula vitae leoingerin faucibus, a tincidunt... </p>
<div class="text-accent">21 June, 2016</div>
</div>
</div>
<div class="home10-ibox03 clearfix"> <img alt="" src="http://demo8.dnngo.net/portals/13/Home10-Images/home10-img16.jpg" />
<div class="text-hidden">
<h3>Your Blog Title Here</h3>
<p>suspendisse consectetur ligula vitae leoingerin faucibus, a tincidunt... </p>
<div class="text-accent">13 March. 2016</div>
</div>
</div>
</div>FRENDLY TAGS (FootPaneC)
Code:
html
<div class="home10-tag animation scaleUp"> <a href="http://store.dnnsoftware.com/home/product-details/PackageID/36589/r/cd57d7207c9d4266bc34">DNNGo</a><a href="#">HTML5</a><a href="#">CSS3</a> <a href="#">Skin Pack</a><a href="#">Catalook</a><a href="#">Blogs</a> <a href="#">Features</a><a href="#">Typography</a><a href="#">News</a> <a href="#">Responsive</a><a href="#">Mobilesite</a> </div>App Site | Recent Post | Comments (FooterPane)
Code:
html
<a href="#">App Site</a> | <a href="#">Recent Post</a> | <a href="#">Comments</a>