swift
<!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">
<head>
<title>Swift</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type='text/css'>
body {
background-color: #FFFFFF;
margin: 0px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #626477;
background-image:url(swift-images/main.jpg);
background-position:center;
background-repeat:repeat-y;
}
a {
color: #999999;
}
a:hover {
text-decoration: none;
}
p {
line-height: 20px;
text-indent: 15px;
color: #626477;
text-align: justify;
}
textarea,input,submit {
background-color: #f7f7f7;
background-image: url(swift-images/bg.png);
color: #626477;
padding: 0px;
border: 1px solid #7d7d7d;
margin: 3px;
}
h1 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 100%;
color: #000000;
font-weight: normal;
}
h2 {
font-size: 100%;
font-weight: bold;
text-align: right;
}
h3 {
font-size: 100%;
font-weight: normal;
}
h4 {
font-size: 100%;
font-weight: normal;
}
h5 {
font-size: 100%;
font-weight: normal;
}
h6 {
font-size: 50%;
font-weight: normal;
}
img {
border: 0px;
}
#title {
text-align: center;
background-position: center;
background-repeat: repeat-y;
margin: 0em;
padding: 2px;
text-align: center;
font-size: xx-large;
height: 200px;
background-image: url(swift-images/main2.jpg);
background-position: top center;
background-repeat: no-repeat;
}
#title p {
font-variant: small-caps;
letter-spacing: 2px;
}
#title img {
border: none;
}
#container {
width: 642px;
margin: 0 auto 0 auto;
padding: 0 0 0 0;
background-image: url(swift-images/bg2.png);
background-position: bottom right;
background-repeat: no-repeat;
}
#sidebar {
width: 200px;
float: right;
padding-right: 10px;
padding-left: 10px;
border-left: 0px;
}
#sidebar h1 {
font-family: Verdana, Arial, Helvetica, sans-serif;
text-align: left;
font-size: 200%;
color: #626477;
border-bottom: 1px dashed #7d7d7d;
}
#sidebar p {
line-height: 20px;
}
#menu {
text-align: left;
background-image: url(swift-images/swirl.jpg);
background-position: bottom;
background-repeat: no-repeat;
border-left: 1px solid #7d7d7d;
padding-left: 10px;
}
#menu h1 {
font-family: Verdana, Arial, Helvetica, sans-serif;
text-align: left;
font-size: 200%;
color: #626477;
border-bottom: 1px dashed #7d7d7d;
}
#menu a {
color: #999999;
background-position: right;
background-repeat: no-repeat;
padding-right: 10px;
line-height: 15px;
text-decoration: none;
}
#menu a:hover {
color: #cccccc;
}
#content {
margin-right: 220px;
margin-bottom: 0px;
padding-right: 20px;
padding-left: 20px;
border: 0px;
color: #626477;
}
#content h1 {
font-family: Verdana, Arial, Helvetica, sans-serif;
text-align: left;
font-size: 200%;
color: #626477;
border-bottom: 1px dashed #7d7d7d;
padding-top: 0px;
}
#content h1 a {
color: #626477;
}
#content p {
line-height: 20px;
text-indent: 15px;
color: #626477;
text-align: justify;
}
#content ol,ul {
line-height: 25px;
color: #626477;
}
#content li {
color: #626477;
}
#content li a:hover {
color: #626477;
}
#content table {
color: #626477;
}
#footer {
width: 642px;
margin: 0 auto 0 auto;
padding-top: 2px;
padding-bottom: 2px;
text-align: center;
border-top: 1px solid #7d7d7d;
background-color: #ffffff;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
#image-box {
border: 1px solid #ccc;
margin: 0 auto 0 auto;
background-image: url(swift-images/bg.png);
font-family: Verdana, Arial, Helvetica, sans-serif;
}
</style>
</head>
<body>
<div id="title" style="">
<h3>Title</h3>
<h6>Slogan</h6>
</div>
<div id="container">
<div id="sidebar">
<div id="menu">
<h1>Menu</h1>
<a href="http://www.free-css.com/">Home</a><br />
<a href="http://www.free-css.com/">Link 2</a><br />
<a href="http://www.free-css.com/">Link 3</a><br />
<a href="http://www.free-css.com/">Link 4</a><br />
<a href="http://www.free-css.com/">Link 5</a><br />
<a href="http://www.free-css.com/">Link 6</a><br />
<br />
<br />
<input name="" type="text" size="16" />
<input name="" type="button" value="Search" />
</div>
</div>
<div id="content">
<h1>Item title...</h1>
<h2>Tuesday, July 26</h2>
<p>Ok I fixed a few things that (may) have put this theme in a bad position. I removed
the Firfox image and replaced it with a blank image (it was for an example). I also
changed the colour of the footer because large resolutions can be bad. The date too
is incorperated into my design for blogging purposes.</p>
<p>Thanks for the feedback I go via e-mail! feedback, complaints and complements are welcomed!</p>
<p>You can remove this text and put what you like here... Well knock yourself out
and do as you like with this design. The images apart from the mozilla one is
done with <a href="http://www.free-css.com/">Fyre</a> which is Free Open Source Software
(FOSS).</p>
<p>Blah! Blah! Blah! Blah! Blah! Blah! Blah! Blah! Blah! Blah! Blah! Blah! Blah! Blah!
Blah! Blah! Blah! Blah! Blah! Blah! Blah! Blah! Blah! Blah! Blah! Blah! Blah! Blah!
Blah! Blah! Blah! Blah! Blah! Blah! Blah! Blah! Blah! Blah! Blah! Blah! Blah! Blah!
Blah! Blah! Blah! Blah! Blah! Blah! Blah! Blah! Blah! Blah! Blah! Blah! Blah! Blah!
Blah! Blah! Blah! Blah! Blah! Blah! Blah! Blah! Blah! Blah! Blah! Blah! Blah! Blah!</p>
<div id="image-box" style="width: 185px;">
<!-- Put the size in the style section -->
<img src="swift-images/blank.jpg" width="185" height="72" alt="" /> <br />
This is an image example with this comment</div>
<br />
<h1>Blah!</h1>
<p>Blah! Blah! Blah! Blah! Blah! Blah! Blah! Blah! Blah! Blah! Blah! Blah! Blah! Blah!
Blah! Blah! Blah! Blah! Blah! Blah! Blah! Blah! Blah! Blah! Blah! Blah! Blah! Blah!</p>
<!-- Because of rendering problems leave this next thing alone -->
<div> </div>
<br />
<!-- Ok you can touch the rest now -->
</div>
</div>
<div id="footer"> Your Name - <a href="http://www.free-css.com/">name@domain.com</a><br />
</div>
</body>
</html>
Related examples in the same category