photo-blog
<!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 Blog Template</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;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
line-height: 1.5em;
color: #3e3e3e;
background: #e2e2e2 url(photo-blog-images/page_bg.jpg) repeat-x center top;
width: 100%;
display: table;
}
a:link, a:visited { color: #ee5f00; text-decoration: none; }
a:active, a:hover { color: #009900; text-decoration: underline; }
h1 {
font-size: 20px;
font-weight: bold;
color: #a30000;
}
h2 {
font-size: 14px;
font-weight: bold;
color: #cb1a1a;
margin-left: 30px;
width: 200px;
border-bottom: dashed 1px #999999;
}
h3 {
font-size: 14px;
font-weight: bold;
color: #f67400;
}
#container {
width: 805px;
margin: auto;
background:url(photo-blog-images/container_bg.jpg) repeat-y;
}
#left_section {
float: left;
width: 500px;
}
#right_section {
float: left;
width: 305px;
}
#left_header {
float: left;
width: 500px;
height: 216px;
background: url(photo-blog-images/left_header.jpg) no-repeat;
}
#left_title {
padding-top: 30px;
color: #FFFFFF;
font-size: 30px;
font-weight: bold;
height: 45px;
width: 450px;
line-height: 1.6em;
padding-left: 50px;
}
#left_slogan {
float: left;
height: 35px;
width: 450px;
color:#ffe9ba;
padding-left: 50px;
font-weight: bold;
}
#latest {
float: left;
margin: 40px 0px 0px 130px;
width: 300px;
color: #FFFFFF;
font-size: 16px;
font-weight: bold;
}
#latest a {
color: #ffffff;
}
#left_menu {
float: left;
width: 500px;
height: 73px;
background: url(photo-blog-images/left_menu.jpg) no-repeat;
}
.topmenu{
float: left;
margin: 3px 0px 0px 20px;
}
.topmenu ul {
list-style: none;
padding: 0px;
margin: 0px;
}
.topmenu li{
display: inline;
}
.topmenu li a{
float: left;
font-size: 11px;
font-weight: bold;
text-decoration: none;
text-align: center;
color: #fff;
width: 90px;
height: 31px;
margin-left: 0px;
padding-top: 11px;
}
.topmenu li a:hover ,.topmenu li .current{
background: url(photo-blog-images/hover.jpg) repeat-x;
}
#left_content {
float: left;
width: 430px;
margin: 0px 0px 20px 50px;
text-align: justify;
}
.content_left {
float: left;
width: 200px;
}
.content_right {
float: right;
width: 200px;
}
#right_top {
float: left;
width: 305px;
height: 216px;
background: url(photo-blog-images/right_top.jpg) no-repeat;
}
#right_search {
float: left;
width: 305px;
height: 73px;
background: url(photo-blog-images/search_menu.jpg) no-repeat;
}
#memberlog {
float: left;
width: 305px;
}
#category {
float: left;
width: 305px;
margin-top: 20px;
}
.rightmenu {
float: left;
margin-top: 0px;
font-size: 13px;
font-weight: bold;
}
.rightmenu ul {
list-style-type: none;
}
.rightmenu li a {
display: block;
width: 171px;
height: 23px;
font-size: 11px;
color: #a30000;
margin-top: 2px;
padding-left: 40px;
padding-top: 5px;
background: url(photo-blog-images/button.png) no-repeat;
}
/*
CSS Credit: http://www.templatemo.com/
*/
.rightmenu li a:hover{
color: #000;
}
#contact {
float: left;
width: 305px;
}
#contact p {
padding-left: 40px;
font-weight: bold;
}
#footer {
clear: both;
width: 770px;
height: 28px;
color: #FFFFFF;
text-align: center;
font-weight: bold;
margin-left: 18px;
margin-top: 30px;
padding-top: 20px;
background: url(photo-blog-images/footer_bg.jpg) repeat-x;
}
#form1 {
float:left;
margin-top: 0px;
}
#search_item {
width: 120px;
margin: 10px 0px 0px 40px;
font-size: 11px;
}
#search_btn {
font-size: 11px;
background:#FFFFFF;
border: 0px;
margin-left: 5px;
}
#form2 {
margin-left: 30px;
}
#user_name {
width: 100px;
font-size: 10px;
margin-left: 10px;
}
#password {
width: 100px;
font-size: 10px;
margin-left: 17px;
}
#login {
font-size: 10px;
}
#newmember {
font-size: 10px;
margin-left: 20px;
}
</style>
</head>
<body>
<div id="container">
<div id="left_section">
<div id="left_header">
<div id="left_title">PHOTO BLOG TEMPLATE</div>
<div id="left_slogan">YOUR SLOGAN TEXT GOES HERE ...</div>
<div id="latest"><a href="http://www.free-css.com/"> LATEST PHOTO GALLERY</a></div>
</div>
<div id="left_menu">
<div class="topmenu">
<ul>
<li><a href="http://www.free-css.com/" class="current">MAIN PAGE</a></li>
<li><a href="http://www.free-css.com/">ABOUT US</a> </li>
<li><a href="http://www.free-css.com/">GALLERIES</a></li>
<li><a href="http://www.free-css.com/">BLOG</a></li>
<li><a href="http://www.free-css.com/">CONTACT</a></li>
</ul>
</div>
</div>
<div id="left_content">
<h1>WELCOME TO OUR WEBSITE</h1>
<p>This is a free CSS template provided by TemplateMo.com. You may download, modify and apply this CSS layout in your websites.</p>
<p>Quisque in diam a justo condimentum molestie. Vivamus a velit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur quis velit quis tortor tincidunt aliquet. Vivamus leo velit, convallis id, ultrices sit amet, tempor a, libero. Quisque rhoncus nulla quis sem. </p>
<p>Mauris quis nulla sed ipsum pretium sagittis. Suspendisse feugiat. Ut sodales libero ut odio. Maecenas venenatis metus eu est. In sed risus ac felis varius bibendum. Nulla imperdiet congue metus. </p>
<h3>BEST PHOTOS OF THIS WEEK</h3>
<p><img src="photo-blog-images/photo1.jpg" alt="" width="427" height="113" /></p>
<h3>LATEST NEWS</h3>
<div class="content_left"><strong>POST DATE: 10-10-2021<br />
</strong> Nulla enim nibh, consectetuer sed, vestibulum elementum, sagittis nec, diam. Mauris blandit vehicula neque.<br />
<br />
Donec venenatis. Cras urna metus, feugiat non, consectetuer quis, pretium quis, nunc. Nullam pede purus, tempor a, imperdiet in, porttitor at, nulla. <a href="http://www.free-css.com/"><strong>MORE</strong></a></div>
<div class="content_right"><strong>POST DATE: 05-10-2021<br />
</strong> Aenean cursus. Maecenas aliquam, ligula id egestas suscipit, nisi sapien dignissim nibh, ac vestibulum lorem urna in neque. <br />
<br />
Aenean eget tortor eget ipsum aliquet porta. Vestibulum quis pede non urna venenatis vehicula. Praesent vel diam. Cras sed leo tempor neque. <a href="http://www.free-css.com/"><strong>MORE</strong></a></div>
</div>
</div>
<div id="right_section">
<div id="right_top"></div>
<div id="right_search">
<form id="form1" name="form1" method="post" action="http://www.free-css.com/">
<label>
<input type="text" name="search_item" id="search_item" />
</label>
<label>
<input type="submit" name="search_btn" id="search_btn" value="Search" />
</label>
</form>
</div>
<div id="memberlog">
<h2>MEMBER LOG IN</h2>
<form id="form2" name="form2" method="post" action="http://www.free-css.com/">
<strong>User Name</strong>
<input type="text" name="user_name" id="user_name" />
<br />
<strong>Password</strong>
<input type="text" name="password" id="password" />
<input type="submit" name="login" id="login" value="Login" />
<p><strong>New Member?</strong> <a href="http://www.free-css.com/"><strong>Register Now!</strong></a> </p>
</form>
</div>
<div id="category">
<h2>CATEGORIES</h2>
<div class="rightmenu">
<ul>
<li><a href="http://www.free-css.com/">New Categories</a></li>
<li><a href="http://www.free-css.com/">Best of 2020/2021</a></li>
<li><a href="http://www.free-css.com/">Creatures</a></li>
<li><a href="http://www.free-css.com/">Buildings</a></li>
<li><a href="http://www.free-css.com/">Exhibitions</a></li>
<li><a href="http://www.free-css.com/">Nature</a></li>
</ul>
</div>
</div>
<div id="contact">
<h2>QUICK CONTACT</h2>
<p>Tel: 010-100-1001<br />
Fax: 020-200-2002<br />
Email: info [at] templatemo.com</p>
<p><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-blog-images/vcss-blue" vspace="8" border="0" /></a></p>
</div>
</div>
<div id="footer">Copyright Your Company Name | Designed by <a href="http://www.templatemo.com">TemplateMo.com</a></div>
</div>
</body>
</html>
Related examples in the same category