Skip to content

Home Version 31 Page Code ​

Click to preview the Home Version 31 demo. View demo

Preview:

HomeVersion31

This section uses the DNNGo LayerGallery Pro module.

Add the slides (images, text, links) manually in the module — see LayerGallery Pro.

Hospitality meets the Bay (Full_Screen_PaneA · 1) ​

Code:

html
<div class="container home31-top">
<h1>Hospitality meets the Bay</h1>

<div class="row">
<div class="col-sm-2">&nbsp;</div>

<div class="col-sm-12 col-md-8 animation zoomIn">
<p class="text-center">Maecenas faucibus mollis rutm interdum. Vivamus sagittis lacus vel augue laoreet rutrum fauci cursus magna, vel scelerisque nisl consectetur sit amet non aliquam eu sapien.Maecenas faucibus mollis rutm interdum. Vivamus sagittis lacus vel augue laoreet rutrum fauci cursus magna, vel scelerisque nisl consectetur sit amet non aliquam eu sapien.Maecenas faucibus mollis rutm interdum. Vivamus sagittis lacus vel augue laoreet rutrum fauci cursus magna, vel scelerisque nisl consectetur sit amet non aliquam eu sapien.</p>
</div>

<div class="col-sm-2">&nbsp;</div>
</div>
</div>

Stay Here Feel Like Home (Full_Screen_PaneA · 2) ​

Code:

html
<div class="container pt-60 pb-50">
	<div class="row">
		<div class="col-sm-12 col-md-8 animation fadeInLeft">
			<div class="home31-imgbor"><img alt="" class="img-responsive" src="http://demo8.dnngo.net/Portals/13/Home31-Images/home31-img01.jpg" /></div>
		</div>
		<div class="col-sm-12 col-md-4 text-center animation fadeInRight">
			<div class="home31-text">
				<h2>Stay Here Feel Like Home</h2>
				<p>Integer mauris lacus, consequat in luctus id, semper sed felis. Cum sociis natoque penatibus et magnis. Diam consectetur diam ac nibh auctor ultricies auctor ultricies in luctus id.</p>
				<a class="home31-btn mt-30" href="#">Read More</a>
			</div>
		</div>
	</div>
</div>

A place where memories are made (Full_Screen_PaneA · 3) ​

Code:

html
<div class="container pb-60 mb-30"> <div class="row"> <div class="col-md-8 col-md-push-4 animation fadeInRight"> <div class="home31-imgbor home31-imgbor-r"><img alt="" class="img-responsive" src="http://demo8.dnngo.net/Portals/13/Home31-Images/home31-img02.jpg" /></div> </div> <div class="col-md-4 col-md-pull-8 text-center animation fadeInLeft"> <div class="home31-text02"> <h2>A place where memories are made</h2> <p>Integer mauris lacus, consequat in luctus id, semper sed felis. Cum sociis natoque penatibus et magnis. Diam consectetur diam ac nibh auctor ultricies auctor ultricies in luctus id.</p> <a class="home31-btn mt-30" href="#">Read More</a></div> </div> </div> </div>

our Services (Full_Screen_PaneA · 4) ​

Code:

