topgadgets
<!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>
<title>Gadgets design</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style type='text/css'>
html, body {
margin: 0px;
padding: 0px;
}
body {
font: 10px Tahoma, verdana, sans-serif;
}
img {
border: 0px;
}
a {
color: #575757;
font-weight: bold;
text-decoration: none;
}
a:hover {
color: #2B2B2B;
text-decoration: underline;
}
ul {
margin: 0px 0px 0px 2em;
padding: 0px;
}
li {
list-style: square;
margin: 0px;
padding: 0px;
}
.clear {
clear: both;
}
form {
margin: 0px;
padding: 0px;
}
body {
background: url(topgadgets-images/bg.jpg);
}
#outer {
background: url(topgadgets-images/bg_top.jpg) repeat-x;
min-height: 757px;
padding: 67px 0px;
text-align: center;
}
#wrapper {
text-align: left;
margin: auto;
position: relative;
width: 563px;
}
#nav {
background: url(topgadgets-images/nav_bg.gif) repeat-x;
}
#nav-left {
background: url(topgadgets-images/nav_left.gif) no-repeat;
width: 100%;
}
#nav-right {
background: top right url(topgadgets-images/nav_right.gif) no-repeat;
height: 33px;
}
#nav a, #navb a {
color: #C0C4AB;
text-decoration: none;
font: bold 9px arial, sans-serif;
}
#nav a:hover, #navb a:hover {
color: white;
}
#nav ul {
padding-top: 9px;
}
#nav li {
display: inline;
padding: 0px 15px;
}
#head {
position: relative;
height: 157px;
background: url(topgadgets-images/head_bg.gif);
}
#head h1 {
margin: 0px;
padding: 0px;
position: absolute;
top: 45px;
left: 29px;
}
.logo {
display: block;
float: left;
border: 2px solid #B3B79E;
border-top: none;
border-bottom: none;
padding: 0px 5px;
font: 20px "arial narrow", arial, sans-serif;
height:55px;
}
.logo .top {
display: block;
color: #303228;
}
.logo .gadgets {
display: block;
color: #6C7376;
font-size: 28px;
margin-top: 0px;
line-height: 32px;
}
#head-left {
position: absolute;
top: 0px;
left: -16px;
width: 16px;
height: 200px;
background: url(topgadgets-images/head_left.gif) no-repeat;
}
#head-right {
position: absolute;
top: 0px;
left: 562px;
width: 16px;
height: 200px;
background: url(topgadgets-images/head_right.gif) no-repeat;
}
#navb {
position: absolute;
top: 138px;
left: 10px;
height: 19px;
}
#navb ul {
margin: 0px;
padding: 0px;
}
#navb li {
float: left;
width: 76px;
height: 19px;
background: url(topgadgets-images/small_nav_tab.gif) no-repeat;
margin: 0px;
padding: 0px;
list-style: none;
text-align: center;
padding-top: 4px;
}
#navb a {
color: #E1E1D5;
}
#head-1 {
position: absolute;
top: 0px;
right: 0px;
width: 237px;
height: 157px;
background: url(topgadgets-images/head_1.jpg) no-repeat;
}
#head-2 {
height: 184px;
background: url(topgadgets-images/head_2.jpg) no-repeat;
}
#login {
background: url(topgadgets-images/login_bg.jpg) repeat-y;
font-weight: bold;
color: #E1E1D5;
}
#login-bot {
background: bottom url(topgadgets-images/login_bot.jpg) no-repeat;
padding: 6px 0px 19px 0px;
}
#login-box {
float: left;
width: 260px;
}
#login h2 {
margin: 0px;
padding: 0px 0px 3px;
}
#login a {
color: #303228;
}
#login a:hover {
color: #1C1D10;
}
#login-box h2 {
padding: 0px 0px 3px 30px;
margin-left: 45px;
margin-bottom: 3px;
color: #303228;
font: 18px "arial narrow", arial, sans-serif;
background: url(topgadgets-images/h_login.gif) no-repeat;
}
#login-box h2 em {
font-style: normal;
color: #ECEEE4;
}
#login-username {
float: left;
width: 195px;
text-align: right;
color: #303228;
}
#login-username input {
width: 120px;
background: #FFFFFF;
color: #303228;
font-size: 10px;
border: 1px solid #60654E;
}
#login-username div {
padding-bottom: 1px;
}
#login-button {
float: left;
width: 45px;
margin: 2px 10px;
}
#login-box .reg {
text-align: right;
padding: 6px 27px 0px 0px;
}
#login-welcome {
float: right;
width: 278px;
}
#login-welcome div {
padding-right: 23px;
}
#login-welcome h2 {
color: #4E523F;
font: 20px "arial narrow", arial, sans-serif;
margin-bottom: 0.3em;
padding-bottom: 0px;
}
#login-welcome p {
margin-top: 0px;
}
#body {
background: url(topgadgets-images/body_bg.gif) repeat-y;
}
#body-bot {
background: bottom url(topgadgets-images/body_bot.gif) no-repeat;
padding-bottom: 20px;
}
#body h2 {
margin: 0px;
padding: 0px;
background: url(topgadgets-images/body_top.gif) no-repeat;
height: 60px;
color: #303228;
font: normal 18px "arial narrow", arial, sans-serif;
}
#body span {
position: relative;
top: 25px;
left: 40px;
}
#body h2 strong {
color: #982801;
font-weight: normal;
}
#footer {
background: url(topgadgets-images/footer_bg.gif);
margin: 0px 1px;
text-align: right;
padding: 42px 26px 30px 0px;
position: relative;
}
#footer p {
margin: 0px;
padding: 6px 0px;
}
#footloose {
text-align: left;
position: absolute;
top: 10px;
right: 30em;
margin: 0px;
padding: 0px;
text-indent: 0px;
}
#footloose .logo span {
top: 0px;
left: 0px;
}
#items {
margin: 8px 0px 0px 29px;
color: #36382E;
font: 9px tahoma, verdana, sans-serif;
}
.item {
float: left;
width: 228px;
margin-right: 31px;
}
.item h3,.item h3 a {
font-size: 11px;
margin: 12px 0px 6px 0px;
color: #2B2B2B;
}
.item p {
padding: 0px;
margin: 0px 0px 10px 0px;
}
.item .details, .item .addtocart {
font: 11px arial, sans-serif;
color: #FFFFFF;
font-weight: bold;
padding: 1px 5px;
}
.item .details:hover, .item .addtocart:hover {
text-decoration: none;
color: #FFFFFF;
}
.item .details {
background: #982801;
}
.item .addtocart {
background: #60654E;
}
.item .details:hover {
background: #BE3302;
}
.item .addtocart:hover {
background: #73795F;
}
.item .divider {
clear: both;
height: 10px;
background: bottom url(topgadgets-images/dash.gif) repeat-x;
margin-bottom: 8px;
margin-left: 12px;
margin-right: 16px;
}
.left {
float: left;
padding-right: 12px;
}
.right {
float: right;
margin-left: 9px;
}
#banner {
height: 121px;
margin: 0px 11px;
background: #D4D4C5 bottom url(topgadgets-images/banner.gif) repeat-x;
}
#banner-text {
color: #474747;
padding-top: 15px;
float: right;
width: 252px;
}
#banner-text h3 {
font-size: 11px;
margin: 0px 0px 2px 0px;
padding: 0px;
}
#banner-text a {
color: #036292;
}
#banner-text a:hover {
color: #982801;
}
</style>
</head>
<body>
<div id="outer">
<div id="wrapper">
<div id="nav">
<div id="nav-left">
<div id="nav-right">
<ul>
<li><a href="http://www.free-css.com/">ABOUT US</a></li>
<li><a href="http://www.free-css.com/">PRODUCTS</a></li>
<li><a href="http://www.free-css.com/">SERVICES</a></li>
<li><a href="http://www.free-css.com/">SHOPPING CART</a></li>
<li><a href="http://www.free-css.com/">NEW GADGETS</a></li>
<li><a href="http://www.free-css.com/">REGISTER</a></li>
</ul>
</div>
</div>
<div class="clear"></div>
</div>
<div id="head">
<div id="head-left"></div>
<div id="head-right"></div>
<div id="head-1"></div>
<h1><span class="logo"><span class="top">top</span><span class="gadgets">gadgets</span></span></h1>
<div id="navb">
<ul>
<li><a href="http://www.free-css.com/">HOME</a></li>
<li><a href="http://www.free-css.com/">CONTACT</a></li>
</ul>
</div>
</div>
<div id="head-2"></div>
<div id="login">
<div id="login-bot">
<div id="login-box">
<h2 class="login"><em>user</em>login</h2>
<form action="http://www.free-css.com/">
<div id="login-username">
<div>
<label for="username">username</label>
:
<input type="text" name="username" value="" id="username" />
</div>
<div>
<label for="password">password</label>
:
<input type="password" name="password" value="" id="password" />
</div>
</div>
<div id="login-button">
<input type="image" src="topgadgets-images/btn_login.gif" name="l" value="h" id="l" />
</div>
<div class="clear">
<div class="reg"> New User? <a href="http://www.free-css.com/">REGISTER for FREE</a> </div>
</div>
</form>
</div>
<div id="login-welcome">
<div>
<h2>Welcome</h2>
<p>Don't forget to check <a href="http://www.free-css.com/">free website templates</a> every day, because we add a new free website template almost daily.</p>
</div>
</div>
<div class="clear"></div>
</div>
</div>
<div id="body">
<div id="body-bot">
<h2><span>top <strong>GADGETS</strong> of this month</span></h2>
<div id="items">
<div class="item"> <img src="topgadgets-images/pic_1.jpg" width="91" height="105" alt="iPod" class="left" />
<h3><a href="http://www.justwebtemplates.com">Just Web Templates</a></h3>
<p>Even more websites all about website templates on <a href="http://www.justwebtemplates.com">Just Web Templates</a>.</p>
<div><a href="http://www.free-css.com/" class="details">details</a> <a href="http://www.free-css.com/" class="addtocart">add to cart</a></div>
<div class="divider"></div>
</div>
<div class="item"> <img src="topgadgets-images/pic_3.jpg" width="91" height="105" alt="Plasma screen" class="left" />
<h3><a href="http://www.templatebeauty.com">Template Beauty</a></h3>
<p>If you're looking for beautiful and professionally made templates you can find them at <a href="http://www.templatebeauty.com">Template Beauty</a>.</p>
<div><a href="http://www.free-css.com/" class="details">details</a> <a href="http://www.free-css.com/" class="addtocart">add to cart</a></div>
<div class="divider"></div>
</div>
<div class="item"> <img src="topgadgets-images/pic_2.jpg" width="91" height="105" alt="CD Player" class="left" />
<h3>Plasma Screens</h3>
<p>This is a template designed by free website templates for you for free you can replace all the text by your own text. </p>
<div><a href="http://www.free-css.com/" class="details">details</a> <a href="http://www.free-css.com/" class="addtocart">add to cart</a></div>
<div class="divider"></div>
</div>
<div class="item"> <img src="topgadgets-images/pic_4.jpg" width="91" height="105" alt="Camera" class="left" />
<h3><a href="http://www.free-css.com/">The Forum</a></h3>
<p>If you're having problems editing the template please don't hesitate to ask for help on the <a href="http://www.free-css.com/">forum</a>.</p>
<div><a href="http://www.free-css.com/" class="details">details</a> <a href="http://www.free-css.com/" class="addtocart">add to cart</a></div>
<div class="divider"></div>
</div>
<div class="clear"></div>
</div>
<div id="banner"> <img src="topgadgets-images/pic_5.jpg" width="256" height="109" alt="Nokia 6015i" class="left" />
<div id="banner-text">
<h3><a href="http://www.free-css.com/">Nokia 6015i</a> (Verizon Wireless)</h3>
<ul>
<li>You can remove any link to our websites from this template you're free to use the template without linking back to us.</li>
<li>This is just a place holder so you can see how the site would look like.</li>
</ul>
</div>
<div class="clear"></div>
</div>
<div id="footer">
<div id="footloose"><span class="logo"><span class="top">top</span><span class="gadgets">gadgets</span></span></div>
<p><a href="http://www.free-css.com/">Privacy Policy</a> <strong> : </strong> <a href="http://www.free-css.com/">Terms & Conditions</a> <br />
© Copyright 2007. All rights reserved.<br />
designed by <a href="http://www.freewebsitetemplates.com">free website templates</a></p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Related examples in the same category