scotchmark
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Scotchmark</title>
<style type='text/css'>
/*****************************************************************
############################################
TITLE: Master Stylesheet for Scotchmark
AUTHOR: Kevin Cannon (kmcannon at telus.net)
UPDATED: April 7, 2006
############################################
*****************************************************************/
body {
margin:0;
padding:0;
color:#333;
font-size:small;
font-family:"Lucida Grande", Verdana, Arial, Sans-serif;
background:#fff url(scotchmark-images/top-gradient.gif) repeat-x top left;
}
/************** COMMON ELEMENTS
###########################################*/
a {
color:#4A795F;
}
a:hover {
text-decoration:none;
}
p {
line-height:1.5em;
text-indent:13px;
font-size:90%;
}
/*************** SITE WIDE DIVISIONS
###########################################*/
#content-wrap {
margin:50px auto 0 auto;
width:810px;
}
.top-content1, .top-content2, .top-content3 {
width:800px;
height:40px;
float:left;
border-top:1px solid #ccc;
border-bottom:1px dashed #999;
text-align:center;
}
.top-content2, .top-content3 {
margin-left:15px;
}
.top-content2 {
width:380px;
}
.top-content3 {
width:250px;
}
#leftcol {
float:left;
width:540px;
padding:0 0 15px 10px;
border-right:1px solid #ccc;
margin-top:15px;
}
#rightcol {
float:left;
width:230px;
margin:15px 0 0 15px;
}
#footer {
clear:both;
text-align:center;
width:800px;
border-top:1px solid #ccc;
}
/************** NAVIGATION
###########################################*/
ul#navigation {
margin:0 0 20px 0;
padding:0;
float:left;
list-style:none;
width:525px;
}
ul#navigation li {
float:left;
border:1px solid #e5e5e5;
border-top:0;
font-size:95%;
}
ul#navigation li a {
color:#333;
text-decoration:none;
display:block;
padding:6px 16px;
border-top:2px solid #aaa;
}
ul#navigation li a:hover {
background:#fff url(scotchmark-images/nav-li.gif) no-repeat top left;
border-top:2px solid #6A9C87;
}
/**************** HEADING ELEMENTS
###########################################*/
h1 , h2{
margin:0;
font-weight:normal;
}
h1 {
font-family:Verdana, sans-serif;
color:#555;
margin-top:5px;
}
h2 {
font-family:Times, serif;
font-weight:normal;
font-size:24px;
color:#fff;
position:absolute;
top:65px;
left:25px;
}
h3 {
font-weight:normal;
font-family:times, serif;
font-size:140%;
padding-left:10px;
margin-bottom:0;
color:#333;
border-bottom:1px dashed #aaa;
width:525px;
clear:left; /* CLEARS NAVIGATION */
}
h4 {
color:#333;
font-family:arial, sans-serif;
text-transform:uppercase;
font-size:13px;
color:#666;
border-bottom:1px dashed #aaa;
border-top:1px solid #ccc;
padding:2px 0;
margin-top:0;
}
h5 {
color:#333;
font-family:"Lucida Grande", Verdana, sans-serif;
font-size:120%;
margin-top:5px;
}
/************* PARAGRAPH & LINK ELEMENTS
###########################################*/
#leftcol p {
margin-right:15px;
}
/************ IMAGE ELEMENTS
###########################################*/
img#divider {
margin-top:10px;
}
.top-content1 img, .top-content2 img, .top-content3 img {
display:inline;
border:1px solid #ccc;
padding:2px;
margin:2px 0 0 10px;
}
img.border {
display:block;
margin:0 auto 20px auto;
border:1px solid #ccc;
padding:3px;
}
/************* FORM STYLES
###########################################*/
form {
margin-top:11px;
}
input {
border:1px solid #ccc;
}
input.button {
width:80px;
margin-left:80px;
border:1px solid #ccc;
background:#fff;
color:#333;
}
dl {
margin:0 0 20px 40px;
}
dt {
margin:15px 0 0 -10px;
}
dd {
margin:0;
}
/************* OTHER STYLES
###########################################*/
blockquote {
margin:10px 20px 10px 10px;
padding-top:5px;
background:#f5f5f5;
border:1px solid #ccc;
border-bottom:2px solid #4A795F;
}
p cite {
text-align:left;
}
ul {
font-size:95%;
}
ul ul {
padding-bottom:10px;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
</head>
<body>
<div id="content-wrap">
<div class="top-content3">
<h1>Scotchmark</h1>
</div>
<div class="top-content3"> <img src="scotchmark-images/cross.gif" alt="" /> <img src="scotchmark-images/cross.gif" alt="" /> <img src="scotchmark-images/cross.gif" alt="" /> <img src="scotchmark-images/cross.gif" alt="" /> <img src="scotchmark-images/cross.gif" alt="" /> </div>
<div class="top-content3">
<form method="post" action="http://www.free-css.com/">
<p>Search:
<input type="text" class="text" />
</p>
</form>
</div>
<img id="divider" src="scotchmark-images/grass.gif" alt="" />
<div id="leftcol">
<ul id="navigation">
<li><a href="http://www.free-css.com/">Home</a></li>
<li><a href="http://www.free-css.com/">Products</a></li>
<li><a href="http://www.free-css.com/">Services</a></li>
<li><a href="http://www.free-css.com/">About</a></li>
<li><a href="http://www.free-css.com/">Contact</a></li>
</ul>
<h3>Scotchmark</h3>
<p>Hello, and welcome to Scotchmark, my latest contribution to the open source community. Hopefully
you can find some use for this design, or maybe just use it as some kind of inspiration.</p>
<p>With Scotchmark, I'm aiming for a more minimalistic template so that it can be easily changed to
suit any type of site. The template is a fixed width, tight design with emphasis on a grid-like
structure and lots of borders.</p>
<h3>Top Bar</h3>
<p>In order to provide better modifibility, the bar at the top of the layout is able to be broken into
one, two, or three pieces (as shown) in a matter of seconds. The bar is made out of div classes, and by
changing the number of classes, and the name of the class, you can change how many segments there are.</p>
<p>For example, the bar as shown has three top-content3 classes. To change it in to two segments, take
out one of the classes and change the others to top-content2.</p>
<h3>Accessibility</h3>
<p>As per usual, Scotchmark rigorously adheres to web standards. The code is valid Xhtml Strict and CSS 2.0.
The layout has been tested in Internet Explorer, Firefox, Safari, and Camino, and will work in all common
screen resolutions. It will also function sans-images or css.</p>
<h3>Styled Elements</h3>
<p>This section showcases elements that are already styled in the Css. For example, text can be <strong>strengthened</strong>, or <em>emphasized</em>, and <a href="http://www.free-css.com/">text links</a> can get
you where you need to go.</p>
<ul>
<li>Unordered lists</li>
<li>Various headings</li>
<li>Blockquotes</li>
<li>Basic Forms</li>
</ul>
<h3>Heading Style 1</h3>
<br />
<h4>Heading Style 2</h4>
<h5>Heading Style 3</h5>
<blockquote>
<p>Design is not superficial vanity, it's better communication.</p>
<p><cite>- Greg Storey</cite></p>
</blockquote>
</div>
<!-- End Leftcol -->
<div id="rightcol">
<h4>Photography</h4>
<img class="border" src="scotchmark-images/sample.jpg" alt="" />
<h4>Login</h4>
<form method="post" action="http://www.free-css.com/">
<dl>
<dt>Email Address:</dt>
<dd>
<input type="text" class="text" />
</dd>
<dt>Password:</dt>
<dd>
<input type="text" class="text" />
</dd>
<dt>
<input type="submit" value="Login" class="button" />
</dt>
</dl>
</form>
<h4>Shameless Self Promotion</h4>
<p>I work as a freelance web designer, so if you're looking for somebody to work with on a site design,
corporate identity, or other project, drop me a line.
Email through OWD, OSWD, or directly.</p>
</div>
<p id="footer">Copyright © 2006 Your Name. Design by <a href="mailto:kmcannon@telus.net">Kevin Cannon</a><br />
Made on a Mac</p>
</div>
</body>
</html>
Related examples in the same category