html
<div class="container "> <div class="home31-pr10 home31-pl10 pb-20 text-center">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.</div> <div class="row pb-50"> <div class="col-sm-6 animation fadeInLeft home31-ibox01-l"> <div class="home31-ibox01"> <span class="fa fa-wifi"> </span> <h4>free wi-fi</h4> <p>Sed ut perspiciatis unde omnis iste natus error sit inventore veritatis et quasi archite cbeatae consectetur adipiscing elit. Sed ut perspiciatis unde omnis iste natus errorin ventore veritatis et quasi architecto beatae consectetur adipiscing elit.</p> </div> <div class="home31-ibox01"> <span class="fa fa-video-camera"></span> <h4>Facetime Video</h4> <p>Sed ut perspiciatis unde omnis iste natus error sit inventore veritatis et quasi archite cbeatae consectetur adipiscing elit. Sed ut perspiciatis unde omnis iste natus errorin ventore veritatis et quasi architecto beatae consectetur adipiscing elit.</p> </div> <div class="home31-ibox01"> <span class="fa fa-picture-o"></span> <h4>Photo Gallery</h4> <p>Sed ut perspiciatis unde omnis iste natus error sit inventore veritatis et quasi archite cbeatae consectetur adipiscing elit. Sed ut perspiciatis unde omnis iste natus errorin ventore veritatis et quasi architecto beatae consectetur adipiscing elit.</p> </div> </div> <div class="col-sm-6 animation fadeInRight home31-ibox01-r"> <div class="home31-ibox01"> <span class="fa fa-tint"> </span> <h4>Best Services</h4> <p>Sed ut perspiciatis unde omnis iste natus error sit inventore veritatis et quasi archite cbeatae consectetur adipiscing elit. Sed ut perspiciatis unde omnis iste natus errorin ventore veritatis et quasi architecto beatae consectetur adipiscing elit.</p> </div> <div class="home31-ibox01"> <span class="fa fa-briefcase"></span> <h4>New Product</h4> <p>Sed ut perspiciatis unde omnis iste natus error sit inventore veritatis et quasi archite cbeatae consectetur adipiscing elit. Sed ut perspiciatis unde omnis iste natus errorin ventore veritatis et quasi architecto beatae consectetur adipiscing elit.</p> </div> <div class="home31-ibox01"> <span class="fa fa-certificate"></span> <h4>Top Seller</h4> <p>Sed ut perspiciatis unde omnis iste natus error sit inventore veritatis et quasi archite cbeatae consectetur adipiscing elit. Sed ut perspiciatis unde omnis iste natus errorin ventore veritatis et quasi architecto beatae consectetur adipiscing elit.</p> </div> </div> </div> </div>

Recent Projects (Full_Screen_PaneA · 5) ​

Code:

