myfamily
<!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=utf-8"/>
<title>My family template</title>
<style type='text/css'>
html, body, h1, h2, h3, h4 {
margin: 0;
padding: 0;
}
h1 img {
display: block;
}
img {
border: 0;
}
a {
color: #8F6A2B;
font-weight: bold;
text-decoration: none;
}
a:hover {
color: #C4861C;
text-decoration: underline;
}
.left {
float: left;
}
.right {
float: right;
}
.more {
text-align: right;
}
.clear {
clear: both;
}
body {
background: url(myfamily-images/bg.jpg) repeat-x;
text-align: center;
font: 11px arial, sans-serif;
color: #5D5D5D;
}
#wrapper {
text-align: left;
margin: auto;
width: 686px;
position: relative;
}
h1 {
position: absolute;
/*background: url(myfamily-images/header.jpg) no-repeat;*/
width: 348px;
height: 204px;
top: 0;
left: 0;
text-align: center;
padding-top: 35px;
color: white;
font: 32px "Lucida Handwriting", "Lucida Calligraphy", verdana, arial, sans-serif;
}
#header{
position: absolute;
background: url(myfamily-images/header.jpg) no-repeat;
width: 366px;
height: 204px;
top: 0px;
left: -40px;
z-index: 1;
}
#family {
position: absolute;
background: url(myfamily-images/myfamily.jpg) no-repeat;
width: 383px;
height: 381px;
top: 204px;
left: -59px;
z-index: 1;
}
#nav {
width: 259px;
position: absolute;
top: 585px;
left: 0;
background: url(myfamily-images/nav_bg.jpg) repeat-y;
}
#nav ul {
margin: 0;
padding: 37px 0 45px 64px;
font: 12px "Times new roman", "Lucida Grande", serif;
background: bottom left url(myfamily-images/nav_bot.gif) no-repeat;
}
#nav li {
margin: 11px;
padding: 0 0 0 40px;
list-style: none;
background: top left url(myfamily-images/bullet_white.gif) no-repeat;
}
#nav a {
font-weight: normal;
color: white;
}
#body {
position: absolute;
width: 427px;
top: 0;
left: 259px;
background: white;
overflow: hidden;
}
#body .i {
padding: 69px 45px 84px 74px;
}
#head-top {
position: absolute;
top: 0;
left: 259px;
width: 427px;
height: 32px;
z-index: 2;
background: url(myfamily-images/head_top.gif) no-repeat;
}
#head-right {
position: absolute;
top: 0;
left: 686px;
width: 13px;
height: 145px;
z-index: 3;
background: url(myfamily-images/head_right.gif) no-repeat;
}
#body h2 {
font: 14px "Times new roman", "Lucida Grande", serif;
font-weight: normal;
margin-top: 25px;
}
#body h2.shallow {
margin-top: 10px;
}
#body h2 strong {
color: #576B02;
font-size: 20px;
font-weight: normal;
}
#body h2.orange strong {
color: #8F6A2B;
}
#body p {
margin: 1em 0;
}
#body ul {
margin: 0;
padding: 0;
}
#body li {
margin: 1em 0;
list-style: none;
padding: 0 0 0 30px;
background: top left url(myfamily-images/bullet_orange.gif) no-repeat;
}
#view {
float: left;
width: 115px;
text-align: center;
margin-right: -50px;
}
#funtravel {
margin-top: 10px;
}
#collect {
float: left;
width: 203px;
}
#collect p.dark, #view p.dark {
text-align: center;
color: #000;
font: 14px "Arial narrow", arial, sans-serif;
margin-bottom: 2px;
margin-top: 3px;
}
#collect p.orange, #view p.orange {
text-align: center;
color: #F25C00;
font: 22px "Arial narrow", arial, sans-serif;
margin-top: 2px;
margin-bottom: 10px;
}
#view p.dark {
margin-top: 40px;
margin-bottom: 10px;
}
#view p.dark a {
color: #000;
font-weight: normal;
text-decoration: none;
}
#view p.orange a {
color: #F25C00;
font-weight: normal;
text-decoration: none;
}
#collect p.other {
margin-left: 12px;
}
#copyright {
text-align: center;
clear: both;
color: black;
padding-top: 15px;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header"><h1>My Family</h1></div>
<div id="family"></div>
<div id="head-top"></div>
<div id="head-right"></div>
<div id="nav">
<ul>
<li><a href="http://www.freewebsitetemplates.com">Home</a></li>
<li><a href="http://www.freewebsitetemplates.com">About us</a></li>
<li><a href="http://www.freewebsitetemplates.com">Services</a></li>
<li><a href="http://www.freewebsitetemplates.com">Family care</a></li>
<li><a href="http://www.freewebsitetemplates.com">Photo gallery</a></li>
<li><a href="http://www.freewebsitetemplates.com">Contact us</a></li>
</ul>
<div id="nav-bot"></div>
</div>
<div id="body"><div class="i">
<h2 class="shallow"><strong>Welcome</strong> to my family</h2>
<p>You can find some <a href="http://www.webhostingservices.us/">web hosting services</a> which are also a need for website building which are listed in web hosting search.</p>
<p>This is a template designed by free website templates for you for free you can replace all the text by your own
text. This is just a place holder so you can see how the site would look like.</p>
<p>You can remove any link to our websites from this template you're free to use the template without linking
back to us.</p>
<p>If you're having problems editing the template please don't hesitate to ask for help on the <a href="http://www.freewebsitetemplates.com/forum/">forum</a>.</p>
<p class="more"><a href="http://www.freewebsitetemplates.com">More...</a></p>
<h2 class="shallow"><strong>Family</strong> photo gallery</h2>
<p><img src="myfamily-images/gallery.jpg" width="233" height="161" alt="Gallery" class="left" /></p>
<div id="view">
<p class="dark"><a href="http://www.freewebsitetemplates.com">VIEW OUR</a></p>
<p class="orange"><a href="http://www.freewebsitetemplates.com">PHOTO<br />GALLERY</a></p>
</div>
<div class="clear"></div>
<h2><strong>Family</strong> advice</h2>
<ul class="orange-bullet">
<li>Even more websites all about website templates on <a href="http://www.justwebtemplates.com">Just Web Templates</a>.</li>
<li>If you're looking for beautiful and professionally made templates you can find them at <a href="http://www.templatebeauty.com">Template Beauty</a>.</li>
</ul>
<h2 class="orange"><strong>Family</strong> fun & travel</h2>
<div id="funtravel">
<img src="myfamily-images/pic_1.jpg" width="95" height="116" alt="Pic 1" class="left" />
<div id="collect">
<p class="dark">COLLECT OUR</p>
<p class="orange">FUN & TRAVELBOOK</p>
<p class="other">Nulla turpis. Suspendisse erat ipsum, sodales dignissim, bibendum</p>
</div>
</div>
<div id="copyright">
Hosting by <a href="http://www.webhostingservices.us/">Web Hosting Services</a>.
</div>
</div></div>
</div>
</body>
</html>
Related examples in the same category