she
<!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" />
<title>OSWD 4 : she</title>
<!--
This template is created by Jasper van der Meer for OSWD.org. You are free to alter, build upon or delete any part of the code,
but it would be cool and generous if you left the author's notice intact in the footer. If you like this template and you wanna use it,
please let me know. I'd love to see my template and your site in action! :-) Enjoy this free, uncopywritten template from JMstudio.nl
-->
<style type='text/css'>
body {
background: #FFFFFF;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 100%;
color: #DDDDDD;
}
#container { /* Holds it all in the center of the page */
width: 740px;
margin-left: auto;
margin-right: auto;
border: 1px solid #5f5f5e;
background: #FFFFFF url(she-images/container_back.gif) top left repeat-y;
}
#header { /* The top or header of the page */
width: 590px;
height: 130px;
background: #FFFFFF url(she-images/top_header.jpg) top right no-repeat; /* styles combined. Watch, edit and learn! */
float: right; /* Stick that header on the right side of #container */
text-align: right;
}
#header h1 { /* Line 1 in the header: OSWD 4: SHE */
font-family: "Trebuchet MS", Tahoma, Verdana, sans-serif;
font-size: 32px;
font-weight: lighter;
letter-spacing: -2px;
text-transform: uppercase;
margin-right: 10px;
margin-top: 10px;
line-height: 65px;
}
#header span { /* "SHE" is a bit darker. That's done here. */
font-family: "Trebuchet MS", Tahoma, Verdana, sans-serif;
font-size: 32px;
font-weight: lighter;
letter-spacing: -2px;
text-transform: uppercase;
color: #666666;
}
#header h2 { /* Line 2 in the header: Ain't she beautiful? */
font-family: "Times New Roman", Times, serif;
font-size: 20px;
color: #CACACA;
letter-spacing: -1px;
font-style: italic;
line-height: 0px;
margin-right: 10px;
}
#left_black {
width: 150px;
min-height: 600px;
background: #333333 url(she-images/left_black.jpg) top left no-repeat;
float: left;
}
.navcontainer {
width: 150px;
margin-top: 130px;
}
.navcontainer ul {
margin-left: 0;
margin-top: 0;
padding-left: 0;
list-style-type: none;
font-family: Arial, Helvetica, sans-serif;
}
.navcontainer a {
display: block;
padding: 3px;
width: 144px;
font-size: 0.7em;
}
.navcontainer a:link, #navlist a:visited {
color: #EEE;
text-decoration: none;
}
.navcontainer a:hover {
background: #000000 url(she-images/arrow.gif) 96% 50% no-repeat;
filter: alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
color: #FFFFFF;
}
.navcontainer2 {
width: 150px;
margin-top: 20px;
}
.navcontainer2 ul {
margin-left: 0;
margin-top: 0;
padding-left: 0;
list-style-type: none;
font-family: Arial, Helvetica, sans-serif;
}
.navcontainer2 a {
display: block;
padding: 3px;
width: 144px;
font-size: 0.7em;
}
.navcontainer2 a:link, #navlist2 a:visited {
color: #EEE;
text-decoration: none;
}
.navcontainer2 a:hover {
background: #000000 url(she-images/arrow.gif) 96% 50% no-repeat;
filter: alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
color: #FFFFFF;
}
#core {
width: 590px;
min-height: 470px;
background: #FFFFFF url(she-images/core_back.jpg) top left no-repeat;
float: right;
}
.core_text {
width: 438px;
float: right;
padding: 5px;
margin-right: 15px;
_margin-right: 8px; /* IE HACK */
margin-top: 10px;
background: #FFFFFF url(she-images/pink_core_back.jpg) top left no-repeat;
}
.core_text h1 {
font-family: "Trebuchet MS", Tahoma, Verdana, sans-serif;
font-size: 20px;
text-transform: uppercase;
font-weight: lighter;
letter-spacing: -2px;
color: #ff1493;
padding: 5px 10px 0px 5px;
}
.core_text p {
padding: 5px;
font-size: 0.6em;
color: #666666;
}
.core_text a {
color: #ff1493;
}
#footer {
width: 740px;
height: auto;
background: #ff1493;
clear: both;
text-align: center;
}
#footer p {
padding: 3px;
margin: 0;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 0.6em;
color: #000000;
}
#footer a {
color: #5A0C4D;
text-decoration: none;
}
</style>
</head>
<body>
<div id="container">
<div id="left_black">
<div class="navcontainer">
<ul id="navlist">
<li><a href="index.html">homepage</a></li>
<li><a href="index.html">about me</a></li>
<li><a href="http://www.oswd.org/userinfo.phtml?user=amygdela"
title="View my Personal Homepage on OSWD">other designs</a></li>
<li><a href="http://www.oswd.org/viewdesign.phtml?id=2250"
title="View my previous design for OSWD">previous design</a></li>
<li><a href="http://www.jmstudio.nl" title="Author's homepage">my homepage</a></li>
</ul>
</div>
<hr style="height: 0; border-bottom: 1px solid #CCCCCC; width: 140px; margin-left: 5px;" />
<div class="navcontainer2">
<ul id="navlist2">
<li><a href="index.html">Important link</a></li>
<li><a href="index.html">Important link</a></li>
<li><a href="index.html">Important link</a></li>
<li><a href="index.html">Important link</a></li>
<li><a href="index.html">Important link</a></li>
</ul>
</div>
</div>
<div id="header">
<h1>OSWD 4: <span>She</span></h1>
<h2>Ain't she beautiful...?</h2>
</div>
<div id="core">
<div class="core_text">
<h1>Behold a lady...</h1>
<p>
For this design I've decided to show some more feminent parts of my creativity.
To set things straight right away: I am a straight male! :-) In the menu I've used
an opacity filter when you move your mouse over the links, so you can still see a
bit of the lady through the background...
This template displays correct in Firefox, Opera and IE. No matter how much text you stuff into here, it will stretch with the contents. The girl is shown once, it's not repeated, cause that'd be ugly! :-)
</p>
<p>
Again, this template is created with divs and CSS and it validates as
<a href="http://validator.w3.org/check?uri=referer" title="Check this page for validity.">XHTML 1.0 Strict</a>.
The total size of the images is <strong>22.8kB</strong> and there are <strong>172</strong> lines of CSS
used to display this site correct.
</p>
<p>
Included in the package is the PSD file of this template, the PSD of the girl, the pink gradient background
and the background of the container. Enjoy this template,
and if you ever use it, please let me know!
</p>
<p>
<a href="http://www.oswd.org/userinfo.phtml?user=amygdela"
title="My Personal Homepage on OSWD">Jasper van der Meer</a> /
<a href="http://www.jmstudio.nl">JMstudio.nl</a> /
<a href="mailto:amy2k5@gmail.com" title="Email me!">amy2k5@gmail.com</a>
</p>
</div>
<div class="core_text">
<h1>Behold a lady...</h1>
<p>
For this design I've decided to show some more feminent parts of my creativity.
To set things straight right away: I am a straight male! :-) In the menu I've used
an opacity filter when you move your mouse over the links, so you can still see a
bit of the lady through the background...
This template displays correct in Firefox, Opera and IE. No matter how much text you stuff into here, it will stretch with the contents. The girl is shown once, it's not repeated, cause that'd be ugly! :-)
</p>
<p>
Again, this template is created with divs and CSS and it validates as
<a href="http://validator.w3.org/check?uri=referer" title="Check this page for validity.">XHTML 1.0 Strict</a>.
The total size of the images is <strong>22.8kB</strong> and there are <strong>172</strong> lines of CSS
used to display this site correct.
</p>
<p>
Included in the package is the PSD file of this template, the PSD of the girl, the pink gradient background
and the background of the container. Enjoy this template,
and if you ever use it, please let me know!
</p>
<p>
<a href="http://www.oswd.org/userinfo.phtml?user=amygdela"
title="My Personal Homepage on OSWD">Jasper van der Meer</a> /
<a href="http://www.jmstudio.nl">JMstudio.nl</a> /
<a href="mailto:amy2k5@gmail.com" title="Email me!">amy2k5@gmail.com</a>
</p>
</div>
</div>
<div id="footer">
<p>This design is created by <a href="http://www.jmstudio.nl" title="Visit the author's homepage!">JMstudio.nl</a></p>
</div>
</div>
</body>
</html>
Related examples in the same category