html
<div class="home31-bg01 pt-60">
	<div class="container pt-10">
		<div class="row">
			<div class="col-sm-12">
				<div class="home31-title01 pb-20">
					<h3>Recent Projects</h3>
					<div class="home31-title01line">&nbsp;</div>
				</div>
			</div>
		</div>
	</div>
	<ul class="home31-full clearfix animation">
		<li class="celarfix animation_item scaleUp delay1">
			<div class="home31-box1">
				<div class="photo_box">
					<a class="LightBox_image" href="http://demo8.dnngo.net/Portals/13/Home31-Images/home31-img03.jpg" title="Single Image 1"><span class="pic_box"> <div>&nbsp;</div> <span class="ico"> <em class="home31-plus"></em> </span> <span class="shade"></span> </a>
				</div>
			</div>
			<div class="home31-box">
				<h6>Swimming Pool</h6>
				<p>Maecenas faucibus mollis rutm interdum. Vivamus sagittis lacus vel augue laoreet rutrum fauci cursus magna, vel scelerisque nisl consectetur sit amet non aliquam eu sapien.</p>
				<a href="#" target="blank">Read More <span class="fa fa-angle-right"></span></a>
			</div>
		</li>
		<li class="celarfix animation_item scaleUp delay2">
			<div class="home31-box2">
				<div class="photo_box">
					<a class="LightBox_image" href="http://demo8.dnngo.net/Portals/13/Home31-Images/home31-img04.jpg" title="Single Image 1"><span class="pic_box"> <div>&nbsp;</div> <span class="ico"> <em class="home31-plus"></em> </span> <span class="shade"></span> </a>
				</div>
			</div>
			<div class="home31-box">
				<h6>Amazing View</h6>
				<p>Maecenas faucibus mollis rutm interdum. Vivamus sagittis lacus vel augue laoreet rutrum fauci cursus magna, vel scelerisque nisl consectetur sit amet non aliquam eu sapien.</p>
				<a href="#" target="blank">Read More <span class="fa fa-angle-right"></span></a>
			</div>
		</li>
		<li class="celarfix animation_item scaleUp delay3">
			<div class="home31-box3">
				<div class="photo_box">
					<a class="LightBox_image" href="http://demo8.dnngo.net/Portals/13/Home31-Images/home31-img05.jpg" title="Single Image 1"><span class="pic_box"> <div>&nbsp;</div> <span class="ico"> <em class="home31-plus"></em> </span> <span class="shade"></span> </a>
				</div>
			</div>
			<div class="home31-box">
				<h6>Delicious Dinner</h6>
				<p>Maecenas faucibus mollis rutm interdum. Vivamus sagittis lacus vel augue laoreet rutrum fauci cursus magna, vel scelerisque nisl consectetur sit amet non aliquam eu sapien.</p>
				<a href="#" target="blank">Read More <span class="fa fa-angle-right"></span></a>
			</div>
		</li>
		<li class="celarfix animation_item scaleUp delay4">
			<div class="home31-box4">
				<div class="photo_box">
					<a class="LightBox_image" href="http://demo8.dnngo.net/Portals/13/Home31-Images/home31-img06.jpg" title="Single Image 1"><span class="pic_box"> <div>&nbsp;</div> <span class="ico"> <em class="home31-plus"></em> </span> <span class="shade"></span> </a>
				</div>
			</div>
			<div class="home31-box the2">
				<h6>Wellness &amp; Spa</h6>
				<p>Maecenas faucibus mollis rutm interdum. Vivamus sagittis lacus vel augue laoreet rutrum fauci cursus magna, vel scelerisque nisl consectetur sit amet non aliquam eu sapien.</p>
				<a href="#" target="blank">Read More <span class="fa fa-angle-right"></span></a>
			</div>
		</li>
		<li class="celarfix animation_item scaleUp delay5">
			<div class="home31-box5">
				<div class="photo_box">
					<a class="LightBox_image" href="http://demo8.dnngo.net/Portals/13/Home31-Images/home31-img07.jpg" title="Single Image 1"><span class="pic_box"> <div>&nbsp;</div> <span class="ico"> <em class="home31-plus"></em> </span> <span class="shade"></span> </a>
				</div>
			</div>
			<div class="home31-box the2">
				<h6>Yoga-Pilates</h6>
				<p>Maecenas faucibus mollis rutm interdum. Vivamus sagittis lacus vel augue laoreet rutrum fauci cursus magna, vel scelerisque nisl consectetur sit amet non aliquam eu sapien.</p>
				<a href="#" target="blank">Read More <span class="fa fa-angle-right"></span></a>
			</div>
		</li>
		<li class="celarfix animation_item scaleUp delay6">
			<div class="home31-box6">
				<div class="photo_box">
					<a class="LightBox_image" href="http://demo8.dnngo.net/Portals/13/Home31-Images/home31-img08.jpg" title="Single Image 1"><span class="pic_box"> <div>&nbsp;</div> <span class="ico"> <em class="home31-plus"></em> </span> <span class="shade"></span> </a>
				</div>
			</div>
			<div class="home31-box the2">
				<h6>Fitness Center</h6>
				<p>Maecenas faucibus mollis rutm interdum. Vivamus sagittis lacus vel augue laoreet rutrum fauci cursus magna, vel scelerisque nisl consectetur sit amet non aliquam eu sapien.</p>
				<a href="#" target="blank">Read More <span class="fa fa-angle-right"></span></a>
			</div>
		</li>
	</ul>
</div>

Testimonials (Full_Screen_PaneA · 6) ​

Code:

