Card layout page
<!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>andreas05</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<style rel="stylesheet" type="text/css">
/* andreas05 - an open source xhtml/css website layout by Andreas Viklund - http://andreasviklund.com/ . Free to use for any purpose as long as the proper credits are given for the original design work.
Version: 2.0, July 15, 2006 */
/* General tags */
* {
margin: 0;
padding: 0;
}
body {
background: #ccc url(bodybg.gif) repeat;
font: 76% verdana, tahoma, sans-serif;
}
a {
background-color: inherit;
color: #286ea0;
font-weight: bold;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
p {
margin: 0 0 16px 0;
}
ul,ol {
margin: 0 0 16px 15px;
padding-left: 5px;
}
ul ul,ol ol {
margin: 3px 0 0 15px;
}
img {
float: left;
margin: 0 10px 5px 0;
}
/* Headers */
h1 {
color: #555;
font-size: 3.6em;
letter-spacing: -3px;
margin: 0;
text-align: right;
}
h2 {
font-size: 1.6em;
font-weight: normal;
letter-spacing: -1px;
margin: 5px 0 10px;
}
/* IDs */
#title {
margin: 20px auto -9px;
width: 700px;
}
#container {
background: #fff url(front.png) bottom left no-repeat;
border: 20px solid #555;
color: #555;
margin: 0 auto 15px;
padding: 10px;
width: 700px;
line-height: 1.3em;
}
#sidebar {
float: left;
padding-left: 175px;
width: 110px;
}
#sidebar p {
margin: 10px 0 5px 0;
text-align: center;
font-size: 0.8em;
}
#main {
float: right;
width: 385px;
}
#footer {
clear: both;
}
/* Menu */
.menu {
border: 1px solid #ffffff;
color: #286ea0;
display: block;
font-size: 1.1em;
font-weight: bold;
padding: 4px 2px 4px 10px;
width: 110px;
}
.menu:hover {
background-color: #f8f8f8;
border: 1px solid #dadada;
color: #286ea0;
text-decoration: none;
}
/* Various classes */
.credits {
color: #888;
font-size: 0.9em;
margin-bottom: 0;
}
.credits a {
color: #888;
}
</style>
</head>
<body>
<div id="title">
<h1>YOUR SITE TITLE</h1>
</div>
<div id="container">
<div id="sidebar">
<h2>Site menu</h2>
<a class="menu" href="">Home</a> <a class="menu" href="">Sample</a> <a class="menu" href="">Sample</a> <a class="menu" href="">Sample</a> <a class="menu" href="">Sample</a> <a class="menu" href="">Sample</a> <a class="menu" href="">Sample</a>
<p class="sidenote">More templates:<br />
<a href="">AV</a> | <a href="">OWD</a> | <a href="">OSWD</a></p>
<p class="sidenote">WordPress themes:<br />
<a href="">AV</a> | <a href="">Jokkmokk</a></p>
<p class="sidenote">Version:<br />
andreas05 v2.0<br />
(Jul 15, 2006)</p>
</div>
<div id="main">
<h2>andreas05 - the simple solution!</h2>
<img src="dragonmini.png" width="125" height="125" alt="Dragon screenshot" />
<p>Sometimes, the simple things are the most beautiful. This design was made with simplicity in mind, to make it quick and easy to edit the code and get your website online. The amount of code is very small, and the layout is very basic. No visual effects, no advanced features, just a very simple template.</p>
<p><strong>Note:</strong> If you don't like the dragon (which was made using a freeware font named "Tattoo"), you can easily replace it with an image of your own!</p>
<h2>An open source design!</h2>
<p>This design is released as open source, which means that you can make any changes you may want to, and use the page in any way you want to as long as you give the proper credits to the original author. Have fun! If you want more designs to choose from, you can visit my website where you can download more templates by me.</p>
<p class="credits"><strong>© 2005 Your name</strong> | Design by <a href="http://andreasviklund.com/">Andreas Viklund</a> | <a href="">Homepage</a></p>
</div>
<div id="footer"></div>
</div>
</body>
</html>
Related examples in the same category