busycity
<!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>Busy City</title>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
<style type='text/css'>
/*------------------------------------------------------------*
** Global
**------------------------------------------------------------*/
html { height: 100%; }
body {
margin: 0;
padding: 0;
font-family: Tahoma, sans-serif;
font-size: 76%;
color: #888;
height: 100%;
background: #fff url(busycity-img/bg.jpg) repeat-x;
}
a { text-decoration: none; color: #11A0CF; font-size: 1em; padding: 1px 2px; }
a:hover { background-color: #f4f4f4; }
acronym { border-bottom: 1px dotted #cc0000; cursor: help; }
/*------------------------------------------------------------*
** Container
**------------------------------------------------------------*/
#container {
height: auto !important;
height: 100%;
min-height: 100%;
position: relative;
text-align: center;
}
/*------------------------------------------------------------*
** Header
**------------------------------------------------------------*/
#header {
background: url(busycity-img/header_top.gif) no-repeat 100% 5px;
width: 750px;
margin: 0 auto;
padding: 0;
}
#header div {
background: url(busycity-img/header_botm.jpg) no-repeat 0px 70px;
text-align: left;
padding: 45px 0 97px 20px;
}
#header h1 {
margin: 0;
clear: both;
padding: 43px 0 0 40px;
font-size: 4em;
}
#header h1 a {
padding: 0;
color: #000;
font-family: Century Gothic, sans-serif;
font-weight: normal;
color: #000;
}
#header h1 a:hover { background-color: transparent; }
* html #header h1 { padding-top: 23px; }
/*------------------------------------------------------------*
** Navigation
**------------------------------------------------------------*/
#header ul {
margin: 0 40px;
padding: 0;
}
#header li {
display: inline;
list-style-type: none;
margin: 0 5px;
font-size: 1.2em;
background: url(busycity-img/nav.gif) no-repeat;
width: 114px;
height: 25px;
float: left;
text-align: center;
}
#header li a {
display: block;
width: 100%;
color: #fff;
padding-top: 7px;
}
#header li a.on,
#header li a:hover { background-color: #333; color: #9c0; height: 20px; }
/*------------------------------------------------------------*
** Content
**------------------------------------------------------------*/
#content {
width: 700px;
margin: 0 auto;
padding-bottom: 50px;
}
* html #content { padding-bottom: 60px; }
#content:after {
content: ".";
display: block;
clear: both;
height: 0;
visibility: hidden
}
#content h2 {
font-size: 20px;
color: #333;
font-weight: normal;
font-size: 1.8em;
margin: 0 0 20px 0;
clear: both;
}
#content h2 em {
color: #09C;
font-style: normal;
}
#content p {
text-indent: 3em;
line-height: 2.5em;
letter-spacing: 0.1em;
}
#content ul {
margin: 20px 0;
padding: 0 0 0 10px;
}
#content li {
list-style-type: none;
background: url(busycity-img/bullet.gif) no-repeat 0px 8px;
padding: 0 0 0 25px;
line-height: 2em;
letter-spacing: 0.1em;
}
#content blockquote {
background-color: #FFFFF0;
margin: 20px 0;
padding: 10px 20px;
border-top: 1px solid #eee;
border-bottom: 1px solid #eee;
}
#content blockquote p { margin: 0; text-indent: 0; }
/*------------------------------------------------------------*
** Thumbnails
**------------------------------------------------------------*/
#content ul.thumbs {
margin: 20px 0;
padding: 0;
}
#content ul.thumbs:after {
content: ".";
display: block;
clear: both;
height: 0;
visibility: hidden
}
#content ul.thumbs li {
float: left;
margin: 3px;
padding: 0;
background-image: none;
}
#content ul.thumbs li a img { border: 5px solid #ddd; }
#content ul.thumbs li a:hover img { border: 5px solid #333; }
html>body #content ul.thumbs li a { background-color: transparent; }
/*------------------------------------------------------------*
** left
**------------------------------------------------------------*/
#left {
float: left;
width: 225px;
text-align: left;
margin-right: 35px;
}
/*------------------------------------------------------------*
** right
**------------------------------------------------------------*/
#right {
float: right;
width: 438px;
text-align: left;
}
/*------------------------------------------------------------*
** Footer
**------------------------------------------------------------*/
#footer {
position: absolute !important;
width: 100% !important;
z-index: 500 !important;
position: relative;
padding: 10px 0;
margin-top: -36px;
background-color: #333;
color: #999;
font-size: 11px;
border-top: 3px solid #ccc;
}
#footer p { margin: 0 10px; text-align: center; }
#footer a:hover { background-color: #222; }
</style>
</head>
<body>
<div id="container">
<div id="header">
<div>
<ul>
<li><a href="http://www.free-css.com/" class="on">Home</a></li>
<li><a href="#code">code</a></li>
<li><a href="#author">author</a></li>
<li><a href="#contact">contact</a></li>
</ul>
<h1> <a href="http://www.free-css.com/">Busy City</a></h1>
</div>
</div>
<div id="content">
<div id="right">
<h2 id="idea">The <em>Idea</em></h2>
<p>This is my entry for the <a href="http://www.free-css.com/">openwebdesign.org</a> competition (March '06). To enter the competition I had to base my design
on a theme which was chosen to be "The City" and this is what I came up
with.</p>
<p><strong>NB:</strong> Due to <a href="http://www.free-css.com/">owd</a>'s <strong>25kb</strong> limit on images, I had to reduce the quality of
the header image in order for it to be accepted into the competition,
however, I have created a higher quality version which you can find here.</p>
<h2 id="code">The <em>Code</em></h2>
<p>Busy City has been coded entirely in <acronym title="eXtensible HyperText Markup Language">XHTML</acronym> 1.1 & <acronym title="Cascading Style Sheets">CSS</acronym>. No tables
were touched in the making of this website. Isn't that cool? As well as
being cool, using <acronym title="eXtensible HyperText Markup Language">XHTML</acronym> & <acronym title="Cascading Style Sheets">CSS</acronym> has many advantages
such as:</p>
<ul>
<li><strong>Cleaner Code</strong>: Adherence to strict guidelines results
in cleaner code. All extraneous or ambiguous elements are eliminated,
so pages are smaller, load faster, and render correctly.</li>
<li><strong>Interoperability and Accessibility</strong>: <acronym title="eXtensible HyperText Markup Language">XHTML</acronym> is currently readable by the greatest number of browsers, devices and
assistive technologies like screen readers. Accessibility is quickly
becoming a legal issue.</li>
<li><strong>Search Engine Friendly Code</strong>: <acronym title="eXtensible HyperText Markup Language">XHTML</acronym> produces pages that search engine spiders find easy to understand. There
are no presentational elements or bloated code to confuse the spiders,
so they'll crawl everything that matters and rank you accordingly.</li>
<li><strong>Design Consistency</strong>: With <acronym title="Cascading Style Sheets">CSS</acronym>,
the same style elements can be applied to every page of a site. From
the first page forward, your visitors will be presented with a consistent
design scheme, building their comfort level and effectively promoting
your brand.</li>
<li><strong>Easy Maintenance</strong>: Changes to <acronym title="Cascading Style Sheets">CSS</acronym> web page designs are simple. Instead of having to go back and alter
every single page of your site, with <acronym title="Cascading Style Sheets">CSS</acronym> only the relevant style sheets have to be updated, saving you hours
of work and limiting the introduction of possible errors.</li>
</ul>
<h2 id="examples">The <em>Examples</em></h2>
<p>Here are some example elements that you may end up using on your website.</p>
<ul>
<li>An un-ordered list</li>
<li>With several items</li>
<li>To give you an example</li>
</ul>
<blockquote>
<p>Some blockquote text. Lorem ipsum dolor sit amet, consectetuer adipiscing
elit. Cras semper neque ac tellus. Vestibulum ante ipsum primis in faucibus
orci.</p>
</blockquote>
<h2 id="author">The <em>Author</em></h2>
<p>My name is Jenna Smith, and I am a 19 year old female from Cambridgeshire, <acronym title="United Kingdom">UK</acronym>. I work full time as a Web
Designer for a very well known company and freelance out of work through
my growldesign website.</p>
<p>I made my first website when I was 11 years old and have been using <acronym title="eXtensible HyperText Markup Language">XHTML</acronym> & <acronym title="Cascading Style Sheets">CSS</acronym> for around
2 years. Other languages I know include <acronym title="Hypertext Pre-processor">PHP</acronym>, <acronym title="Open source Structured Query Language">MySQL</acronym>, <acronym title="eXtensible Markup Language">XML</acronym> and <acronym title="eXtensible StyleSheet Language Transformation">XSLT</acronym>.
For a full list, take a look at my website.</p>
<h2 id="contact">Contact <em>Me</em></h2>
<p>If you are a small business wanting an online presence, or a company looking to outsource, feel free to me for a quote.</p>
</div>
<div id="left">
<h2>From the <em>Gallery</em></h2>
<ul class="thumbs">
<li><a href="http://www.free-css.com/"><img src="busycity-img/header_top.gif" width="50" height="50" alt="Thumbnail Example" /></a></li>
<li><a href="http://www.free-css.com/"><img src="busycity-img/header_top.gif" width="50" height="50" alt="Thumbnail Example" /></a></li>
<li><a href="http://www.free-css.com/"><img src="busycity-img/header_top.gif" width="50" height="50" alt="Thumbnail Example" /></a></li>
<li><a href="http://www.free-css.com/"><img src="busycity-img/header_top.gif" width="50" height="50" alt="Thumbnail Example" /></a></li>
<li><a href="http://www.free-css.com/"><img src="busycity-img/header_top.gif" width="50" height="50" alt="Thumbnail Example" /></a></li>
<li><a href="http://www.free-css.com/"><img src="busycity-img/header_top.gif" width="50" height="50" alt="Thumbnail Example" /></a></li>
</ul>
<h2>Useful <em>Links</em></h2>
<ul>
<li><a href="http://www.growldesign.co.uk">Web Development & Design</a></li>
<li><a href="http://www.free-css.com/">CSSBeauty</a></li>
<li><a href="http://www.free-css.com/">CSSMania</a></li>
<li><a href="http://www.free-css.com/">Learn CSS</a></li>
</ul>
<h2>More <em>Text</em></h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In tellus nisi, iaculis ac, sagittis vel.</p>
<h2>More <em>Text</em></h2>
<p>Cras laoreet hendrerit leo. Nam luctus condimentum nunc. Maecenas congue consectetuer risus. Proin dictum, risus sed ornare gravida, ligula mauris.</p>
</div>
</div>
</div>
<div id="footer">
<!-- It is not an imperitive that you leave a link to my site but I would be grateful if you did -->
<p>Copyright © 2006 Company. All Rights Reserved. <a href="http://validator.w3.org/check/referer">XHTML 1.1</a> | <a href="http://jigsaw.w3.org/css-validator/check/referer?warning=no&profile=css2">CSS</a> | design/inspired by <a href="http://www.growldesign.co.uk">growldesign</a></p>
</div>
</body>
</html>
Related examples in the same category