html
<div class="home31-bg02 pt-60 pb-60"> <div class="container pt-20 pb-20"> <div class="row"> <div class="col-sm-12 col-md-7 animation fadeInLeft"> <div class="home31-title01 pb-10"> <h3>Testimonials</h3> <div class="home31-title01line"></div> </div> <div data-display-navigation="true" data-position="fade" data-display-arrows="false" data-autoheight="false" data-autoplay="3000" class=" Testimonials_tab home31-Testimonials"> <li> <blockquote> <div class="img"><img alt="" src="http://demo8.dnngo.net/Portals/13/Home31-Images/home31-img15.jpg" /></div> <small> <div><span>Nemo Chris</span> - CEO</div> </small> <p>Curabitur quis rhoncus tellus, quis lorem ipsum tooltip dolor quis lorem ipsum tooltip luctus luctus ligula. Quis rhoncusipsum tooltip luctus ligula tellus abitur consectetur adipiscing elit. Curabitur dolor amet glavrida tellus, </p> </blockquote> </li> <li> <blockquote> <div class="img"><img alt="" src="http://demo8.dnngo.net/Portals/13/Home31-Images/home31-img17.jpg" /></div> <small> <div><span>Harra Halloy</span> - Web Designer</div> </small> <p>Curabitur quis rhoncus tellus, quis lorem ipsum tooltip dolor quis lorem ipsum tooltip luctus luctus ligula. Quis rhoncusipsum tooltip luctus ligula tellus abitur consectetur adipiscing elit. Curabitur dolor amet glavrida tellus, quis lorem ipsum tooltip laoreet fringilla aperiam,</p> </blockquote> </li> <li> <blockquote> <div class="img"><img alt="" src="http://demo8.dnngo.net/Portals/13/Home31-Images/home31-img18.jpg" /></div> <small> <div><span>David Chris</span> - Artistic Director</div> </small> <p>&ldquo;Ut pellentesque scelerisque augue, a faucibus ipsum volutpat congue. Praesent eros mi, mattis pharetra convallis pharetra, hendrerit cursus felis. Etiam id odio at turpis tristique pulvinar. &rdquo;</p> </blockquote> </li> <li> <blockquote> <div class="img"><img alt="" src="http://demo8.dnngo.net/Portals/13/Home31-Images/home31-img17.jpg" /></div> <small> <div><span>John Smith</span> - Skin Developer</div> </small> <p>&ldquo; Nemo enim ipsam voluptatem quia voluptas sit aspernat uraut odit aut fugit, sed quia consequuntur magni dolores nec semper mi posuere nec lor nam nunc est quis fauc ibus iaculis quam est. &rdquo;</p> </blockquote> </li> </div> </div> <div class="col-sm-12 col-md-5 animation fadeInRight"> <div class="home31-title01 pb-30"> <h3>Reliable Customers</h3> </div> <ul class="home31-clients"> <li> <a href="#"><img alt="" src="http://demo8.dnngo.net/Portals/13/Home31-Images/home31-img09.png" /></a> </li> <li> <a href="#"><img alt="" src="http://demo8.dnngo.net/Portals/13/Home31-Images/home31-img10.png" /></a> </li> <li> <a href="#"><img alt="" src="http://demo8.dnngo.net/Portals/13/Home31-Images/home31-img11.png" /></a> </li> <li> <a href="#"><img alt="" src="http://demo8.dnngo.net/Portals/13/Home31-Images/home31-img12.png" /> </a> </li> <li> <a href="#"><img alt="" src="http://demo8.dnngo.net/Portals/13/Home31-Images/home31-img13.png" /></a> </li> <li> <a href="#"><img alt="" src="http://demo8.dnngo.net/Portals/13/Home31-Images/home31-img14.png" /> </a> </li> </ul> </div> </div> </div> </div> <div class="pt-60 pb-10"></div>

Our Teams (Full_Screen_PaneA · 7) ​

Code:

