celebrity
<html>
<head>
<title>Design 11</title>
<style type='text/css'>
body {
font-family: Verdana, Arial, Geneva, helvetica, sans-serif;
margin: 0px;
background-image: url(celebrity-images/back.gif);
background-repeat: repeat-x;
background-color: #353535;
font-size: 12px;
color: #eaeaea;
}
table {
font-size: 12px;
}
h1 {
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
color: #fff;
font-weight: bold;
margin: 0px;
padding: 0px;
text-transform: uppercase;
}
h2 {
font-family: Arial, Helvetica, sans-serif;
font-size: 19px;
color: #222;
font-weight: normal;
margin: 0px;
}
h3 {
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
color: #fff;
font-weight: normal;
margin: 0px;
}
a {
color: #c40505;
text-decoration: none;
}
a:hover {
color: #000;
text-decoration: underline;
}
#container_big {
width: 800px;
padding: 0px;
margin: 0px;
}
#container {
float: left;
position: relative;
width: 800px;
text-align: left;
padding: 0px;
}
#header {
float: left;
position: relative;
width: 800px;
height: 115px;
text-align: left;
background-image: url(celebrity-images/header.gif);
background-repeat: no-repeat;
overflow: hidden;
font-family: Arial, Helvetica, sans-serif;
}
#menu {
float: right;
position: absolute;
width: 850px;
font-size: 15px;
font-weight: bold;
font-family: Arial, Verdana, Helvetica, sans-serif;
overflow: hidden;
height: 35px;
text-align: center;
top: 72px;
left: 0px;
}
#menu a:hover {
display: block;
float: left;
position: relative;
background: url(celebrity-images/a_link.gif);
width: 87px;
text-align: center;
height: 35px;
overflow: hidden;
line-height: 33px;
color: #dd2e93;
margin-right: 40px;
margin-left: 10px;
}
#menu a {
display: block;
float: left;
position: relative;
background: url(celebrity-images/a_hover.gif);
width: 87px;
text-align: center;
height: 35px;
overflow: hidden;
line-height: 33px;
color: #fff;
margin-right: 40px;
margin-left: 10px;
text-decoration: none;
}
#pink {
float: left;
position: relative;
width: 603px;
height: 79px;
left: 0px;
background-image: url(celebrity-images/pink.gif);
background-repeat: no-repeat;
color: #bdc1e4;
margin-top: 6px;
overflow: hidden;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
}
#pink a {
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
text-transform: uppercase;
color: white;
margin: 2px;
}
#search {
width: 369px;
height: 28px;
float: left;
position: absolute;
background: url(celebrity-images/search_back.gif) no-repeat;
border: 0px;
left: 120px;
top: 30px;
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
color: #D22388;
padding-left: 3px;
line-height: 20px;
}
#go {
width: 80px;
height: 28px;
float: right;
position: absolute;
background: url(celebrity-images/search.gif) no-repeat;
border: 0px;
right: 20px;
top: 30px;
}
#green {
float: left;
position: relative;
width: 603px;
left: 0px;
background-image: url(celebrity-images/green_back.gif);
background-repeat: repeat-y;
color: #fff;
margin-top: 6px;
overflow: hidden;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
}
.box {
float: left;
position: relative;
width: 235px;
margin-left: 10px;
}
#content {
float: left;
position: relative;
width: 800px;
text-align: left;
padding: 0px;
overflow: hidden;
background-image: url(celebrity-images/content_back.gif);
background-repeat: repeat-y;
background-color: #000;
}
#right {
width: 180px;;
float: right;
position: relative;
right: 0px;
top: 0px;
color: #ccc;
font-size: 10px;
}
#main {
float: left;
position: relative;
width: 609px;
left: 6px;
}
#footer {
float: left;
position: relative;
font-size: 10px;
font-family: Verdana, Arial, Helvetica, sans-serif;
width: 800px;
background-image: url(celebrity-images/footer.gif);
background-repeat: no-repeat;
vertical-align: middle;
text-align: center;
color: #eaeaea;
padding-top: 5px;
padding-bottom: 10px;
height: 20px;
border-bottom: solid 2px #636363;
}
#footer a {
color: #bb3b0c;
margin-left: 5px;
margin-right: 5px;
}
#footer a:hover {
color: #fff;
text-decoration: none;
}
input, textarea, button {
background-color: #fff;
color: #94C00D;
border: solid 2px #94C00D;
font-family: Verdana, Arial, Tahoma, Helvetica, sans-serif;
font-size: 10px;
height: 20px;
margin-top: 4px;
}
.btn {
border: 0px;
margin-top: 4px;
margin-bottom: 0px;
font-size: 10px;
font-family: Verdana, Arial, Helvetica, sans-serif;
height: 20px;
position: absolute;
}
ul {
list-style-type: square;
}
#ttitle {
background-color: #900000;
color: #FFFFFF;
font-size: 13px;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
}
#name{ font-size:36px; text-transform:uppercase;padding: 10px 0px 0px 30px; color:#d3258a; font-weight:700}
#name span { color:#43b529}
</style>
<meta name="description" content="">
<meta name="keywords" content="keywords">
</head>
<body>
<div align="center">
<div id="container_big">
<div id="container">
<div id="header">
<div id="name"> celebrity <span>news</span> </div>
<a href="./" title="Homepage ?><img src="celebrity-images/logo.gif" border="0" height="45" width="390" align="left"></a>
<div id="menu">
<a href="#">Home</a>
<a href="#">News</a>
<a href="#">Photos</a>
<a href="#">Video</a>
<a href="#">Blog</a>
<a href="#">Contact</a>
</div>
</div>
<!-- content begin -->
<div id="content">
<div id="main">
<div id="pink">
<div style="position: relative; float: left; width: 440px; left: 140px; top: 5px;">
<a href="#">a</a>
<a href="#">b</a>
<a href="#">c</a>
<a href="#">d</a>
<a href="#">e</a>
<a href="#">f</a>
<a href="#">g</a>
<a href="#">h</a>
<a href="#">i</a>
<a href="#">j</a>
<a href="#">k</a>
<a href="#">l</a>
<a href="#">m</a>
<a href="#">n</a>
<a href="#">o</a>
<a href="#">p</a>
<a href="#">q</a>
<a href="#">r</a>
<a href="#">s</a>
<a href="#">t</a>
<a href="#">u</a>
<a href="#">v</a>
<a href="#">w</a>
<a href="#">x</a>
<a href="#">y</a>
<a href="#">z</a>
</div>
<input id="search" type="text">
<input type="image" src="celebrity-images/search.gif" id="go">
</div>
<div id="green"><div><img src="celebrity-images/green_top.gif"></div>
<div style="margin-left: 6px; margin-right: 6px;">
<img src="celebrity-images/latest_news.gif"><br />
This is Celebrity News, a free, fully standards-compliant CSS template designed by <a href="http://www.free-css-templates.com/">Free CSS Templates</a>.
This free template is released under a Creative Commons Attributions 2.5 license, so youre pretty much free to do whatever you want with it (even use it commercially) provided you keep the links in the footer intact. Aside from that, have fun with it :)
<br clear="all">
<a href="#"><img src="celebrity-images/read_green.jpg" border="0" align="right"></a>
<br clear="all">
</div><div><img src="celebrity-images/green_bottom.gif"></div>
</div>
<h1>Content item title</h1>
This is Celebrity News, a free, fully standards-compliant CSS template designed by <a href="http://www.free-css-templates.com/">Free CSS Templates</a>.
This free template is released under a Creative Commons Attributions 2.5 license, so youre pretty much free to do whatever you want with it (even use it commercially) provided you keep the links in the footer intact. Aside from that, have fun with it :)
<br>
<img src="celebrity-images/readon.jpg" align="right">
<br clear="all">
<h1>Content item title</h1>
This is Celebrity News, a free, fully standards-compliant CSS template designed by <a href="http://www.free-css-templates.com/">Free CSS Templates</a>.
<br>
<img src="celebrity-images/readon.jpg" align="right">
<br clear="all">
</div>
<div id="right">
<div style="margin-left: 5px; margin-right: 15px; margin-bottom: 3px;">
<img src="celebrity-images/2pac.jpg" vspace="3" hspace="3">
<h1>Top Video</h1>
<img src="celebrity-images/i1.jpg" align="left" hspace="4">Lorem ipsum dolor sit amet, consectetur adipisicing
<a href="#">Read more »</a>
<br clear="all">
<br clear="all">
<img src="celebrity-images/i2.jpg" align="left" hspace="4">Lorem ipsum dolor sit amet, consectetur adipisicing
<a href="#">Read more »</a>
</div>
</div>
<br clear="all">
<div id="footer">
© 2007 <a href="#"><strong>SiteName.com</strong></a>
<br/> <a href="http://www.templatesold.com/" target="_blank">Website Templates</a> by <a href="http://www.free-css-templates.com/" target="_blank">Free CSS Templates</a>
</div>
</div>
</div>
<!-- content end -->
</div>
</div>
</div>
</div>
</body></html>
Related examples in the same category