photo-studio
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Photography Website</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type='text/css'>
/*
CSS Credit: http://www.templatemo.com/
*/
html {
background: #032b44;
}
body {
margin: 0;
padding:0;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 1.5em;
color: #fff;
background: #032b44 url(photo-studio-images/top_bg.jpg) repeat-x center top;
width: 100%;
display: table;
}
a:link, a:visited { color: #daea71; text-decoration: none; }
a:active, a:hover { color: #99FF00; text-decoration: none }
h1 {
font-size: 22px;
font-weight: bold;
color: #fff;
height: 32px;
padding: 0px 0px 0px 0px;
}
h2 {
margin-top: 20px;
font-size: 16px;
font-weight: bold;
color: #fff;
height: 27px;
padding: 7px 0px 0px 35px;
background: url(photo-studio-images/h2.jpg) no-repeat;
}
#container {
width: 1000px;
margin: auto;
}
#top_section1 {
float: left;
width: 41px;
height: 320px;
background: url(photo-studio-images/top1.jpg) no-repeat;
}
#top_section2 {
float: left;
width: 638px;
height: 320px;
}
#top_section3 {
float: left;
width: 59px;
height: 320px;
background: url(photo-studio-images/top3.jpg) no-repeat;
}
#top_section4 {
float: left;
width: 262px;
height: 320px;
background: url(photo-studio-images/top4.jpg) no-repeat;
}
.hor_menu{
float: left;
margin: 0px;
padding-left: 10px;
width: 252px;
}
.hor_menu ul {
list-style: none;
padding-left: 0px;
margin: 0px;
}
.hor_menu li{
display: inline;
}
.hor_menu li a{
float: left;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
text-decoration: none;
text-align: center;
color: #6c5d3e;
width: 70px;
height: 30px;
padding-top: 65px;
}
.hor_menu li a:hover {
color: #333333;
}
.ver_menu{
width: 188px;
float: left;
margin: 10px 0px 0px 20px;
}
.ver_menu ul {
list-style-type: none;
margin: 0px;
padding: 0px 0px 0px 0px;
}
.ver_menu li a{
display: block;
height: 26px;
font-weight: bold;
color: #6c5d3e;
padding: 10px 0px 0px 40px;
background: url(photo-studio-images/button.jpg) no-repeat;
}
.ver_menu li a:hover {
color: #333333;
}
#title {
float: left;
width: 638px;
height: 51px;
font-size: 28px;
font-weight: bold;
text-align: right;
padding-top: 20px;
line-height: 1.6em;
background: url(photo-studio-images/title.jpg) no-repeat;
}
#top_section5 {
float: left;
width: 1000px;
height: 65px;
background: url(photo-studio-images/top5.jpg) no-repeat;
}
#container_left{
float: left;
width: 630px;
padding: 0px 50px 0px 50px;
text-align: justify;
}
#container_left img {
float: left;
padding-right: 10px;
}
#container_right {
float: left;
width: 250px;
padding-right: 20px;
text-align: justify;
}
#container_right span {
font-weight: bold;
color: #daea71;
}
.right_paragraph {
float: left;
width: 250px;
}
.more {
float: left;
width: 240px;
height: 44px;
font-weight: bold;
margin-top: 15px;
padding: 7px 0px 0px 10px;
background: url(photo-studio-images/more.jpg) no-repeat;
}
.more a {
color: #022b44;
}
#footer_link {
float: left;
width: 100%;
margin-top: 20px;
height: 42px;
background: url(photo-studio-images/footer_link.jpg) repeat-x;
}
.footer_menu{
margin: auto;
width: 1000px;
}
.footer_menu ul {
list-style: none;
padding-left: 0px;
margin: 0px;
}
.footer_menu li{
display: inline;
}
.footer_menu li a {
float: left;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
text-decoration: none;
text-align: center;
color: #fff;
width: 120px;
height: 30px;
padding-top: 10px
}
.footer_menu li a:hover {
color: #99FF00;
}
#footer {
float: left;
width: 100%;
height: 100px;
padding-top: 20px;
background-color: #062237;
}
#templatemmo_footer_paragraph {
margin: auto;
width: 900px;
}
/* Gallery */
div.content {
/* The display of content is enabled by a javascript generated style on the page.
This is so that the slideshow content won't display unless javascript is enabled. */
display:block;
float:left;
width:472px;
background-color: #fff;
}
div.slideshow {
clear: both;
}
div.slideshow span.image-wrapper {
float: left;
padding-bottom: 0px;
}
div.slideshow img {
border: none;
display: block;
}
div.navigation {
width:166px;float: left;
}
ul.thumbs {
clear: both;
margin: 0;
padding: 0;
}
ul.thumbs li {
float: left;
padding: 0;
margin: 0;
list-style: none;
}
ul.thumbs li a {
padding: 0px;
display: block;
}
ul.thumbs li.selected a {
background: #88f;
}
ul.thumbs a:focus {
outline: none;
}
ul.thumbs img {
border: none;
display: block;
}
</style>
<script type="text/javascript" src="jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="jquery.galleriffic.js"></script>
</head>
<body>
<div id="container">
<div id="top_section1"></div>
<div id="top_section2">
<div id="title">Photography Website</div>
<div id="container">
<div id="gallery" class="content">
<div id="slideshow" class="slideshow"></div>
</div>
<div id="navigation" class="navigation">
<ul class="thumbs noscript">
<li><a href="gallery/gallery1.jpg"><img src="gallery/s-gallery1.jpg" alt="" /></a></li>
<li><a href="gallery/gallery2.jpg"><img src="gallery/s-gallery2.jpg" alt="" /></a></li>
<li><a href="gallery/gallery3.jpg"><img src="gallery/s-gallery3.jpg" alt="" /></a></li>
<li><a href="gallery/gallery4.jpg"><img src="gallery/s-gallery4.jpg" alt="" /></a></li>
<li><a href="gallery/gallery5.jpg"><img src="gallery/s-gallery5.jpg" alt="" /></a></li>
<li><a href="gallery/gallery6.jpg"><img src="gallery/s-gallery6.jpg" alt="" /></a></li>
</ul>
</div>
</div>
</div>
<div id="top_section3"></div>
<div id="top_section4">
<div class="hor_menu">
<ul>
<li><a href="http://www.free-css.com/">HOME</a></li>
<li><a href="http://www.free-css.com/">ABOUT</a></li>
<li><a href="http://www.free-css.com/">CONTACT</a></li>
</ul>
</div>
<div class="ver_menu">
<ul>
<li><a href="http://www.free-css.com/">NEW COLLECTIONS</a></li>
<li><a href="http://www.free-css.com/">BEST OF THE YEAR</a></li>
<li><a href="http://www.free-css.com/">LATEST EVENTS</a></li>
<li><a href="http://www.free-css.com/">PHOTOGRAPHERS</a></li>
<li><a href="http://www.free-css.com/">SPECIAL AWARDS</a></li>
</ul>
</div>
</div>
<div id="top_section5"></div>
<div id="container_left">
<h1>WELCOME TO OUR PHOTO STUDIO</h1>
<p>This free CSS template is provided by TemplateMo.com. You may download, edit and use this website layout for personal or commercial websites.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc quis sem nec tellus blandit tincidunt. Duis vitae velit sed dui malesuada dignissim. Donec mollis aliquet ligula. Maecenas adipiscing elementum ipsum. Pellentesque vitae magna. Sed nec est. Suspendisse a nibh tristique justo rhoncus volutpat. Suspendisse vitae neque eget ante tristique vestibulum. </p>
<p>Pellentesque dolor nulla, congue vitae, fringilla in, varius a, orci. Mauris convallis. Proin vel libero id erat venenatis accumsan. Nunc blandit orci sit amet risus. Donec mollis aliquet ligula. Maecenas adipiscing elementum ipsum. </p>
<h2>ABOUT US</h2>
<p><img src="photo-studio-images/photo.jpg" alt="" width="169" height="127" />Pellentesque vitae magna. Sed nec est. Suspendisse a nibh tristique justo rhoncus volutpat. Suspendisse vitae neque eget ante tristique vestibulum. Donec mollis aliquet ligula. </p>
<p>Maecenas adipiscing elementum ipsum. Pellentesque vitae magna. Sed nec est. Suspendisse a nibh tristique justo rhoncus volutpat. Suspendisse vitae neque eget ante tristique vestibulum. </p>
</div>
<div id="container_right">
<p><strong>LATEST NEWS & EVENTS</strong></p>
<div class="right_paragraph"><span>[24-10-2020] In hac habitasse platea</span><br />
Aliquam elit risus, volutpat quis, mattis ac, elementum eget, mauris. Maecenas aliquam, ligula id egestas suscipit, nisi sapien dignissim nibh, ac vestibulum lorem urna in neque.</div>
<div class="more"><a href="http://www.free-css.com/">MORE</a></div>
<div class="right_paragraph"><span>[16-10-2020] Aenean cursus</span><br />
Aenean eget tortor eget ipsum aliquet porta. Vestibulum quis pede non urna venenatis vehicula. Praesent vel diam. Cras sed leo tempor neque placerat pretium.</div>
<div class="more"><a href="http://www.free-css.com/">MORE</a></div>
<div class="right_paragraph"><a target="_blank" href="http://validator.w3.org/check?uri=referer"><img height="31" alt="" src="http://www.w3.org/Icons/valid-xhtml10" width="88" vspace="8" border="0" /></a><a target="_blank" href="http://jigsaw.w3.org/css-validator/check/referer"><img alt="" src="http://jigsaw.w3.org/css-validator/photo-studio-images/vcss-blue" vspace="8" border="0" /></a></div>
</div>
</div>
<div id="footer_link">
<div class="footer_menu">
<ul>
<li><a href="http://www.free-css.com/">HOME</a></li>
<li><a href="http://www.free-css.com/">ABOUT US</a></li>
<li><a href="http://www.free-css.com/">COLLECTIONS</a></li>
<li><a href="http://www.free-css.com/">BEST OF THE YEAR</a></li>
<li><a href="http://www.free-css.com/">LATEST EVENTS</a></li>
<li><a href="http://www.free-css.com/">PHOTOGRAPHERS</a></li>
<li><a href="http://www.free-css.com/">AWARDS</a></li>
<li><a href="http://www.free-css.com/">CONTACT</a></li>
</ul>
</div>
</div>
<div id="footer">
<div id="templatemmo_footer_paragraph">
<p>QUICK CONTACT<br />
Tel: 010-010-0100 Mobile: 020-020-0200 Fax: 030-030-0300 Email: info [-at-] TemplateMo.com</p>
<p>Copyright 2020 Your Company Name Designed by <a href="http://www.templatemo.com">Free CSS Templates</a></p>
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
var gallery = $('#gallery').galleriffic('#navigation', {
delay: 2000,
numThumbs: 12,
imageContainerSel: '#slideshow',
controlsContainerSel: '#controls',
titleContainerSel: '#image-title',
descContainerSel: '#image-desc',
downloadLinkSel: '#download-link'
});
gallery.onFadeOut = function() {
$('#details').fadeOut('fast');
};
gallery.onFadeIn = function() {
$('#details').fadeIn('fast');
};
});
</script>
</body>
</html>
Related examples in the same category