Home Version 21 Page Code
Home Version 21 is a One Page version — see One Page for how the anchor mechanism works.
Click to preview the Home Version 21 demo. View demo
Preview:
CONTACT INFO (HeaderPane)
Code:
html
<div class="header_top_info">
<p>Phone: (+086)-123-456-8910</p>
<p>Email: [email protected] </p>
<p>Skype: dnngo-linda </p>
<p>MSN : <a href="mailto:[email protected]">[email protected] </a> </p>
<p>Site: www.dnngo.net</p>
<br />
<ul class="social-icons social-icons3">
<a href="#"><span class="fa fa-facebook"></span></a> <a href="#"><span class="fa fa-twitter"></span></a> <a href="#"><span class="fa fa-linkedin"></span></a> <a href="#"><span class="fa fa-share-alt"></span></a> <a href="#"><span class="fa fa-google-plus"></span></a> <a href="#"><span class="fa fa-rss"></span></a>
</ul>
</div>Banner Section (BannerPane · 1)
Code:
html
<div data-menuanchor="true" data-scrollshownav="true" data-offset="0" class="anchorTag" data-title="Home"> </div>Banner Section (BannerPane · 2)
Code:
html
<div class="home21-banner animation">
<div class="home21-banner_bg">
<ul class="pic_tab preloader">
<li class="home21_banner01"></li>
<li class="home21_banner02"></li>
</ul>
<div class="home21-banner_text "><img alt="" src="http://demo8.dnngo.net/portals/17/Home21-Images/home21banner_1.png" class="animation_item delay2 flipInY" /></div>
</div>
<div class="home21-banner_bottom animation_item delay3 fadeInUp"><img alt="" src="http://demo8.dnngo.net/portals/17/Home21-Images/home21banner_2_1.png" /></div>
</div>The Latest News (TopPane)
Code:
html
<div class="row pb-30 xs-pb-0"> <div class="col-sm-6 animation fadeInLeft"> <div class="home21-text1"> <h3>The Latest News</h3> <div class="line"></div> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vulputate egestas sem, Curabitur tristique velit eu mauris venenatis. Morbi vulputate egestas sem, eu cursus ligu la ullamcorper non.</p> <div class="home21-blogstyle"> <div class="blog-date"> <span class="date">23</span> <span class="month">may</span> </div> <div class="blog-con"> <h2>How do you design interation?</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vulputate egestas sem, Curabitur velit eu mauris venenatis.</p> <div> <a href="#">(54)</a> attention / By admin</div> </div> </div> </div> </div> <div class="col-sm-6 animation fadeInRight"> <div class="panel-group home21-accordion" id="home21-accordion"> <div class="panel panel-default"> <div class="panel-heading"> <h3 class="panel-title"><a href="#item21_1" class="collapsed" data-toggle="collapse" data-parent="#home21-accordion"><span class="accordion_icon"></span>Web Design Service</a></h3> </div> <div class="panel-collapse collapse in" id="item21_1"> <div class="panel-body clearfix"> <img alt="" src="http://demo8.dnngo.net/portals/17/Home21-Images/home21-accordion-img1.jpg" /> <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vulputate egestas sem, eu cursus ligu la ullamcorper non. Curabitur tristique velitin eu mauris venenatis egestas. Lorem ipsum doloringeren.</div> </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"><a href="#item21_2" data-toggle="collapse" data-parent="#home21-accordion"><span class="accordion_icon"></span>Creative Service</a></h4> </div> <div class="panel-collapse collapse" id="item21_2"> <div class="panel-body clearfix"> <img alt="" src="http://demo8.dnngo.net/portals/17/Home21-Images/home21-accordion-img2.jpg" /> <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vulputate egestas sem, eu cursus ligu la ullamcorper non. Curabitur tristique velitin eu mauris venenatis egestas. Lorem ipsum doloringeren.</div> </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"><a href="#item21_3" class="collapsed" data-toggle="collapse" data-parent="#home21-accordion"><span class="accordion_icon"></span>SEO Solutions Service</a></h4> </div> <div class="panel-collapse collapse" id="item21_3"> <div class="panel-body clearfix"> <img alt="" src="http://demo8.dnngo.net/portals/17/Home21-Images/home21-accordion-img3.jpg" /> <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vulputate egestas sem, eu cursus ligu la ullamcorper non. Curabitur tristique velitin eu mauris venenatis egestas. Lorem ipsum doloringeren.</div> </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"><a href="#item21_4" class="collapsed" data-toggle="collapse" data-parent="#home21-accordion"><span class="accordion_icon"></span>Graphic Design Service</a></h4> </div> <div class="panel-collapse collapse" id="item21_4"> <div class="panel-body clearfix"> <img alt="" src="http://demo8.dnngo.net/portals/17/Home21-Images/home21-accordion-img4.jpg" /> <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vulputate egestas sem, eu cursus ligu la ullamcorper non. Curabitur tristique velitin eu mauris venenatis egestas. Lorem ipsum doloringeren.</div> </div> </div> </div> </div> </div> </div>Featured Works (Full_Screen_PaneB · 1)
Code:
html
<div data-menuanchor="true" data-scrollshownav="true" data-offset="-40" class="anchorTag" data-title="Featered Works"> </div> <div class="home21-backgroundImage"> <div class="dnn_layout pt-60 pb-60 xs-pb-0 sm-pb-0"> <div class="content_mid clearfix pt-10 pb-20 xs-pb-0 sm-pb-0"> <div class="home21-head-center animation scaleUp "> <h3>Featured Works</h3> <p class="pl-10 pr-10 color_444">Welcome to dnngo! readour getting stand guide, visit the blog for recent news and makeyourself at <span>home! you can find information about themeforest in our knowledgease.</span></p> <div class="line"></div> </div> <div class="isotope_grid home21-isotope "> <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 animation" data-min-width="282"> <div class="isotope_item"> <div class="photo_box animation_item scaleUp delay1"> <a href="http://demo8.dnngo.net/portals/17/Home21-Images/home21_isotope_img1_1.jpg" class="LightBox_image_gallery1" data-effect="mfp-move-from-top"> <div class="pic_box"> <img alt="" src="http://demo8.dnngo.net/portals/17/Home21-Images/home21_isotope_img1_1.jpg" /> <div class="content"> <div class="vertical_center_1"> <div class="vertical_center_2"> <div class="ico"><span class="fa fa-link"></span></div> </div> </div> </div> <div class="shade"></div> </div> </a> </div> </div> <div class="isotope_item"> <div class="photo_box animation_item scaleUp delay2"> <a href="http://demo8.dnngo.net/portals/17/Home21-Images/home21_isotope_img1_2.jpg" class="LightBox_image_gallery1" data-effect="mfp-move-from-top"> <div class="pic_box"> <img alt="" src="http://demo8.dnngo.net/portals/17/Home21-Images/home21_isotope_img1_2.jpg" /> <div class="content"> <div class="vertical_center_1"> <div class="vertical_center_2"> <div class="ico"><span class="fa fa-link"></span></div> </div> </div> </div> <div class="shade"></div> </div> </a> </div> </div> <div class="isotope_item"> <div class="photo_box animation_item scaleUp delay3"> <a href="http://demo8.dnngo.net/portals/17/Home21-Images/home21_isotope_img1_3.jpg" class="LightBox_image_gallery1" data-effect="mfp-move-from-top"> <div class="pic_box"> <img alt="" src="http://demo8.dnngo.net/portals/17/Home21-Images/home21_isotope_img1_3.jpg" /> <div class="content"> <div class="vertical_center_1"> <div class="vertical_center_2"> <div class="ico"><span class="fa fa-link"></span></div> </div> </div> </div> <div class="shade"></div> </div> </a> </div> </div> <div class="isotope_item"> <div class="photo_box animation_item scaleUp delay4"> <a href="http://demo8.dnngo.net/portals/17/Home21-Images/home21_isotope_img1_4.jpg" class="LightBox_image_gallery1" data-effect="mfp-move-from-top"> <div class="pic_box"> <img alt="" src="http://demo8.dnngo.net/portals/17/Home21-Images/home21_isotope_img1_4.jpg" /> <div class="content"> <div class="vertical_center_1"> <div class="vertical_center_2"> <div class="ico"><span class="fa fa-link"></span></div> </div> </div> </div> <div class="shade"></div> </div> </a> </div> </div> <div class="isotope_item"> <div class="photo_box animation_item scaleUp delay5"> <a href="http://demo8.dnngo.net/portals/17/Home21-Images/home21_isotope_img2_1.jpg" class="LightBox_image_gallery1" data-effect="mfp-move-from-top"> <div class="pic_box"> <img alt="" src="http://demo8.dnngo.net/portals/17/Home21-Images/home21_isotope_img2_1.jpg" /> <div class="content"> <div class="vertical_center_1"> <div class="vertical_center_2"> <div class="ico"><span class="fa fa-link"></span></div> </div> </div> </div> <div class="shade"></div> </div> </a> </div> </div> <div class="isotope_item"> <div class="photo_box animation_item scaleUp delay6"> <a href="http://demo8.dnngo.net/portals/17/Home21-Images/home21_isotope_img2_2.jpg" class="LightBox_image_gallery1" data-effect="mfp-move-from-top"> <div class="pic_box"> <img alt="" src="http://demo8.dnngo.net/portals/17/Home21-Images/home21_isotope_img2_2.jpg" /> <div class="content"> <div class="vertical_center_1"> <div class="vertical_center_2"> <div class="ico"><span class="fa fa-link"></span></div> </div> </div> </div> <div class="shade"></div> </div> </a> </div> </div> <div class="isotope_item"> <div class="photo_box animation_item scaleUp delay7"> <a href="http://demo8.dnngo.net/portals/17/Home21-Images/home21_isotope_img2_3.jpg" class="LightBox_image_gallery1" data-effect="mfp-move-from-top"> <div class="pic_box"> <img alt="" src="http://demo8.dnngo.net/portals/17/Home21-Images/home21_isotope_img2_3.jpg" /> <div class="content"> <div class="vertical_center_1"> <div class="vertical_center_2"> <div class="ico"><span class="fa fa-link"></span></div> </div> </div> </div> <div class="shade"></div> </div> </a> </div> </div> <div class="isotope_item"> <div class="photo_box animation_item scaleUp delay8"> <a href="http://demo8.dnngo.net/portals/17/Home21-Images/home21_isotope_img2_4.jpg" class="LightBox_image_gallery1" data-effect="mfp-move-from-top"> <div class="pic_box"> <img alt="" src="http://demo8.dnngo.net/portals/17/Home21-Images/home21_isotope_img2_4.jpg" /> <div class="content"> <div class="vertical_center_1"> <div class="vertical_center_2"> <div class="ico"><span class="fa fa-link"></span></div> </div> </div> </div> <div class="shade"></div> </div> </a> </div> </div> <div class="isotope_item"> <div class="photo_box animation_item scaleUp delay9"> <a href="http://demo8.dnngo.net/portals/17/Home21-Images/home21_isotope_img3_1.jpg" class="LightBox_image_gallery1" data-effect="mfp-move-from-top"> <div class="pic_box"> <img alt="" src="http://demo8.dnngo.net/portals/17/Home21-Images/home21_isotope_img3_1.jpg" /> <div class="content"> <div class="vertical_center_1"> <div class="vertical_center_2"> <div class="ico"><span class="fa fa-link"></span></div> </div> </div> </div> <div class="shade"></div> </div> </a> </div> </div> <div class="isotope_item"> <div class="photo_box animation_item scaleUp delay10"> <a href="http://demo8.dnngo.net/portals/17/Home21-Images/home21_isotope_img3_2.jpg" class="LightBox_image_gallery1" data-effect="mfp-move-from-top"> <div class="pic_box"> <img alt="" src="http://demo8.dnngo.net/portals/17/Home21-Images/home21_isotope_img3_2.jpg" /> <div class="content"> <div class="vertical_center_1"> <div class="vertical_center_2"> <div class="ico"><span class="fa fa-link"></span></div> </div> </div> </div> <div class="shade"></div> </div> </a> </div> </div> <div class="isotope_item"> <div class="photo_box animation_item scaleUp delay11"> <a href="http://demo8.dnngo.net/portals/17/Home21-Images/home21_isotope_img3_3.jpg" class="LightBox_image_gallery1" data-effect="mfp-move-from-top"> <div class="pic_box"> <img alt="" src="http://demo8.dnngo.net/portals/17/Home21-Images/home21_isotope_img3_3.jpg" /> <div class="content"> <div class="vertical_center_1"> <div class="vertical_center_2"> <div class="ico"><span class="fa fa-link"></span></div> </div> </div> </div> <div class="shade"></div> </div> </a> </div> </div> <div class="isotope_item"> <div class="photo_box animation_item scaleUp delay12"> <a href="http://demo8.dnngo.net/portals/17/Home21-Images/home21_isotope_img3_4.jpg" class="LightBox_image_gallery1" data-effect="mfp-move-from-top"> <div class="pic_box"> <img alt="" src="http://demo8.dnngo.net/portals/17/Home21-Images/home21_isotope_img3_4.jpg" /> <div class="content"> <div class="vertical_center_1"> <div class="vertical_center_2"> <div class="ico"><span class="fa fa-link"></span></div> </div> </div> </div> <div class="shade"></div> </div> </a> </div> </div> </div> </div> </div> </div> </div>Visual Page Builder (Full_Screen_PaneB · 2)
Code:
html
<div class="dnn_layout pt-60 pb-60 animation">
<div class="content_mid pt-10 pb-20">
<div class="home21-functionList-all">
<ul class="home21-functionList row">
<li class="col-sm-4 animation_item scaleUp delay1">
<div class="functiontitle"><em class="fa fa-codepen"></em>
<h4>Visual Page Builder</h4> </div>
<div class="functionMain">Lorem ipsum dolor sit amet, consectetur adipiscing elit Morbi vulputate egestas sem, eu cursus liguinger infor ullamcorper non.</div>
</li>
<li class="col-sm-4 animation_item scaleUp delay2">
<div class="functiontitle"><em class="fa fa-laptop"></em>
<h4>Modern & Retina Designed</h4> </div>
<div class="functionMain">Lorem ipsum dolor sit amet, consectetur adipiscing elit Morbi vulputate egestas sem, eu cursus liguinger infor ullamcorper non.</div>
</li>
<li class="col-sm-4 animation_item scaleUp delay3">
<div class="functiontitle"><em class="fa fa-hdd-o"></em>
<h4>Woocommerce Integrated</h4> </div>
<div class="functionMain">Lorem ipsum dolor sit amet, consectetur adipiscing elit Morbi vulputate egestas sem, eu cursus liguinger infor ullamcorper non.</div>
</li>
</ul>
<ul class="home21-functionList row">
<li class="col-sm-4 animation_item scaleUp delay4">
<div class="functiontitle"><em class="fa fa-code-fork"></em>
<h4>600-CSS Font Icons</h4> </div>
<div class="functionMain">Lorem ipsum dolor sit amet, consectetur adipiscing elit Morbi vulputate egestas sem, eu cursus liguinger infor ullamcorper non.</div>
</li>
<li class="col-sm-4 animation_item scaleUp delay5">
<div class="functiontitle"><em class="fa fa-sliders"></em>
<h4>Advanced Theme Options</h4> </div>
<div class="functionMain">Lorem ipsum dolor sit amet, consectetur adipiscing elit Morbi vulputate egestas sem, eu cursus liguinger infor ullamcorper non.</div>
</li>
<li class="col-sm-4 animation_item scaleUp delay6">
<div class="functiontitle"><em class="fa fa-files-o"></em>
<h4>Free Updates & Support</h4> </div>
<div class="functionMain">Lorem ipsum dolor sit amet, consectetur adipiscing elit Morbi vulputate egestas sem, eu cursus liguinger infor ullamcorper non.</div>
</li>
</ul>
<div class="home21-divider animation_item scaleUp delay7"><img alt="" src="http://demo8.dnngo.net/portals/17/Home21-Images/home21-divider-arrow.png" /></div>
<p class="text-center animation_item scaleUp delay8" style="margin-bottom:0;">
<a class="accent_btn11" href="http://store.dnnsoftware.com/home/product-details/PackageID/36589/r/cd57d7207c9d4266bc34">See Full Features</a>
</p>
</div>
</div>
</div>the Events (Full_Screen_PaneB · 3)
Code:
html
<div data-menuanchor="true" data-scrollshownav="true" data-offset="-40" class="anchorTag" data-title="Events"> </div>
<div class="home21-carousel home21-carousel-1">
<div class="carousel_main">
<div class="item"> <img alt="" class="img-responsive" src="http://demo8.dnngo.net/portals/17/Home21-Images/home21_tab_big1.jpg" />
<div class="home21-tab-title animation fadeInUp">
<div class="dnn_layout">
<div class="content_mid animation">
<h3 class="animation_item scaleUp delay1"><span class="lline"></span>the Events<span class="rline"></span></h3>
<p class="pl-10 pr-10 animation_item scaleUp delay2"><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit Morbi vulputate egestas sem, eu cursus liguinger infor</span>ullamcorper non. consectetur adipiscing eu cursus liguinger infor ullamcorper non.</p>
<p class="animation_item scaleUp delay3"><a class="accent_btn13" href="#">Read More</a></p>
</div>
</div>
</div>
</div>
<div class="item"> <img alt="" class="img-responsive" src="http://demo8.dnngo.net/portals/17/Home21-Images/home21_tab_big2.jpg" />
<div class="home21-tab-title">
<div class="dnn_layout">
<div class="content_mid">
<h3 class="animation_item scaleUp delay1"><span class="lline"></span>the Events<span class="rline"></span></h3>
<p class="pl-10 pr-10 animation_item scaleUp delay2"><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit Morbi vulputate egestas sem, eu cursus liguinger infor</span>ullamcorper non. consectetur adipiscing eu cursus liguinger infor ullamcorper non.</p>
<p class="animation_item scaleUp delay3"><a class="accent_btn13" href="http://store.dnnsoftware.com/home/product-details/PackageID/36589/r/cd57d7207c9d4266bc34">Read More</a></p>
</div>
</div>
</div>
</div>
<div class="item"> <img alt="" class="img-responsive" src="http://demo8.dnngo.net/portals/17/Home21-Images/home21_tab_big3.jpg" />
<div class="home21-tab-title">
<div class="dnn_layout">
<div class="content_mid">
<h3 class="animation_item scaleUp delay1"><span class="lline"></span>the Events<span class="rline"></span></h3>
<p class="pl-10 pr-10 animation_item scaleUp delay2"><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit Morbi vulputate egestas sem, eu cursus liguinger infor </span>ullamcorper non. consectetur adipiscing eu cursus liguinger infor ullamcorper non.</p>
<p class="animation_item scaleUp delay3"><a class="accent_btn13" href="http://store.dnnsoftware.com/home/product-details/PackageID/36589/r/cd57d7207c9d4266bc34">Read More</a></p>
</div>
</div>
</div>
</div>
<div class="item"> <img alt="" class="img-responsive" src="http://demo8.dnngo.net/portals/17/Home21-Images/home21_tab_big4.jpg" />
<div class="home21-tab-title">
<div class="dnn_layout">
<div class="content_mid">
<h3 class="animation_item scaleUp delay1"><span class="lline"></span>Our Blog<span class="rline"></span></h3>
<p class="pl-10 pr-10 animation_item scaleUp delay2"><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit Morbi vulputate egestas sem, eu cursus liguinger infor</span> ullamcorper non. consectetur adipiscing eu cursus liguinger infor ullamcorper non.</p>
<p class="animation_item scaleUp delay3"><a class="accent_btn13" href="http://store.dnnsoftware.com/home/product-details/PackageID/36589/r/cd57d7207c9d4266bc34">Read More</a></p>
</div>
</div>
</div>
</div>
</div>
<div class="carousel_nav">
<div class="item"><img alt="" src="http://demo8.dnngo.net/portals/17/Home21-Images/home21_tab_1.jpg" /> </div>
<div class="item"><img alt="" src="http://demo8.dnngo.net/portals/17/Home21-Images/home21_tab_2.png" /> </div>
<div class="item"><img alt="" src="http://demo8.dnngo.net/portals/17/Home21-Images/home21_tab_3.jpg" /> </div>
<div class="item"><img alt="" src="http://demo8.dnngo.net/portals/17/Home21-Images/home21_tab_4.jpg" /> </div>
</div>
</div>Our Services (Full_Screen_PaneB · 4)
Code:
html
<div data-menuanchor="true" data-scrollshownav="true" data-offset="-40" class="anchorTag" data-title="Services"> </div>
<div class="dnn_layout pt-60 pb-60">
<div class="content_mid animation pt-10 pb-10">
<div class="home21-head-center animation_item scaleUp delay1">
<h3>Our Services</h3>
<p class="pl-10 pr-10">Lorem ipsum dolor sit amet, consectetur adipiscing elit Morbi vulputate egestas sem, eu cursus liguinger <span>infor ullamcorper non. consectetur adipiscing .</span></p>
<div class="line"></div>
</div>
<div class="home21-services">
<div class="row">
<div class="col-sm-6 home21-services-left clearfix animation_item fadeInLeft delay2">
<div class="icon_border home21-services-color1"><em class="fa fa-laptop"></em></div>
<div class="text_hidden">
<h4>DNN Skins-Responsive</h4>
<h5>Sub Title Here</h5>
<div>phaLorem ipsum dolor sit amet, consectetur adipiscing elit Morbi vulputate eringegestas sem, infor ullamcorper.</div>
</div>
</div>
<div class="col-sm-6 home21-services-right clearfix animation_item fadeInRight delay2">
<div class="icon_border home21-services-color2"><em class="fa fa-gears"></em></div>
<div class="text_hidden">
<h4>Customize Everything</h4>
<h5>Sub Title Here</h5>
<div>phaLorem ipsum dolor sit amet, consectetur adipiscing elit Morbi vulputate eringegestas sem, infor ullamcorper.</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6 home21-services-left clearfix animation_item fadeInLeft delay3">
<div class="icon_border home21-services-color3"><em class="fa fa-thumbs-o-up"></em></div>
<div class="text_hidden">
<h4>Create Any Layout With Visual Layout</h4>
<h5>Sub Title Here</h5>
<div>phaLorem ipsum dolor sit amet, consectetur adipiscing elit Morbi vulputate eringegestas sem, infor ullamcorper.</div>
</div>
</div>
<div class="col-sm-6 home21-services-right clearfix animation_item fadeInRight delay3">
<div class="icon_border home21-services-color4"><em class="fa fa-eye"></em></div>
<div class="text_hidden">
<h4>E-commerce Site Development</h4>
<h5>Sub Title Here</h5>
<div>phaLorem ipsum dolor sit amet, consectetur adipiscing elit Morbi vulputate eringegestas sem, infor ullamcorper.</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6 home21-services-left clearfix animation_item fadeInLeft delay4">
<div class="icon_border home21-services-color5"><em class="fa fa-globe"></em></div>
<div class="text_hidden">
<h4>Translation And Multilingual</h4>
<h5>Sub Title Here</h5>
<div>phaLorem ipsum dolor sit amet, consectetur adipiscing elit Morbi vulputate eringegestas sem, infor ullamcorper.</div>
</div>
</div>
<div class="col-sm-6 home21-services-right clearfix animation_item fadeInRight delay4">
<div class="icon_border home21-services-color6"><em class="fa fa-bar-chart"></em></div>
<div class="text_hidden">
<h4>Site Building & Transfering</h4>
<h5>Sub Title Here</h5>
<div>phaLorem ipsum dolor sit amet, consectetur adipiscing elit Morbi vulputate eringegestas sem, infor ullamcorper.</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6 home21-services-left clearfix animation_item fadeInLeft delay5">
<div class="icon_border home21-services-color7"><em class="fa fa-bookmark-o"></em></div>
<div class="text_hidden">
<h4>Supports WordPress Post Formats</h4>
<h5>Sub Title Here</h5>
<div>phaLorem ipsum dolor sit amet, consectetur adipiscing elit Morbi vulputate eringegestas sem, infor ullamcorper.</div>
</div>
</div>
<div class="col-sm-6 home21-services-right clearfix animation_item fadeInRight delay5">
<div class="icon_border home21-services-color8"><em class="fa fa-paste"></em></div>
<div class="text_hidden">
<h4>Dnn Module Development</h4>
<h5>Sub Title Here</h5>
<div>phaLorem ipsum dolor sit amet, consectetur adipiscing elit Morbi vulputate eringegestas sem, infor ullamcorper.</div>
</div>
</div>
</div>
</div>
</div>
</div>What We Do (Full_Screen_PaneB · 5)
Code:
html
<div class="home21-backgroundImage">
<div class="dnn_layout pt-60 pb-60">
<div class="content_mid clearfix animation pt-10">
<div class="home21-head-center scaleUp animation_item scaleUp delay1 ">
<h3>What We Do</h3>
<div class="line"></div>
</div>
<div class="home21-chart-list row">
<div class="col-sm-6 col-md-3 animation_item scaleUp delay2">
<div class="home21-percentage" data-percent="90">
<div class="percentage_inner"><span>0</span>%</div>
</div>
<div class="line"></div>
<h4>Web Design</h4>
<p>Consectetur dipiscing elit Morbi vulputate eringegestas sem eu cursus liguinger infor ullamcorper non consectetur eu cursus.</p>
</div>
<div class="col-sm-6 col-md-3 animation_item scaleUp delay3">
<div class="home21-percentage" data-percent="95">
<div class="percentage_inner"><span>0</span>%</div>
</div>
<div class="line"></div>
<h4>HTML5 & CSS3</h4>
<p>Consectetur dipiscing elit Morbi vulputate eringegestas sem eu cursus liguinger infor ullamcorper non consectetur eu cursus.</p>
</div>
<div class="col-sm-6 col-md-3 animation_item scaleUp delay4">
<div class="home21-percentage" data-percent="92">
<div class="percentage_inner"><span>0</span>%</div>
</div>
<div class="line"></div>
<h4>Graphic Design</h4>
<p>Consectetur dipiscing elit Morbi vulputate eringegestas sem eu cursus liguinger infor ullamcorper non consectetur eu cursus.</p>
</div>
<div class="col-sm-6 col-md-3 animation_item scaleUp delay5">
<div class="home21-percentage" data-percent="96">
<div class="percentage_inner"><span>0</span>%</div>
</div>
<div class="line"></div>
<h4>DNN Branding</h4>
<p>Consectetur dipiscing elit Morbi vulputate eringegestas sem eu cursus liguinger infor ullamcorper non consectetur eu cursus.</p>
</div>
</div>
</div>
</div>
</div>Best App Slider Our Unique design (Full_Screen_PaneB · 6)
Code:
html
<div class="home21-backgroundImage2 pt-10"> <div class="dnn_layout pt-60"> <div class="content_mid clearfix"> <div class="row home21-app"> <div class="col-sm-6 home21-app-left animation fadeInLeft"> <img alt="" class="img-responsive home21-app-pad" src="http://demo8.dnngo.net/portals/17/Home21-Images/home21_img1_1.png" /> <img alt="" class="img-responsive home21-app-hand" src="http://demo8.dnngo.net/portals/17/Home21-Images/home21_img1_2.png" /> </div> <div class="col-sm-6 home21-app-content animation fadeInRight"> <h3><em class="fa fa-dot-circle-o"></em>Best App Slider <span>Our Unique design</span></h3> <p>Live Demo gives you a visual perception of what you will get after purchasing the theme.</p> <ul class="home21-list"> <li><em class="fa fa-circle-o"></em>phaLorem ipsum dolor sit amet, consectetur elit Morbi non vulputate.</li> <li><em class="fa fa-circle-o"></em>Eringegestas sem eu cursus liguinger infor llamcorper eu cursus</li> <li><em class="fa fa-circle-o"></em>Infor cursus liguinger infor non. adipiscing infor cursus liguinger</li> <li><em class="fa fa-circle-o"></em>Infor ullamcorper cursus liguinger</li> </ul> <p> <a href="#" class="accent_btn6">TRY NEW APP</a> <a href="http://store.dnnsoftware.com/home/product-details/PackageID/36589/r/cd57d7207c9d4266bc34" class="accent_btn5">PURCHASE NOW</a> </p> </div> </div> </div> </div> </div><div class="pb-20"></div>Keep In Touch (RowFour_Grid6_Pane1 · 1)
Code:
html
<div class="animation fadeInLeft"> <div data-menuanchor="true" data-scrollshownav="true" data-offset="-140" class="anchorTag" data-title="Contact Us"> </div> <p class="color_444" style="margin-bottom:0;">Lorem ipsum dolor sit amet, consectetur adipiscing elit Morbi vulputate egestas sem, eu cursus liguinger infor ullamcorper non. consectetur adipiscing .</p> <div class="home21-social-list"> <a href="#"><em class="fa fa-facebook"></em></a> <a href="#"><em class="fa fa-twitter"></em></a> <a href="#"><em class="fa fa-rss"></em></a> <a href="#"><em class="fa fa-google-plus"></em></a> <a href="#"><em class="fa fa-share-alt"></em></a> <a href="#"><em class="fa fa-dribbble"></em></a> <a href="#"><em class="fa fa-linkedin"></em></a> <a href="#"><em class="fa fa-pinterest"></em></a> <a href="#"><em class="fa fa-skype"></em></a> <a href="#"><em class="fa fa-maxcdn"></em></a> <a href="#"><em class="fa fa-tumblr"></em></a> </div> </div>Form Section (RowFour_Grid6_Pane1)
This section uses the DNNGo PowerForms module — see PowerForms.
Meet Our Team (RowFour_Grid6_Pane2)
Code:
html
<ul data-display-arrows="false" data-position="fade" class="Testimonials_tab home21-Testimonials animation fadeInRight">
<li>
<div class="photo_box">
<a href="#">
<div class="pic_box">
<img alt="" src="http://demo8.dnngo.net/portals/17/Home21-Images/home21_team_img1.jpg" />
<div class="ico"><em class="fa fa-plus"></em></div>
<div class="shade"></div>
</div>
</a>
<div class="text_sytle_10">
<h3>Bela Chrisis <span>Manager</span></h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit Morbi vulputateer egestas sem, eu cursus liguinger infor ullamcorper non.</p>
</div>
</div>
<div class="photo_box">
<a href="#">
<div class="pic_box">
<img alt="" src="http://demo8.dnngo.net/portals/17/Home21-Images/home21_team_img2.jpg" />
<div class="ico"><em class="fa fa-plus"></em></div>
<div class="shade"></div>
</div>
</a>
<div class="text_sytle_10">
<h3>Harrallog Chri <span>Dnngo Buyerr</span></h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit Morbi vulputateer egestas sem, eu cursus liguinger infor ullamcorper non.</p>
</div>
</div>
<div class="photo_box">
<a href="#">
<div class="pic_box">
<img alt="" src="http://demo8.dnngo.net/portals/17/Home21-Images/home21_team_img3.jpg" />
<div class="ico"><em class="fa fa-plus"></em></div>
<div class="shade"></div>
</div>
</a>
<div class="text_sytle_10">
<h3>John Doe <span>Web Designer</span></h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit Morbi vulputateer egestas sem, eu cursus liguinger infor ullamcorper non.</p>
</div>
</div>
</li>
<li>
<div class="photo_box">
<a href="#">
<div class="pic_box">
<img alt="" src="http://demo8.dnngo.net/portals/17/Home21-Images/home21_team_img4.jpg" />
<div class="ico"><em class="fa fa-plus"></em></div>
<div class="shade"></div>
</div>
</a>
<div class="text_sytle_10">
<h3>Harrallog Chri <span>Dnngo Buyerr</span></h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit Morbi vulputateer egestas sem, eu cursus liguinger infor ullamcorper non.</p>
</div>
</div>
<div class="photo_box">
<a href="#">
<div class="pic_box">
<img alt="" src="http://demo8.dnngo.net/portals/17/Home21-Images/home21_team_img5.jpg" />
<div class="ico"><em class="fa fa-plus"></em></div>
<div class="shade"></div>
</div>
</a>
<div class="text_sytle_10">
<h3>John Doe <span>Web Designer</span></h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit Morbi vulputateer egestas sem, eu cursus liguinger infor ullamcorper non.</p>
</div>
</div>
<div class="photo_box">
<a href="#">
<div class="pic_box">
<img alt="" src="http://demo8.dnngo.net/portals/17/Home21-Images/home21_team_img6.jpg" />
<div class="ico"><em class="fa fa-plus"></em></div>
<div class="shade"></div>
</div>
</a>
<div class="text_sytle_10">
<h3>Bela Chrisis <span>Manager</span></h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit Morbi vulputateer egestas sem, eu cursus liguinger infor ullamcorper non.</p>
</div>
</div>
</li>
<li>
<div class="photo_box">
<a href="#">
<div class="pic_box">
<img alt="" src="http://demo8.dnngo.net/portals/17/Home21-Images/home21_team_img3.jpg" />
<div class="ico"><em class="fa fa-plus"></em></div>
<div class="shade"></div>
</div>
</a>
<div class="text_sytle_10">
<h3>John Doe <span>Web Designer</span></h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit Morbi vulputateer egestas sem, eu cursus liguinger infor ullamcorper non.</p>
</div>
</div>
<div class="photo_box">
<a href="#">
<div class="pic_box">
<img alt="" src="http://demo8.dnngo.net/portals/17/Home21-Images/home21_team_img1.jpg" />
<div class="ico"><em class="fa fa-plus"></em></div>
<div class="shade"></div>
</div>
</a>
<div class="text_sytle_10">
<h3>Bela Chrisis <span>Manager</span></h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit Morbi vulputateer egestas sem, eu cursus liguinger infor ullamcorper non.</p>
</div>
</div>
<div class="photo_box">
<a href="#">
<div class="pic_box">
<img alt="" src="http://demo8.dnngo.net/portals/17/Home21-Images/home21_team_img2.jpg" />
<div class="ico"><em class="fa fa-plus"></em></div>
<div class="shade"></div>
</div>
</a>
<div class="text_sytle_10">
<h3>Harrallog Chri <span>Dnngo Buyerr</span></h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit Morbi vulputateer egestas sem, eu cursus liguinger infor ullamcorper non.</p>
</div>
</div>
</li>
</ul>Full_Screen_PaneD Section (Full_Screen_PaneD · 1)
Code:
html
<div class="backgroundImage21 mt-30 pt-10 pb-10"> <div class="dnn_layout pt-60 pb-60"> <div class="content_mid clearfix"> <div class="row home21-logos animation"> <div class="col-sm-4 col-md-2 animation_item scaleUp delay1"> <img alt="" class="img-responsive" src="http://demo8.dnngo.net/portals/17/Home21-Images/home21-logos1.jpg" /></div> <div class="col-sm-4 col-md-2 animation_item scaleUp delay2"> <img alt="" class="img-responsive" src="http://demo8.dnngo.net/portals/17/Home21-Images/home21-logos2.jpg" /></div> <div class="col-sm-4 col-md-2 animation_item scaleUp delay3"> <img alt="" class="img-responsive" src="http://demo8.dnngo.net/portals/17/Home21-Images/home21-logos3.jpg" /></div> <div class="col-sm-4 col-md-2 animation_item scaleUp delay4"> <img alt="" class="img-responsive" src="http://demo8.dnngo.net/portals/17/Home21-Images/home21-logos4.jpg" /></div> <div class="col-sm-4 col-md-2 animation_item scaleUp delay5"> <img alt="" class="img-responsive" src="http://demo8.dnngo.net/portals/17/Home21-Images/home21-logos5.jpg" /></div> <div class="col-sm-4 col-md-2 animation_item scaleUp delay6"> <img alt="" class="img-responsive" src="http://demo8.dnngo.net/portals/17/Home21-Images/home21-logos6.jpg" /></div> </div> </div> </div> </div>Our Pricing (Full_Screen_PaneD · 2)
Code:
html
<div data-menuanchor="true" data-scrollshownav="true" data-offset="-40" class="anchorTag" data-title="Pricing"> </div> <div class="home21-backgroundImage3"> <div class="dnn_layout pt-60 pb-40"> <div class="content_mid clearfix animation pt-10"> <div class="home21-head-center animation_item scaleUp delay1"> <h3>Our Pricing</h3> <p class="pl-10 pr-10">Lorem ipsum dolor sit amet, consectetur adipiscing elit Morbi vulputate egestas sem, eu cursus liguinger infor ullamcorper non. consectetur adipiscing .</p> <div class="line"></div> </div> <div class="price-table home21-price-table row"> <div class="col-sm-4 animation_item scaleUp delay1"> <div class="price_border"> <div class="price_title"> <h2 class="color_2_bg">Personal</h2> <div class="price_box">Fr <span class="color_2">$99</span> Per Months</div> </div> <div class="price_holder"> <ul> <li>01 PSD Template</li> <li>02 DotNetNuke</li> <li>03 Business Email</li> <li>04 Hosting</li> <li>05 Domain(.COM)</li> <li>Customize Design</li> </ul> <a class="btn color_2_h" href="http://store.dnnsoftware.com/home/product-details/PackageID/36589/r/cd57d7207c9d4266bc34">BUY NOW</a> </div> </div> </div> <div class="col-sm-4 animation_item scaleUp delay2"> <div class="price_border"> <div class="price_title"> <h2 class="color_3_bg">Business</h2> <div class="price_box">Fr <span class="color_3">$99</span> Per Months</div> </div> <div class="price_holder"> <ul> <li>01 PSD Template</li> <li>02 DotNetNuke</li> <li>03 Business Email</li> <li>04 Hosting</li> <li>05 Domain(.COM)</li> <li>Customize Design</li> </ul> <a class="btn color_3_h" href="http://store.dnnsoftware.com/home/product-details/PackageID/36589/r/cd57d7207c9d4266bc34">BUY NOW</a> </div> </div> </div> <div class="col-sm-4 animation_item scaleUp delay3"> <div class="price_border"> <div class="price_title"> <h2 class="color_4_bg">Permium</h2> <div class="price_box">Fr <span class="color_4">$99</span> Per Months</div> </div> <div class="price_holder"> <ul> <li>01 PSD Template</li> <li>02 DotNetNuke</li> <li>03 Business Email</li> <li>04 Hosting</li> <li>05 Domain(.COM)</li> <li>Customize Design</li> </ul> <a class="btn color_4_h" href="http://store.dnnsoftware.com/home/product-details/PackageID/36589/r/cd57d7207c9d4266bc34">BUY NOW</a> </div> </div> </div> </div> </div> </div> </div><div class="pb-20"></div>Our History (RowSeventeen_Grid6_Pane1)
Code:
html
<div class="home21-time-line animation fadeInLeft" data-jquery-scrollbar="jqueryScrollbarOptions">
<ul>
<li>
<div class="time_date"><span class="month">08</span><span class="years">2013</span></div>
<div class="time_text">
<h4>vivanmus vestibulum nulla</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit Morbi inr vulputateer egestas sem, eu cursus.</p>
</div>
</li>
<li>
<div class="time_date"><span class="month">01</span><span class="years">2014</span></div>
<div class="time_text">
<h4>vivanmus vestibulum nulla</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit Morbi inr vulputateer egestas sem, eu cursus . consectetur adipiscing elit Morbi cursus.</p>
</div>
</li>
<li>
<div class="time_date"><span class="month">03</span><span class="years">2014</span></div>
<div class="time_text">
<h4>vivanmus vestibulum</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing.</p>
</div>
</li>
<li>
<div class="time_date"><span class="month">03</span><span class="years">2015</span></div>
<div class="time_text">
<h4>vivanmus vestibulum</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing.</p>
</div>
</li>
<li>
<div class="time_date"><span class="month">04</span><span class="years">2015</span></div>
<div class="time_text">
<h4>vivanmus vestibulum nulla</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit Morbi inr vulputateer egestas sem, eu cursus .Lorem ipsum dolor sit amet, consectetur adipiscing elit Morbi cursus .</p>
</div>
</li>
<li>
<div class="time_date"><span class="month">06</span><span class="years">2015</span></div>
<div class="time_text">
<h4>vivanmus vestibulum nulla</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit Morbi inr vulputateer egestas sem, eu cursus .Lorem ipsum dolor sit amet, consectetur adipiscing elit Morbi cursus .</p>
</div>
</li>
<li>
<div class="time_date"><span class="month">07</span><span class="years">2015</span></div>
<div class="time_text">
<h4>vivanmus vestibulum nulla</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit Morbi inr vulputateer egestas sem, eu cursus .</p>
</div>
</li>
<li>
<div class="time_date"><span class="month">08</span><span class="years">2015</span></div>
<div class="time_text">
<h4>vivanmus vestibulum nulla</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit Morbi inr vulputateer egestas sem, eu cursus .Lorem ipsum dolor sit amet, consectetur adipiscing elit Morbi cursus .</p>
</div>
</li>
<li>
<div class="time_date"><span class="month">12</span><span class="years">2015</span></div>
<div class="time_text">
<h4>vivanmus vestibulum nulla</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit Morbi inr vulputateer egestas sem, eu cursus .Lorem ipsum dolor sit amet, consectetur adipiscing elit Morbi cursus .</p>
</div>
</li>
</ul>
</div>Our Skills (RowSeventeen_Grid6_Pane2)
Code:
html
<div class="home21-loaded-list animation fadeInRight">
<p>CSS/HTML</p>
<div class="progress progress-striped active">
<div data-width="85%" class="progress-bar animation animationwidth"><span></span></div>
</div>
<p>Photoshop</p>
<div class="progress progress-striped active">
<div data-width="100%" class="progress-bar animation animationwidth"><span></span></div>
</div>
<p>Wordpress</p>
<div class="progress progress-striped active">
<div data-width="75%" class="progress-bar animation animationwidth"><span></span> </div>
</div>
<p>SEO</p>
<div class="progress progress-striped active">
<div data-width="75%" class="progress-bar animation animationwidth"><span></span></div>
</div>
<p>Wordpress</p>
<div class="progress progress-striped active">
<div data-width="80%" class="progress-bar animation animationwidth"><span></span></div>
</div>
<p>Photography</p>
<div class="progress progress-striped active">
<div data-width="80%" class="progress-bar animation animationwidth"><span></span></div>
</div>
</div>The DNN is the ultimate solution to create a moder (Full_Screen_PaneH)
Code:
html
<div class="home21-backgroundImage mt-30"> <div class="dnn_layout pt-60 pb-60"> <div class="content_mid clearfix"> <div class="row animation fadeIn"> <div class="col-sm-8 home21_text2"> The DNN is the ultimate solution to create a modern website in no time. </div> <div class="col-sm-4 home21_right_btn"> <a href="http://store.dnnsoftware.com/home/product-details/PackageID/36589/r/cd57d7207c9d4266bc34" class="accent_btn12" target="blank">Buy It Now</a> </div> </div> </div> </div> </div>About Us (FootPaneD)
Code:
html
<div class="home21-foot-about animation scaleUp delay1"> <img alt="" class="img-responsive" src="http://demo8.dnngo.net/portals/17/Home21-Images/Home21_footlogo.png" />
<p>Lorem ipsum dolor sit amet , consectetur input adipiscing elit Morbi inr vulputa . Lorem ipsum dolor sit amet, Morbi inr vulputa. <a href="#">More!</a></p>
<div class="foot-about-input">
<input class="foot-input" placeholder="[email protected]" type="text" />
<input value=">" class="submit" type="submit" />
</div>
</div>Portfolio (FootPaneE)
Code:
html
<ul data-display-arrows="false" data-position="fade" class=" Testimonials_tab home21-Testimonials2 animation scaleUp delay2">
<li>
<div class="row">
<div class="col-xs-6">
<div class="photo_box img_zoom"> <a href="#">
<div class="pic_box"> <img alt="" src="http://demo8.dnngo.net/portals/17/Home21-Images/home21-foot_portfolio1.jpg" />
<div class="shade"></div>
</div>
</a> </div>
</div>
<div class="col-xs-6">
<div class="photo_box img_zoom"> <a href="#">
<div class="pic_box"> <img alt="" src="http://demo8.dnngo.net/portals/17/Home21-Images/home21-foot_portfolio2.jpg" />
<div class="shade"></div>
</div>
</a> </div>
</div>
</div>
<div class="row">
<div class="col-xs-6">
<div class="photo_box img_zoom"> <a href="#">
<div class="pic_box"> <img alt="" src="http://demo8.dnngo.net/portals/17/Home21-Images/home21-foot_portfolio3.jpg" />
<div class="shade"></div>
</div>
</a> </div>
</div>
<div class="col-xs-6">
<div class="photo_box img_zoom"> <a href="#">
<div class="pic_box"> <img alt="" src="http://demo8.dnngo.net/portals/17/Home21-Images/home21-foot_portfolio4.jpg" />
<div class="shade"></div>
</div>
</a> </div>
</div>
</div>
</li>
<li>
<div class="row">
<div class="col-xs-6">
<div class="photo_box img_zoom"> <a href="#">
<div class="pic_box"> <img alt="" src="http://demo8.dnngo.net/portals/17/Home21-Images/home21-foot_portfolio5.jpg" />
<div class="shade"></div>
</div>
</a> </div>
</div>
<div class="col-xs-6">
<div class="photo_box img_zoom"> <a href="#">
<div class="pic_box"> <img alt="" src="http://demo8.dnngo.net/portals/17/Home21-Images/home21-foot_portfolio6.jpg" />
<div class="shade"></div>
</div>
</a> </div>
</div>
</div>
<div class="row">
<div class="col-xs-6">
<div class="photo_box img_zoom"> <a href="#">
<div class="pic_box"> <img alt="" src="http://demo8.dnngo.net/portals/17/Home21-Images/home21-foot_portfolio7.jpg" />
<div class="shade"></div>
</div>
</a> </div>
</div>
<div class="col-xs-6">
<div class="photo_box img_zoom"> <a href="#">
<div class="pic_box"> <img alt="" src="http://demo8.dnngo.net/portals/17/Home21-Images/home21-foot_portfolio8.jpg" />
<div class="shade"></div>
</div>
</a> </div>
</div>
</div>
</li>
<li>
<div class="row">
<div class="col-xs-6">
<div class="photo_box img_zoom"> <a href="#">
<div class="pic_box"> <img alt="" src="http://demo8.dnngo.net/portals/17/Home21-Images/home21-foot_portfolio9.jpg" />
<div class="shade"></div>
</div>
</a> </div>
</div>
<div class="col-xs-6">
<div class="photo_box img_zoom"> <a href="#">
<div class="pic_box"> <img alt="" src="http://demo8.dnngo.net/portals/17/Home21-Images/home21-foot_portfolio10.jpg" />
<div class="shade"></div>
</div>
</a> </div>
</div>
</div>
<div class="row">
<div class="col-xs-6">
<div class="photo_box img_zoom"> <a href="#">
<div class="pic_box"> <img alt="" src="http://demo8.dnngo.net/portals/17/Home21-Images/home21-foot_portfolio11.jpg" />
<div class="shade"></div>
</div>
</a> </div>
</div>
<div class="col-xs-6">
<div class="photo_box img_zoom"> <a href="#">
<div class="pic_box"> <img alt="" src="http://demo8.dnngo.net/portals/17/Home21-Images/home21-foot_portfolio12.jpg" />
<div class="shade"></div>
</div>
</a> </div>
</div>
</div>
</li>
</ul>Testimonials (FootPaneF)
Code:
html
<ul data-autoplay="3000" data-display-navigation="false" data-position="fade" class=" Testimonials_tab home21-Testimonials3 animation scaleUp delay3">
<li>
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit Morbi inr vulputateeringer egestas sem.</p>
<small><span>Laura Nixon</span>CEO<img alt="" src="http://demo8.dnngo.net/portals/17/Home21-Images/home21-foot_testimonials3-1.jpg" /></small>
</blockquote>
</li>
<li>
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit Morbi inr vulputateeringer egestas sem.</p>
<small><span>Norman Clide</span>CEO<img alt="" src="http://demo8.dnngo.net/portals/17/Home21-Images/home21-foot_testimonials3-2.jpg" /></small>
</blockquote>
</li>
<li>
<blockquote>
<p>Welcome to dnngo! readour getting stand guide, visit the blog for recent news and make yourself at home!</p>
<small><span>Norman Clide</span>CEO<img alt="" src="http://demo8.dnngo.net/portals/17/Home21-Images/home21-foot_testimonials3-3.jpg" /></small>
</blockquote>
</li>
</ul>Friendly Tags (FootPaneG)
Code:
html
<div class="home21-foot-tags animation scaleUp delay4"> <a href="#">Articles</a><a href="http://store.dnnsoftware.com/home/product-details/PackageID/36589/r/cd57d7207c9d4266bc34" target="blank">Business</a><a href="#">Case study</a><a href="#">Entertainment</a><a href="#">Games</a><a href="#">Health</a><a href="#">Interviews</a><a href="#">Music</a><a href="http://store.dnnsoftware.com/home/product-details/PackageID/36589/r/cd57d7207c9d4266bc34" target="blank">News</a><a href="#">Notes</a><a href="#">Reviews</a><a href="#">Traveling</a><a href="#">Entertainment</a><a href="#">Games</a><a href="#">Health</a><a href="#">Interviews</a><a href="#">Music</a><a href="http://store.dnnsoftware.com/home/product-details/PackageID/36589/r/cd57d7207c9d4266bc34" target="blank">News</a> </div>FooterPane Section (FooterPane)
Code:
html
<div class="foot_icon">
<a href="#"><em class="fa fa-pinterest"></em></a>
<a href="#"><em class="fa fa-twitter"></em></a>
<a href="#"><em class="fa fa-facebook"></em></a>
<a href="#"><em class="fa fa-dribbble"></em></a>
<a href="#"><em class="fa fa-instagram"></em></a>
</div>