Home Version 27 Page Code

Click to preview the Home Version 27 demo. View demo

Preview:

Email : dnnskindev@gmailcom Monday to Friday (HeaderPane)

Code:

<div class="head_topa">
<span class="fa fa-envelope-o"></span>
Email :  dnnskindev@gmailcom
<span class="topa_width"></span>
<span class="fa fa-clock-o"></span>
Monday to Friday
</div>

HeaderPaneB Section (HeaderPaneB)

Code:

<div class="home27-social clearfix">
<a href="#" class="color-1"><span class="fa fa-facebook"></span></a>
<a href="#" class="color-2"><span class="fa fa-twitter"></span></a>
<a href="#" class="color-3"><span class="fa fa-linkedin"></span></a>
</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.

Create interactive, engaging and satisfying websit (BannerPane · 2)

Code:

<div class="home27-SectionStyle01 pt-60 pb-60">
<div class="dnn_layout">
<div class="content_mid clearfix">
<div class="pane_layout">
<div class="row">
<div class="col-sm-12">
<div class="home27-conb animation zoomIn">
<h3> Create interactive, engaging and satisfying website</h3>
<p>We are a team comprised of experienced employers whose aim is to provide you with compelling, engaging and satisfying skins.</p>
<div class="clearfix visible-sm"></div>
<a class="home27-btn_style1" href="#" target="blank">Start Your Business</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

Portfolios (Full_Screen_PaneA · 1)

Code:

<div class="pb-40"> <div class="dnn_layout"> <div class="content_mid clearfix"> <div class="pane_layout"> <div class="row"> <div class="col-sm-12"> <div class="home27_con_titlebox"> <div class="home27_con_title1"> <h2>Portfolios</h2> </div> </div> <p class="home27_con_titlep"> Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium dolore mque laudan tium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae consectetur adipiscing elit. </p> <div class="home27_cona clearfix animation zoomIn"> <div class="leftone"> <div class="photo_box img_zoom ico_zoom the1"> <a href="#" target="blank"> <div class="pic_box"> <img alt="" src="http://demo8.dnngo.net/Portals/13/Home27-Images/home27-Portfolios01.jpg" /> <div class="content"> <div class="vertical_center_1"> <div class="vertical_center_2"> <h3>Full Support</h3> <p>March 15th, 2014</p> </div> </div> </div> <div class="shade"></div> </div> </a> </div> <div class="photo_box img_zoom ico_zoom the2"> <a href="#" target="blank"> <div class="pic_box"> <img alt="" src="http://demo8.dnngo.net/Portals/13/Home27-Images/home27-Portfolios02.jpg" /> <div class="content"> <div class="vertical_center_1"> <div class="vertical_center_2"> <h3>Responsive Web</h3> <p>April 08th, 2014</p> </div> </div> </div> <div class="shade"></div> </div> </a> </div> </div> <div class="rightone"> <div class="photo_box img_zoom ico_zoom the3"> <a href="#" target="blank"> <div class="pic_box"> <img alt="" src="http://demo8.dnngo.net/Portals/13/Home27-Images/home27-Portfolios03.jpg" /> <div class="content"> <div class="vertical_center_1"> <div class="vertical_center_2"> <h3>Responsive Web</h3> <p>July 27th, 2014</p> </div> </div> </div> <div class="shade"></div> </div> </a> </div> </div> <div class="clear"></div> <div class="photo_box img_zoom ico_zoom the4"> <a href="#" target="blank"> <div class="pic_box"> <img alt="" src="http://demo8.dnngo.net/Portals/13/Home27-Images/home27-Portfolios04.jpg" /> <div class="content"> <div class="vertical_center_1"> <div class="vertical_center_2"> <h3>Attractive Theme </h3> <p>September 13th, 2014</p> </div> </div> </div> <div class="shade"></div> </div> </a> </div> </div> </div> </div> </div> </div> </div> </div>

Find More Photos Create A Portfolio 0 Products 0 R (Full_Screen_PaneA · 2)

Code:

