turnitup
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Turn It Up</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<style type='text/css'>
/* global */
html{height: 100%;}
body
{ font-family: verdana, arial, sans-serif;
padding: 0px;
margin: 0px;
font-size: .68em;
}
p
{ margin: 0px;
padding: 0px 0px 16px 0px;
line-height: 1.7em;
}
h1
{ font-family: arial, sans-serif;
letter-spacing: .1em;
}
h2
{ margin: 0px;
padding: 0px 0px 4px 0px;
font-size: 100%;
}
img{border: 0px;}
a{outline: none;}
/* image positioning - left, right and center */
.left
{ float: left;
padding: 0px 8px 0px 0px;
}
.right
{ float: right;
padding: 0px 0px 0px 8px;
}
.center
{ display: block;
text-align: center;
margin: 0 auto;
}
/* block quote */
blockquote
{ margin: 20px 0px 20px 0px;
padding: 10px 20px 0px 20px;
border-left: 8px solid;
}
/* unordered list */
ul
{ margin: 8px 0px 0px 16px;
padding: 0px;
}
ul li
{ list-style-type: square;
margin: 0px 0px 11px 0px;
padding: 0px;
}
/* ordered list */
ol
{ margin: 8px 0px 0px 24px;
padding: 0px;
}
ol li
{ margin: 0px 0px 11px 0px;
padding: 0px;
}
/* margin lefts / margin rights - to centre content */
#main, #links, #footer, #logo, #menu, #content
{ margin-left: auto;
margin-right: auto;
}
/* main container */
#main{width: 780px;}
/* links above the logo / footer */
#links, #footer
{ padding: 10px 21px 0px 19px;
width: 720px;
height: 26px;
font-size: 94%;
text-transform: uppercase;
}
#links{text-align: right;}
#footer{text-align: center;}
#links a, #footer a{text-decoration: none;}
#links a:hover, #footer a:hover{text-decoration: underline;}
/* logo */
#logo
{ width: 760px;
height: 100px;
text-align: left;
}
#logo h1
{ margin: 0px;
padding: 41px 0px 0px 19px;
font-size: 150%;
letter-spacing: .2em;
}
/* navigation menu */
#menu
{ height: 42px;
width: 760px;
}
#menu ul{margin: 0px auto;}
#menu li
{ float: left;
margin: 0px;
padding: 0px;
list-style: none;
}
#menu li a
{ display: block;
float: left;
height: 37px;
text-decoration: none;
padding: 3px 19px 2px 19px;
text-transform: uppercase;
}
/* main content */
#content
{ width: 760px;
height: auto;
padding: 0px;
overflow: hidden;
}
/* column 1 - contains sidebar items */
#column1
{ width: 207px;
float: right;
padding: 16px 0px 15px 0px;
}
.sidebaritem
{ text-align: left;
width: 188px;
float: left;
margin: 0px 0px 25px 0px;
}
.sbihead
{ height: 14px;
width: 188px;
padding: 5px 0px 5px 19px;
text-transform: uppercase;
}
.sbihead h1
{ padding: 0px;
margin: 0px;
font-weight: bold;
font-size: 112%;
}
.sbicontent{padding: 14px 8px 8px 19px;}
.sbicontent p
{ line-height: 14px;
padding: 0px 0px 8px 0px;
}
.sbilinks{padding: 0px;}
.sbilinks ul{margin: 0px auto;}
.sbilinks li
{ margin: 0px;
float: left;
list-style: none;
}
.sbilinks li a , .sbilinks li a:hover
{ float: left;
height: 16px;
text-decoration: none;
padding: 5px 0px 4px 19px;
width: 188px;
border: 0px;
}
/* column 2 - page content */
#column2
{ text-align: justify;
width: 512px;
float: left;
padding: 12px 3px 15px 19px;
}
#column2 h1
{ padding: 6px 0px 4px 0px;
margin: 0px 0px 12px 0px;
border-bottom: 1px solid;
font-size: 150%;
text-transform: uppercase;
font-weight: normal;
}
.sidebaritem a, #column2 a, .sidebaritem a:hover, #column2 a:hover
{ padding: 0px;
text-decoration: none;
padding-bottom: 2px;
border-bottom: 1px dashed;
}
.sidebaritem a:hover, #column2 a:hover{border-bottom: 1px solid;}
/* additional colour scheme selections */
#colour{margin: 0px 0px 20px 0px;}
#colour a, #colour a:hover{border: 0px;}
.blue
{ background: #FFFFFF url(blue.png) no-repeat left center;
color: #109CEF;
padding: 0px 40px 0px 20px;
}
.green
{ background: #FFFFFF url(green.png) no-repeat left center;
color: #94C65A;
padding: 0px 40px 0px 20px;
}
.purple
{ background: #FFFFFF url(purple.png) no-repeat left center;
color: #CE5AEF;
padding: 0px 40px 0px 20px;
}
.orange
{ background: #FFFFFF url(orange.png) no-repeat left center;
color: #FF9C21;
padding: 0px 40px 0px 20px;
}
</style>
<link rel="stylesheet" type="text/css" href="turnitup-style/orange.css" />
</head>
<body>
<div id="main">
<div id="links">
<!-- **** INSERT LINKS HERE **** -->
<a href="http://www.free-css.com/">another link</a> | <a href="http://www.free-css.com/">another link</a> | <a href="http://www.free-css.com/">another link</a> | <a href="http://www.free-css.com/">another link</a> </div>
<div id="logo">
<h1>TURN_IT_UP</h1>
</div>
<div id="menu">
<ul>
<!-- **** INSERT NAVIGATION ITEMS HERE (use id="selected" to identify the page you're on **** -->
<li><a id="selected" href="http://www.free-css.com/">home</a></li>
<li><a href="http://www.free-css.com/">page 1</a></li>
<li><a href="http://www.free-css.com/">page 2</a></li>
<li><a href="http://www.free-css.com/">page 3</a></li>
<li><a href="http://www.free-css.com/">contact</a></li>
</ul>
</div>
<div id="content">
<div id="column1">
<div class="sidebaritem">
<div class="sbihead">
<h1>latest news</h1>
</div>
<div class="sbicontent">
<!-- **** INSERT NEWS ITEMS HERE **** -->
<h2>01.09.2006</h2>
<p>This is where you can put your latest news.</p>
<p> <a href="http://www.free-css.com/">read more ...</a></p>
<p></p>
<p></p>
<h2>01.09.2006</h2>
<p>This is where you can put your latest news.</p>
<p> <a href="http://www.free-css.com/">read more ...</a></p>
</div>
</div>
<div class="sidebaritem">
<div class="sbihead">
<h1>additional links</h1>
</div>
<div class="sbilinks">
<!-- **** INSERT ADDITIONAL LINKS HERE **** -->
<ul>
<li><a href="http://www.free-css.com/">Open Web Design</a></li>
<li><a href="http://www.free-css.com/">learn XHTML</a></li>
<li><a href="http://www.free-css.com/">learn CSS</a></li>
<li><a href="http://www.free-css.com/">get firefox</a></li>
</ul>
</div>
</div>
<div class="sidebaritem">
<div class="sbihead">
<h1>other information</h1>
</div>
<div class="sbicontent">
<!-- **** INSERT OTHER INFORMATION HERE **** -->
<p> This space can be used for additional information such as a contact phone number, address
or maybe even a graphic. </p>
</div>
</div>
</div>
<div id="column2">
<h1>introduction</h1>
<!-- **** INSERT PAGE CONTENT HERE **** -->
<p> This standards compliant website template is released as an 'open source' Design
(under the <a href="http://creativecommons.org/licenses/by/2.5">Creative Commons
Attribution 2.5</a> licence), which means that you are free to download and use it
for anything you want (including modifying and amending it). The logo image
is from a digital photograph taken by me, so there are no issues with copyright
there. All I ask is that you leave the 'Design by dcarter' link in the footer of
the template, but other than that... </p>
<p> This template is written entirely in XHTML 1.1 and CSS, and can be validated
using the links in the footer. </p>
<p> You can view my other 'open source' template Designs <a href="http://www.free-css.com/">here</a>. </p>
<h1>alternative colour schemes</h1>
<p>Here are some alternative colour schemes for anyone who doesn't like orange:</p>
<div id="colour"> <a href="index_blue.html"><span class="blue">blue</span></a> <a href="index_green.html"><span class="green">green</span></a> <a href="index_purple.html"><span class="purple">purple</span></a> <a href="http://www.free-css.com/"><span class="orange">Home</span></a> </div>
<h1>example elements</h1>
<h2>Bold Text</h2>
<p><strong>this is an example of bold text</strong></p>
<h2>Italics</h2>
<p><i>this is an example of italic text</i></p>
<h2>Links</h2>
<p><a href="http://www.free-css.com/">this is an example link</a></p>
<h2>Block Quotes</h2>
<blockquote>
<p> Some blockquote text. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. </p>
</blockquote>
<h2>Unordered Lists</h2>
<ul>
<li>list item 1</li>
<li>list item 2</li>
</ul>
<br />
<h2>Ordered Lists</h2>
<ol>
<li>list item 1</li>
<li>list item 2</li>
</ol>
<br />
<h2>Images</h2>
<p>images can be placed on the left, in the center or on the right.</p>
<span class="left"><img src="turnitup-style/graphic.jpg" alt="" /></span>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. </p>
<span class="center"><img src="turnitup-style/graphic.jpg" alt="" /></span> <span class="right"><img src="turnitup-style/graphic.jpg" alt="" /></span>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. </p>
</div>
</div>
<div id="footer"> copyright © 2006 your name | <a href="http://www.free-css.com/">email@emailaddress</a> | <a href="http://validator.w3.org/check?uri=referer">XHTML 1.1</a> | <a href="http://jigsaw.w3.org/css-validator/check/referer">CSS</a> | <a href="http://www.dcarter.co.uk">Design by dcarter</a> </div>
</div>
</body>
</html>
Related examples in the same category