i-love-colour-1
<!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>I Love Colour - Colour 2</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<style type='text/css'>
/* global */
html{height: 100%;}
body
{ font-family: arial, sans-serif;
padding: 0px;
margin: 0px;
font-size: .78em;
}
p
{ margin: 0px;
padding: 0px 0px 16px 0px;
line-height: 1.7em;
}
h1, h2, h3, h4
{ font-size: 110%;
letter-spacing: .1em;
padding: 7px 0px 5px 0px;
margin: 0px 0px 12px 0px;
text-transform: uppercase;
font-weight: normal;
}
img
{ border: 0px;
margin: 0px;
padding: 0px;
}
a{outline: none;}
form{padding: 0; margin: 0;}
/* image positioning - left, right and center */
.left
{ float: left;
border-right: 18px solid;
}
.right
{ float: right;
border-left: 18px solid;
}
.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: 2px 0px 18px 16px;
padding: 0px;
}
ul li
{ list-style-type: square;
margin: 0px 0px 6px 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, #footer, #logo, #menubar, #breadcrumbs, #site_content
{ margin-left: auto;
margin-right: auto;
}
/* main container */
#main{width: 776px;}
/* logo */
#logo
{ width: 760px;
height: 150px;
border-top: 1px solid;
}
#logo h1
{ font-family: "century gothic", sans-serif;
font-size: 600%;
padding: 42px 0px 0px 12px;
float: left;
letter-spacing: 0em;
text-transform: lowercase;
}
#colours
{ height: 0px;
text-align: right;
padding: 90px 16px 0px 0px;
}
/* navigation menu */
#menubar
{ width: 760px;
height: 70px;
}
ul#menu{margin: 0px;}
ul#menu li
{ float: left;
margin: 0px;
padding: 0px;
list-style: none;
}
ul#menu li a
{ font-family: verdana, sans-serif;
display: block;
float: left;
height: 44px;
text-decoration: none;
padding: 26px 15px 0px 15px;
text-align: center;
border-right: 1px solid;
}
#search
{ float: right;
padding: 22px 16px 0px 0px;
}
input.searchfield
{ padding: 2px;
border: 1px solid;
}
input.searchbutton
{ border: 1px solid;
padding: 0px 0px 1px 0px;
width: 64px;
cursor: pointer;
}
#breadcrumbs
{ width: 744px;
padding: 10px 0px 10px 16px;
text-align: left;
}
#breadcrumbs a{text-decoration: none;}
/* main content */
#site_content
{ width: 760px;
overflow: hidden;
}
/* sidebar */
.sidebar
{ float: right;
width: 190px;
padding: 16px 16px 16px 16px;
}
/* sidebar items / links */
.sidebaritem
{ text-align: left;
width: 188px;
float: left;
margin: 0px 0px 16px 0px;
border: 1px solid;
}
.sidebaritem h1, .sidebaritem h3, .sidebaritem p{margin: 8px 10px 10px 12px;}
.sidebaritem ul
{ border-top: 1px solid;
width: 160px;
padding-top: 4px;
margin: 4px 0px 15px 14px;
}
.sidebaritem li
{ list-style: none;
padding: 0px 0px 4px 0px;
border-bottom: 1px solid;
}
.sidebaritem li a, .sidebaritem li a:hover
{ height: 16px;
text-decoration: none;
padding: 0px 0px 0px 18px;
display: block;
}
/* page content */
#content
{ text-align: left;
width: 514px;
padding: 24px 4px 24px 20px;
float: left;
}
#content h1{font-size: 125%;}
/* footer */
#footer
{ width: 720px;
height: 42px;
padding: 28px 21px 0px 19px;
text-align: center;
border-top: 2px solid;
}
#breadcrumbs a, #content a, #content a:hover, #footer a, #footer a:hover{text-decoration: none;}
/* sNews */
fieldset, .comment, .commentsbox{margin-bottom: 10px;}
fieldset
{ border: 1px solid;
padding: 10px 8px;
}
input{padding: 2px;}
textarea
{ width: 95%;
height: 200px;
padding: 3px;
}
.date
{ border-top: 1px solid;
margin: 15px 0px 5px 0px;
font-weight: bold;
}
</style>
<link rel="stylesheet" type="text/css" href="i-love-colour-1-style/colour2.css" />
</head>
<body>
<div id="main">
<div id="logo">
<h1>i_love_colour_1</h1>
<div id="colours"> <a href="http://www.free-css.com/"><img src="i-love-colour-1-style/1.png" alt="" /></a> <a href="colour_2.html"><img src="i-love-colour-1-style/2.png" alt="" /></a> <a href="colour_3.html"><img src="i-love-colour-1-style/3.png" alt="" /></a> <a href="colour_4.html"><img src="i-love-colour-1-style/4.png" alt="" /></a> <a href="colour_5.html"><img src="i-love-colour-1-style/5.png" alt="" /></a> </div>
</div>
<div id="menubar">
<ul id="menu">
<li><a class="current" href="http://www.free-css.com/">Home</a></li>
<li><a href="index_2col_right.html">Sidebar - Right</a></li>
<li><a href="index_1col_bottom.html">1 Column - bottom</a></li>
<li><a href="index_1col_top.html">1 Column - Top</a></li>
</ul>
<div id="search">
<form method="post" action="http://www.free-css.com/">
<p>
<input class="searchfield" type="text" value="" />
<input class="searchbutton" name="submit" type="submit" value="search" />
</p>
</form>
</div>
</div>
<div id="breadcrumbs"> You Are Here: <a href="http://www.free-css.com/">Home</a> | Welcome </div>
<div id="site_content">
<div class="sidebar">
<div class="sidebaritem">
<h3>Categories</h3>
<ul>
<li><a class="current" href="http://www.free-css.com/">Home</a></li>
<li><a href="http://www.free-css.com/">Category 1 (0)</a></li>
</ul>
</div>
<div class="sidebaritem">
<h3>Articles</h3>
<ul>
<li><a href="http://www.free-css.com/">Article 1</a></li>
<li><a href="http://www.free-css.com/">Article 2</a></li>
</ul>
</div>
<div class="sidebaritem">
<h3>Comments</h3>
<ul>
<li><a href="http://www.free-css.com/">Comment 1</a></li>
<li><a href="http://www.free-css.com/">Comment 2</a></li>
</ul>
</div>
</div>
<div id="content">
<h1>Welcome to the i_love_colour_1 Template</h1>
<p> This simple, fixed width website template comes with 4 different layouts and 5 different colour schemes. The template is configured for use with sNews, a lightweight, simple CMS. </p>
<h4>colour schemes</h4>
<p> The 5 colour schemes are based on palettes from the colour lovers website:<br />
<a href="http://www.free-css.com/"><img src="i-love-colour-1-style/1.png" alt="" /></a> <a href="colour_2.html"><img src="i-love-colour-1-style/2.png" alt="" /></a> <a href="colour_3.html"><img src="i-love-colour-1-style/3.png" alt="" /></a> <a href="colour_4.html"><img src="i-love-colour-1-style/4.png" alt="" /></a> <a href="colour_5.html"><img src="i-love-colour-1-style/5.png" alt="" /></a> </p>
<p> This 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). 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 standards compliant 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>Example Elements</h1>
<h4>Links</h4>
<p><a href="http://www.free-css.com/">this is an example link</a></p>
<h4>Block Quotes</h4>
<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>
<h4>Images</h4>
<p>images can be placed on the left, in the center or on the right.</p>
<span class="left"><img src="i-love-colour-1-style/gallery.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="i-love-colour-1-style/gallery.jpg" alt="" /></span> <span class="right"><img src="i-love-colour-1-style/gallery.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 © Company Name | <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> | <a href="http://www.free-css.com/">Login</a> </div>
</div>
</body>
</html>
Related examples in the same category