Home Version 30 Page Code
Click to preview the Home Version 30 demo. View demo
Preview:
Contact Info (HeaderPane)
Code:
html
<div style="text-align: center;">
<h3 class="pb-10">Contact Info</h3>
<p>Emial : [email protected]</p>
<p>Phone : (+086) - 2755 -9999</p>
<p>Skype : Dnngo-Linda</p>
<div class="home30-social02 pt-10">
<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>
</div>
</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.
Experienced developers and skillful designers (BannerPane · 2)
Code:
html
<div class="home30-bg01 home30-cont_01 pt-60 pb-60"> <div class="dnn_layout pt-20 pb-20"> <div class="animation fadeInUp"> <h2>Experienced developers and skillful designers</h2> <p>We are a team comprised of <a data-original-title="Default tooltip" href="#" data-toggle="tooltip" class="tooltips">experienced developers</a> and reliable designers whose aim is to provide you with <a data-original-title="Default tooltip" href="#" data-toggle="tooltip" class="tooltips">compelling </a>, engaging and <span>satisfying skins and modules. Our aim is to provide what exactly you want.</span> </p> <a href="#" target="blank" class="home30-btn01">START FROM HERE</a> </div> </div> </div>Our Awards (TopPane)
Code:
html
<div class="home30-services01 pb-30">
<div class="row">
<div class="col-md-3 col-sm-6">
<div class="color1 animation periodic1"> <span class="fa fa-thumbs-o-up"></span>
<h3>Our Awards</h3>
<p>Donec in ut odio libero, at urna nulla tristique mi a massa convallis cursus. etiam commodo gravida. </p>
<a href="#" target="blank">Learn More ></a>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="color2 animation periodic2"> <span class="fa fa-desktop"></span>
<h3>Responsive Web</h3>
<p>Donec in ut odio libero, at urna nulla tristique mi a massa convallis cursus. etiam commodo gravida. </p>
<a href="#" target="blank">Learn More ></a>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="color3 animation periodic3"> <span class="fa fa-gear"></span>
<h3>Site Settings</h3>
<p>Donec in ut odio libero, at urna nulla tristique mi a massa convallis cursus. etiam commodo gravida. </p>
<a href="#" target="blank">Learn More ></a>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="color4 animation periodic4"> <span class="fa fa-bar-chart"></span>
<h3>Manage Data</h3>
<p>Donec in ut odio libero, at urna nulla tristique mi a massa convallis cursus. etiam commodo gravida. </p>
<a href="#" target="blank">Learn More ></a>
</div>
</div>
</div>
</div>Awesome Themes (Full_Screen_PaneB · 1)
Code:
html
<div class="home30-bg02 pt-60 pb-60">
<div class="dnn_layout pt-20 pb-20">
<div class="content_mid clearfix">
<div class="pane_layout">
<div class="row">
<div class="col-sm-12">
<h2>Awesome Themes</h2>
<p class="h4-color">Compatible with desktops, laptops and mobile devices</p>
</div>
</div>
<div class="row home30-cont_02">
<div class="col-sm-6">
<div class="home30-con_02_left clearfix">
<div class="mac animation periodic1"><img alt="" class="img-responsive" src="http://demo8.dnngo.net/Portals/13/Home30-Images/home30-mac.png" /></div>
</div>
</div>
<div class="col-sm-6">
<div class="home30-con_02_right animation fadeInRight">
<p>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.</p>
<ul class="list_style">
<li><span class="fa fa-play"></span>Cutting-edge CSS3 animations</li>
<li><span class="fa fa-play"></span>Boxed & Wide layout</li>
<li><span class="fa fa-play"></span>Responsive full width Slider Banner</li>
<li><span class="fa fa-play"></span>6 different grid responsive layouts</li>
<li><span class="fa fa-play"></span>6 matching containers</li>
<li><span class="fa fa-play"></span>5 Header styles</li>
<li><span class="fa fa-play"></span>3 different Menu styles</li>
</ul>
<ul class="list_style">
<li><span class="fa fa-play"></span>Responsive design</li>
<li><span class="fa fa-play"></span>Multi-Purpose</li>
<li><span class="fa fa-play"></span>Bootstrap 3.2</li>
<li><span class="fa fa-play"></span>Retina ready</li>
<li><span class="fa fa-play"></span>CSS3 & HTML 5</li>
<li><span class="fa fa-play"></span>DNN6 & DNN7</li>
<li><span class="fa fa-play"></span>SEO friendly</li>
</ul>
<div class="clear pt-10"></div>
<a class="home30-btn01" href="#" target="blank">VIEW ALL FEATURES</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>0 Purchases 0 Comments 0 Products 0 Subscribers (Full_Screen_PaneB · 2)
Code:
html
<div class="home30-bg03 pt-60 pb-60"> <div class="dnn_layout pb-10"> <div class="content_mid clearfix"> <div class="pane_layout"> <div class="row home30-num_Animation"> <div class="col-md-3 col-sm-6"> <div class="number_box"> <span data-number="76000" class="animation number">0</span> <span class="number_name">Purchases</span> </div> </div> <div class="col-md-3 col-sm-6"> <div class="number_box"> <span data-number="8130" class="animation number">0</span> <span class="number_name">Comments</span> </div> </div> <div class="col-md-3 col-sm-6"> <div class="number_box"> <span data-number="9400" class="animation number">0</span> <span class="number_name">Products</span> </div> </div> <div class="col-md-3 col-sm-6"> <div class="number_box"> <span data-number="15000" class="animation number">0</span> <span class="number_name">Subscribers</span> </div> </div> </div> </div> </div> </div> </div>Enter Title (ContentPane)
Code:
html
<div class="home30-cont_02 animation fadeInUp pt-30 pb-30 xs-pb-0">
<div class="home30-cont_02_top">
<h2>Testimonials</h2>
<p class="h4-color">What Others Say About Us</p>
</div>
<div class="home30-cont_02_bot">
<div class="row">
<div class="col-sm-4 h30c02b_one">
<ul class="Testimonials_tab home30-Testimonial01" data-autoplay="0" data-display-arrows="false" data-display-navigation="false">
<li>
<div class="Pic"><img alt="" class="img-responsive" src="http://demo8.dnngo.net/Portals/13/Home30-Images/home30-Testimonials01_1.jpg" /></div>
<div class="home30-testimonial_text">
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium dolore nec eros eget nisl fringilla comm odo mque totam.</p> <small><span style="text-transform: inherit;">Frank Miller</span> </small>
<h6><small>Dnngo Buyer</small></h6> <small> </small></div>
</li>
</ul>
</div>
<div class="col-sm-4 h30c02b_two">
<ul class="Testimonials_tab home30-Testimonial01" data-autoplay="0" data-display-arrows="false" data-display-navigation="false">
<li>
<div class="Pic"><img alt="" class="img-responsive" src="http://demo8.dnngo.net/Portals/13/Home30-Images/home30-Testimonials01_2.jpg" /></div>
<div class="home30-testimonial_text">
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium dolore nec eros eget nisl fringilla comm odo mque totam.</p> <small><span style="text-transform: inherit;">Micheal Cyrus</span> </small>
<h6><small>Dnngo Buyer</small></h6> <small> </small></div>
</li>
</ul>
</div>
<div class="col-sm-4 h30c02b_three">
<ul class="Testimonials_tab home30-Testimonial01" data-autoplay="0" data-display-arrows="false" data-display-navigation="false">
<li>
<div class="Pic"><img alt="" class="img-responsive" src="http://demo8.dnngo.net/Portals/13/Home30-Images/home30-Testimonials01_3.jpg" /></div>
<div class="home30-testimonial_text">
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium dolore nec eros eget nisl fringilla comm odo mque totam.</p> <small><span style="text-transform: inherit;">Harra Halloy</span> </small>
<h6><small>Dnngo Buyer</small></h6> <small> </small></div>
</li>
</ul>
</div>
</div>
<div class="row">
<div class="col-sm-4 h30c02b_four">
<ul class="Testimonials_tab home30-Testimonial01" data-autoplay="0" data-display-arrows="false" data-display-navigation="false">
<li>
<div class="Pic"><img alt="" class="img-responsive" src="http://demo8.dnngo.net/Portals/13/Home30-Images/home30-Testimonials01_4.jpg" /></div>
<div class="home30-testimonial_text">
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium dolore nec eros eget nisl fringilla comm odo mque totam.</p> <small><span style="text-transform: inherit;">Steven Doe</span> </small>
<h6><small>Dnngo Buyer</small></h6> <small> </small></div>
</li>
</ul>
</div>
<div class="col-sm-4 h30c02b_five">
<ul class="Testimonials_tab home30-Testimonial01" data-autoplay="0" data-display-arrows="false" data-display-navigation="false">
<li>
<div class="Pic"><img alt="" class="img-responsive" src="http://demo8.dnngo.net/Portals/13/Home30-Images/home30-Testimonials01_5.jpg" /></div>
<div class="home30-testimonial_text">
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium dolore nec eros eget nisl fringilla comm odo mque totam.</p> <small><span style="text-transform: inherit;">John Smith</span> </small>
<h6><small>Dnngo Buyer</small></h6> <small> </small></div>
</li>
</ul>
</div>
<div class="col-sm-4 h30c02b_six">
<ul class="Testimonials_tab home30-Testimonial01 xs-mb-0" data-autoplay="0" data-display-arrows="false" data-display-navigation="false">
<li>
<div class="Pic"><img alt="" class="img-responsive" src="http://demo8.dnngo.net/Portals/13/Home30-Images/home30-Testimonials01_6.jpg" /></div>
<div class="home30-testimonial_text">
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium dolore nec eros eget nisl fringilla comm odo mque totam.</p> <small><span style="text-transform: inherit;">Mary Chris</span> </small>
<h6><small>Dnngo Buyer</small></h6> <small> </small></div>
</li>
</ul>
</div>
</div>
</div>
</div>Featured Products (Full_Screen_PaneE · 1)
Code:
html
<div class="home30-bg04 pt-60"> <div class="dnn_layout pt-20"> <div class="content_mid clearfix"> <div class="pane_layout"> <div class="row home30-cont_03 animation fadeInUp"> <div class="col-sm-12"> <h2>Featured Products</h2> <h5 class="h4-color">The Populars Of Our Works</h5> <p>Proin condime ntum fermentum nunc. Etiam pharetra, erat sed ferm entum feugiat, velit mauris egestas quam, ut aliquam massa nisl quis neque. Etiam pharetra, erat sed ferm fermentum nunc.</p> </div> </div> </div> </div> </div> </div>Full_Screen_PaneE Section (Full_Screen_PaneE · 2)
Code:
html
Clean Design (Full_Screen_PaneE · 3)
Code:
html
<div data-pagination="false" class="carousel home30-carousel01" data-autoplay="3000" data-autoheight="false">
<div class="item">
<div class="photo_box ico_LeftAndRight_enter">
<div class="pic_box"> <img alt="" src="http://demo8.dnngo.net/Portals/13/Home30-Images/home30-photo_box01.jpg" class="img-responsive" />
<div class="ico">
<h3>Clean Design</h3>
<p>June 26th, 2014</p>
<a title="Single Image 1" class="LightBox_image_gallery1" href="http://demo8.dnngo.net/Portals/13/Home30-Images/home30-photo_box01.jpg"> <span class="fa fa-picture-o ico_left"></span></a> <a href="#" target="blank"><span class="fa fa-link ico_right"></span></a> </div>
<div class="shade"></div>
</div>
</div>
</div>
<div class="item">
<div class="photo_box ico_LeftAndRight_enter">
<div class="pic_box"> <img alt="" src="http://demo8.dnngo.net/Portals/13/Home30-Images/home30-photo_box02.jpg" class="img-responsive" />
<div class="ico">
<h3>Clean Design</h3>
<p>June 26th, 2014</p>
<a title="Single Image 1" class="LightBox_image_gallery1" href="http://demo8.dnngo.net/Portals/13/Home30-Images/home30-photo_box02.jpg"> <span class="fa fa-picture-o ico_left"></span></a> <a href="#" target="blank"><span class="fa fa-link ico_right"></span></a> </div>
<div class="shade"></div>
</div>
</div>
</div>
<div class="item">
<div class="photo_box ico_LeftAndRight_enter">
<div class="pic_box"> <img alt="" src="http://demo8.dnngo.net/Portals/13/Home30-Images/home30-photo_box03.jpg" class="img-responsive" />
<div class="ico">
<h3>Clean Design</h3>
<p>June 26th, 2014</p>
<a title="Single Image 1" class="LightBox_image_gallery1" href="http://demo8.dnngo.net/Portals/13/Home30-Images/home30-photo_box03.jpg"> <span class="fa fa-picture-o ico_left"></span></a> <a href="#" target="blank"><span class="fa fa-link ico_right"></span></a> </div>
<div class="shade"></div>
</div>
</div>
</div>
<div class="item">
<div class="photo_box ico_LeftAndRight_enter">
<div class="pic_box"> <img alt="" src="http://demo8.dnngo.net/Portals/13/Home30-Images/home30-photo_box04.jpg" class="img-responsive" />
<div class="ico">
<h3>Clean Design</h3>
<p>June 26th, 2014</p>
<a title="Single Image 1" class="LightBox_image_gallery1" href="http://demo8.dnngo.net/Portals/13/Home30-Images/home30-photo_box04.jpg"> <span class="fa fa-picture-o ico_left"></span></a> <a href="#" target="blank"><span class="fa fa-link ico_right"></span></a> </div>
<div class="shade"></div>
</div>
</div>
</div>
<div class="item">
<div class="photo_box ico_LeftAndRight_enter">
<div class="pic_box"> <img alt="" src="http://demo8.dnngo.net/Portals/13/Home30-Images/home30-photo_box05.jpg" class="img-responsive" />
<div class="ico">
<h3>Clean Design</h3>
<p>June 26th, 2014</p>
<a title="Single Image 1" class="LightBox_image_gallery1" href="http://demo8.dnngo.net/Portals/13/Home30-Images/home30-photo_box05.jpg"> <span class="fa fa-picture-o ico_left"></span></a> <a href="#" target="blank"><span class="fa fa-link ico_right"></span></a> </div>
<div class="shade"></div>
</div>
</div>
</div>
<div class="item">
<div class="photo_box ico_LeftAndRight_enter">
<div class="pic_box"> <img alt="" src="http://demo8.dnngo.net/Portals/13/Home30-Images/home30-photo_box06.jpg" class="img-responsive" />
<div class="ico">
<h3>Clean Design</h3>
<p>June 26th, 2014</p>
<a title="Single Image 1" class="LightBox_image_gallery1" href="http://demo8.dnngo.net/Portals/13/Home30-Images/home30-photo_box06.jpg"> <span class="fa fa-picture-o ico_left"></span></a> <a href="#" target="blank"><span class="fa fa-link ico_right"></span></a> </div>
<div class="shade"></div>
</div>
</div>
</div>
<div class="item">
<div class="photo_box ico_LeftAndRight_enter">
<div class="pic_box"> <img alt="" src="http://demo8.dnngo.net/Portals/13/Home30-Images/home30-photo_box07.jpg" class="img-responsive" />
<div class="ico">
<h3>Clean Design</h3>
<p>June 26th, 2014</p>
<a title="Single Image 1" class="LightBox_image_gallery1" href="http://demo8.dnngo.net/Portals/13/Home30-Images/home30-photo_box07.jpg"> <span class="fa fa-picture-o ico_left"></span></a> <a href="#" target="blank"><span class="fa fa-link ico_right"></span></a> </div>
<div class="shade"></div>
</div>
</div>
</div>
<div class="item">
<div class="photo_box ico_LeftAndRight_enter">
<div class="pic_box"> <img alt="" src="http://demo8.dnngo.net/Portals/13/Home30-Images/home30-photo_box08.jpg" class="img-responsive" />
<div class="ico">
<h3>Clean Design</h3>
<p>June 26th, 2014</p>
<a title="Single Image 1" class="LightBox_image_gallery1" href="http://demo8.dnngo.net/Portals/13/Home30-Images/home30-photo_box08.jpg"> <span class="fa fa-picture-o ico_left"></span></a> <a href="#" target="blank"><span class="fa fa-link ico_right"></span></a> </div>
<div class="shade"></div>
</div>
</div>
</div>
</div>About Us & Services (BottomPane)
Code:
html
<div class="row pt-30"> <div class="col-sm-12 home30-cont_03_top"> <h2>About Us & Services</h2> <p class="h4-color">Who We Are & What We Do</p> </div> </div> <div class="row home30-cont_03_bottom pb-30"> <div class="col-sm-3"> <div class="home30-loaded_list01"> <p>Web Design</p> <div class="progress progress-striped active"> <div class="bar animation animationwidth" data-width="95%"> </div> </div> <p>Html5 & CSS3</p> <div class="progress progress-striped active"> <div class="bar animation animationwidth" data-width="75%"> </div> </div> <p>JavaScript</p> <div class="progress progress-striped active"> <div class="bar animation animationwidth" data-width="80%"> </div> </div> <p>Photoshop</p> <div class="progress progress-striped active"> <div class="bar animation animationwidth" data-width="70%"> </div> </div> <p>dnn</p> <div class="progress progress-striped active"> <div class="bar animation animationwidth" data-width="85%"> </div> </div> </div> </div> <div class="col-sm-6"> <div class="horizontalTab_Top home30-horizontalTab_Top animation fadeInUp"> <ul class="resp-tabs-list"> <li> <div class="ht5One"><span>Who We Are</span></div> </li> <li> <div class="ht5Two"><span>What We Do</span></div> </li> <li> <div class="ht5Three"><span>How We Work</span></div> </li> </ul> <div class="resp-tabs-container"> <div class="resp_container"> <div class="resp_margin"> <div class="home30-bot_tab01"><img alt="" class="img-responsive" src="http://demo8.dnngo.net/Portals/13/Home30-Images/home30-tab_img.png" /> <div class="tab_right"> <p>Donec turpis justo, molestie ac pharetra vel, fringilla id urna. Nunc nibh diam, blandit vitae vehicula dapibus, euismod felis Integer et risus quis arcu ornare rhoncus.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sagittis porttitor lacus nec vehicula. Donec in ut odio libero.</p> <a href="#" target="blank"><span class="fa fa-angle-right"></span>More Information</a> </div> </div> </div> </div> <div class="resp_container"> <div class="resp_margin"> <div class="home30-bot_tab02"> <p>Fugiat dapibus, tellus ac cursus commodo, mauris sit condim eser ntumsi nibh, uum a justo vitaes amet risus amets un. Posi sectetut amet fermntum orem ipsum. sed diam non umy at volutpat.</p> <ul class="list_style"> <li><span class="fa fa-check-square-o"></span>Full Support</li> <li><span class="fa fa-check-square-o"></span>Modules Development</li> <li><span class="fa fa-check-square-o"></span>Icon Manager</li> <li><span class="fa fa-check-square-o"></span>Responsive Web</li> </ul> <ul class="list_style"> <li><span class="fa fa-check-square-o"></span>Many Different Homepage</li> <li><span class="fa fa-check-square-o"></span>New Header Styles</li> <li><span class="fa fa-check-square-o"></span>Browser Compatibility</li> <li><span class="fa fa-check-square-o"></span>Countless Features</li> </ul> </div> </div> </div> <div class="resp_container"> <div class="resp_margin"> <div class="home30-bot_tab03"> <h4>We Create Website For Your Business</h4> <p><span class="dropcaps_1">s</span>ed ut perspiciatis unde omnis iste natus error sit voluptatem accus antium 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. Integer nisl odio, vehicula bh diam,gravida felis in, eleifend posuere odio.Donec blandit eleifend consectetur. Donec turpis justo, molestie ac pharetra vel, fringilla id urna. Nunc nibh diam, blandit vitae vehicula dapibus, pulvinar eu sapien.</p> </div> </div> </div> </div> </div> </div> <div class="col-sm-3"> <ul class="home30-cont_04 animation fadeInRight"> <li class="home30-cont04_1"><span class="fa fa-desktop"></span> <h4>DNN Templates</h4> Quisque comdo mi purus</li> <li class="home30-cont04_2"><span class="fa fa-mobile"></span> <h4>Mobilesite</h4> Quisque comdo mi purus</li> <li class="home30-cont04_3"><span class="fa fa-magic"></span> <h4>Web Design</h4> Quisque comdo mi purus</li> <li class="home30-cont04_4"><span class="fa fa-expand"></span> <h4>Responsive</h4> Quisque comdo mi purus</li> </ul> </div> </div>About Us (FootPaneA)
Code:
html
<div class="home30-bot_about animation fadeInUp delay1"><img alt="" src="http://demo8.dnngo.net/Portals/13/Home30-Images/home30-logo.png" /> <p>Phasellus et nisl tellus. Etiam facilisis eu nisi scelerisque faucibus. Proin semper suscipit magna, nec imperdiet lacus semper vitae. Sed hendrerit enim non justo.</p> <p>Etiam facilisis eu nisi faucibus. Proin semper suscipit magna, nec imperdiet lacus semper.</p> <div class="home30-about_btn"><input placeholder="[email protected]" title="Name" type="text" /> <a href="#">Subscribe</a></div> </div>Recent News (FootPaneB)
Code:
html
<ul class="home30-bot_news animation fadeInUp delay2">
<li class="news01 clearfix">
<img alt="" src="http://demo8.dnngo.net/Portals/13/Home30-Images/home30-newsimg01.jpg" />
<h6>Meeting Report</h6>
<p>Donec pede justo, fringilla vel, aliquet nec, ut, imperdiet avitae justo. </p>
</li>
<li class="news02 clearfix">
<img alt="" src="http://demo8.dnngo.net/Portals/13/Home30-Images/home30-newsimg02.jpg" />
<h6>Functional Modules</h6>
<p>Donec pede justo, fringilla vel, aliquet nec, ut, imperdiet avitae justo. </p>
</li>
<li class="news03 clearfix">
<img alt="" src="http://demo8.dnngo.net/Portals/13/Home30-Images/home30-newsimg03.jpg" />
<h6>Page Samples</h6>
<p>Donec pede justo, fringilla vel, aliquet nec, ut, imperdiet avitae justo. </p>
</li>
</ul>Location (FootPaneC)
Code:
html
<div id="gmap01"></div>App Site | Recent Post | Comments (FooterPane)
Code:
html
<a href="#">App Site</a> | <a href="#">Recent Post</a> | <a href="#">Comments</a>