html
<div class="container pb-60 mb-10"> <div class="home31-pr10 home31-pl10 text-center">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.</div> <div class="row animation home31-teambox pt-40"> <div class="col-sm-4 animation_item scaleUp delay1"> <div class="home31-teamimg"><img alt="" class="img-responsive" src="http://demo8.dnngo.net/Portals/13/Home31-Images/home31-img16.jpg" /></div> <div class="home31-teaminfo pt-40 pb-20"> <h4>Harra Halloy</h4> <h5>CEO</h5> </div> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur dolor amet glavrida tellus, quis lorem ipsum tooltip luctus ligula. Curabitur quis rhoncus tellus, quis lorem ipsum doloripsum tooltip luctus ligula luctus ligula porro quisquam est.</p> <div class="home31-social pt-30"> <a href="#"><span class="fa fa-facebook"></span></a> <a href="#"><span class="fa fa-twitter"></span></a> <a href="#"><span class="fa fa-flickr"></span> </a> <a href="#"><span class="fa fa-linkedin"></span> </a> <a href="#"><span class="fa fa-skype"></span></a> <a href="#"> <span class="fa fa-google-plus"></span></a> <a href="#"> <span class="fa fa-rss"></span> </a></div> </div> <div class="col-sm-4 animation_item scaleUp delay2"> <div class="home31-teamimg"><img alt="" class="img-responsive" src="http://demo8.dnngo.net/Portals/13/Home31-Images/home31-img17.jpg" /></div> <div class="home31-teaminfo pt-40 pb-20"> <h4>John Smith</h4> <h5>Manager</h5> </div> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur dolor amet glavrida tellus, quis lorem ipsum tooltip luctus ligula. Curabitur quis rhoncus tellus, quis lorem ipsum doloripsum tooltip luctus ligula luctus ligula porro quisquam est.</p> <div class="home31-social pt-30"><a href="#"><span class="fa fa-facebook"></span></a> <a href="#"><span class="fa fa-twitter"></span></a> <a href="#"><span class="fa fa-flickr"></span> </a> <a href="#"><span class="fa fa-linkedin"></span> </a> <a href="#"><span class="fa fa-skype"></span></a> <a href="#"> <span class="fa fa-google-plus"></span></a> <a href="#"> <span class="fa fa-rss"></span> </a> </div> </div> <div class="col-sm-4 animation_item scaleUp delay3"> <div class="home31-teamimg"><img alt="" class="img-responsive" src="http://demo8.dnngo.net/Portals/13/Home31-Images/home31-img18.jpg" /></div> <div class="home31-teaminfo pt-40 pb-20"> <h4>David Chris</h4> <h5>Butlers</h5> </div> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur dolor amet glavrida tellus, quis lorem ipsum tooltip luctus ligula. Curabitur quis rhoncus tellus, quis lorem ipsum doloripsum tooltip luctus ligula luctus ligula porro quisquam est.</p> <div class="home31-social pt-30"><a href="#"><span class="fa fa-facebook"></span></a> <a href="#"><span class="fa fa-twitter"></span></a> <a href="#"><span class="fa fa-flickr"></span> </a> <a href="#"><span class="fa fa-linkedin"></span> </a> <a href="#"><span class="fa fa-skype"></span></a> <a href="#"> <span class="fa fa-google-plus"></span></a> <a href="#"> <span class="fa fa-rss"></span> </a> </div> </div> </div> </div>

pricing (Full_Screen_PaneA · 8) ​

Code:

html
<div class="container "> <div class="home31-pr10 home31-pl10 text-center pb-40">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.</div> <div class="dg-price home31-price animation clearfix pb-10"> <div class="left-title animation_item scaleUp delay1"> <div class="price-border"> <div class="price-title"> <h2>items</h2> </div> <div class="price-box"><span class="sup">&euro;</span><span class="unit">Pricing </span></div> <div class="price-holder"> <ul> <li>Breakfast Included</li> <li>Room Service</li> <li>Number of Children</li> <li>Lunch/Dinner</li> <li>Parking</li> </ul> </div> <div class="price-btninfo">order here</div> </div> </div> <div class="row"> <div class="col-sm-3 animation_item scaleUp delay2"> <div class="price-border"> <div class="price-title"> <h2>Basic</h2> </div> <div class="price-box"><span class="sup">$</span><span class="price">50</span><span class="unit">Per day</span></div> <div class="price-holder"> <ul> <li><span class="mobile-text">Breakfast Included:</span>No</li> <li><span class="mobile-text">Room Service:</span>Not available</li> <li><span class="mobile-text">Number of Children:</span>0</li> <li><span class="mobile-text">Lunch/Dinner:</span>No</li> <li><span class="mobile-text">Parking:</span>No</li> </ul> </div> <a class="home31-btn02" href="#" target="_blank">book now</a></div> </div> <div class="col-sm-3 animation_item scaleUp delay3"> <div class="price-border"> <div class="price-title"> <h2>Standard</h2> </div> <div class="price-box"><span class="sup">$</span><span class="price">75</span><span class="unit">Per day</span></div> <div class="price-holder"> <ul> <li><span class="mobile-text">Breakfast Included:</span>Yes</li> <li><span class="mobile-text">Room Service:</span>Not available</li> <li><span class="mobile-text">Number of Children:</span>1</li> <li><span class="mobile-text">Lunch/Dinner:</span>No</li> <li><span class="mobile-text">Parking:</span>No</li> </ul> </div> <a class="home31-btn02" href="#" target="_blank">book now</a></div> </div> <div class="col-sm-3 animation_item scaleUp delay4"> <div class="price-border"> <div class="price-title"> <h2>suit</h2> </div> <div class="price-box"><span class="sup">$</span><span class="price">100</span><span class="unit">Per day</span></div> <div class="price-holder"> <ul> <li><span class="mobile-text">Breakfast Included:</span>Yes</li> <li><span class="mobile-text">Room Service:</span>Available</li> <li><span class="mobile-text">Number of Children:</span>up to 2</li> <li><span class="mobile-text">Lunch/Dinner:</span>Yes</li> <li><span class="mobile-text">Parking:</span>Yes</li> </ul> </div> <a class="home31-btn02" href="#" target="_blank">book now</a></div> </div> <div class="col-sm-3 animation_item scaleUp delay5"> <div class="price-border"> <div class="price-title"> <h2>delux</h2> </div> <div class="price-box"><span class="sup">$</span><span class="price">150</span><span class="unit">Per day</span></div> <div class="price-holder"> <ul> <li><span class="mobile-text">Breakfast Included:</span>Yes</li> <li><span class="mobile-text">Room Service:</span>Available</li> <li><span class="mobile-text">Number of Children:</span>up to 4</li> <li><span class="mobile-text">Lunch/Dinner:</span>Yes</li> <li><span class="mobile-text">Parking:</span>Yes</li> </ul> </div> <a class="home31-btn02" href="#" target="_blank">book now</a></div> </div> </div> </div> </div>

Contact Us (Home31PaneA · 1) ​

Code:

html
<div class="home31-title01 pb-10 pt-20"> <h3>Contact Us</h3> <div class="home31-title01line"></div> </div> <div class="home31-pr10 home31-pl10 text-center pb-30" style="color: #ffffff;">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.</div>

Form Section (Home31PaneA) ​

This section uses the DNNGo PowerForms module — see PowerForms.

Archives (FootPaneD) ​

Code:

html
<ul class="home31-footer-list animation fadeInLeft">
    <li><a href="#"><span class="fa fa-angle-double-right"></span>February 13, 2014</a></li>
    <li><a href="#"><span class="fa fa-angle-double-right"></span>March 08, 2014</a></li>
    <li><a href="#"><span class="fa fa-angle-double-right"></span>August 27, 2014</a></li>
    <li><a href="#"><span class="fa fa-angle-double-right"></span>September 06, 2014</a></li>
    <li><a href="#"><span class="fa fa-angle-double-right"></span>December 19, 2014</a></li>
</ul>

Tags (FootPaneE) ​

Code:

html
<ul class="home31-footer-list02 clearfix animation fadeInDown">
    <li><a href="#">Dnngo</a></li>
    <li><a href="#">HTML5</a></li>
    <li><a href="#">CSS3</a></li>
    <li><a href="#">Skin Pack </a></li>
    <li><a href="#">Catalook</a></li>
    <li><a href="#">Blog</a></li>
    <li><a href="#">Features</a></li>
    <li><a href="#">Gallery Sliders</a></li>
    <li><a href="#">Photos</a></li>
    <li><a href="#"> News</a></li>
    <li><a href="#">Form</a></li>
    <li><a href="#">Short Code </a></li>
    <li><a href="#">Mobilesite</a></li>
