photoshare
<!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>Photo Sharing</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type='text/css'>
/*
CSS Credit: http://www.templatemo.com/
*/
body {
margin:0;
padding:0;
line-height: 1.5em;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #ffffff;
background: #000000;
}
a:link, a:visited { color: #ffffff; text-decoration: none; }
a:active, a:hover { color: #ffffff; text-decoration: underline; }
h1 {
margin:0px 0px 10px 0px;
padding: 0px 0px 10px 0px;
font-weight: bold;
font-size: 16px;
color:#edf0c8;
border-bottom: 1px solid #666666;
}
h2 {
margin:0px 0px 10px 0px;
padding: 5px 0px 10px 0px;
font-weight: bold;
font-size: 14px;
color:#edf0c8;
border-bottom: 1px solid #666666;
}
p {
margin: 0px 0px 10px 0px;
text-align: justify;
}
img {
margin: 10px 10px 0px 10px;
float:left;
border: 2px solid #FFFFFF;
}
#container {
margin: 0px auto;
width: 800px;
}
/* ----- Top Section ----- */
#top{
float: right;
width: 142px;
height: 49px;
background: #cedf3b url(photoshare-images/top_background.gif) bottom right no-repeat;
}
#top a{
float: left;
text-indent:-3000px;
display:block;
width:36px;
height: 28px;
}
#top a.home{
margin: 12px 0px 0px 25px;
background: url(photoshare-images/home_icon.gif) no-repeat;
}
#top a.home:hover{
background: url(photoshare-images/home_hover_icon.gif) no-repeat;
}
#top a.contactus{
margin: 12px 0px 0px 20px;
background: url(photoshare-images/mail_icon.gif) no-repeat;
}
#top a.contactus:hover{
background: url(photoshare-images/mail_hover_icon.gif) no-repeat;
}
/* ----- End of Top Section ----- */
/* ----- Header ----- */
#header {
clear: both;
width: 800px;
height: 199px;
}
#header_left {
float:left;
width: 460px;
height: 199px;
background: #cedf3b url(photoshare-images/header_left.gif) no-repeat;
}
#header_right {
float: right;
width: 340px;
height: 199px;
background: #cedf3b url(photoshare-images/header_right.gif) no-repeat;
}
#site_title {
padding: 0px 0px 10px 50px;
font-size: 30px;
color: #2b1e1e;
}
#site_title span {
font-weight: bold;
color: #ff0000;
}
#site_slogan {
padding: 100px 0px 10px 50px;
font-size: 12px;
color: #2b1e1e;
}
/* ----- End of Header ----- */
/* ------------- Menu ------------------ */
#menu {
clear: both;
margin: 0px;
padding: 0px;
width: 800px;
}
#menu_left {
float: left;
height: 48px;
width: 7px;
background: #cedf3b url(photoshare-images/menu_leftborder.gif) no-repeat;
}
#menu_middle{
float: left;
width: 786px;
height: 33px;
padding: 15px 0 0 0;
background: #cedf3b url(photoshare-images/menu_background.gif) repeat-x;
}
#menu_middle ul {
margin: 0px;
padding: 0px 0px 5px 0px;
list-style: none;
text-align: center;
}
#menu_middle ul li{
display: inline;
}
#menu_middle ul li a{
padding: 0px 10px;
font: 16px arial;
color: #000000;
text-decoration: none;
}
#menu_middle ul li a:hover, #menu ul li .current{
text-decoration: underline;
}
#menu_right {
float: left;
height: 48px;
width: 7px;
background: #cedf3b url(photoshare-images/menu_rightborder.gif) no-repeat;
}
/* ---------- end of menu ------------- */
/* ----------------- Content ----------------------- */
#content {
float: left;
width: 800px;
margin: 30px 0px;
color: #daddaf;
}
#left_column {
float: left;
margin: 0px 0px 0px 30px;
width: 490px;
min-height: 420px;
}
#right_column {
float: right;
width: 250px;
min-height: 420px;
}
/* ------------ end of content ------------ */
/* ----- Section 1 ----- */
.section1 {
margin: 20px 0px;
padding: 10px 10px 10px 20px;
width: 458px;
border: 1px #252323 solid;
background: #171616;
}
.section1 .newphototitle{
padding: 10px 0px 10px 50px;
background: url(photoshare-images/newphoto_icon.gif) left center no-repeat;
}
.section1 .latestnews{
padding: 10px 0px 10px 50px;
background: url(photoshare-images/latestnews_icon.gif) left center no-repeat;
}
.section1 .subsection {
float: left;
margin: 0px;
padding: 0px;
width: 114px;
height: 100px;
text-align: center;
}
.section1 .subsection a img{
float: none;
margin: 0px;
padding: 0px;
border: 2px solid #FFFFFF;
}
.section1 .subsection a:hover img{
float: none;
margin: 0px;
padding: 0px;
border: 2px solid #cedf3b;
}
.section1 .newsbox {
clear: both;
width: 460px;
}
.section1 .newstitle{
padding: 0px 0px 0px 10px;
background: #000000;
}
.section1 .newstitle h1 {
padding: 10px 0px 0px 0px;
margin: 0px;
font-size: 14px;
color: #ff3600;
border: none;
}
.section1 .newstitle a{
color: #ff3600;
}
.section1 .newstitle a:hover{
text-decoration: none;
}
.section1 p{
padding: 10px 10px 10px 10px;
margin: 0px;
font-size: 11px;
}
.publish_date {
clear: both;
margin: 0px;
padding: 0px 0px 5px 0px;
font-size: 11px;
font-weight: bold;
}
/* ----- End of Section 1 ----- */
/* ----- Section 2 ----- */
.section2 {
width: 200px;
margin: 0px 10px 10px 10px;
padding: 10px;
border: #252323 solid 1px;
background: #000000 url(photoshare-images/section_background.gif) repeat-y
}
.section2 a {
color: #cedf3b;
line-height: 25px;
text-decoration: none;
}
.section2 a:hover {
border-bottom: 1px dotted #CCCCCC;
}
.section2 .form_row{
padding: 3px 0px;
}
.section2 hr{
border: 1px dotted #333333;
width: 100%;
}
/* ----- End of Section 2 ----- */
/* ----- Form ----- */
form{
margin: 0px;
padding: 0px;
text-align: right;
}
input{
width: 110px;
height: 18px;
}
.button{
width: 60px;
height: 25px;
}
select {
width: 110px;
}
/* ----- End of Form ----- */
.more {
clear: both;
margin: 10px 0px 5px 0px;
text-align: right;
}
/* ----- Footer ----- */
#footer{
clear: both;
width: 800px;
text-align: center;
color: #3a3737;
}
#footer_left {
float: left;
width: 7px;
height: 110px;
background:url(photoshare-images/footer_left.gif) no-repeat;
}
#footer_middle {
float: left;
padding: 20px 0px 0px 30px;
width: 756px;
height: 90px;
text-align: left;
line-height: 30px;
background:url(photoshare-images/footer_background.gif) repeat-x;
}
#footer_right {
float: left;
width: 7px;
height: 110px;
background:url(photoshare-images/footer_right.gif);
}
#footer a {
color: #3a3737;
text-decoration: none;
}
#footer a:hover {
text-decoration: underline;
}
/* ----- End of Footer ----- */
</style>
</head>
<body>
<div id="container">
<div id="top"> <a href="http://www.free-css.com/" class="home">home</a> <a href="http://www.free-css.com/" class="contactus">contact us</a> </div>
<div id="header">
<div id="header_left">
<div id="site_slogan">Share your photos @</div>
<div id="site_title">PHOTO<span>WebSite</span></div>
</div>
<div id="header_right"></div>
</div>
<div id="menu">
<div id="menu_left"></div>
<div id="menu_middle">
<ul>
<li><a href="http://www.free-css.com/" class="current">Home</a></li>
<li><a href="http://www.free-css.com/">Blog</a></li>
<li><a href="http://www.free-css.com/">Gallery</a></li>
<li><a href="http://www.free-css.com/">Forum</a></li>
<li><a href="http://www.free-css.com/">About Us</a></li>
<li><a href="http://www.free-css.com/">Contact Us</a></li>
</ul>
</div>
<div id="menu_right"></div>
</div>
<div id="content">
<div id="left_column">
<h1>Welcome to PhotoShare</h1>
<p>This free CSS website template is designed by <b>Saw Htoo</b> exclusively for templatemo.com. Feel free to edit and apply this template layout for your personal website or commercial CMS websites. Credit goes to Marilyn http://fantasybrushes.deviantart.com/ for the photoshop brush.</p>
<p class="text_area">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.</p>
<div class="section1">
<h1 class="newphototitle">Newly Added Photos</h1>
<div class="subsection"> <a href="http://www.free-css.com/"><img src="photoshare-images/photo00.gif" alt="" /></a> </div>
<div class="subsection"> <a href="http://www.free-css.com/"><img src="photoshare-images/photo03.gif" alt="" /></a> </div>
<div class="subsection"> <a href="http://www.free-css.com/"><img src="photoshare-images/photo01.gif" alt="" /></a> </div>
<div class="subsection"> <a href="http://www.free-css.com/"><img src="photoshare-images/photo02.gif" alt="" /></a> </div>
<div class="subsection"> <a href="http://www.free-css.com/"><img src="photoshare-images/photo01.gif" alt="" /></a> </div>
<div class="subsection"> <a href="http://www.free-css.com/"><img src="photoshare-images/photo02.gif" alt="" /></a> </div>
<div class="subsection"> <a href="http://www.free-css.com/"><img src="photoshare-images/photo00.gif" alt="" /></a> </div>
<div class="subsection"> <a href="http://www.free-css.com/"><img src="photoshare-images/photo03.gif" alt="" /></a> </div>
<div class="more"><a href="http://www.free-css.com/">More ></a></div>
</div>
<div class="section1">
<h1 class="latestnews">Latest News</h1>
<div class="newsbox">
<div class="newstitle">
<h1><a href="http://www.free-css.com/">Pellentesque vitae magna</a></h1>
<div class="publish_date">Post Date: 18-10-2020 Tags: <a href="http://www.free-css.com/">XHTML</a> <a href="http://www.free-css.com/">CSS</a> <a href="http://www.free-css.com/">Website Layouts</a></div>
</div>
<p>Vestibulum dapibus tortor vel orci. Maecenas vulputate, arcu id fermentum eleifend, tortor enim tincidunt mauris, fringilla tincidunt purus urna vel risus.<a href="http://www.free-css.com/">More ></a></p>
</div>
<div class="newsbox">
<div class="newstitle">
<h1><a href="http://www.free-css.com/">Aliquam tristique lacus</a></h1>
<div class="publish_date">Post Date: 18-10-2020 Tags: <a href="http://www.free-css.com/">XHTML</a> <a href="http://www.free-css.com/">CSS</a> <a href="http://www.free-css.com/">Website Layouts</a></div>
</div>
<p>Pellentesque vitae magna. Sed nec est. Suspendisse a nibh tristique justo rhoncus volutpat. <a href="http://www.free-css.com/">More ></a></p>
</div>
</div>
</div>
<div id="right_column">
<div class="section2">
<h2>Member Login Here</h2>
<form method="get" action="http://www.free-css.com/">
<div class="form_row">Email
<input name="email_address" type="text" class="inputfield" id="email_addremss" maxlength="60"/>
</div>
<div class="form_row">Password
<input name="password" type="password" class="inputfield" id="password" maxlength="40"/>
</div>
<input class="button" type="submit" name="Submit" value="Login" />
</form>
</div>
<div class="section2">
<h2>Search</h2>
<form method="get" action="http://www.free-css.com/">
<div class="form_row">By Keyword
<input name="keyword" type="text" class="inputfield" id="keyword" maxlength="100"/>
</div>
<input type="submit" name="submit" class="button" value="Search" />
<hr />
<div class="form_row">By Category
<select name="Category">
<option value="volvo">People</option>
<option value="saab">Animals</option>
<option value="fiat">Building</option>
<option value="audi">Flowers</option>
</select>
</div>
<input type="submit" name="submit" class="button" value="Search" />
</form>
</div>
<div class="section2">
<h2>Links</h2>
<a href="http://www.free-css.com/">Web Design Blog</a><br />
<a href="http://www.free-css.com/">Photoshop Resources</a><br />
<a href="http://www.free-css.com/">Photo Effects</a><br />
<a href="http://www.free-css.com/">Flash Templates</a><br />
<a href="http://www.free-css.com/">CSS Templates</a><br />
</div>
<div class="section2">
<h2>Quick Stats</h2>
901072 photos online <br />
207 added today<br />
145 pending </div>
<a target="_blank" href="http://validator.w3.org/check?uri=referer"><img style="border:0;width:88px;height:31px" src="http://www.w3.org/Icons/valid-xhtml10" alt="" width="88" height="31" vspace="8" border="0" /></a> <a target="_blank" href="http://jigsaw.w3.org/css-validator/check/referer"><img style="border:0;width:88px;height:31px" src="http://jigsaw.w3.org/css-validator/photoshare-images/vcss-blue" alt="" vspace="8" border="0" /></a><br />
</div>
</div>
<div id="footer">
<div id="footer_left"></div>
<div id="footer_middle"> <a href="http://www.free-css.com/">Home</a> | <a href="http://www.free-css.com/">About Us</a> | <a href="http://www.free-css.com/">Term of us</a> | <a href="http://www.free-css.com/">FAQ</a> | <a href="http://www.free-css.com/">Contact Us</a><br />
Copyright 2008 <a href="http://www.free-css.com/">Your Company Name</a> | Designed by <a href="http://www.templatemo.com">templatemo.com</a> </div>
<div id="footer_right"></div>
</div>
</div>
</body>
</html>
Related examples in the same category