Home Version 34 Page Code
Home Version 34 is a One Page version — see One Page for how the anchor mechanism works.
Click to preview the Home Version 34 demo. View demo
Preview:
Banner Section (BannerPane · 1)
Code:
html
<div class="anchorTag" data-menuanchor="true" data-offset="0" data-scrollshownav="true" data-title="Home"></div>Banner Section (BannerPane)
This section uses the DNNGo LayerGallery Pro module.
Add the slides (images, text, links) manually in the module — see LayerGallery Pro.
Who We Are (Full_Screen_PaneA · 1)
Code:
html
<div class="anchorTag" data-menuanchor="true" data-offset="-25" data-scrollshownav="true" data-title="About Us"></div>
<div class="container text-center">
<div class="home34-title01">
<h4>Who We Are</h4>
<h3>About Dnngo</h3>
<div class="line_center"> </div>
</div>
<p class="home34-pl10 home34-pr10 big_size animation zoomIn">Donec in ut odio libero, at vulputate urna. Nulla tristique mi a massa convallis cursus. Nulla eu mi magna. Etiam suscipit commodo gravida. Cras suscipit, quam vitae adipiscing faucibus, risus nibh laoreet odio.</p>
<div class="pt-20"><img alt="" class="animation fadeInUp img-responsive" src="http://demo8.dnngo.net/Portals/19/Home34-Images/home34-img01.png" /></div>
</div>Reliable Hardware (Full_Screen_PaneA · 2)
Code:
html
<div class="home34-bg01 pt-20 pb-10">
<div class="container text-center pt-60 pb-60">
<div class="row animation">
<div class="col-sm-4 animation_item scaleUp delay1">
<div class="home34-ibox">
<div class="home34-icon"><span class="fa fa-dropbox"></span></div>
<h5>Reliable Hardware</h5>
<p>Nulla consequat massa quis enim. Donec pede justo ringilla vel, aliquet nec fringilla velvul putate eget arcu. In emnim justorhoncus, ut imperdiet a venenatis vitae juesto. </p>
<a href="#">READ MORE</a></div>
</div>
<div class="col-sm-4 animation_item scaleUp delay2">
<div class="home34-ibox">
<div class="home34-icon"><span class="fa fa-sitemap"></span></div>
<h5>Backups Available</h5>
<p>Nulla consequat massa quis enim. Donec pede justo ringilla vel, aliquet nec fringilla velvul putate eget arcu. In emnim justorhoncus, ut imperdiet a venenatis vitae juesto. </p>
<a href="#">READ MORE</a></div>
</div>
<div class="col-sm-4 animation_item scaleUp delay3">
<div class="home34-ibox">
<div class="home34-icon"><span class="fa fa-cogs"></span></div>
<h5>dnngo Integration</h5>
<p>Nulla consequat massa quis enim. Donec pede justo ringilla vel, aliquet nec fringilla velvul putate eget arcu. In emnim justorhoncus, ut imperdiet a venenatis vitae juesto. </p>
<a href="#">READ MORE</a></div>
</div>
</div>
</div>
</div>What Others Say (Full_Screen_PaneA · 3)
Code:
html
<div class="home34-bg02 pt-20 pb-20">
<div class="container pt-60 pb-60 clearfix">
<div class="home34-title02">
<h4>What Others Say</h4>
<h3>Testimonials</h3>
<div class="line_center"> </div>
</div>
<ul class="Testimonials_tab home34-testimonials animation zoomIn" data-autoheight="false" data-autoplay="3000" data-position="fade">
<li>
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor enean massa. Nulla consequat massa quis enim. Donec pede justo fringilla vel aliquet nec, vulputate eget arcu. In enim justo rhoncus ut, imperdiet a venenatis vitae justo. Nullam dictum felis eu pede mollis pretium, nteger tincidunt ras dapibus. Vivamus elementum semper. Aenean vulputate eleifend.</p>
<span class="pic"><img alt="" src="http://demo8.dnngo.net/Portals/19/Home34-Images/home34-img20.jpg" /></span></blockquote>
</li>
<li>
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor enean massa. Nulla consequat massa quis enim. Donec pede justo fringilla vel aliquet nec, vulputate eget arcu. In enim justo rhoncus ut, imperdiet a venenatis vitae justo. Nullam dictum felis eu pede mollis pretium, nteger tincidunt ras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.</p>
<span class="pic"> <img alt="" src="http://demo8.dnngo.net/Portals/19/Home34-Images//home34-img21.jpg" /> </span></blockquote>
</li>
<li>
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor enean massa. Nulla consequat massa quis enim. Donec pede justo fringilla vel aliquet nec, vulputate eget arcu. In enim justo rhoncus ut, imperdiet a venenatis vitae justo. Nullam dictum felis eu pede mollis pretium, nteger tincidunt dapibus. Vivamus elementum semper nisi. Aenean eleifend tellus vulputate.</p>
<span class="pic"> <img alt="" src="http://demo8.dnngo.net/Portals/19/Home34-Images//home34-img22.jpg" /> </span></blockquote>
</li>
</ul>
</div>
</div>What We Do (Full_Screen_PaneA · 4)
Code:
html
<div class="container pt-60 pb-60">
<div class="home34-title01 pt-20">
<h4>What We Do</h4>
<h3>Our Recent Works</h3>
<div class="line_center"> </div>
</div>
<p class="text-center home34-pl10 home34-pr10 big_size">Donec in ut odio libero, at vulputate urna. Nulla tristique mi a massa convallis cursus. Nulla eu mi magna. Etiam suscipit commodo gravida. Cras suscipit, quam vitae adipiscing faucibus, risus nibh laoreet odio.</p>
<div class="isotope_grid home34-isotope animation zoomIn">
<div class="isotope_group"><a class="active" data-filter="*" href="#">ALL</a> <a data-filter=".photograph" href="#">PHOTOGRAPH</a> <a data-filter=".webdesign" href="#">WEB DESIGN</a> <a data-filter=".blogs" href="#">BLOG</a></div>
<div class="loading">
<div class="loading-container container1">
<div class="circle1"> </div>
<div class="circle2"> </div>
<div class="circle3"> </div>
<div class="circle4"> </div>
</div>
<div class="loading-container container2">
<div class="circle1"> </div>
<div class="circle2"> </div>
<div class="circle3"> </div>
<div class="circle4"> </div>
</div>
<div class="loading-container container3">
<div class="circle1"> </div>
<div class="circle2"> </div>
<div class="circle3"> </div>
<div class="circle4"> </div>
</div>
</div>
<div class="isotope_main" data-min-width="352">
<div class="isotope_item photograph blogs">
<div class="photo_box">
<div class="pic_box"><img alt="" src="http://demo8.dnngo.net/Portals/19/Home34-Images/home34-img02.jpg" />
<div class="content">
<div class="vertical_center_1">
<div class="vertical_center_2">
<div class="ico"><a class="LightBox_image_gallery1" href="http://demo8.dnngo.net/Portals/19/Home34-Images/home34-img02.jpg"><span class="fa fa-file-image-o"></span></a></div>
</div>
</div>
</div>
<div class="shade"> </div>
</div>
<div class="text_style4">
<h6>Account Isolation</h6>
<p>Photography, Web Design</p>
</div>
</div>
</div>
<div class="isotope_item blogs webdesign">
<div class="photo_box">
<div class="pic_box"><img alt="" src="http://demo8.dnngo.net/Portals/19/Home34-Images/home34-img03.jpg" />
<div class="content">
<div class="vertical_center_1">
<div class="vertical_center_2">
<div class="ico"><a class="LightBox_image_gallery1" href="http://demo8.dnngo.net/Portals/19/Home34-Images/home34-img03.jpg"><span class="fa fa-file-image-o"></span></a></div>
</div>
</div>
</div>
<div class="shade"> </div>
</div>
<div class="text_style4">
<h6>WEB SITE BUILDER</h6>
<p>Photography, Web Design</p>
</div>
</div>
</div>
<div class="isotope_item photograph webdesign">
<div class="photo_box">
<div class="pic_box"><img alt="" src="http://demo8.dnngo.net/Portals/19/Home34-Images/home34-img04.jpg" />
<div class="content">
<div class="vertical_center_1">
<div class="vertical_center_2">
<div class="ico"><a class="LightBox_image_gallery1" href="http://demo8.dnngo.net/Portals/19/Home34-Images/home34-img04.jpg"><span class="fa fa-file-image-o"></span></a></div>
</div>
</div>
</div>
<div class="shade"> </div>
</div>
<div class="text_style4">
<h6>Customized Web</h6>
<p>Photography, Web Design</p>
</div>
</div>
</div>
<div class="isotope_item blogs webdesign">
<div class="photo_box">
<div class="pic_box"><img alt="" src="http://demo8.dnngo.net/Portals/19/Home34-Images/home34-img05.jpg" />
<div class="content">
<div class="vertical_center_1">
<div class="vertical_center_2">
<div class="ico"><a class="LightBox_image_gallery1" href="http://demo8.dnngo.net/Portals/19/Home34-Images/home34-img05.jpg"><span class="fa fa-file-image-o"></span></a></div>
</div>
</div>
</div>
<div class="shade"> </div>
</div>
<div class="text_style4">
<h6>HOST AND DOMAIN</h6>
<p>Photography, Web Design</p>
</div>
</div>
</div>
<div class="isotope_item photograph webdesign">
<div class="photo_box">
<div class="pic_box"><img alt="" src="http://demo8.dnngo.net/Portals/19/Home34-Images/home34-img06.jpg" />
<div class="content">
<div class="vertical_center_1">
<div class="vertical_center_2">
<div class="ico"><a class="LightBox_image_gallery1" href="http://demo8.dnngo.net/Portals/19/Home34-Images/home34-img06.jpg"><span class="fa fa-file-image-o"></span></a></div>
</div>
</div>
</div>
<div class="shade"> </div>
</div>
<div class="text_style4">
<h6>Unlimited Email Addresses</h6>
<p>Photography, Web Design</p>
</div>
</div>
</div>
<div class="isotope_item blogs">
<div class="photo_box">
<div class="pic_box"><img alt="" src="http://demo8.dnngo.net/Portals/19/Home34-Images/home34-img07.jpg" />
<div class="content">
<div class="vertical_center_1">
<div class="vertical_center_2">
<div class="ico"><a class="LightBox_image_gallery1" href="http://demo8.dnngo.net/Portals/19/Home34-Images/home34-img07.jpg"><span class="fa fa-file-image-o"></span></a></div>
</div>
</div>
</div>
<div class="shade"> </div>
</div>
<div class="text_style4">
<h6>Optimized Software</h6>
<p>Photography, Web Design</p>
</div>
</div>
</div>
</div>
</div>
</div>Craft Web solutions for your online business (Full_Screen_PaneA · 5)
Code:
html
<div class="home34-bg03 pt-10 pb-10">
<div class="container pt-60 pb-60 animation zoomIn">
<div class="home34-full row">
<div class="col-md-9 col-sm-8">
<h3>Craft Web solutions for your online business</h3>
<p>We provide interactive website development, which will definitely improve satisfaction of your online business.</p>
</div>
<div class="col-md-3 col-sm-4"><a class="home34-btn" href="#">MORE FEATURES</a></div>
</div>
</div>
</div>What We Provide (Full_Screen_PaneA · 6)
Code:
html
<span class="anchorTag" data-menuanchor="true" data-offset="0" data-scrollshownav="true" data-title="Services"></span>
<div class="container pt-60 pb-50">
<div class="home34-title01 pt-20">
<h4>What We Provide</h4>
<h3>Our Services</h3>
<div class="line_center"> </div>
</div>
<p class="text-center pl10 pr10 mb-20 big_size">Donec in ut odio libero, at vulputate urna. Nulla tristique mi a massa convallis cursus. Nulla eu mi magna. Etiam suscipit commodo gravida. Cras suscipit, quam vitae adipiscing faucibus, risus nibh laoreet odio.</p>
<div class="home34-ibox02 animation">
<div class="row">
<div class="col-md-3 col-sm-6 animation_item scaleUp delay1">
<h5><span class="fa fa-star"></span>Top Sellers</h5>
<p>Nam ea labitur pericula. Meis tamqua hum mpro te, cibo mutat necessita tib usid vim tamquam postulant.</p>
</div>
<div class="col-md-3 col-sm-6 animation_item scaleUp delay2">
<h5><span class="fa fa-comments"></span>Consult Online</h5>
<p>Nam ea labitur pericula. Meis tamqua hum mpro te, cibo mutat necessita tib usid vim tamquam postulant.</p>
</div>
<div class="col-md-3 col-sm-6 animation_item scaleUp delay3">
<h5><span class="fa fa-cloud-download"></span>Daily Backups</h5>
<p>Nam ea labitur pericula. Meis tamqua hum mpro te, cibo mutat necessita tib usid vim tamquam postulant.</p>
</div>
<div class="col-md-3 col-sm-6 animation_item scaleUp delay4">
<h5><span class="fa fa-codepen"></span>Powerful Set Of Shortcode</h5>
<p>Nam ea labitur pericula. Meis tamqua hum mpro te, cibo mutat necessita tib usid vim tamquam postulant.</p>
</div>
</div>
<div class="row">
<div class="col-md-3 col-sm-6 animation_item scaleUp delay5">
<h5><span class="fa fa-desktop"></span>Office Time</h5>
<p>Nam ea labitur pericula. Meis tamqua hum mpro te, cibo mutat necessita tib usid vim tamquam postulant.</p>
</div>
<div class="col-md-3 col-sm-6 animation_item scaleUp delay6">
<h5><span class="fa fa-database"></span>Share Story</h5>
<p>Nam ea labitur pericula. Meis tamqua hum mpro te, cibo mutat necessita tib usid vim tamquam postulant.</p>
</div>
<div class="col-md-3 col-sm-6 animation_item scaleUp delay7">
<h5><span class="fa fa-navicon"></span>New Products</h5>
<p>Nam ea labitur pericula. Meis tamqua hum mpro te, cibo mutat necessita tib usid vim tamquam postulant.</p>
</div>
<div class="col-md-3 col-sm-6 animation_item scaleUp delay8">
<h5><span class="fa fa-send"></span>Transfer File</h5>
<p>Nam ea labitur pericula. Meis tamqua hum mpro te, cibo mutat necessita tib usid vim tamquam postulant.</p>
</div>
</div>
</div>
</div>0 Data Transferred 0 Files Hosted 0 Pages Served 0 (Full_Screen_PaneA · 7)
Code:
html
<div class="home34-bg04">
<div class="container pt-60 pb-60 clearfix">
<div class="row">
<div class="col-md-3 col-sm-6">
<div class="home34-loadlist">
<div class="top color-1">
<div class="fa fa-cloud-download"></div>
</div>
<div class="animation number" data-number="8678">0</div>
<div class="title">Data Transferred</div>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="home34-loadlist">
<div class="top color-2">
<div class="fa fa-bar-chart"></div>
</div>
<div class="animation number" data-number="2189643">0</div>
<div class="title">Files Hosted</div>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="home34-loadlist">
<div class="top color-3">
<div class="fa fa-file-text-o"></div>
</div>
<div class="animation number" data-number="1867942">0</div>
<div class="title">Pages Served</div>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="home34-loadlist">
<div class="top color-4">
<div class="fa fa-user"></div>
</div>
<div class="animation number" data-number="9648">0</div>
<div class="title">Clients</div>
</div>
</div>
</div>
</div>
</div>How We Work (Full_Screen_PaneA · 8)
Code:
html
<div class="container pt-60 pb-60">
<div class="home34-title01 pt-20">
<h4>How We Work</h4>
<h3>Meet Our Teams</h3>
<div class="line_center"> </div>
</div>
<p class="text-center big_size home34-pl10 home34-pr10 pb-10 animation zoomIn">Donec in ut odio libero, at vulputate urna. Nulla tristique mi a massa convallis cursus. Nulla eu mi magna. Etiam suscipit commodo gravida. Cras suscipit, quam vitae adipiscing faucibus, risus nibh laoreet odio.</p>
<div class="home34-team row animation pb-10">
<div class="col-md-3 col-sm-6 animation_item scaleUp delay1">
<div class="photo_box">
<div class="pic_box">
<a class="LightBox_Box" href="#home34-popup"><img alt="" src="http://demo8.dnngo.net/Portals/19/Home34-Images/home34-img09.jpg" />
<div class="ico"><span class="fa fa-plus"> </span></div>
</a>
<div class="shade"> </div>
</div>
</div>
<h3>Harra Halloy<span>Skin Developer</span></h3>
<p>Nam ea labitur pericula. Meis tamqua mprote, cibo mutat necessitatibus id vim. An his tamquam postulant, pri cata. Corrumpit vituperata.</p>
</div>
<div class="col-md-3 col-sm-6 animation_item scaleUp delay2">
<div class="photo_box">
<div class="pic_box">
<a class="LightBox_Box" href="#home34-popup2"><img alt="" src="http://demo8.dnngo.net/Portals/19/Home34-Images/home34-img10.jpg" />
<div class="ico"><span class="fa fa-plus"> </span></div>
</a>
<div class="shade"> </div>
</div>
</div>
<h3>Micheal Cyrus<span>Manager</span></h3>
<p>Nam ea labitur pericula. Meis tamqua mprote, cibo mutat necessitatibus id vim. An his tamquam postulant, pri cata. Corrumpit vituperata.</p>
</div>
<div class="col-md-3 col-sm-6 animation_item scaleUp delay3">
<div class="photo_box">
<div class="pic_box">
<a class="LightBox_Box" href="#home34-popup3"><img alt="" src="http://demo8.dnngo.net/Portals/19/Home34-Images/home34-img11.jpg" />
<div class="ico"><span class="fa fa-plus"> </span></div>
</a>
<div class="shade"> </div>
</div>
</div>
<h3>Frank Miller<span>Web Designer</span></h3>
<p>Nam ea labitur pericula. Meis tamqua mprote, cibo mutat necessitatibus id vim. An his tamquam postulant, pri cata. Corrumpit vituperata.</p>
</div>
<div class="col-md-3 col-sm-6 animation_item scaleUp delay4">
<div class="photo_box">
<div class="pic_box">
<a class="LightBox_Box" href="#home34-popup4"><img alt="" src="http://demo8.dnngo.net/Portals/19/Home34-Images/home34-img12.jpg" />
<div class="ico"><span class="fa fa-plus"> </span></div>
</a>
<div class="shade"> </div>
</div>
</div>
<h3>Rose Chris<span>Programmer</span></h3>
<p>Nam ea labitur pericula. Meis tamqua mprote, cibo mutat necessitatibus id vim. An his tamquam postulant, pri cata. Corrumpit vituperata.</p>
</div>
</div>
</div>
<div class="white-popup mfp-with-anim mfp-hide" id="home34-popup">
<div class="clearfix">
<div class="home34-lightbox-l"><img alt="" src="http://demo8.dnngo.net/Portals/19/Home34-Images/home34-img09-big.jpg" /></div>
<div class="home34-lightbox-r">
<h3>Harra Halloy</h3>
<span>Skin Developer</span>
<p>Nam ea labitur pericula. Meis tamqua mprot ecibo, mutat nece sitatibus id vim. Anbista mquam postulant, pri cata. Corrumpit vitupe rata.</p>
<div class="line"> </div>
<div class="home34-ligthbox">
<div class="home34-data">2008-2011</div>
<h5>DNN skin and module customization</h5>
<p>In nec enim ac mi pharetra tincidunt. Nulla vitae leo augue. Cras congue suscipit odio ut tincidunt. Pellentesque dignis simnibh sed urna euismod, at dignissim arcu dapibus.</p>
<div class="home34-data">2012-2016</div>
<h5>Advanced frontend development technology</h5>
<p>In nec enim ac mi pharetra tincidunt. Nulla vitae leo augue. Cras congue suscipit odio ut tincidunt. Pellentesque dignis simnibh sed urna euismod, at dignissim arcu dapibus.</p>
</div>
</div>
<div class="clear"> </div>
<div class="home34-loghtbot">
<a href="#"><span class="fa fa-facebook"></span></a>
<a href="#"><span class="fa fa-twitter"></span></a>
<a href="#"><span class="fa fa-flickr"></span></a>
<a href="#"><span class="fa fa-linkedin"></span></a> <em class="fa fa-envelope"></em><span>Email: [email protected]</span> <em class="fa fa-phone"></em>Phone: (+086)-2755-8888</div>
</div>
</div>
<div class="white-popup mfp-with-anim mfp-hide" id="home34-popup2">
<div class="clearfix">
<div class="home34-lightbox-l"><img alt="" src="http://demo8.dnngo.net/Portals/19/Home34-Images/home34-img10-big.jpg" /></div>
<div class="home34-lightbox-r">
<h3>Rose Chris</h3>
<span>Manager</span>
<p>Nam ea labitur pericula. Meis tamqua mprot ecibo, mutat nece sitatibus id vim. Anbista mquam postulant, pri cata. Corrumpit vitupe rata.</p>
<div class="line"> </div>
<div class="home34-ligthbox">
<div class="home34-data">2008-2011</div>
<h5>DNN skin and module customization</h5>
<p>In nec enim ac mi pharetra tincidunt. Nulla vitae leo augue. Cras congue suscipit odio ut tincidunt. Pellentesque dignis simnibh sed urna euismod, at dignissim arcu dapibus.</p>
<div class="home34-data">2012-2016</div>
<h5>Advanced frontend development technology</h5>
<p>In nec enim ac mi pharetra tincidunt. Nulla vitae leo augue. Cras congue suscipit odio ut tincidunt. Pellentesque dignis simnibh sed urna euismod, at dignissim arcu dapibus.</p>
</div>
</div>
<div class="clear"> </div>
<div class="home34-loghtbot">
<a href="#"><span class="fa fa-facebook"></span></a>
<a href="#"><span class="fa fa-twitter"></span></a>
<a href="#"><span class="fa fa-flickr"></span></a>
<a href="#"><span class="fa fa-linkedin"></span></a> <em class="fa fa-envelope"></em><span>Email: [email protected]</span> <em class="fa fa-phone"></em>Phone: (+086)-2755-8888</div>
</div>
</div>
<div class="white-popup mfp-with-anim mfp-hide" id="home34-popup3">
<div class="clearfix">
<div class="home34-lightbox-l"><img alt="" src="http://demo8.dnngo.net/Portals/19/Home34-Images/home34-img11-big.jpg" /></div>
<div class="home34-lightbox-r">
<h3>Frank Miller</h3>
<span>Web Designer</span>
<p>Nam ea labitur pericula. Meis tamqua mprot ecibo, mutat nece sitatibus id vim. Anbista mquam postulant, pri cata. Corrumpit vitupe rata.</p>
<div class="line"> </div>
<div class="home34-ligthbox">
<div class="home34-data">2008-2011</div>
<h5>DNN skin and module customization</h5>
<p>In nec enim ac mi pharetra tincidunt. Nulla vitae leo augue. Cras congue suscipit odio ut tincidunt. Pellentesque dignis simnibh sed urna euismod, at dignissim arcu dapibus.</p>
<div class="home34-data">2012-2016</div>
<h5>Advanced frontend development technology</h5>
<p>In nec enim ac mi pharetra tincidunt. Nulla vitae leo augue. Cras congue suscipit odio ut tincidunt. Pellentesque dignis simnibh sed urna euismod, at dignissim arcu dapibus.</p>
</div>
</div>
<div class="clear"> </div>
<div class="home34-loghtbot">
<a href="#"><span class="fa fa-facebook"></span></a>
<a href="#"><span class="fa fa-twitter"></span></a>
<a href="#"><span class="fa fa-flickr"></span></a>
<a href="#"><span class="fa fa-linkedin"></span></a> <em class="fa fa-envelope"></em><span>Email: [email protected]</span> <em class="fa fa-phone"></em>Phone: (+086)-2755-8888</div>
</div>
</div>
<div class="white-popup mfp-with-anim mfp-hide" id="home34-popup4">
<div class="clearfix">
<div class="home34-lightbox-l"><img alt="" src="http://demo8.dnngo.net/Portals/19/Home34-Images/home34-img12-big.jpg" /></div>
<div class="home34-lightbox-r">
<h3>Micheal Cyrus</h3>
<span>Programmer</span>
<p>Nam ea labitur pericula. Meis tamqua mprot ecibo, mutat nece sitatibus id vim. Anbista mquam postulant, pri cata. Corrumpit vitupe rata.</p>
<div class="line"> </div>
<div class="home34-ligthbox">
<div class="home34-data">2008-2011</div>
<h5>DNN skin and module customization</h5>
<p>In nec enim ac mi pharetra tincidunt. Nulla vitae leo augue. Cras congue suscipit odio ut tincidunt. Pellentesque dignis simnibh sed urna euismod, at dignissim arcu dapibus.</p>
<div class="home34-data">2012-2016</div>
<h5>Advanced frontend development technology</h5>
<p>In nec enim ac mi pharetra tincidunt. Nulla vitae leo augue. Cras congue suscipit odio ut tincidunt. Pellentesque dignis simnibh sed urna euismod, at dignissim arcu dapibus.</p>
</div>
</div>
<div class="clear"> </div>
<div class="home34-loghtbot">
<a href="#"><span class="fa fa-facebook"></span></a>
<a href="#"><span class="fa fa-twitter"></span></a>
<a href="#"><span class="fa fa-flickr"></span></a>
<a href="#"><span class="fa fa-linkedin"></span></a> <em class="fa fa-envelope"></em><span>Email: [email protected]</span> <em class="fa fa-phone"></em>Phone: (+086)-2755-8888</div>
</div>
</div>How is it completed (Full_Screen_PaneA · 9)
Code:
html
<div class="anchorTag" data-menuanchor="true" data-offset="0" data-scrollshownav="true" data-title="Process"></div>
<div class="home34-bg05 pt-20 pb-20">
<div class="container pt-60 pb-60">
<div class="home34-title01">
<h4>How is it completed</h4>
<h3>Work Process</h3>
<div class="line_center"> </div>
</div>
<p class="text-center pl10 pr10 big_size">Donec in ut odio libero, at vulputate urna. Nulla tristique mi a massa convallis cursus. Nulla eu mi magna. Etiam suscipit commodo gravida. Cras suscipit, quam vitae adipiscing faucibus, risus nibh laoreet odio.</p>
<div class="row">
<div class="col-sm-6 animation fadeInLeft">
<div class="home34-loadlist02 color-1">
<p>Research demand, New concept design</p>
<div class="progress progress-striped active">
<div class="bar animation animationwidth" data-width="90%"><span></span></div>
</div>
<p>Skin Development & Analysis</p>
<div class="progress progress-striped active">
<div class="bar animation animationwidth" data-width="92%"><span></span></div>
</div>
<p>Research demand, New concept design</p>
<div class="progress progress-striped active">
<div class="bar animation animationwidth" data-width="85%"><span></span></div>
</div>
</div>
</div>
<div class="col-sm-6 animation fadeInRight">
<div class="home34-loadlist02 color-2">
<p>Research demand, New concept design</p>
<div class="progress progress-striped active">
<div class="bar animation animationwidth" data-width="88%"><span></span></div>
</div>
<p>Research demand, New concept design</p>
<div class="progress progress-striped active">
<div class="bar animation animationwidth" data-width="92%"><span></span></div>
</div>
<p>Research demand, New concept design</p>
<div class="progress progress-striped active">
<div class="bar animation animationwidth" data-width="80%"><span></span></div>
</div>
</div>
</div>
</div>
</div>
</div>What’s The Story (Full_Screen_PaneA · 10)
Code:
html
<span class="anchorTag" data-autoheight="false" data-menuanchor="true" data-offset="0" data-scrollshownav="true" data-title="Blogs"></span>
<div class="container pt-60 pb-60">
<div class="home34-title01 pt-20">
<h4>What’s The Story</h4>
<h3>Popular Blogs</h3>
<div class="line_center"> </div>
</div>
<p class="text-center big_size home34-pl10 home34-pr10 pb-30">Donec in ut odio libero, at vulputate urna. Nulla tristique mi a massa convallis cursus. Nulla eu mi magna. Etiam suscipit commodo gravida. Cras suscipit, quam vitae adipiscing faucibus, risus nibh laoreet odio.</p>
<div class="carousel home34-carousel animation zoomIn mb-10" data-pagination="false">
<div class="item">
<div class="photo_box">
<div class="pic_box">
<a href="#"><img alt="" src="http://demo8.dnngo.net/Portals/19/Home34-Images/home34-img13.jpg" /> </a>
<div class="ico">
<a href="#"><span class="fa fa-link"></span> </a>
</div>
<a href="#"> </a>
<div class="shade"> </div>
<a href="#"> </a>
</div>
<div class="text_style5">
<h6>Mobilesite Development</h6>
<span class="date">October 25th, 2014</span>
<p>Donec in ut odio libero, at vulputate urna tristique mi a massa convallis cursus. Etiam suscipit commodo gravida. Cras suscipit, quam vitae adipiscing faucib us.</p>
</div>
</div>
</div>
<div class="item">
<div class="photo_box">
<div class="pic_box">
<a href="#"><img alt="" src="http://demo8.dnngo.net/Portals/19/Home34-Images/home34-img14.jpg" /> </a>
<div class="ico">
<a href="#"><span class="fa fa-link"></span> </a>
</div>
<a href="#"> </a>
<div class="shade"> </div>
<a href="#"> </a>
</div>
<div class="text_style5">
<h6>Ultra Responsive Web</h6>
<span class="date">December 18th, 2014</span>
<p>Donec in ut odio libero, at vulputate urna tristique mi a massa convallis cursus. Etiam suscipit commodo gravida. Cras suscipit, quam vitae adipiscing faucib us.</p>
</div>
</div>
</div>
<div class="item">
<div class="photo_box">
<div class="pic_box">
<a href="#"><img alt="" src="http://demo8.dnngo.net/Portals/19/Home34-Images/home34-img15.jpg" /> </a>
<div class="ico">
<a href="#"><span class="fa fa-link"></span> </a>
</div>
<a href="#"> </a>
<div class="shade"> </div>
<a href="#"> </a>
</div>
<div class="text_style5">
<h6>Website Template</h6>
<span class="date">January 09th, 2015</span>
<p>Donec in ut odio libero, at vulputate urna tristique mi a massa convallis cursus. Etiam suscipit commodo gravida. Cras suscipit, quam vitae adipiscing faucib us.</p>
</div>
</div>
</div>
<div class="item">
<div class="photo_box">
<div class="pic_box">
<a href="#"><img alt="" src="http://demo8.dnngo.net/Portals/19/Home34-Images/home34-img18.jpg" /> </a>
<div class="ico">
<a href="#"><span class="fa fa-link"></span> </a>
</div>
<a href="#"> </a>
<div class="shade"> </div>
<a href="#"> </a>
</div>
<div class="text_style5">
<h6>Mobilesite Development</h6>
<span class="date">October 25th, 2014</span>
<p>Donec in ut odio libero, at vulputate urna tristique mi a massa convallis cursus. Etiam suscipit commodo gravida. Cras suscipit, quam vitae adipiscing faucib us.</p>
</div>
</div>
</div>
<div class="item">
<div class="photo_box">
<div class="pic_box">
<a href="#"><img alt="" src="http://demo8.dnngo.net/Portals/19/Home34-Images/home34-img19.jpg" /> </a>
<div class="ico">
<a href="#"><span class="fa fa-link"></span> </a>
</div>
<a href="#"> </a>
<div class="shade"> </div>
<a href="#"> </a>
</div>
<div class="text_style5">
<h6>Ultra Responsive Web</h6>
<span class="date">December 18th, 2014</span>
<p>Donec in ut odio libero, at vulputate urna tristique mi a massa convallis cursus. Etiam suscipit commodo gravida. Cras suscipit, quam vitae adipiscing faucib us.</p>
</div>
</div>
</div>
</div>
</div>How To Follow Us (Full_Screen_PaneA · 11)
Code:
html
<div class="home34-bg06 pt-20 pb-10">
<div class="container text-center pt-60 pb-60">
<div class="home34-title02">
<h4>How To Follow Us</h4>
<h3>Social Networks</h3>
<div class="line_center"> </div>
</div>
<p class="home34-pl10 home34-pr10 big_size">Donec in ut odio libero, at vulputate urna. Nulla tristique mi a massa convallis cursus. Nulla eu mi magna. Etiam suscipit commodo gravida. Cras suscipit, quam vitae adipiscing faucibus, risus nibh laoreet odio.</p>
<div class="home7_social row animation pt-30">
<div class="col-xs-6 col-sm-4 col-md-2 animation_item scaleUp delay1">
<div class="home34-socialbox color-1"><a href="#"><span class="fa fa-facebook"></span></a></div>
</div>
<div class="col-xs-6 col-sm-4 col-md-2 animation_item scaleUp delay2">
<div class="home34-socialbox color-2"><a href="#"><span class="fa fa-twitter"></span></a></div>
</div>
<div class="col-xs-6 col-sm-4 col-md-2 animation_item scaleUp delay3">
<div class="home34-socialbox color-3"><a href="#"><span class="fa fa-pinterest"></span></a></div>
</div>
<div class="col-xs-6 col-sm-4 col-md-2 animation_item scaleUp delay4">
<div class="home34-socialbox color-4"><a href="#"><span class="fa fa-share-alt"></span></a></div>
</div>
<div class="col-xs-6 col-sm-4 col-md-2 animation_item scaleUp delay5">
<div class="home34-socialbox color-5"><a href="#"><span class="fa fa-dribbble"></span></a></div>
</div>
<div class="col-xs-6 col-sm-4 col-md-2 animation_item scaleUp delay5">
<div class="home34-socialbox color-6"><a href="#"><span class="fa fa-rss"></span></a></div>
</div>
</div>
</div>
</div>How To Charge (Full_Screen_PaneA · 12)
Code:
html
<div class="anchorTag" data-menuanchor="true" data-offset="0" data-scrollshownav="true" data-title="Pricing" id="Pricing"></div>
<div class="container pt-60 pb-60">
<div class="home34-title01 pt-20">
<h4>How To Charge</h4>
<h3>Pricing Tables</h3>
<div class="line_center"> </div>
</div>
<p class="text-center home34-pl10 big_size home34-pr10">Donec in ut odio libero, at vulputate urna. Nulla tristique mi a massa convallis cursus. Nulla eu mi magna. Etiam suscipit commodo gravida. Cras suscipit, quam vitae adipiscing faucibus, risus nibh laoreet odio.</p>
<div class="price-table home34-price row animation mb-10">
<div class="col-md-3 col-sm-6 color-1 animation_item scaleUp delay1">
<div class="price_border">
<div class="price_title"><span class="fa fa-heart-o"></span>
<div class="line"> </div>
<h2>BASIC</h2>
</div>
<div class="price_holder">
<div class="price_box"><span class="sup">$</span><span class="price">10</span><span class="unit">/m</span></div>
<ul>
<li>1GB Space</li>
<li>50GB Database</li>
<li>10 Portfolio Items</li>
<li>Unlimited- Colors</li>
<li>Responsive Web</li>
</ul>
<div class="price_button"><a class="btn" href="#">BUY IT NOW</a></div>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6 color-2 animation_item scaleUp delay2">
<div class="price_border">
<div class="price_title "><span class="fa fa-star"></span>
<div class="line"> </div>
<h2>PROFESSIONAL</h2>
</div>
<div class="price_holder">
<div class="price_box"><span class="sup">$</span><span class="price">20</span><span class="unit">/m</span></div>
<ul>
<li>2GB Space</li>
<li>100GB Database</li>
<li>15 Portfolio Items</li>
<li>Unlimited- Colors</li>
<li>Responsive Web</li>
</ul>
<div class="price_button"><a class="btn" href="#">BUY IT NOW</a></div>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6 color-3 animation_item scaleUp delay3">
<div class="price_border">
<div class="price_title"><span class="fa fa-laptop"></span>
<div class="line"> </div>
<h2>MAXIMUM</h2>
</div>
<div class="price_holder">
<div class="price_box"><span class="sup">$</span><span class="price">30</span><span class="unit">/m</span></div>
<ul>
<li>3GB Space</li>
<li>150GB Database</li>
<li>20 Portfolio Items</li>
<li>Unlimited- Colors</li>
<li>Responsive Web</li>
</ul>
<div class="price_button"><a class="btn" href="#">BUY IT NOW</a></div>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6 color-4 animation_item scaleUp delay4">
<div class="price_border">
<div class="price_title"><span class="fa fa-external-link"></span>
<div class="line"> </div>
<h2>EXTREME</h2>
</div>
<div class="price_holder">
<div class="price_box"><span class="sup">$</span><span class="price">40</span><span class="unit">/m</span></div>
<ul>
<li>4GB Space</li>
<li>200GB Database</li>
<li>25 Portfolio Items</li>
<li>Unlimited- Colors</li>
<li>Responsive Web</li>
</ul>
<div class="price_button"><a class="btn" href="#">BUY IT NOW</a></div>
</div>
</div>
</div>
</div>
</div>Do You LIke This Awesome Business Theme ? (Full_Screen_PaneA · 13)
Code:
html
<div class="home34-bg07 pt-10 pb-10">
<div class="container pt-60 pb-60 animation zoomIn">
<div class="home34-full row">
<div class="col-md-9 col-sm-8">
<h3>Do You LIke This Awesome Business Theme ?</h3>
<p>We offer you creative, top-quality DNN skins & modules, which are great source to DNN website development.</p>
</div>
<div class="col-md-3 col-sm-4"><a class="home34-btn02" href="#">PURCHASE THIS THEME</a></div>
</div>
</div>
</div>Get Connection (TopPane)
Code:
html
<div class="pt-30 home34-bottom">
<div class="home34-title01">
<h4>Get Connection</h4>
<h3>Contact Us</h3>
<div class="line_center"> </div>
</div>
<p class="text-center big_size home34-pl10 home34-pr10">Donec in ut odio libero, at vulputate urna. Nulla tristique mi a massa convallis cursus. Nulla eu mi magna. Etiam suscipit commodo gravida. Cras suscipit, quam vitae adipiscing faucibus, risus nibh laoreet odio.</p>
</div>Form Section (RowFour_Grid6_Pane1)
This section uses the DNNGo PowerForms module — see PowerForms.
CONTACT INFORMATION (RowFour_Grid6_Pane2)
Code:
html
<div class="home34-info animation fadeInRight ">
<h4>CONTACT INFORMATION</h4>
<div class="home34-info-item">
<div class="home34-info-title">Work Time:</div>
<div>Our support hotline is available 24 hours everyday</div>
<div>Sunday: Closed</div>
<div>Monday-Friday: 8:00AM-5:30PM</div>
<div>Saturday: 10:00AM-2:00PM</div>
</div>
<div class="home34-info-item">
<div class="home34-info-title">Phone Number:</div>
<div>Office One: (+086) - 2566 -8799</div>
<div>Office Two: (+086) - 2477 -8366</div>
</div>
<div class="home34-info-item">
<div class="home34-info-title">Our Address:</div>
<div>YuanLin Hotel 16th Floor, XinAn Street, HuaYu Road No.2, KuiGuan Company</div>
</div>
<div class="home34-info-item">
<div class="home34-info-title">Email:</div>
<div>[email protected]</div>
</div>
</div>BottomOutPane Section (BottomOutPane)
Code:
html
<div class="home34-map mt-30">
<div id="gmap01"></div>
</div>About Dnngo (FootPaneD)
Code:
html
<div class="animation fadeInUp">
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusant ium dolore mque laudan tium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<a href="#">+ More Information</a>
</div>Categories (FootPaneE)
Code:
html
<div class="home34-list animation fadeInUp ">
<ul>
<li><a href="#"><span class="fa fa-list-ul"></span>DNN Templates</a></li>
<li><a href="#"><span class="fa fa-list-ul"></span>Mobilesite Development</a></li>
<li><a href="#"><span class="fa fa-list-ul"></span>Responsive Skin</a></li>
<li><a href="#"><span class="fa fa-list-ul"></span>DNN XBlog Modules</a></li>
</ul>
</div>Recent News (FootPaneF)
Code:
html
<div class="animation fadeInUp">
<div class="home34-news clearfix">
<img alt="" src="http://demo8.dnngo.net/Portals/19/Home34-Images/home34-img16.jpg">
<div class="home34-newtext">
<div>Sed ut perspiciatis unde omnis iste natus error sit voluptatem ium dolore</div>
</div>
</div>
<div class="home34-news clearfix">
<img alt="" src="http://demo8.dnngo.net/Portals/19/Home34-Images/home34-img17.jpg">
<div class="home34-newtext">
<div>Sed ut perspiciatis unde omnis iste natus error sit voluptatem ium dolore</div>
</div>
</div>
</div>Quick Links (FootPaneG)
Code:
html
<div class="home34-linklist animation fadeInUp clearfix">
<ul>
<li><a href="#"><span class="fa fa-check-circle"></span>Dnn Store</a></li>
<li><a href="#"><span class="fa fa-check-circle"></span>Photo Graphy</a></li>
<li><a href="#"><span class="fa fa-check-circle"></span>Web Design</a></li>
<li><a href="#"><span class="fa fa-check-circle"></span>HTML5 & CSS3</a></li>
<li><a href="#"><span class="fa fa-check-circle"></span>New Products</a></li>
</ul>
<ul>
<li><a href="#"><span class="fa fa-check-circle"></span>Website</a></li>
<li><a href="#"><span class="fa fa-check-circle"></span>Banner Slider</a></li>
<li><a href="#"><span class="fa fa-check-circle"></span>Edit Content</a></li>
<li><a href="#"><span class="fa fa-check-circle"></span>Create Page</a></li>
<li><a href="#"><span class="fa fa-check-circle"></span>Site Settings</a></li>
</ul>
</div>App Site | Recent Post | Comments (FooterPane)
Code:
html
<a href="#">App Site</a> | <a href="#">Recent Post</a> | <a href="#">Comments</a>