lemonlimev2
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<?xml version="1.0" encoding="UTF-8"?>
<html>
<head>
<meta http-equiv="Content-Type" content="text/xhtml;charset=utf-8" />
<title>.:LemonLime V2:.</title>
<style type='text/css'>
body {
background: url(lemonlimev2-images/background2.gif);
font-family: tahoma, geneva, sans-serif;
font-size: 10pt;
text-align: justify;
color: black;
}
div#container {
background: #C9C800;
width: 720px;
padding: 10px;
margin-left: auto;
margin-right: auto;
border: 3px black solid;
}
li a:link {
color: #000000;
padding: 4px;
font-weight: normal;
letter-spacing: 0em;
}
li a:hover {
color: #C9C800;
background: #FFFFC9;
padding: 4px;
font-weight: normal;
letter-spacing: 0em;
}
li a:active {
color: #C9C800;
padding: 4px;
font-weight: normal;
letter-spacing: 0em;
}
li a:visited {
color: #000000;
padding: 4px;
font-weight: normal;
letter-spacing: 0em;
}
div#title {
background: inherit;
border: 0px;
width: 700px;
margin: 10px 0 10px 0;
color: black;
}
h1 {
text-align: center;
font-size: 50px;
margin: 0px;
}
div#header {
background: #FAC81B;
height: 30px;
width: 700px;
color: black;
}
#headergradient {
background: url(lemonlimev2-images/headergradient.jpg) repeat-y;
display: inline;
float: left;
width: 250px;
height: 30px;
}
#nav {
margin-top: 7px;
display: inline;
float: right;
}
#nav ul {
margin-left: 0px;
padding-left: 0px;
display: inline;
font-size: 14px;
}
#nav ul li {
margin-left: 0px;
padding: 3px 15px;
border-left: 1px solid #000000;
list-style: none;
display: inline;
}
#nav ul li.first {
margin-left: 0px;
border-left: none;
list-style: none;
display: inline;
}
div#sidebar {
width: 220px;
height: auto;
margin: 10px 0 10px 10px;
background: #FAC81B;
border: 2px solid black;
display: inline;
float: left;
}
img {
margin: 0px;
width: 220px;
display: inline;
}
h3 {
font-style: italic;
text-transform: uppercase;
font-weight: bold;
margin: 0px;
padding: 5px;
}
form {
margin: 0;
}
div#content {
background: inherit;
width: 450px;
height: auto;
margin-left: 250px;
text-align: justify;
}
blockquote {
background: url(openquote.jpg) no-repeat #FAC81B;
border: 1px black dotted;
padding: 5px;
font-style: italic;
font-weight: bold;
color: #666666;
}
p {
margin: 0px;
padding: 5px;
}
a {
color: #FFFFC9;
font-weight: bold;
letter-spacing: 0.1em;
}
h2 {
font-size: 16pt;
margin: 5px;
padding: 0px;
}
div#footer {
background: #FAC81B;
height: 30px;
width: 700px;
color: black;
}
div#footercontent {
float: left;
background: inherit;
border: 0px;
padding: 9px;
font-size: 10px;
}
#footergradient {
background: url(lemonlimev2-images/footergradient.jpg) repeat-y;
display: inline;
float: right;
width: 250px;
height: 30px;
margin-right: -1px;
}
</style>
</head>
<body>
<div id="container">
<div id="title"><h1>.:LemonLime V2:.</h1></div>
<div id="header">
<div id="headergradient"></div>
<div id="nav">
<ul>
<li class="first"><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
</div>
<div id="sidebar">
<img src="lemonlimev2-images/lemonlime.jpg" alt="LemonLime" />
<h3>News</h3>
<p>Sources wishing to remain anonymous have indeed confirmed that the world is about to be taken over by giant alien lemons! Sent to annihalate all human life, they have been sent from space in a lemon-shaped rocketship. Again, these sources wish to remain anonymous...</p>
<h3>Correction</h3>
<p>Actually... there are no evil alien lemons, I just threw together a story to go with the site's theme... It was very lame I admit.</p>
<h3>A Simple Form</h3>
<form action="#"><p><input type="text" size="15" /><input type="button" value="Send" /></p></form>
</div>
<div id="content">
<h2>About lemons and limes</h2>
<p>The first description of the lemon, which had been introduced from India two centuries earlier, is found in Arabic writings from the 12th century. The origin of the name lemon is through Persian (Limu), from the Sanskrit nimbuka. They were cultivated in Genoa in the mid-fifteenth century, and appeared in the Azores in 1494. More recent research has identified lemons in the ruins of Pompeii. Lemons were once used by the British Royal navy to combat scurvy, as they provided a large amount of vitamin C. The Royal Navy originally thought lemons were overripe limes which they resemble and their sailors became known as limeys, not lemonies.</p>
<p>Lime is actually an ambiguous term in the context of fruit, referring to a number of different citruses with typically round, green to yellow fruits, 3-6 cm in diameter, generally containing sour pulp, and frequently associated with the lemon. The limes most commonly available commercially are the smaller, yellower Key lime (Citrus aurantifolia) and the larger, greener Persian lime (Citrus latifolia). "Key lime" is actually an American retronym, as the original fruit known in English as a "lime" was Citrus x aurantifolia, derived from the Persian name Limu as the fruit was introduced to Europe during the Crusades.</p>
<p>Information courtesy of <a href="http://en.wikipedia.org">WikiPedia.org</a>.</p>
<h2>About this layout</h2>
<p>LemonLime V2 is my second layout for OSWD. I made it after realising what a pathetic waste of server space the original LemonLime was. The colours are inspired by the picture you see to the left, which I acquired from <a href="http://www.sxc.hu">the stock xchng</a>. The background image is courtesy of <a href="http://www.grsites.com">grsites.com</a>. Both these images can be used for free, but the grsites image needs a link back.</p>
<p>The fade in the header and footer are images, 250px x 1px, repeated vertically. The navigation menu uses an unordered list styled to look like a menu. To add links, just add a list item to the code. Inline links are <a href="#">styled to fit the colour scheme</a>.</p>
<blockquote><p>This is an example of a blockquote. I will now add some text to make this extremely simple yet beautiful modern stunning eye-catching blockqute more than two lines.</p></blockquote>
<p>This layout has been tested in both Firefox 1.0.7 and Internet Explorer 6. They both work identically, except for slight differences in the navigation menu... but it's nothing major.</p>
<h2>About the author</h2>
<p>I've been designing websites for about five years now, and this is my first contribution to OSWD. I tried making money off building websites, but it's just not worth it to me. I code for the pleasure of coding, and don't use any program besides notepad. Yes, I'm somewhat of a purist. Or a minimalist, whatever you prefer. Or maybe I'm just cheap. But I'd rather be called a purist.</p>
<p>Since this layout is open source, feel free to use and abuse it as you like. If you use this layout as a website, please email me at <a href="#">info[at]acousticsam[dot]tk</a> so I can see what you've done with it.</p>
</div>
<div id="footer">
<div id="footercontent">© Yourname | valid <a href="http://validator.w3.org/check?uri=referer">xhtml 1.0 strict</a></div>
<div id="footergradient"></div>
</div>
</div>
</body>
</html>
Related examples in the same category