photographer
<!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>Photographer</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type='text/css'>
body {
margin:0px;
padding:0px;
color: #666;
font-family: Tahoma, Geneva, sans-serif;
font-size:13px;
line-height:1.5em;
background-color: #fff;
}
a, a:link, a:visited { color: #000; font-weight: normal; }
a:hover { color: #CC0000; text-decoration:none; }
p { margin: 0px; padding: 0 0 10px 0; }
img { border: none; }
h1 { font-size: 28px; color: #000; margin: 0 0 20px 0; padding: 5px 0; font-weight: normal; }
h2 { font-size: 22px; color: #000; margin: 0 0 10px 0; padding: 0 0 5px 0; font-weight: normal; }
h3 {
font-size: 21px;
color: #333;
margin: 0 0 15px 0;
padding: 0;
text-decoration: none;
font-weight: normal;
}
h4 {
font-size: 18px;
color: #000;
margin: 0 0 10px 0;
padding: 0;
}
h5 {
font-size: 14px;
height: 27px;
width: 116px;
color: #000;
margin: 0;
padding: 3px 10px 0 10px;
text-align: center;
background: url(photographer-images/h5_bg.png) no-repeat top left;
}
h6 { font-size: 12px; margin: 0 0 5px 0; padding: 0;}
blockquote { font-style: italic; }
cite { font-weight: normal; color: #1d68b6; font-size: 14px; }
.cleaner { clear: both; width: 100%; height: 0px; font-size: 0px; }
.cleaner_h10 { clear: both; width:100%; height: 10px; }
.cleaner_h20 { clear: both; width:100%; height: 20px; }
.cleaner_h30 { clear: both; width:100%; height: 30px; }
.cleaner_h40 { clear: both; width:100%; height: 40px; }
.cleaner_h50 { clear: both; width:100%; height: 50px; }
.cleaner_h60 { clear: both; width:100%; height: 60px; }
.margin_r15 { margin-right: 15px; }
.margin_r30 { margin-right: 30px; }
.float_l { float: left; }
.float_r { float: right; }
.image_wrapper { padding: 8px; border: 1px solid #000; background: #0f1115; }
.fl_img { float: left; margin: 3px 30px 15px 0; }
.fr_img { float: right; margin: 3px 0 15px 15px; }
.button_01 a {
position: relative;
float: left;
display: inline-block;
padding: 5px 0 0 0px;
margin-right: 40px;
margin-left: 35px;
border-bottom: 1px dotted #333;
color: #000;
font-weight: normal;
font-size: 11px;
text-align: center;
text-decoration: none;
}
.button_01 a span {
position: absolute;
top: 0;
left: -35px;
width: 27px;
height: 38px;
background: url(photographer-images/icon_01.png) no-repeat;
}
.button_02 a {
position: relative;
float: right;
width: 109px;
height: 33px;
display: block;
padding: 13px 0 0 0;
background: url(photographer-images/button.png) no-repeat;
color: #fff;
font-weight: bold;
font-size: 11px;
text-align: center;
text-decoration: none;
}
.button_02 a:hover {
color: #311c0c;
}
ul { margin: 20px 30px; padding: 0; }
ul li { padding-bottom: 3px; margin-bottom: 2px; background: url(photographer-images/ul_list.png) no-repeat center left; }
ul li a { font-weight: normal; text-decoration: none; }
/* header */
#header_wrapper {
width: 100%;
background: url(photographer-images/header.jpg) repeat-x;
}
#header {
width: 930px;
height: 108px;
margin: 0 auto;
padding: 0 15px;
}
#header .header_left {
float: left;
width: 300px;
}
#header .header_right {
float: right;
width: 600px;
}
/* site title */
#header #site_title {
float: left;
width: 200px;
padding: 40px 0 0 0;
}
#site_title a {
margin: 0px;
padding: 0px;
font-size: 26px;
color: #ffffff;
font-weight: normal;
text-decoration: none;
}
#site_title h1 a:hover {
font-weight: bold;
text-decoration: none;
}
#site_title a span {
display: block;
margin-top: -20px;
color: #fff;
font-size: 13px;
text-align: center;
font-family: "Times New Roman", Times, serif;
}
/* end of site title */
/* search */
#search_box {
float: right;
margin: 15px 0 0 0;
}
#search_box form {
margin: 0;
padding: 0;
}
#search_box #input_field {
height: 16px;
width: 150px;
color: #fff;
font-size: 12px;
padding: 3px 5px 3px 5px;
font-variant: normal;
line-height: normal;
border: 1px solid #1b0d03;
background: #261305;
}
#search_box #submit_btn {
height: 25px;
cursor: pointer;
padding: 2px 5px 7px 5px;
font-size: 12px;
text-align: center;
vertical-align: bottom;
white-space: pre;
outline: none;
color:#885f40;
border: 1px solid #1b0d03;
background: #261305;
}
/* end of search */
/* menu */
#header #menu {
clear: both;
float: right;
height: 53px;
margin-top: 12px;
}
#menu ul {
margin: 0;
padding: 0;
list-style: none;
}
#menu ul li {
padding: 0;
margin: 0;
display: inline;
}
#menu ul li a {
float: left;
display: block;
height: 28px;
width: 98px;
margin-left: 10px;
padding: 25px 0 0 0;
text-align: center;
font-size: 14px;
text-decoration: none;
color: #cdaf96;
font-weight: normal;
outline: none;
}
#menu li a:hover, #menu li .current {
color: #b78864;
background: url(photographer-images/menu_hover.png) no-repeat;
}
/* end of menu */
/* welcome */
#welcome_wrapper {
clear: both;
width: 100%;
height: 230px;
background: url(photographer-images/welcome.jpg) repeat-x;
}
#welcome {
width: 930px;
height: 200px;
margin: 0 auto;
padding: 15px;
background: url(photographer-images/wlecome_bg.jpg) top right no-repeat;
}
#welcome_image {
float: left;
position: relative;
width: 298px;
height: 147px;
padding: 25px;
}
#welcome_image span {
position: absolute;
top: 0;
left: 0;
width: 338px;
height: 197px;
background:url(photographer-images/slide.png) no-repeat;
}
#welcome_text {
float: right;
width: 520px;
padding-top: 20px;
}
/* end of welcome */
/* services */
#services_wrapper {
clear: both;
width: 100%;
height: 208px;
background: url(photographer-images/services.jpg) repeat-x;
}
#services {
width: 930px;
height: 158px;
margin: 0 auto;
padding: 25px 15px;
}
.services_box {
float: left;
width: 250px;
padding: 0 30px;
background: url(photographer-images/vertical_divider.png) no-repeat center right;
}
.services_box_last {
background: none;
}
/* end of services */
/* content */
#content_wrapper_outer {
width: 100%;
background: #e8dbb9 url(photographer-images/content_top.jpg) repeat-x top;
}
#content_wrapper_inner {
width: 100%;
background: #e8dbb9 url(photographer-images/content_bottom.jpg) repeat-x bottom;
}
#content_wrapper {
width: 930px;
margin: 0 auto;
padding: 30px 15px;
}
#content {
float: left;
width: 600px;
margin: 0 auto;
padding: 30px 15px;
}
#content_wrapper h2 {
padding: 20px 0 20px 60px;
margin: 0 0 15px 0;
}
#content_wrapper .our_services {
background: url(photographer-images/list.png) top left no-repeat;
}
#content_wrapper .about_us {
background: url(photographer-images/about.png) top left no-repeat;
}
#content_wrapper .current_activities {
background: url(photographer-images/date.png) top left no-repeat;
}
#sidebar {
position: relative;
float: right;
width: 240px;
margin: 13px 0;
padding: 10px 20px;
background: url(photographer-images/sidebar_bg.png) repeat-y;
}
#sidebar .sidebar_top {
position: absolute;
top: -13px;
left: 0;
width: 280px;
height: 13px;
background: url(photographer-images/sidebar_top.png) no-repeat;
}
#sidebar .sidebar_bottom {
position: absolute;
bottom: -13px;
left: 0;
width: 280px;
height: 13px;
background: url(photographer-images/sidebar_bottom.png) no-repeat;
}
#sidebar .activities_box {
margin-bottom: 15px;
}
#sidebar .activities_box a {
font-weight: bold;
}
/* end of content */
/* footer */
#footer_wrapper {
width: 100%;
height: 152px;
background: url(photographer-images/footer.jpg) repeat-x bottom;
}
#footer {
width: 982px;
height: 62px;
margin: 0 auto;
padding: 90px 0 0 0;
text-align: center;
color: #fff;
background: url(photographer-images/footer_bg.png) no-repeat bottom;
}
#footer a {
color: #fff;
font-weight: normal;
}
/* end of footer */
</style>
</head>
<body>
<div id="header_wrapper">
<div id="header">
<div class="header_left">
<div id="site_title"> <a href="#"> <img src="photographer-images/logo.png" alt="" /> </a> </div>
</div>
<!-- end of header left -->
<div class="header_right">
<div id="search_box">
<form action="#" method="get">
<input type="text" value="" name="username" size="10" id="input_field" />
<input type="submit" name="login" value="Search" alt="login" id="submit_btn" />
</form>
<div class="cleaner"></div>
</div>
<div id="menu">
<ul>
<li><a href="#" class="current">HOME</a></li>
<li><a href="#">PORTFOLIO</a></li>
<li><a href="#">GALLERY</a></li>
<li><a href="#">ABOUT</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</div>
<!-- end of menu -->
</div>
<!-- end of header right -->
<div class="cleaner"></div>
</div>
<!-- end of header -->
</div>
<!-- end of header wrapper -->
<div id="welcome_wrapper">
<div id="welcome">
<div id="welcome_image"> <span></span> <img src="photographer-images/image_01.jpg" alt="" /> </div>
<div id="welcome_text">
<h1>New Photographer Website</h1>
<p>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. </p>
<div class="button_01"><a href="#"><span></span>Vew Portfolio</a></div>
<div class="button_01"><a href="#"><span></span>View Projects</a></div>
</div>
</div>
</div>
<div id="services_wrapper">
<div id="services">
<div class="services_box">
<h2>Duis vitae velit sed</h2>
<p>Suspendisse vitae neque eget ante tristique vestibulum. Pellentesque dolor nulla, congue vitae, fringilla in, varius a, orci. Mauris convallis.</p>
<div class="button_02"><a href="#">Read more</a></div>
<div class="cleaner"></div>
</div>
<div class="services_box">
<h2>Etharum quidem rerum</h2>
<p>Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates fringilla in, varius a, orci. Mauris convallis.</p>
<div class="button_02"><a href="#">Read more</a></div>
<div class="cleaner"></div>
</div>
<div class="services_box services_box_last">
<h2>Nemo enimipsam</h2>
<p>Nullam a nulla id diam facilisis facilisis semper vitae lorem. Cras porttitor nisi ut turpis condimentum tincidunt. Pellentesque sit amet magna vel lectus.</p>
<div class="button_02"><a href="#">Read more</a></div>
<div class="cleaner"></div>
</div>
</div>
</div>
<div id="content_wrapper_outer">
<div id="content_wrapper_inner">
<div id="content_wrapper">
<div id="content">
<h2 class="our_services">Customer Services</h2>
<p>This <a href="#">CSS template</a> is provided by TemplateMo.com for free of charge. You may download, edit and use this web layout for your websites. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore.</p>
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eu nibh justo.</li>
<li><a href="#">Flash Templates</a> - Cras odio nulla, aliquam vel tincidunt vel, suscipit nec dui.</li>
<li>Quisque sodales accumsan cursus. In at metus massa. Phasellus ut lorem eget augue.</li>
<li>Etiam ultricies arcu id ante facilisis euismod non vitae mi. Vestibulum id quam nulla.</li>
</ul>
<div class="cleaner_h20"></div>
<h2 class="about_us">About Our Studio</h2>
<p>Tincidunt vitae, sagittis vel, interdum at, erat. Duis vitae velit. Ut ultricies. Fusce sollicitudin nisl a lectus. Pellentesque odio. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed leo. Duis suscipit lorem in risus.</p>
</div>
<div id="sidebar"><span class="sidebar_top"></span><span class="sidebar_bottom"></span>
<h2 class="current_activities">Current Activities</h2>
<div class="activities_box"> <a href="#">Quisque in diam a justo.</a>
<p>Molestie vivamus a velit. Cumsociis natoque penatibus et magnis. </p>
</div>
<div class="activities_box"> <a href="#">Curabitur quis velit quis. </a>
<p>Tortor tincidunt aliquet. Vivamus leo velit, convallis id, ultrices sit amet.</p>
</div>
<div class="activities_box"> <a href="#">Donec eu tellus lacus</a>
<p>Mauris quis nulla sed ipsum pretium sagittis. Suspendisse feugiat. </p>
</div>
</div>
<div class="cleaner"></div>
</div>
</div>
</div>
<div id="footer_wrapper">
<div id="footer"> Copyright © 2048 <a href="#">Your Company Name</a> | Designed by <a href="http://www.templatemo.com/">Free CSS Templates</a></div>
</div>
</body>
</html>
Related examples in the same category