<div class="home27-conb2"> <a href="#" target="blank" class="linker">Find More Photos</a> <a href="#" target="blank" class="linker">Create A Portfolio</a> <div class="clearfix"></div> <div class="home27-number_Animation pt-50 clearfix pb-30"> <div class="number_out "> <div class="nun_out_bg"></div> <div class="number_main animation fadeInUp delay1"> <div class="number_box"> <span data-number="12,500" class="animation number">0</span><span class="line"></span> <span class="number_name">Products</span> </div> </div> </div> <div class="number_out "> <div class="nun_out_bg"></div> <div class="number_main animation fadeInUp delay2"> <div class="number_box"> <span data-number="9,400" class="animation number">0</span><span class="line"></span> <span class="number_name">Reviews</span> </div> </div> </div> <div class="number_out "> <div class="nun_out_bg"></div> <div class="number_main animation fadeInUp delay3"> <div class="number_box"> <span data-number="7,300" class="animation number">0</span><span class="line"></span> <span class="number_name">Comments</span> </div> </div> </div> <div class="number_out "> <div class="nun_out_bg"></div> <div class="number_main animation fadeInUp delay4"> <div class="number_box"> <span data-number="6,800" class="animation number">0</span><span class="line"></span> <span class="number_name">Supports</span> </div> </div> </div> <div class="number_out "> <div class="nun_out_bg"></div> <div class="number_main animation fadeInUp delay5"> <div class="number_box"> <span data-number="14,900" class="animation number">0</span><span class="line"></span> <span class="number_name">Purchases</span> </div> </div> </div> <div class="number_out "> <div class="nun_out_bg"></div> <div class="number_main animation fadeInUp delay6"> <div class="number_box"> <span data-number="5,200" class="animation number">0</span><span class="line"></span> <span class="number_name">Subscribers</span> </div> </div> </div> </div> </div>

Latest photos (BottomOutPane · 1)

Code:

