greyange
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type='text/css'>
body {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
background-color:#eeeeee;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
color:#000000;
}
#header {
background-image:url(header.jpg);
background-position:center;
background-repeat:no-repeat;
width:790px;
height:131px;
}
#conteneur {
width:790px;
margin: 0px auto;
background-image:url(body.jpg);
background-repeat:repeat-y;
background-position:center;
}
#texte {
width:400px;
padding-left:130px;
padding-top:5px;
float:left;
}
#menu {
width:250px;
padding-left:10px;
float:left;
}
#pied {
background-image:url(pied.jpg);
background-repeat:no-repeat;
background-position:center;
height:61px;
text-align:right;
padding:0px 40px 0px 0px;
clear:both;
}
#nav {
width:200px;
float:left;
}
#nav a:link, #nav a:visited {
border:1px solid #000000;
color:#ffffff;
width:178px;
margin:5px 0px 0px 19px;
padding:5px 0px 5px 20px;
text-decoration:none;
display:block;
}
#nav a:hover {
background-color: #ffffff;
border:1px solid #000000;
border-left:1px solid #ffffff;
border-right:1px solid #ffffff;
width:179px;
margin:5px 0px 0px 19px;
padding:5px 0px 5px 20px;
color:#000000;
text-decoration:none;
}
.title {
color:#CC6600;
font-size:16px;
border-bottom:1px solid #CC6600;
border-top:1px solid #CC6600;
}
.write {
border-left:1px solid #CC6600;
padding-left:10px;
text-align:justify;
}
.coment {
border-left:1px solid #CC6600;
border-bottom:1px solid #CC6600;
padding-left:10px;
text-align:left;
}
.coment a:link, .coment a:visited {
text-decoration:none;
color:#CC6600;
}
.coment a:hover {
background-color:#CC6600;
color:#FFFFFF;
}
.img {
border:1px solid #CC6600;
}
.text {
background-color:#FFFFFF;
border:1px solid #CC6600;
}
.code {
background-color:#eeeeee;
width:350px;
text-align:left;
border:1px solid #CC6600;
padding:5px;
margin-left:10px;
}
.quote {
background-color:#eeeeee;
font-style:italic;
width:350px;
text-align:left;
border:1px dashed #CC6600;
padding:5px;
margin-left:10px;
}
a:link {
color:#CC6600;
text-decoration:none;
}
a:visited {
color:#CC6600;
text-decoration: line-through;
}
a:hover {
background-color:#CC6600;
color:#FFFFFF;
text-decoration:none;
}
p {
margin: 0px 0px 10px 0px;
padding: 0px 0px 0px 0px;
}
</style>
<title>Lony design</title>
</head>
<body>
<div id="conteneur">
<div id="header"> </div>
<div id="texte">
<p class="title">Main title</p>
<p class="write">Hi, new day, new design ^^<br />
Like <a href="http://www.oswd.org/userinfo.phtml?user=dandutk">dandutk</a> ask in the forum, this template use a few sampler. Perhaps more people will send design using them, it can be really usefull for newbies... i think.<br />
<br />
The main color are white (#ffffff), orange (#CC6600) and grey (#eeeeee), and like my other temples, i just have fun with my photo editor and then coding in xhtml 1.0 strict and css.<br />
<br />
This design have no ©, have fun with it.</p>
<p class="coment"><a href="mailto:msfmustdie@hotmail.com">need some help?</a></p>
<p class="write">Like someone ask it in the forum, some exemple...</p>
<p class="write">link example...</p>
<p><a href="#">Link 1</a></p>
<p class="write">form...<br />
<textarea cols="30" rows="2" class="text">texte here</textarea><br />
<input type="text" class="text" value="texte here" size="30" />
<input type="button" class="text" value="send" /></p>
<p class="write">some code...</p>
<p class="code">If :<br />
#style {<br />
background:#ffffff;<br />
}<br />
And : <br />
#style {<br />
color:#ffffff;<br />
}<br />
Then can't see anything ;-)</p>
<p class="write">A quoting part...</p>
<p class="quote">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat...</p>
</div>
<div id="menu">
<div id="nav">
<a href="#">A link</a>
<a href="#">Another link</a>
<a href="#">Another link</a>
<a href="#">Another link</a>
<a href="#">You can add more...</a>
</div>
</div>
<div id="pied"><p style="height:20px; "> </p>
<p>no © - greyange v2005</p>
</div>
</div>
</body>
</html>
Related examples in the same category