</ul>

Contact (FootPaneF) ​

Code:

html
<div class="animation fadeInUp">
<p>Sed non neque elit. Sed ut imperdiet nisi. Proin condime ntum fermentum nunc. Etiam pharetra, erat sed ferm entum feugiati.</p>
<ul class="home31-footer-list03">
    <li><span class="fa fa-map-marker"></span>Address: XingAn Street No.287</li>
    <li><span class="fa  fa-phone"></span>Phone: (+086)-123-456-78910</li>
    <li><span class="fa  fa-envelope"></span>Email: [email protected]</li>
    <li><span class="fa fa-skype"></span>Skype: dnngo-Linda</li>
</ul>
</div>

Photos (FootPaneG) ​

Code:

html
<ul class="home31-photolist clearfix animation fadeInRight">
    <li>
    <div class="photo_box img_zoom"> <a href="http://demo8.dnngo.net/Portals/13/Home31-Images/home31-lightbox01.jpg" class="LightBox_image_gallery5">
    <div class="pic_box"> <img alt="" src="http://demo8.dnngo.net/Portals/13/Home31-Images/home31-img19.jpg" />
    <span class="ico">
    <em></em>
    </span>
    <div class="shade"></div>
    </div>
    </a> </div>
    </li>
    <li>
    <div class="photo_box img_zoom"> <a href="http://demo8.dnngo.net/Portals/13/Home31-Images/home31-lightbox02.jpg" class="LightBox_image_gallery5">
    <div class="pic_box"> <img alt="" src="http://demo8.dnngo.net/Portals/13/Home31-Images/home31-img20.jpg" />
    <span class="ico">
    <em></em>
    </span>
    <div class="shade"></div>
    </div>
    </a> </div>
    </li>
    <li>
    <div class="photo_box img_zoom"> <a href="http://demo8.dnngo.net/Portals/13/Home31-Images/home31-lightbox03.jpg" class="LightBox_image_gallery5">
    <div class="pic_box"> <img alt="" src="http://demo8.dnngo.net/Portals/13/Home31-Images/home31-img21.jpg" />
    <span class="ico">
    <em></em>
    </span>
    <div class="shade"></div>
    </div>
    </a> </div>
    </li>
    <div class="row-fluid">
    <li>
    <div class="photo_box img_zoom"> <a href="http://demo8.dnngo.net/Portals/13/Home31-Images/home31-lightbox04.jpg" class="LightBox_image_gallery5">
    <div class="pic_box"> <img alt="" src="http://demo8.dnngo.net/Portals/13/Home31-Images/home31-img22.jpg" />
    <span class="ico">
    <em></em>
    </span>
    <div class="shade"></div>
    </div>
    </a> </div>
    </li>
    <li>
    <div class="photo_box img_zoom"> <a href="http://demo8.dnngo.net/Portals/13/Home31-Images/home31-lightbox05.jpg" class="LightBox_image_gallery5">
    <div class="pic_box"> <img alt="" src="http://demo8.dnngo.net/Portals/13/Home31-Images/home31-img23.jpg" />
    <span class="ico">
    <em></em>
    </span>
    <div class="shade"></div>
    </div>
    </a> </div>
    </li>
    <li>
    <div class="photo_box img_zoom"> <a href="http://demo8.dnngo.net/Portals/13/Home31-Images/home31-lightbox06.jpg" class="LightBox_image_gallery5">
    <div class="pic_box"> <img alt="" src="http://demo8.dnngo.net/Portals/13/Home31-Images/home31-img24.jpg" />
    <span class="ico">
    <em></em>
    </span>
    <div class="shade"></div>
    </div>
    </a> </div>
    </li>
    </div>
</ul>

App Site | Recent Post | Comments (FooterPane) ​

Code:

html
<a href="#">App Site</a> &nbsp;&nbsp; | &nbsp;&nbsp; <a href="#">Recent Post</a> &nbsp;&nbsp; | &nbsp;&nbsp; <a href="#">Comments</a>