fernando1
<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta name="description" content="Your description goes here" />
<meta name="keywords" content="your,keywords,goes,here" />
<meta name="author" content="Your Name / Original design by Fernando Baptista - http://fernbap.com/" />
<style type='text/css'>
body {
background:url(fernando1-images/bg.gif) repeat-y top center #eaeaea;
color:#3a3a3a;
font:76% Verdana,Tahoma,Arial,sans-serif;
margin:0 auto;
padding:0;
}
/* Main layout and header */
#wrap {
background:#fff;
color:#303030;
margin:0 auto;
padding:1px 4px;
width:760px;
}
#header {
background:url(fernando1-images/headerphoto1.jpg) no-repeat bottom left #fff;
color:#505050;
height:200px;
margin:0 10px 10px 10px;
padding:0;
}
#header h1 {
font-size:2.5em;
font-weight:400;
letter-spacing:-2px;
margin:0 0 4px 5px;
padding:15px 0 0;
}
#header h1 a,#header h1 a:hover {
font-weight:400;
padding:0;
}
#header p {
font-size:1.1em; letter-spacing:-1px; margin:0 0 20px 5px;
padding:0 0 0 3px;
}
/* Left sidebar and menu */
#leftside {
clear:left;
float:left;
margin:0 0 10px;
padding:0;
width:210px;
}
#leftside .submenu {
margin-left: 20px;
}
#leftside ul {
list-style:none;
margin:0 0 0px;
padding:0;
width:180px;
}
#leftside ul li {
padding:0;
width:180px;
}
#leftside h2 {
font-size:1.5em;
font-weight:400;
}
#leftside .announce {
background:url(fernando1-images/menubg.gif) repeat-x bottom left #f4f4f4;
border-bottom:1px solid #d8d8d8;
border-left:1px solid #ccc;
border-right:1px solid #d8d8d8;
border-top:1px solid #d8d8d8;
clear:left;
color:#505050;
line-height:1.3em;
margin:10px 0 0 10px;
padding:5px 5px 5px;
width:170px;
}
#leftside p,.announce p {
font-size:0.9em;
}
#menu3 {
width: 180px;
border: 1px solid #ccc;
margin: 10px;
}
#menu3 li a {
height: 32px;
voice-family: "\"}\"";
voice-family: inherit;
height: 24px;
text-decoration: none;
}
#menu3 li a:link, #menu3 li a:visited {
color: #888;
display: block;
background: url(fernando1-images/menu3.gif);
padding: 8px 0 0 30px;
}
#menu3 li a:hover, #menu3 li a.selected {
color: #283A50;
background: url(fernando1-images/menu3.gif) 0 -32px;
padding: 8px 0 0 30px;
}
/* Right sidebar */
#extras {
float:right;
margin:0 0 10px 10px;
padding:4px 8px 8px 8px;
width:140px;
border:1px solid #d8d8d8;
/*background: #f4f4f4; */
background:url(fernando1-images/menubg.gif) repeat-x bottom left #f4f4f4;
}
#extras p,#extras ul {
font-size:0.9em;
line-height:1.3em;
margin:0 0 1.5em;
padding:0;
}
#extras li {
list-style:none;
margin:0 0 6px;
padding:0;
}
#extras h2 {
font-size:1.6em;
font-weight:400;
letter-spacing:-1px;
margin:0 0 6px;
}
/* Main content variations */
#content {
line-height:1.5em;
margin:20px 10px 10px 10px;
padding:0;
text-align:left;
}
#contentwide {
line-height:1.5em;
margin:10px 0 10px 10px;
padding:0;
text-align:left;
}
#content h2,#contentwide h2 {
font-size:1.8em;
font-weight:400;
letter-spacing:-1px;
margin:8px 0 10px;
padding:0;
}
#content h3,#contentwide h3 {
font-size:1.5em;
font-weight:400;
margin:6px 0;
padding:0;
}
/*#content img,#contentwide img {
background:#ccc;
border:4px solid #f0f0f0;
color:#303030;
display:inline;
padding:1px; margin:0 10px 5px 0;
} */
#content ul,#content ol,#contentwide ul,#contentwide ol {
margin:0 0 16px 20px;
padding:0;
}
#content ul ul,#content ol ol,#contentwide ul ul,#contentwide ol ol {
margin:2px 0 2px 20px;
}
#content li,#contentwide li {
margin:0 0 2px 10px;
padding:0 0 0 4px;
}
/* Footer */
#footer {
background:#fff;
border-top:2px solid #dadada;
clear:both;
color:gray;
font-size:0.9em;
margin:0 auto;
padding:8px 0;
text-align:center;
width:760px;
}
#footer p {
margin:0;
padding:0;
}
#footer a {
background:inherit;
color:gray;
font-weight:400;
text-decoration:none;
}
#footer a:hover {
text-decoration:underline;
}
/* Links and paragraphs */
a {
background:inherit;
color:#166090;
text-decoration:none;
font-weight:700;
}
a:hover {
background:inherit;
color:#286ea0;
text-decoration:underline;
}
a img {
border:0;
}
p {
margin:0 0 16px;
}
blockquote {
background:url(fernando1-images/menubg.gif) repeat-x bottom left #f4f4f4;
border-bottom:1px solid #d8d8d8;
border-left:4px solid #ccc;
border-right:1px solid #d8d8d8;
border-top:1px solid #d8d8d8;
color:#505050;
margin:16px;
padding:7px 7px 7px 11px;
}
blockquote p {
font-size:1.1em;
line-height:1.3em;
margin:0;
}
/* Tables and forms */
/*table {
border:1px solid #d8d8d8;
border-collapse:collapse;
line-height:1.3em;
width:95%;
margin:0 0 16px;
padding:0;
} */
caption {
font-size:1.5em;
font-weight:400;
margin:0;
padding:6px 0 8px;
text-align:left;
}
th {
background:url(fernando1-images/menubg2.gif) repeat-x bottom left #eaeaea;
color:#505050;
padding:7px;
text-align:left;
}
/*td {
background:url(fernando1-images/menubg.gif) repeat-x bottom left #f4f4f4;
color:#303030;
font-size:0.9em;
padding:7px;
text-align:left;
}*/
form, fieldset, table {
background: transparent;
border: none;
margin: 0;
padding: 0;
text-align: left;
}
input,textarea {
border:1px solid #ccc;
font-family:Verdana,Tahoma,Arial,Sans-Serif;
font-size:1em;
margin:0;
padding:4px;
text-align: left;
}
label {
margin:2px;
}
input {
width:200px;
}
textarea {
width:400px;
}
/* Search box */
#searchbox label, .hide {
display:none;
}
#searchbox {
margin:6px 0 16px;
padding:0;
}
#searchform {
background:#fff;
border:1px solid #ccc;
color:#505050;
font-size:0.9em;
padding:4px;
width:116px;
}
/* Various classes */
.announce h2 {
margin:0 0 10px;
padding:0;
}
.textright {
margin:-10px 0 4px;
text-align:right;
}
.center {
text-align:center;
}
.small {
font-size:0.8em;
}
.large {
font-size:1.3em;
}
.highlighted {
background:#f0f0f0;
border:1px solid #b0b0b0;
color:#303030;
padding:3px;
}
.button {
background:url(fernando1-images/menubg.gif) repeat-x bottom left #f4f4f4;
border-bottom:1px solid #d8d8d8;
border-left:4px solid #ccc;
border-right:1px solid #d8d8d8;
border-top:1px solid #d8d8d8;
color:#505050;
font-weight:700;
margin:0 0 15px;
padding:7px 7px 7px 11px;
width:120px;
}
.left {
float:left;
margin:10px 10px 5px 0;
}
.right {
float:right;
margin:10px 0 5px 10px;
}
</style>
<title>fernando 1 | A free website template...</title>
</head>
<body>
<div id="wrap">
<div id="header">
<h1><a href="#">fernando 1</a></h1>
<p><strong>A free website template...</strong></p>
</div>
<div id="leftside">
<h2 class="hide">Site menu:</h2>
<div id="menu3">
<ul>
<li><a href="#1" title="Home">Home</a></li>
<li><a href="#2" title="About">About</a></li>
<li><a href="#3" title="Services">Services</a></li>
<li><a href="#4" title="Portfolio">Portfolio</a></li>
<li><a href="#5" title="Store">Store</a></li>
<li><a href="#6" title="Download">Download Menu</a></li>
</ul>
</div>
<div class="announce">
<h2>Latest news:</h2>
<p><strong>Oh, i almost forgot:</strong><br />
This template is valid XHTML 1 strict and, of course:<br />"No tables were harmed while manufacturing this template."</p>
<p class="textright"><a href="#">Sample link »</a></p>
</div>
</div>
<div id="content">
<div id="extras">
If you use this template, I kindly ask you to leave the credits and the link to my website in the footer since it is a nice way of giving something back to the template designer. But that is only a friendly request, not any obligation.
</div>
<h2>fernando 1 - a free website template!</h2>
<p>This is a free XHTML/CSS-based website template, that anyone may use for any purpose without any obligations or limitations. This template came out of a joke, as i could do an "original design" in less than 1 hour.</p>
<p>This design was based on a template by <a href="http://andreasviklund.com">Andreas Viklund</a> and uses a free CSS menu by <a href="http://www.e-lusion.com">Ian Main</a>. The header image came from a free wallpaper.</p>
<img src="fernando1-images/religion.jpg" height="100" width="125" class="left" alt="Example content image" />
<p>If you use this template, I kindly ask you to leave the credits and the link to my website in the footer since it is a nice way of giving something back to the template designer. But that is only a friendly request, not any obligation.</p>
<h3>Other versions and additional resources</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse a tortor. Pellentesque sollicitudin, ante nec posuere tempus, arcu lectus vehicula mi, ac rhoncus lorem turpis sed sapien. Pellentesque egestas. Ut eros massa, dignissim at, auctor vitae, consectetuer ut, felis. Ut tincidunt sem in ipsum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse a tortor. Pellentesque sollicitudin, ante nec posuere tempus, arcu lectus vehicula mi, ac rhoncus lorem turpis sed sapien. Pellentesque egestas. Ut eros massa, dignissim at, auctor vitae, consectetuer ut, felis. Ut tincidunt sem in ipsum.</p>
</div>
<div id="footer">
<p>Copyright © 2007 Your Name | Design by <a href="http://fernbap.com/">Fernbap</a></p>
</div>
</div>
</body>
</html>
Related examples in the same category