baby-toys : People « Templates « HTML / CSS

baby-toys
    

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Baby Toys</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type='text/css'>
/* CSS Document */
body{padding:0px; margin:0px; background:#FFF; color:#616161; font:10px/14px Tahoma, sans-serif;}
div, p, ul, h2, h3, h4, img{padding:0px; margin:0px;}
ul{list-style-type:none;}

.clear {clear: both; margin: 0px; height:0}

p a{font:10px/14px Tahoma, sans-serif; color:#000; text-decoration:none;}
p a:hover{ color:#000; text-decoration:underline;}

.headline{font:10px/14px Tahoma, sans-serif; color:#000; font-weight:bold}

#container{width:775px; position:relative; margin:0 auto;}

/* HEADER */

#header{width:775px; height:327px; position:relative; background:url(baby-toys-images/b_header.jpg) 0 0 no-repeat}
#header img#logo{position:absolute; top:0; left:30px}
#header img#slogan{position:absolute; top:32px; left:458px}
#header img#slogan2{position:absolute; top:185px; left:440px}
#header img#btn_learn{position:absolute; top:258px; left:591px}

#header ul.menu{position:absolute; top:85px; left:72px; width:660px}
#header ul.menu li{height:15px; margin-right:13px; float:left}
#header ul.menu li a{height:15px; display:block; text-indent:-20000px; }
#header ul.menu li a:hover{height:15px;}

#header ul.menu li.btn_1 a{width:85px; background:url(baby-toys-images/btn_1.gif) 0 0 no-repeat; }
#header ul.menu li.btn_1 a:hover{width:85px; background:url(baby-toys-images/btn_1_over.gif) 0 0 no-repeat;}

#header ul.menu li.btn_2 a{width:75px; background:url(baby-toys-images/btn_2.gif) 0 0 no-repeat; }
#header ul.menu li.btn_2 a:hover{width:75px; background:url(baby-toys-images/btn_2_over.gif) 0 0 no-repeat;}

#header ul.menu li.btn_3 a{width:78px; background:url(baby-toys-images/btn_3.gif) 0 0 no-repeat; }
#header ul.menu li.btn_3 a:hover{width:78px; background:url(baby-toys-images/btn_3_over.gif) 0 0 no-repeat;}

#header ul.menu li.btn_4 a{width:101px; background:url(baby-toys-images/btn_4.gif) 0 0 no-repeat; }
#header ul.menu li.btn_4 a:hover{width:101px; background:url(baby-toys-images/btn_4_over.gif) 0 0 no-repeat;}

#header ul.menu li.btn_5 a{width:70px; background:url(baby-toys-images/btn_5.gif) 0 0 no-repeat; }
#header ul.menu li.btn_5 a:hover{width:70px; background:url(baby-toys-images/btn_5_over.gif) 0 0 no-repeat;}

#header ul.menu li.btn_6{margin-right:0}
#header ul.menu li.btn_6 a{width:73px; background:url(baby-toys-images/btn_6.gif) 0 0 no-repeat; }
#header ul.menu li.btn_6 a:hover{width:73px; background:url(baby-toys-images/btn_6_over.gif) 0 0 no-repeat;}

#header ul.menu li.line{width:6px; background:url(baby-toys-images/bullet_m.gif) 0 5px no-repeat}

/* CONTENT */

#content{width:775px; position:relative; clear:both; background:#daecf8 url(baby-toys-images/index_39.gif) 0 0 repeat-x}

#leftPan{width:184px; float:left; margin:24px 49px 0 48px; display:inline}
#rightPan{width:460px; float:left; margin:24px 0 0 0;}

#welcome h2{height:35px; position:relative; background:url(baby-toys-images/h_welcome.gif) 0 0 no-repeat; margin-bottom:14px}
#welcome img{margin-bottom:13px}
#welcome p{margin-left:6px}
#welcome p span{display:block; margin-bottom:10px}

#featured h2{height:35px; position:relative; background:url(baby-toys-images/h_featured.gif) 0 0 no-repeat; margin-bottom:14px}
#featured #leftFeat{width: 212px; float:left; margin-right:21px;}
#featured #rightFeat{width: 215px; float:left; }

#featured #leftFeat img{float:left; margin-right:12px}
#featured #leftFeat p#t1{float:left; width:120px}
#featured .clear{height:15px}

#featured #rightFeat img{float:left; margin-right:12px}
#featured #rightFeat p#t2{float:left; width:120px}

#support{width: 215px; float:left; margin-right:20px;}
#support h2{height:28px; position:relative; background:url(baby-toys-images/h_support.gif) 0 0 no-repeat; margin-bottom:7px}

#tools{width: 215px; float:left; }
#tools h2{height:28px; position:relative; background:url(baby-toys-images/h_tools.gif) 0 0 no-repeat; margin-bottom:7px}

#rightPan ul{width:210px; margin-left:3px}
#rightPan ul li{font:10px/14px Tahoma, sans-serif; background:url(baby-toys-images/arrow.gif) 0 3px no-repeat; padding-left:13px; height:20px;}
#rightPan ul li a{color:#000; text-decoration:none;}
#rightPan ul li a:hover{color:#000; text-decoration:underline;}

.clear#end{height:20px}

/* FOOTER */

#footer{height:45px; clear:both; width:775px;}
#footer p{padding: 10px 0 0 0; font:10px/14px Tahoma, sans-serif; font-weight:normal; text-align:center; color:#000;}
#footer p a{font:10px/14px Tahoma, sans-serif; font-weight:normal; color:#000; text-decoration:none; padding: 0 3px }
#footer p a:hover{text-decoration:underline; color:#000}


</style>


</head>
<body>
<div id="container">
  <div id="header">
    <ul class="menu">
      <li class="btn_1"><a href="#">home page</a></li>
      <li class="line"></li>
      <li class="btn_2"><a href="#">about us</a></li>
      <li class="line"></li>
      <li class="btn_3"><a href="#">products</a></li>
      <li class="line"></li>
      <li class="btn_4"><a href="#">special gifts</a></li>
      <li class="line"></li>
      <li class="btn_5"><a href="#">support</a></li>
      <li class="line"></li>
      <li class="btn_6"><a href="#">contacts</a></li>
    </ul>
    <img src="baby-toys-images/logo.jpg" width="169" height="73" alt="" id="logo" /> <img src="baby-toys-images/slogan.gif" width="275" height="17" alt="" id="slogan" /> <img src="baby-toys-images/slogan2.jpg" width="267" height="60" alt="" id="slogan2" /> <a href="#"><img src="baby-toys-images/btn_learn.gif" alt="" name="btn_learn" width="107" height="24" border="0" id="btn_learn" /></a> </div>
  <div id="content">
    <div id="leftPan">
      <div id="welcome">
        <h2></h2>
        <img src="baby-toys-images/img_welcome.gif" width="184" height="78" alt="" />
        <p><span class="headline">Nam eu nulla. Donec lobortis purus vel urna. Nunc laoreet lacinia nunc. </span> Nam eu nulla. Donec lobortis purus vel urna. Nunc laoreet lacinia nunc. In volutpat sodales ipsum. Sed vestibulum. Integer in ante. Sed Nunc laoreet lacinia nunc. In volutpat sodales Nam eu nulla. Donec lobortis purus vel urna. Nunc laoreet lacinia nunc. In volutpat sodales ipsum. Nam eu nulla. Donec lobortis purus vel urna. <a href="#">MORE</a></p>
      </div>
    </div>
    <div id="rightPan">
      <div id="featured">
        <h2></h2>
        <div id="leftFeat"> <img src="baby-toys-images/img_featured.gif" width="78" height="78" alt="" />
          <p id="t1"><span class="headline">am eu nulla. Donec lobortis purus vel urna. </span> Nunc laoreet lacinia nunc. In volutpat sodales ipsum. Sed vestibulum. Integer in </p>
          <div class="clear"></div>
          <p>Nam eu nulla. Donec lobortis purus vel urna. Nunc laoreet lacinia nunc. In volutpat sodales ipsum. Sed vestibulum. <a href="#">DETAILS</a></p>
        </div>
        <div id="rightFeat"> <img src="baby-toys-images/img_featured-14.gif" width="78" height="78" alt="" />
          <p id="t2"><span class="headline">am eu nulla. Donec lobortis purus vel urna. </span> Nunc laoreet lacinia nunc. In volutpat sodales ipsum. Sed vestibulum. Integer in </p>
          <div class="clear"></div>
          <p>Nam eu nulla. Donec lobortis purus vel urna. Nunc laoreet lacinia nunc. In volutpat sodales ipsum. Sed vestibulum. <a href="#">DETAILS</a></p>
        </div>
        <div class="clear"></div>
      </div>
      <div id="support">
        <h2></h2>
        <ul>
          <li><a href="#">Nam eu nulla. Donec lobortis purus vel </a></li>
          <li><a href="#">urna. Nunc laoreet lacinia nunc. In volutpat </a></li>
          <li><a href="#">sodales ipsum. Sed vestibulum. Integer in </a></li>
          <li><a href="#">ante. Sed Nunc laoreet lacinia nunc. In </a></li>
        </ul>
      </div>
      <div id="tools">
        <h2></h2>
        <ul>
          <li><a href="#">Nam eu nulla. Donec lobortis purus vel </a></li>
          <li><a href="#">urna. Nunc laoreet lacinia nunc. In volutpat </a></li>
          <li><a href="#">sodales ipsum. Sed vestibulum. Integer in </a></li>
          <li><a href="#">ante. Sed Nunc laoreet lacinia nunc. In </a></li>
        </ul>
      </div>
      <div class="clear"></div>
    </div>
    <div class="clear" id="end"></div>
  </div>
  <div id="footer">
    <p><a href="#">HOME PAGE</a> | <a href="#">ABOUT US</a> | <a href="#">PRODUCTS</a> | <a href="#">SPECIAL GIFTS</a> | <a href="#">SUPPORT</a> | <a href="#">NEWS</a> | <a href="#">CONTACTS</a><br/>
      Copyright &copy; Your Company Name | Design by <a href="http://freshtemplates.com/">Website Templates</a></p>
  </div>
</div>
</body>
</html>
Related examples in the same category

1.	metamorph_shadowgirl
2.	metamorph_people
3.	metamorph_timetorest
4.	metamorph_silverglobe
5.	metamorph_singingirl
6.	metamorph_highway
7.	metamorph_aircraft
8.	metamorph_girlnextdoor
9.	metamorph_pyramids
10.	about_time
11.	forchildren
12.	artificial-casting
13.	artificial
14.	baby
15.	charity
16.	charitytrust
17.	independant-politician
18.	home-interior-1.0
19.	home