Home Version 13 Page Code
Click to preview the Home Version 13 demo. View demo
Preview:
RESPONSIVE DESIGN Compatible with desktops, laptop (CoverPane)
Code:
html
<div data-direction="horizontal" data-easing="swing" data-navposition="right" data-speed="700" id="pagepiling">
<div class="section" data-tooltips="RESPONSIVE DESIGN" style="background-color: #49b9d5;">
<div class="welcome_box">
<div class="welcome_title animationUp">RESPONSIVE DESIGN</div>
<div class="welcome_content animationUp">Compatible with desktops, laptops and mobile devices</div>
<div class="welcome_pic animationDown"><img alt="" src="http://demo8.dnngo.net/portals/13/Home13-Images/home13-element_1.png" /></div>
</div>
<div class="gohome"> </div>
<div class="animation_element animation_cloud">
<div class="element_bg" style="background-image: url('http://demo8.dnngo.net/portals/13/Home13-Images/home13-pagepiling_01.png');"> </div>
<div class="cloud cloud_1"><img alt="" src="http://demo8.dnngo.net/portals/13/Home13-Images/home13-cloud_1.png" /></div>
<div class="cloud cloud_2"><img alt="" src="http://demo8.dnngo.net/portals/13/Home13-Images/home13-cloud_2.png" /></div>
<div class="cloud cloud_3"><img alt="" src="http://demo8.dnngo.net/portals/13/Home13-Images/home13-cloud_3.png" /></div>
<div class="cloud cloud_4"><img alt="" src="http://demo8.dnngo.net/portals/13/Home13-Images/home13-cloud_1.png" /></div>
</div>
</div>
<div class="section" data-tooltips="BROWSER COMPATIBLE" style="background-color: #9e7ce9;">
<div class="welcome_box">
<div class="welcome_title animationUp">BROWSER COMPATIBLE</div>
<div class="welcome_content animationUp">These themes can be used in the mainstream browsers</div>
<div class="welcome_pic animationDown"><img alt="" src="http://demo8.dnngo.net/portals/13/Home13-Images/home13-element_2.png" /></div>
</div>
<div class="gohome"> </div>
<div class="animation_element animation_star">
<div class="element_bg" style="background-image: url('http://demo8.dnngo.net/portals/13/Home13-Images/home13-pagepiling_02.png');"> </div>
<div class="star star_1"><img alt="" src="http://demo8.dnngo.net/portals/13/Home13-Images/home13-star_1.png" /></div>
<div class="star star_2"><img alt="" src="http://demo8.dnngo.net/portals/13/Home13-Images/home13-star_2.png" /></div>
<div class="star star_3"><img alt="" src="http://demo8.dnngo.net/portals/13/Home13-Images/home13-star_1.png" /></div>
<div class="star star_4"><img alt="" src="http://demo8.dnngo.net/portals/13/Home13-Images/home13-star_2.png" /></div>
<div class="star star_5"><img alt="" src="http://demo8.dnngo.net/portals/13/Home13-Images/home13-star_1.png" /></div>
<div class="star star_6"><img alt="" src="http://demo8.dnngo.net/portals/13/Home13-Images/home13-star_2.png" /></div>
<div class="star star_7"><img alt="" src="http://demo8.dnngo.net/portals/13/Home13-Images/home13-star_1.png" /></div>
<div class="star star_8"><img alt="" src="http://demo8.dnngo.net/portals/13/Home13-Images/home13-star_2.png" /></div>
</div>
</div>
<div class="section" data-tooltips="WEB SOLUTIONS" style="background-color: #84ba56;">
<div class="welcome_box">
<div class="welcome_title animationUp">WEB SOLUTIONS</div>
<div class="welcome_content animationUp">Our skins and modules can apply to your corporation economy</div>
<div class="welcome_pic animationDown"><img alt="" src="http://demo8.dnngo.net/portals/13/Home13-Images/home13-element_3.png" /></div>
</div>
<div class="gohome"> </div>
<div class="animation_element animation_snowflake">
<div class="element_bg" style="background-image: url('http://demo8.dnngo.net/portals/13/Home13-Images/home13-pagepiling_03.png');"> </div>
<div class="snowflake snowflake_1"><img alt="" src="http://demo8.dnngo.net/portals/13/Home13-Images/home13-snowflake_1.png" /></div>
<div class="snowflake snowflake_2"><img alt="" src="http://demo8.dnngo.net/portals/13/Home13-Images/home13-snowflake_2.png" /></div>
<div class="snowflake snowflake_3"><img alt="" src="http://demo8.dnngo.net/portals/13/Home13-Images/home13-snowflake_1.png" /></div>
<div class="snowflake snowflake_4"><img alt="" src="http://demo8.dnngo.net/portals/13/Home13-Images/home13-snowflake_2.png" /></div>
<div class="snowflake snowflake_5"><img alt="" src="http://demo8.dnngo.net/portals/13/Home13-Images/home13-snowflake_1.png" /></div>
<div class="snowflake snowflake_6"><img alt="" src="http://demo8.dnngo.net/portals/13/Home13-Images/home13-snowflake_2.png" /></div>
<div class="snowflake snowflake_7"><img alt="" src="http://demo8.dnngo.net/portals/13/Home13-Images/home13-snowflake_1.png" /></div>
<div class="snowflake snowflake_8"><img alt="" src="http://demo8.dnngo.net/portals/13/Home13-Images/home13-snowflake_2.png" /></div>
</div>
</div>
<div class="section" data-tooltips="FRONTED TECHNOLOGY" style="background-color: #e78787;">
<div class="welcome_box">
<div class="welcome_title animationUp">FRONTED TECHNOLOGY</div>
<div class="welcome_content animationUp">They will definitely give your business website an outstanding look</div>
<div class="welcome_pic animationDown"><img alt="" src="http://demo8.dnngo.net/portals/13/Home13-Images/home13-element_4.png" /></div>
</div>
<div class="gohome"> </div>
<div class="animation_element animation_dandelion">
<div class="element_bg" style="background-image: url(''http://dnn733.test.dnngo.net/Portals/13/Home13-Images/home13-pagepiling_04.png'');"> </div>
<div class="dandelion dandelion_1"><img alt="" src="http://demo8.dnngo.net/portals/13/Home13-Images/home13-dandelion_1.png" /></div>
<div class="dandelion dandelion_2"><img alt="" src="http://demo8.dnngo.net/portals/13/Home13-Images/home13-dandelion_2.png" /></div>
<div class="dandelion dandelion_3"><img alt="" src="http://demo8.dnngo.net/portals/13/Home13-Images/home13-dandelion_1.png" /></div>
<div class="dandelion dandelion_4"><img alt="" src="http://demo8.dnngo.net/portals/13/Home13-Images/home13-dandelion_2.png" /></div>
<div class="dandelion dandelion_5"><img alt="" src="http://demo8.dnngo.net/portals/13/Home13-Images/home13-dandelion_1.png" /></div>
<div class="dandelion dandelion_6"><img alt="" src="http://demo8.dnngo.net/portals/13/Home13-Images/home13-dandelion_2.png" /></div>
<div class="dandelion dandelion_7"><img alt="" src="http://demo8.dnngo.net/portals/13/Home13-Images/home13-dandelion_1.png" /></div>
<div class="dandelion dandelion_8"><img alt="" src="http://demo8.dnngo.net/portals/13/Home13-Images/home13-dandelion_2.png" /></div>
</div>
</div>
</div>CONTENT DETAILS ABOUT OUR SKIN DNN SKIN AND MODULE (BannerPane)
Code:
html
<div data-autoplay="5000" data-equalheight="true" class="horizontalTab_Top home13-tab"> <div class="resp-tabs-container"> <div class="resp_container"> <div class="resp_margin"> <div class="container"> <div class="row"> <div class="col-sm-5"> <div class="tab-container"> <div class="tab-smalltitle">CONTENT DETAILS</div> <div class="tab-title">ABOUT OUR SKIN</div> <div class="tab-tag">DNN SKIN AND MODULE CUSTOMIZATION </div> <p>Donec consectetur diam ac nibh auctor ultricies. Integer mauris lacus, consequat in luctus id, semper sed felis. Cum sociis natoque penatibus et magnis.Diam ac nibh auctor ultricies. Integer mauris lacus, consequat in luctus id. </p> <a class="btn a_bg_c_h a_b_c_h" href="#">INTO THE DETAIL PAGE VIEW</a> </div> </div> <div class="col-sm-7"> <img alt="" class="img-responsive" src="http://demo8.dnngo.net/portals/13/Home13-Images/home13-pic01.png" /> </div> </div> </div> </div> </div> <div class="resp_container"> <div class="resp_margin"> <div class="container"> <div class="row"> <div class="col-sm-6"> <img alt="" class="img-responsive" src="http://demo8.dnngo.net/portals/13/Home13-Images/home13-pic02.png" /> </div> <div class="col-sm-6"> <div class="tab-container"> <div class="tab-smalltitle">CONTENT DETAILS</div> <div class="tab-title">ABOUT OUR FEATURES</div> <div class="tab-tag">DNN SKIN AND MODULE CUSTOMIZATION </div> <p>Donec consectetur diam ac nibh auctor ultricies. Integer mauris lacus, consequat in luctus id, semper sed felis. Cum sociis natoque penatibus et magnis.Diam ac nibh auctor ultricies. Integer mauris lacus, consequat in luctus id.</p> <a class="btn a_bg_c_h a_b_c_h" href="#">INTO THE DETAIL PAGE VIEW</a> </div> </div> </div> </div> </div> </div> <div class="resp_container"> <div class="resp_margin"> <div class="container"> <div class="row"> <div class="col-sm-5"> <div class="tab-container"> <div class="tab-smalltitle">CONTENT DETAILS</div> <div class="tab-title">ABOUT OUR LEVEL</div> <div class="tab-tag">DNN SKIN AND MODULE CUSTOMIZATION </div> <p>Donec consectetur diam ac nibh auctor ultricies. Integer mauris lacus, consequat in luctus id, semper sed felis. Cum sociis natoque penatibus et magnis.Diam ac nibh auctor ultricies. Integer mauris lacus, consequat in luctus id.</p> <a class="btn a_bg_c_h a_b_c_h" href="#">INTO THE DETAIL PAGE VIEW</a> </div> </div> <div class="col-sm-7"> <img alt="" class="img-responsive" src="http://demo8.dnngo.net/portals/13/Home13-Images/home13-pic03.png" /> </div> </div> </div> </div> </div> </div> <ul class="resp-tabs-list"> <li> <span>ABOUT OUR SKIN</span> </li> <li> <span>ABOUT OUR FEATURES</span> </li> <li> <span>ABOUT OUR LEVEL</span> </li> </ul> </div>OUR SERVICE (TopPane)
Code:
html
<h3 class="home13-title pb-40"><span>OUR SERVICE</span></h3>
<div class="row animation scaleUp">
<div class="col-sm-4">
<div class="home13-ibox">
<div class="ico a_b_c a_t_c animationhover rubberBand"><span class="fa fa-adjust"></span></div>
<h5>RESPONSIVE WEB</h5> Donec consectetur diam ac nibh auctor ultricies. Integer mauris lacus, consequat in luctus id, semper sed felis. Cum sociis natoque penatibus et magnis.</div>
</div>
<div class="col-sm-4">
<div class="home13-ibox">
<div class="ico a_b_c a_t_c animationhover rubberBand"><span class="fa fa-mobile-phone"></span></div>
<h5>MOBILE DESIGN</h5> Donec consectetur diam ac nibh auctor ultricies. Integer mauris lacus, consequat in luctus id, semper sed felis. Cum sociis natoque penatibus et magnis.</div>
</div>
<div class="col-sm-4">
<div class="home13-ibox">
<div class="ico a_b_c a_t_c animationhover rubberBand"><span class="fa fa-recycle"></span></div>
<h5>CUSTOMIZE WEB</h5> Donec consectetur diam ac nibh auctor ultricies. Integer mauris lacus, consequat in luctus id, semper sed felis. Cum sociis natoque penatibus et magnis.</div>
</div>
</div>
<div class="row animation scaleUp">
<div class="col-sm-4">
<div class="home13-ibox sm-mb-0">
<div class="ico a_b_c a_t_c animationhover rubberBand"><span class="fa fa-certificate"></span></div>
<h5>PHOTOGRAPHY</h5> Donec consectetur diam ac nibh auctor ultricies. Integer mauris lacus, consequat in luctus id, semper sed felis. Cum sociis natoque penatibus et magnis.</div>
</div>
<div class="col-sm-4">
<div class="home13-ibox sm-mb-0">
<div class="ico a_b_c a_t_c animationhover rubberBand"><span class="fa fa-headphones"></span></div>
<h5>LISTEN TO MUSIC</h5> Donec consectetur diam ac nibh auctor ultricies. Integer mauris lacus, consequat in luctus id, semper sed felis. Cum sociis natoque penatibus et magnis.</div>
</div>
<div class="col-sm-4">
<div class="home13-ibox sm-mb-0 xs-mb-0 xs-pb-0">
<div class="ico a_b_c a_t_c animationhover rubberBand"><span class="fa fa-gear"></span></div>
<h5>SETTINGS</h5> Donec consectetur diam ac nibh auctor ultricies. Integer mauris lacus, consequat in luctus id, semper sed felis. Cum sociis natoque penatibus et magnis.</div>
</div>
</div>THE POPULAR PRODUCTS (Full_Screen_PaneB)
Code:
html
<div class="home13-bg pt-10"> <div class="container pt-60 animation scaleUp"> <h3 class="home13-title pb-20"><span>THE POPULAR PRODUCTS</span></h3> </div> <div class="isotope_grid home13-isotope"> <div class="isotope_group animation scaleUp"> <a data-filter="*" href="#" class="active">All</a> <a data-filter=".photography" href="#">PHOTOGRAPHY</a> <a data-filter=".webdesign" href="#">WEB DESIGN</a> <a data-filter=".graphics" href="#">GRAPHICS</a> <a data-filter=".video" href="#">VIDEO</a> </div> <div class="loading animation scaleUp"> <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 data-min-width="381" class="isotope_main animation"> <div class="isotope_item photography"> <div class="photo animation_item scaleUp"><img alt="" src="http://demo8.dnngo.net/portals/13/Home13-Images/home13-pic04.jpg" /> <div class="content"> <h3>AMAZING SUPPORT</h3> <div class="ico"><a href="#"> <span class="fa fa-search"></span></a><a href="#"><span class="fa fa-link"></span></a></div> </div> </div> </div> <div data-zoom="2" class="isotope_item video photography"> <div class="photo animation_item scaleUp delay1"> <img alt="" src="http://demo8.dnngo.net/portals/13/Home13-Images/home13-pic05.jpg" /> <div class="content"> <h3>AMAZING SUPPORT</h3> <div class="ico"><a href="#"> <span class="fa fa-search"></span></a><a href="#"><span class="fa fa-link"></span></a></div> </div> </div> </div> <div class="isotope_item graphics video"> <div class="photo animation_item scaleUp delay2"> <img alt="" src="http://demo8.dnngo.net/portals/13/Home13-Images/home13-pic06.jpg" /> <div class="content"> <h3>AMAZING SUPPORT</h3> <div class="ico"><a href="#"> <span class="fa fa-search"></span></a><a href="#"><span class="fa fa-link"></span></a></div> </div> </div> </div> <div class="isotope_item webdesign graphics"> <div class="photo animation_item scaleUp delay3"> <img alt="" src="http://demo8.dnngo.net/portals/13/Home13-Images/home13-pic07.jpg" /> <div class="content"> <h3>AMAZING SUPPORT</h3> <div class="ico"><a href="#"> <span class="fa fa-search"></span></a><a href="#"><span class="fa fa-link"></span></a></div> </div> </div> </div> <div class="isotope_item webdesign photography"> <div class="photo animation_item scaleUp delay4"> <img alt="" src="http://demo8.dnngo.net/portals/13/Home13-Images/home13-pic08.jpg" /> <div class="content"> <h3>AMAZING SUPPORT</h3> <div class="ico"><a href="#"> <span class="fa fa-search"></span></a><a href="#"><span class="fa fa-link"></span></a></div> </div> </div> </div> <div class="isotope_item graphics photography"> <div class="photo animation_item scaleUp delay5"> <img alt="" src="http://demo8.dnngo.net/portals/13/Home13-Images/home13-pic09.jpg" /> <div class="content"> <h3>AMAZING SUPPORT</h3> <div class="ico"><a href="#"> <span class="fa fa-search"></span></a><a href="#"><span class="fa fa-link"></span></a></div> </div> </div> </div> <div class="isotope_item graphics video"> <div class="photo animation_item scaleUp delay6"> <img alt="" src="http://demo8.dnngo.net/portals/13/Home13-Images/home13-pic10.jpg" /> <div class="content"> <h3>AMAZING SUPPORT</h3> <div class="ico"><a href="#"> <span class="fa fa-search"></span></a><a href="#"><span class="fa fa-link"></span></a></div> </div> </div> </div> <div class="isotope_item webdesign photography"> <div class="photo animation_item scaleUp delay7"> <img alt="" src="http://demo8.dnngo.net/portals/13/Home13-Images/home13-pic11.jpg" /> <div class="content"> <h3>AMAZING SUPPORT</h3> <div class="ico"><a href="#"> <span class="fa fa-search"></span></a><a href="#"><span class="fa fa-link"></span></a></div> </div> </div> </div> <div class="isotope_item graphics video"> <div class="photo animation_item scaleUp delay8"> <img alt="" src="http://demo8.dnngo.net/portals/13/Home13-Images/home13-pic12.jpg" /> <div class="content"> <h3>AMAZING SUPPORT</h3> <div class="ico"><a href="#"> <span class="fa fa-search"></span></a><a href="#"><span class="fa fa-link"></span></a></div> </div> </div> </div> <div class="isotope_item webdesign photography"> <div class="photo animation_item scaleUp delay9"> <img alt="" src="http://demo8.dnngo.net/portals/13/Home13-Images/home13-pic13.jpg" /> <div class="content"> <h3>AMAZING SUPPORT</h3> <div class="ico"><a href="#"> <span class="fa fa-search"></span></a><a href="#"><span class="fa fa-link"></span></a></div> </div> </div> </div> <div class="isotope_item graphics"> <div class="photo animation_item scaleUp delay10"> <img alt="" src="http://demo8.dnngo.net/portals/13/Home13-Images/home13-pic14.jpg" /> <div class="content"> <h3>AMAZING SUPPORT</h3> <div class="ico"><a href="#"> <span class="fa fa-search"></span></a><a href="#"><span class="fa fa-link"></span></a></div> </div> </div> </div> </div> </div> </div><div class="pb-30"></div>RECENT WORK (ContentPane)
Code:
html
<div class="animation pb-10">
<div class="row pt-10 xs-pt-0">
<div class="col-sm-6 animation_item scaleUp ">
<dl class="home13-list"> <dt class="bg_color_1"> <div class="time">Monday, May 22nd, 2014</div> <div class="title">Powerful, Compatible and responsive.</div> </dt>
<dd>Donec consectetur diam ac nibh auctor ultricies. Integer mauris lacus, consequat in luctus id, semper sed felis. Cum sociis natoque penatibus et magnis.Diam ac nibh auctor ultricies. Integer mauris lacus, consequat in luctus id. sed felis. Cum sociis natoque penatibus et magnis.Diam ac </dd>
</dl>
</div>
<div class="col-sm-6 animation_item scaleUp delay1">
<dl class="home13-list"> <dt class="bg_color_2"> <div class="time">Monday, May 22nd, 2014</div> <div class="title">Valueable membership system.</div> </dt>
<dd>Donec consectetur diam ac nibh auctor ultricies. Integer mauris lacus, consequat in luctus id, semper sed felis. Cum sociis natoque penatibus et magnis.Diam ac nibh auctor ultricies. Integer mauris lacus, consequat in luctus id. sed felis. Cum sociis natoque penatibus et magnis.Diam ac </dd>
</dl>
</div>
</div>
<div class="row">
<div class="col-sm-6 animation_item scaleUp delay2">
<dl class="home13-list"> <dt class="bg_color_3"> <div class="time">Monday, May 22nd, 2014</div> <div class="title">Powerful, Compatible and responsive.</div> </dt>
<dd>Donec consectetur diam ac nibh auctor ultricies. Integer mauris lacus, consequat in luctus id, semper sed felis. Cum sociis natoque penatibus et magnis.Diam ac nibh auctor ultricies. Integer mauris lacus, consequat in luctus id. sed felis. Cum sociis natoque penatibus et magnis.Diam ac </dd>
</dl>
</div>
<div class="col-sm-6 animation_item scaleUp delay3">
<dl class="home13-list xs-pb-0"> <dt class="bg_color_4"> <div class="time">Monday, May 22nd, 2014</div> <div class="title">Powerful, Compatible and responsive.</div> </dt>
<dd>Donec consectetur diam ac nibh auctor ultricies. Integer mauris lacus, consequat in luctus id, semper sed felis. Cum sociis natoque penatibus et magnis.Diam ac nibh auctor ultricies. Integer mauris lacus, consequat in luctus id. sed felis. Cum sociis natoque penatibus et magnis.Diam ac </dd>
</dl>
</div>
</div>
</div>ABOUT OUR TEAM (Full_Screen_PaneE · 1)
Code:
html
<div class="home13-bg02 pt-10"> <div class="container pt-60"> <h3 class="home13-title pb-20"><span>ABOUT OUR TEAM</span></h3> <div class="home13-ourTeam"> <div class="ourTeam_box animation fadeInLeft"> <ul class="ourTeam_thumbnail"> <li class="active" bigimg="http://demo8.dnngo.net/portals/13/Home13-Images/home13-big01.png"><img alt="" src="http://demo8.dnngo.net/portals/13/Home13-Images/home13-thumb01.png" /></li> <li bigimg="http://demo8.dnngo.net/portals/13/Home13-Images/home13-big02.png"><img alt="" src="http://demo8.dnngo.net/portals/13/Home13-Images/home13-thumb02.png" /></li> <li bigimg="http://demo8.dnngo.net/portals/13/Home13-Images/home13-big03.png"><img alt="" src="http://demo8.dnngo.net/portals/13/Home13-Images/home13-thumb03.png" /></li> <li bigimg="http://demo8.dnngo.net/portals/13/Home13-Images/home13-big04.png"><img alt="" src="http://demo8.dnngo.net/portals/13/Home13-Images/home13-thumb04.png" /></li> <br> <li bigimg="http://demo8.dnngo.net/portals/13/Home13-Images/home13-big05.png"><img alt="" src="http://demo8.dnngo.net/portals/13/Home13-Images/home13-thumb05.png" /></li> <li bigimg="http://demo8.dnngo.net/portals/13/Home13-Images/home13-big06.png"><img alt="" src="http://demo8.dnngo.net/portals/13/Home13-Images/home13-thumb06.png" /></li> <li bigimg="http://demo8.dnngo.net/portals/13/Home13-Images/home13-big07.png"><img alt="" src="http://demo8.dnngo.net/portals/13/Home13-Images/home13-thumb07.png" /></li> <li bigimg="http://demo8.dnngo.net/portals/13/Home13-Images/home13-big08.png"><img alt="" src="http://demo8.dnngo.net/portals/13/Home13-Images/home13-thumb08.png" /></li> </ul> <ul class="ourTeam_content"> <li class="item active"> <div class="ourTeam_title"><span class="a_t_c"> WHO</span> AM I ?</div> <div class="ourTeam_name">Johnson</div> <div class="ourTeam_info">DESIGN DIRECTOR</div> <p> Donec consectetur diam ac nibh auctor ultricies. Integer mauris lacus, consequat in luctus id, semper sed felis. Cum sociis natoque penatibus et magnis.Diam ac nibh auctor ultricies. Integer mauris lacus, consequat in luctus id. sed felis. Cum sociis natoque penatibus et magnis.Diam ac </p> <div class="social-list clearfix"> <a href="#"><span class="fa fa-twitter-square"></span></a> <a href="#"><span class="fa fa-facebook-square"></span></a> <a href="#"><span class="fa fa-vimeo-square"></span></a> </div> </li> <li class="item"> <div class="ourTeam_title"><span class="a_t_c"> WHO</span> AM I ?</div> <div class="ourTeam_name">Johnson</div> <div class="ourTeam_info">DESIGN DIRECTOR</div> <p> Donec consectetur diam ac nibh auctor ultricies. Integer mauris lacus, consequat in luctus id, semper sed felis. Cum sociis natoque penatibus et magnis.Diam ac nibh auctor ultricies. Integer mauris lacus, consequat in luctus id. sed felis. Cum sociis natoque penatibus et magnis.Diam ac </p> <div class="social-list clearfix"> <a href="#"><span class="fa fa-twitter-square"></span></a> <a href="#"><span class="fa fa-facebook-square"></span></a> <a href="#"><span class="fa fa-vimeo-square"></span></a> </div> </li> <li class="item"> <div class="ourTeam_title"><span class="a_t_c"> WHO</span> AM I ?</div> <div class="ourTeam_name">Johnson</div> <div class="ourTeam_info">DESIGN DIRECTOR</div> <p> Donec consectetur diam ac nibh auctor ultricies. Integer mauris lacus, consequat in luctus id, semper sed felis. Cum sociis natoque penatibus et magnis.Diam ac nibh auctor ultricies. Integer mauris lacus, consequat in luctus id. sed felis. Cum sociis natoque penatibus et magnis.Diam ac </p> <div class="social-list clearfix"> <a href="#"><span class="fa fa-twitter-square"></span></a> <a href="#"><span class="fa fa-facebook-square"></span></a> <a href="#"><span class="fa fa-vimeo-square"></span></a> </div> </li> <li class="item"> <div class="ourTeam_title"><span class="a_t_c"> WHO</span> AM I ?</div> <div class="ourTeam_name">Johnson</div> <div class="ourTeam_info">DESIGN DIRECTOR</div> <p> Donec consectetur diam ac nibh auctor ultricies. Integer mauris lacus, consequat in luctus id, semper sed felis. Cum sociis natoque penatibus et magnis.Diam ac nibh auctor ultricies. Integer mauris lacus, consequat in luctus id. sed felis. Cum sociis natoque penatibus et magnis.Diam ac </p> <div class="social-list clearfix"> <a href="#"><span class="fa fa-twitter-square"></span></a> <a href="#"><span class="fa fa-facebook-square"></span></a> <a href="#"><span class="fa fa-vimeo-square"></span></a> </div> </li> <li class="item"> <div class="ourTeam_title"><span class="a_t_c"> WHO</span> AM I ?</div> <div class="ourTeam_name">Johnson</div> <div class="ourTeam_info">DESIGN DIRECTOR</div> <p> Donec consectetur diam ac nibh auctor ultricies. Integer mauris lacus, consequat in luctus id, semper sed felis. Cum sociis natoque penatibus et magnis.Diam ac nibh auctor ultricies. Integer mauris lacus, consequat in luctus id. sed felis. Cum sociis natoque penatibus et magnis.Diam ac </p> <div class="social-list clearfix"> <a href="#"><span class="fa fa-twitter-square"></span></a> <a href="#"><span class="fa fa-facebook-square"></span></a> <a href="#"><span class="fa fa-vimeo-square"></span></a> </div> </li> <li class="item"> <div class="ourTeam_title"><span class="a_t_c"> WHO</span> AM I ?</div> <div class="ourTeam_name">Johnson</div> <div class="ourTeam_info">DESIGN DIRECTOR</div> <p> Donec consectetur diam ac nibh auctor ultricies. Integer mauris lacus, consequat in luctus id, semper sed felis. Cum sociis natoque penatibus et magnis.Diam ac nibh auctor ultricies. Integer mauris lacus, consequat in luctus id. sed felis. Cum sociis natoque penatibus et magnis.Diam ac </p> <div class="social-list clearfix"> <a href="#"><span class="fa fa-twitter-square"></span></a> <a href="#"><span class="fa fa-facebook-square"></span></a> <a href="#"><span class="fa fa-vimeo-square"></span></a> </div> </li> <li class="item"> <div class="ourTeam_title"><span class="a_t_c"> WHO</span> AM I ?</div> <div class="ourTeam_name">Johnson</div> <div class="ourTeam_info">DESIGN DIRECTOR</div> <p> Donec consectetur diam ac nibh auctor ultricies. Integer mauris lacus, consequat in luctus id, semper sed felis. Cum sociis natoque penatibus et magnis.Diam ac nibh auctor ultricies. Integer mauris lacus, consequat in luctus id. sed felis. Cum sociis natoque penatibus et magnis.Diam ac </p> <div class="social-list clearfix"> <a href="#"><span class="fa fa-twitter-square"></span></a> <a href="#"><span class="fa fa-facebook-square"></span></a> <a href="#"><span class="fa fa-vimeo-square"></span></a> </div> </li> <li class="item"> <div class="ourTeam_title"><span class="a_t_c"> WHO</span> AM I ?</div> <div class="ourTeam_name">Johnson</div> <div class="ourTeam_info">DESIGN DIRECTOR</div> <p> Donec consectetur diam ac nibh auctor ultricies. Integer mauris lacus, consequat in luctus id, semper sed felis. Cum sociis natoque penatibus et magnis.Diam ac nibh auctor ultricies. Integer mauris lacus, consequat in luctus id. sed felis. Cum sociis natoque penatibus et magnis.Diam ac </p> <div class="social-list clearfix"> <a href="#"><span class="fa fa-twitter-square"></span></a> <a href="#"><span class="fa fa-facebook-square"></span></a> <a href="#"><span class="fa fa-vimeo-square"></span></a> </div> </li> </ul> </div> <div class="ourTeam_img animation fadeInRight"><img alt="" src="http://demo8.dnngo.net/portals/13/Home13-Images/home13-big01.png" /> </div> </div> </div> </div>0 % WEB DESIGN 0 % HTML5 & CSS3 0 % GRAPHIC DESIGN (Full_Screen_PaneE · 2)
Code:
html
<div class="home13-bg03 pt-10 pb-10">
<div class="container pt-60 pb-60">
<div class="home13-chart row a_t_c animation">
<div class="col-md-3 col-sm-6 animation_item scaleUp ">
<div class="percentage13" data-percent="64">
<div class="percentage_inner"> <span>0</span>%</div>
</div>
<p>WEB DESIGN</p>
<div class="visible-xs pb-20"></div>
</div>
<div class="col-md-3 col-sm-6 animation_item scaleUp delay1">
<div class="percentage13" data-percent="70">
<div class="percentage_inner"> <span>0</span>%</div>
</div>
<p>HTML5 & CSS3</p>
<div class="visible-xs pb-20"></div>
</div>
<div class="clearfix visible-sm"></div>
<div class="col-md-3 col-sm-6 animation_item scaleUp delay2">
<div class="percentage13" data-percent="80">
<div class="percentage_inner"> <span>0</span>%</div>
</div>
<p>GRAPHIC DESIGN</p>
<div class="visible-xs pb-20"></div>
</div>
<div class="col-md-3 col-sm-6 animation_item scaleUp delay3">
<div class="percentage13" data-percent="46">
<div class="percentage_inner"> <span>0</span>%</div>
</div>
<p>DNN</p>
</div>
</div>
</div>
</div>
<div class="pb-30"></div>ABOUT OUR CLIENTS (BottomPane)
Code:
html
<div class="pb-30"><ul data-autoplay="0" data-display-navigation="false" data-position="roll-left" class=" Testimonials_tab home13-Testimonials animation scaleUp"> <li> <blockquote> <div class="mark a_bg_c "><span class="fa fa-quote-left"></span></div> <p>Donec consectetur diam ac nibh auctor ultricies. Integer mauris lacus, consequat in luctus id, semper sed felis. Cum sociis natoque penatibus et magnis.Diam ac nibh auctor ultricies. Integer mauris lacus, consequat in luctus id. sed felis. Cum sociis natoque penatibus et magnis. </p> <small>---- John Doe</small> </blockquote> </li> <li> <blockquote> <div class="mark a_bg_c "><span class="fa fa-quote-left"></span></div> <p>Donec consectetur diam ac nibh auctor ultricies. Integer mauris lacus, consequat in luctus id, semper sed felis. Cum sociis natoque penatibus et magnis.Diam ac nibh auctor ultricies. Integer mauris lacus, consequat in luctus id. sed felis. Cum sociis natoque penatibus et magnis. </p> <small>---- John Doe</small> </blockquote> </li> <li> <blockquote> <div class="mark a_bg_c "><span class="fa fa-quote-left"></span></div> <p>Donec consectetur diam ac nibh auctor ultricies. Integer mauris lacus, consequat in luctus id, semper sed felis. Cum sociis natoque penatibus et magnis.Diam ac nibh auctor ultricies. Integer mauris lacus, consequat in luctus id. sed felis. Cum sociis natoque penatibus et magnis. </p> <small>---- John Doe</small> </blockquote> </li> <li> <blockquote> <div class="mark a_bg_c "><span class="fa fa-quote-left"></span></div> <p>Donec consectetur diam ac nibh auctor ultricies. Integer mauris lacus, consequat in luctus id, semper sed felis. Cum sociis natoque penatibus et magnis.Diam ac nibh auctor ultricies. Integer mauris lacus, consequat in luctus id. sed felis. Cum sociis natoque penatibus et magnis. </p> <small>---- John Doe</small> </blockquote> </li> </ul></div>BottomOutPane Section (BottomOutPane)
Code:
html
<div class="home13-bg">
<div class="container pt-60 pb-60 animation scaleUp ">
<div data-pagination="false" class="carousel home13-carousel">
<div class="item"><a href="#"><img alt="" src="http://demo8.dnngo.net/portals/13/Home13-Images/home13-clients01.png" /></a> </div>
<div class="item"><a href="#"><img alt="" src="http://demo8.dnngo.net/portals/13/Home13-Images/home13-clients02.png" /></a> </div>
<div class="item"><a href="#"><img alt="" src="http://demo8.dnngo.net/portals/13/Home13-Images/home13-clients03.png" /></a> </div>
<div class="item"><a href="#"><img alt="" src="http://demo8.dnngo.net/portals/13/Home13-Images/home13-clients04.png" /></a> </div>
<div class="item"><a href="#"><img alt="" src="http://demo8.dnngo.net/portals/13/Home13-Images/home13-clients05.png" /></a> </div>
<div class="item"><a href="#"><img alt="" src="http://demo8.dnngo.net/portals/13/Home13-Images/home13-clients01.png" /></a> </div>
<div class="item"><a href="#"><img alt="" src="http://demo8.dnngo.net/portals/13/Home13-Images/home13-clients02.png" /></a> </div>
<div class="item"><a href="#"><img alt="" src="http://demo8.dnngo.net/portals/13/Home13-Images/home13-clients03.png" /></a> </div>
<div class="item"><a href="#"><img alt="" src="http://demo8.dnngo.net/portals/13/Home13-Images/home13-clients04.png" /></a> </div>
<div class="item"><a href="#"><img alt="" src="http://demo8.dnngo.net/portals/13/Home13-Images/home13-clients05.png" /></a> </div>
</div>
</div>
</div>CONTACT US (Full_Screen_FootPaneA)
Code:
html
<div class="pt-60"> <div class="home13-title02 pt-20"> <h3> CONTACT US</h3> </div> </div>Form Section (FootPaneK)
This section uses the DNNGo PowerForms module — see PowerForms.
Address: YuHua building 26th floor, XinAn Street N (FootPaneL)
Code:
html
<div class="animation fadeInRight fonter-right-bg"> <ul class="home13-info"> <li><span class="fa fa-map-marker"></span> <p>Address: YuHua building 26th floor, XinAn<br />Street No.287, New York</p> </li> <li><span class="fa fa-envelope"></span> <p>Email Us: [email protected]</p> </li> <li><span class="fa fa-phone"></span> <p>Call Us: (+088)-0123-456 789</p> </li> </ul> <div class="home13-social clearfix"> <a href="#"><span class="fa fa-google-plus-square"></span></a> <a href="#"><span class="fa fa-twitter-square"></span></a> <a href="#"><span class="fa fa-facebook-square"></span></a> <a href="#"><span class="fa fa-linkedin-square"></span></a> <a href="#"><span class="fa fa-tumblr-square"></span></a> <a href="#"><span class="fa fa-behance-square"></span></a> <a href="#"><span class="fa fa-vimeo-square"></span></a> </div> </div>Full_Screen_FootPaneB Section (Full_Screen_FootPaneB)
Code:
html
<div class="pt-50"></div>