artist
<!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>Artist Website</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: 12px;
line-height: 1.5em;
color: #666666;
background: #595248;
}
a:link, a:visited { color: #8dc641; text-decoration: none; }
a:active, a:hover { color: #8dc641; text-decoration: none }
h1 {
height: 33px;
font-size: 20px;
font-weight: bold;
color: #e6dc18;
padding-left: 30px;
padding-top: 30px;
background: url(artist-images/h1.jpg) no-repeat;
}
h2 {
padding-left: 30px;
padding-top: 10px;
font-size: 16px;
font-weight: bold;
color: #84a50f;
background: url(artist-images/gray.jpg) no-repeat;
}
#container {
width: 775px;
margin: auto;
}
#header {
height: 216px;
background: url(artist-images/header.jpg) no-repeat;
}
.menu{
float: left;
width: 775px;
height: 35px;
margin: 0px;
padding: 0px;
}
.menu ul {
margin: 0px;
padding-left: 25px;
padding-top: 10px;
list-style: none;
}
.menu li{
display: inline;
}
.menu li a{
float: left;
padding: 8px 0px;
font-size: 11px;
font-weight: bold;
text-align: center;
text-decoration: none;
color: #fff;
width: 97px;
}
.menu li a:hover{
color: #3e3e3e;
}
#site_title {
float: right;
margin-right: 30px;
margin-top: 90px;
width: 700px;
color: #4e4a41;
font-weight: bold;
font-size: 22px;
text-align: right;
}
#slogan {
float: right;
width: 700px;
margin: 10px;
text-align: right;
font-weight: bold;
height: 20px;
}
#content {
float: left;
width: 775px;
background: url(artist-images/content_bg.jpg) repeat-x;
}
#content_left{
float: left;
width: 520px;
}
#content_right {
float: right;
width: 238px;
}
#content p{
padding-left: 30px;
padding-right: 30px;
text-align: justify;
}
#content img {
float: right;
}
#content_bot {
float: left;
width: 775px;
background: #f1eee6;
}
#content_bot li{
padding-left: 0px;
padding-right: 30px;
text-align: justify;
}
#content_bot strong {
color:#6ba122;
text-decoration: underline;
}
#content_bot p {
padding-left: 30px;
padding-right: 10px;
text-align: justify;
}
.bottom_text_left {
float: left;
width: 490px;
}
.bottom_text_right {
float: right;
padding-right: 20px;
width: 250px;
}
#footer {
float: left;
width: 775px;
height: 30px;
padding-top: 10px;
background: #d8d0c5;
font-weight: bold;
text-align: center;
}
</style>
</head>
<body>
<div id="container">
<div id="header">
<div class="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/">SERVICES</a></li>
<li><a href="http://www.free-css.com/">GALLERY</a></li>
<li><a href="http://www.free-css.com/">CONTACT</a></li>
</ul>
</div>
<div id="site_title">ARTIST WEBSITE</div>
<div id="slogan"> Free CSS Template from TemplateMo.com</div>
</div>
<div id="content">
<div id="content_left">
<h1>WELCOME TO OUR WEBSITE</h1>
<p>This free CSS layout is provided by TemplateMo.com. You may download, modify and apply this CSS template for your personal or business websites. Credit goes to PDPhoto.org for photos.</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. Pellentesque dolor nulla, congue vitae, fringilla in, varius a, orci. Mauris convallis. Proin vel libero id erat venenatis accumsan.</p>
</div>
<div id="content_right"><img src="artist-images/pic.gif" alt="" width="238" height="294" /></div>
</div>
<div id="content_bot">
<h2>Featured Artwork</h2>
<ul>
<li><strong>Vivamus leo velit, convallis id,</strong> ultrices sit amet, tempor a, libero. Quisque rhoncus nulla quis sem. 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. </li>
<li><strong>Vestibulum dapibus tortor vel orci.</strong> Maecenas vulputate, arcu id fermentum eleifend, tortor enim tincidunt mauris, fringilla tincidunt purus urna vel risus. Fusce vulputate tellus ac felis. Praesent mauris. Quisque gravida faucibus ligula. Aliquam magna. Phasellus id felis.</li>
<li><strong>Nulla enim nibh,</strong> consectetuer sed, vestibulum elementum, sagittis nec, diam. Mauris blandit vehicula neque. Proin consectetuer. Donec venenatis. Cras urna metus, feugiat non, consectetuer quis, pretium quis, nunc. Nullam pede purus, tempor a, imperdiet in, porttitor at, nulla. </li>
</ul>
<p>----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------</p>
<div class="bottom_text_left">
<h2>Latest Updates</h2>
<p><strong>(10-10-2010) - Lorem ipsum dolor sit amet<br />
</strong> Aliquam tristique lacus in sapien. Suspendisse potenti. Ut sed pede. Nullam vitae tellus. Sed ultrices. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur velit tellus, placerat et, dapibus varius, aliquet quis, purus. </p>
<p><strong>(8-10-2010) - Duis vitae velit sed dui<br />
</strong> 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 class="bottom_text_right">
<h2>Contact Information</h2>
<p>Tel: 001-100-1000<br />
Fax: 002-200-2000<br />
Mobile: 003-300-3000<br />
Email: info[at]templatemo.com<br />
Website: www.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/artist-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