<div class="dnn_layout pb-30"> <div class="content_mid clearfix"> <div class="pane_layout"> <div class="row"> <div class="col-sm-12"> <div class="home27_con_titlebox"> <div class="home27_con_title1"> <h2>Latest photos</h2> </div> </div> <p class="home27_con_titlep">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium dolore mque laudan tium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae consectetur adipiscing elit.</p> <div class="isotope_grid home27-Text_layout animation zoomIn"> <div class="isotope_group portfolios_group"><a class="active" data-filter="*" href="#">All</a> <a data-filter=".photography" href="#">Photography</a> <a data-filter=".blogs" href="#">Blog</a> <a data-filter=".webdesign" href="#">Web Design</a> <a data-filter=".videos" href="#">Videos</a></div> <div class="loading"> <div class="loading-container container1"> <div class="circle1">&nbsp;</div> <div class="circle2">&nbsp;</div> <div class="circle3">&nbsp;</div> <div class="circle4">&nbsp;</div> </div> <div class="loading-container container2"> <div class="circle1">&nbsp;</div> <div class="circle2">&nbsp;</div> <div class="circle3">&nbsp;</div> <div class="circle4">&nbsp;</div> </div> <div class="loading-container container3"> <div class="circle1">&nbsp;</div> <div class="circle2">&nbsp;</div> <div class="circle3">&nbsp;</div> <div class="circle4">&nbsp;</div> </div> </div> <div class="isotope_main" data-min-width="362"> <div class="isotope_item Videos webdesign"> <div class="photo_box"> <div class="pic_box"><img alt="" src="http://demo8.dnngo.net/Portals/13/Home27-Images/Home27_photos01.jpg" /> <div class="content"> <div class="vertical_center_1"> <div class="vertical_center_2"> <div class="ico"><a href="#" target="blank"><span class="fa fa-link"></span></a> <a class="LightBox_image_gallery1" href="http://demo8.dnngo.net/Portals/13/Home27-Images/Home27_photos01.jpg"><span class="fa fa-search"></span></a></div> </div> </div> </div> <div class="shade">&nbsp;</div> </div> <div class="text_style1"> <h4>Banner Sliders Gallery</h4> <p>Web Design, Videos</p> </div> </div> </div> <div class="isotope_item blogs photography"> <div class="photo_box"> <div class="pic_box"><img alt="" src="http://demo8.dnngo.net/Portals/13/Home27-Images/Home27_photos02.jpg" /> <div class="content"> <div class="vertical_center_1"> <div class="vertical_center_2"> <div class="ico"><a href="#" target="blank"><span class="fa fa-link"></span></a> <a class="LightBox_image_gallery1" href="http://demo8.dnngo.net/Portals/13/Home27-Images/Home27_photos02.jpg"><span class="fa fa-search"></span></a></div> </div> </div> </div> <div class="shade">&nbsp;</div> </div> <div class="text_style1"> <h4>Many Different Homepages</h4> <p>Photography, Blogs</p> </div> </div> </div> <div class="isotope_item blogs videos"> <div class="photo_box"> <div class="pic_box"><img alt="" src="http://demo8.dnngo.net/Portals/13/Home27-Images/Home27_photos03.jpg" /> <div class="content"> <div class="vertical_center_1"> <div class="vertical_center_2"> <div class="ico"><a href="#" target="blank"><span class="fa fa-link"></span></a> <a class="LightBox_image_gallery1" href="http://demo8.dnngo.net/Portals/13/Home27-Images/Home27_photos03.jpg"><span class="fa fa-search"></span></a></div> </div> </div> </div> <div class="shade">&nbsp;</div> </div> <div class="text_style1"> <h4>Browser Compatibility</h4> <p>Videos, Blogs</p> </div> </div> </div> <div class="isotope_item videos photography"> <div class="photo_box"> <div class="pic_box"><img alt="" src="http://demo8.dnngo.net/Portals/13/Home27-Images/Home27_photos04.jpg" /> <div class="content"> <div class="vertical_center_1"> <div class="vertical_center_2"> <div class="ico"><a href="#" target="blank"><span class="fa fa-link"></span></a> <a class="LightBox_image_gallery1" href="http://demo8.dnngo.net/Portals/13/Home27-Images/Home27_photos04.jpg"><span class="fa fa-search"></span></a></div> </div> </div> </div> <div class="shade">&nbsp;</div> </div> <div class="text_style1"> <h4>Module Development</h4> <p>Photography, Videos</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/13/Home27-Images/Home27_photos05.jpg" /> <div class="content"> <div class="vertical_center_1"> <div class="vertical_center_2"> <div class="ico"><a href="#" target="blank"><span class="fa fa-link"></span></a> <a class="LightBox_image_gallery1" href="http://demo8.dnngo.net/Portals/13/Home27-Images/Home27_photos05.jpg"><span class="fa fa-search"></span></a></div> </div> </div> </div> <div class="shade">&nbsp;</div> </div> <div class="text_style1"> <h4>Responsive Design</h4> <p>Web Design, Blogs</p> </div> </div> </div> <div class="isotope_item webdesign photography"> <div class="photo_box"> <div class="pic_box"><img alt="" src="http://demo8.dnngo.net/Portals/13/Home27-Images/Home27_photos06.jpg" /> <div class="content"> <div class="vertical_center_1"> <div class="vertical_center_2"> <div class="ico"><a href="#" target="blank"><span class="fa fa-link"></span></a> <a class="LightBox_image_gallery1" href="http://demo8.dnngo.net/Portals/13/Home27-Images/Home27_photos06.jpg"><span class="fa fa-search"></span></a></div> </div> </div> </div> <div class="shade">&nbsp;</div> </div> <div class="text_style1"> <h4>Unlimited-Color Skin</h4> <p>Web Design, Photography</p> </div> </div> </div> <div class="isotope_item videos webdesign"> <div class="photo_box"> <div class="pic_box"><img alt="" src="http://demo8.dnngo.net/Portals/13/Home27-Images/Home27_photos07.jpg" /> <div class="content"> <div class="vertical_center_1"> <div class="vertical_center_2"> <div class="ico"><a href="#" target="blank"><span class="fa fa-link"></span></a> <a class="LightBox_image_gallery1" href="http://demo8.dnngo.net/Portals/13/Home27-Images/Home27_photos07.jpg"><span class="fa fa-search"></span></a></div> </div> </div> </div> <div class="shade">&nbsp;</div> </div> <div class="text_style1"> <h4>Edit Website Content</h4> <p>Web Design, Videos</p> </div> </div> </div> <div class="isotope_item blogs photography"> <div class="photo_box"> <div class="pic_box"><img alt="" src="http://demo8.dnngo.net/Portals/13/Home27-Images/Home27_photos08.jpg" /> <div class="content"> <div class="vertical_center_1"> <div class="vertical_center_2"> <div class="ico"><a href="#" target="blank"><span class="fa fa-link"></span></a> <a class="LightBox_image_gallery1" href="http://demo8.dnngo.net/Portals/13/Home27-Images/Home27_photos08.jpg"><span class="fa fa-search"></span></a></div> </div> </div> </div> <div class="shade">&nbsp;</div> </div> <div class="text_style1"> <h4>Many Different Homepage</h4> <p>Photography, Blogs</p> </div> </div> </div> <div class="isotope_item blogs videos"> <div class="photo_box"> <div class="pic_box"><img alt="" src="http://demo8.dnngo.net/Portals/13/Home27-Images/Home27_photos09.jpg" /> <div class="content"> <div class="vertical_center_1"> <div class="vertical_center_2"> <div class="ico"><a href="#" target="blank"><span class="fa fa-link"></span></a> <a class="LightBox_image_gallery1" href="http://demo8.dnngo.net/Portals/13/Home27-Images/Home27_photos09.jpg"><span class="fa fa-search"></span></a></div> </div> </div> </div> <div class="shade">&nbsp;</div> </div> <div class="text_style1"> <h4>Browser Compatibility</h4> <p>Videos, Blogs</p> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div>

Our Skills (BottomOutPane · 2)

Code:

<div class="home27-SectionStyles2 pt-60 pb-60"> <div class="dnn_layout pt-20 pb-10"> <div class="content_mid clearfix"> <div class="pane_layout"> <div class="row"> <div class="col-sm-12"> <div class="home27_con_titlebox"> <div class="home27_con_title1"> <h3>Our Skills</h3> </div> </div> <p class="home27_con_titlep"> Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium dolore mque laudan tium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae consectetur adipiscing elit. </p> <div class="home27-nacenter"> <div class="home27-number_Animation2 clearfix"> <div class="na_box the1 mt-30"> <div class="na_boxtop"><span data-number="90" class="animation number">0</span>%</div> <div class="line"></div> <p>Web Design</p> </div> <div class="na_box the2 mt-30"> <div class="na_boxtop"><span data-number="75" class="animation number">0</span>%</div> <div class="line"></div> <p>Html5 &amp; Css3</p> </div> <div class="na_box the3 mt-30"> <div class="na_boxtop"><span data-number="88" class="animation number">0</span>%</div> <div class="line"></div> <p>Java Script</p> </div> <div class="na_box the4 mt-30"> <div class="na_boxtop"><span data-number="62" class="animation number">0</span>%</div> <div class="line"></div> <p>Programme</p> </div> </div> </div> </div> </div> </div> </div> </div> </div>

Craft the best Web solutions for your online busin (BottomOutPane · 3)

Code:

<div class="home27-SectionStyles3 pt-60 pb-60">
<div class="dnn_layout">
<div class="content_mid clearfix">
<div class="pane_layout">
<div class="row">
<div class="col-sm-12">
<div class="home27-conc animation zoomIn">
<h2> Craft the best Web solutions for your online business
<div class="clearfix visible-sm  visible-xs"></div>
<a href="#" target="blank" class="home27-btn_style2">Getting Started</a> </h2>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

Latest News (FootPaneD)

Code:

<ul class="home27-footnews">
    <li>
    <div class="img"><img alt="" src="http://demo8.dnngo.net/Portals/13/Home27-Images/home27-footnews01.jpg" /></div>
    <p>DNN Modules Development</p>
    <span class="date">February 20th, 2014</span>
    </li>
    <div class="line"></div>
    <li>
    <div class="img"><img alt="" src="http://demo8.dnngo.net/Portals/13/Home27-Images/home27-footnews02.jpg" /></div>
    <p>Advanced Technology</p>
    <span class="date">March 16th, 2014</span>
    </li>
    <div class="line"></div>
    <li>
    <div class="img"><img alt="" src="http://demo8.dnngo.net/Portals/13/Home27-Images/home27-footnews03.jpg" /></div>
    <p>Powerful &amp; Creative Skin Pack</p>
    <span class="date">September 08th, 2014</span>
    </li>
</ul>

Follow Us (FootPaneE)

Code:

<div class="home27-follow">
<p>Sed non neque elit. Sed ut imperdiet nisi. Proin condime ntum fermentum nunc. Etiam pharetra, erat sed ferm entum feugiati.</p>
<ul>
    <li><a href="#"><span class="fa fa-facebook-square"></span>Facebook</a></li>
    <li><a href="#"><span class="fa fa-twitter-square"></span>Twitter</a></li>
    <li><a href="#"><span class="fa fa-vimeo-square"></span>Vimeo</a></li>
    <li><a href="#"><span class="fa fa-pinterest-square"></span>pinterest</a></li>
</ul>
</div>

Tweets (FootPaneF)

Code:

<ul class="home27-tweets">
    <li><span class="fa fa-twitter"></span><a href="#">@ Frank Miller</a> Donec consectetur diam ac nibh auctor ultricies. Integer mauris lacus, consequat magnis.
    <span class="date">1 day ago</span></li>
    <li><span class="fa fa-twitter"></span><a href="#">@ John Smith</a> Mauris sit condim eser ntumsi um risus amets.
    <span class="date">2 weeks ago</span></li>
    <li><span class="fa fa-twitter"></span><a href="#">@ Harro Rote</a> Sed ut perspiciatis, unde omnis iste natus error sit volup.
    <span class="date">1 month ago</span></li>
</ul>

Get In Touch (FootPaneG)

Code:

<div class="home27-touch">
<p>Phasellus enim libero, blandit vel sapi condiment et lobortis aliquam aliquam in tortor et lobortis aliquam Phasellus enim libero, blandit vel sapi condimentum ultricies magnis.</p>
<ul>
    <li>Address : XingAn Street No.287</li>
    <li>Phone : (+086)-123-456-78910</li>
    <li>Email : [email protected]</li>
    <li>Skype : dnngo-linda</li>
    <li>Website : www.dnngo.net</li>
</ul>
</div>

Full_Screen_FootPaneB Section (Full_Screen_FootPaneB)

Code:

<div class="home27-mobile_height"></div>