shining-star
<!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>Shining Star</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type='text/css'>
/* CSS Document */
body{padding:0px; margin:0px; background:#1f0703; color:#969686; 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:#FFF; text-decoration:underline;}
p a:hover{ color:#FFF; text-decoration:none;}
.headline{font:12px/14px "Trebuchet MS", Arial, Helvetica, sans-serif; color:#FFF; font-weight:normal}
.headline2{font:12px/14px "Trebuchet MS", Arial, Helvetica, sans-serif; color:#FFF; font-weight:normal; padding-left:21px; background:url(shining-star-images/arrow1.gif) 0 2px no-repeat}
#container{width:705px; position:relative; margin:0 auto;}
/* HEADER */
#header{width:705px; height:332px; position:relative; background:url(shining-star-images/b_header.jpg) 0 0 no-repeat}
#header img#logo{position:absolute; top:19px; left:30px}
#header img#slogan{position:absolute; top:138px; left:22px}
/* MENU */
#menuPan{width:705px; height:50px; position:relative; background:url(shining-star-images/b_menu.gif) 0 0 repeat-x}
#menuPan ul.menu{position:absolute; top:14px; left:46px; width:650px}
#menuPan ul.menu li{height:25px; margin-right:20px; float:left}
#menuPan ul.menu li a{height:25px; display:block; text-indent:-20000px; }
#menuPan ul.menu li a:hover{height:25px;}
#menuPan ul.menu li.btn_1 a{width:81px; background:url(shining-star-images/btn_1.jpg) 0 0 no-repeat; }
#menuPan ul.menu li.btn_1 a:hover{width:81px; background:url(shining-star-images/btn_1_over.jpg) 0 0 no-repeat;}
#menuPan ul.menu li.btn_2 a{width:69px; background:url(shining-star-images/btn_2.jpg) 0 0 no-repeat; }
#menuPan ul.menu li.btn_2 a:hover{width:69px; background:url(shining-star-images/btn_2_over.jpg) 0 0 no-repeat;}
#menuPan ul.menu li.btn_3 a{width:59px; background:url(shining-star-images/btn_3.jpg) 0 0 no-repeat; }
#menuPan ul.menu li.btn_3 a:hover{width:59px; background:url(shining-star-images/btn_3_over.jpg) 0 0 no-repeat;}
#menuPan ul.menu li.btn_4 a{width:59px; background:url(shining-star-images/btn_4.jpg) 0 0 no-repeat; }
#menuPan ul.menu li.btn_4 a:hover{width:59px; background:url(shining-star-images/btn_4_over.jpg) 0 0 no-repeat;}
#menuPan ul.menu li.btn_5 a{width:72px; background:url(shining-star-images/btn_5.jpg) 0 0 no-repeat; }
#menuPan ul.menu li.btn_5 a:hover{width:72px; background:url(shining-star-images/btn_5_over.jpg) 0 0 no-repeat;}
#menuPan ul.menu li.btn_6{margin-right:0}
#menuPan ul.menu li.btn_6 a{width:70px; background:url(shining-star-images/btn_6.jpg) 0 0 no-repeat; }
#menuPan ul.menu li.btn_6 a:hover{width:70px; background:url(shining-star-images/btn_6_over.jpg) 0 0 no-repeat;}
#menuPan ul.menu li.line{width:2px; background:url(shining-star-images/line_m.jpg) 0 0 no-repeat}
/* CONTENT */
#content{width:705px; position:relative; clear:both; margin: 0 auto;}
#leftPan{width:195px; float:left; margin:32px 20px 0 23px; display:inline}
#rightPan{width:430px; float:left; margin:29px 0 0 0;}
#news2{padding-left:8px}
#news h2{height:18px; position:relative; background:url(shining-star-images/h_news.gif) 0 0 no-repeat; margin-bottom:18px}
#news p.newsText{padding-bottom:25px}
#welcome{margin-bottom:10px}
#welcome h2{height:21px; position:relative; background:url(shining-star-images/h_welcome.gif) 0 0 no-repeat;}
#welcome p.headline{margin-bottom:3px}
#welcome img{float:left; margin-right:12px;display:inline}
#welcome p#welText{float:left; width:335px; margin-left:0; padding-top:16px}
#events h2{height:21px; position:relative; background:url(shining-star-images/h_events.gif) 0 0 no-repeat; margin-bottom:5px}
.evItem{width:190px; float:left}
.evItem img{float:left; margin-right:19px}
.evItem p{float:left; width:100px}
.evItem#leftEv{margin:0 42px 0 1px}
.clear#end{height:15px}
/* FOOTER */
#footer{width:705px; height:63px; clear:both; border-top:#f3c442 3px solid}
#footer p{padding: 15px 0 0 0; font:11px/16px Tahoma, sans-serif; font-weight:normal; text-align:center; color:#fff;}
#footer p a{font:11px/16px Tahoma, sans-serif; font-weight:normal; color:#fff; text-decoration:none; padding: 0 3px }
#footer p a:hover{text-decoration:underline; color:#fff}
</style>
</head>
<body>
<div id="container">
<div id="header"> <img src="shining-star-images/logo.jpg" alt="" name="logo" width="242" height="41" id="logo"/> <img src="shining-star-images/slogan.jpg" alt="" name="logo" width="375" height="95" id="slogan"/> </div>
<div id="menuPan">
<ul class="menu">
<li class="btn_1"><a href="#">home</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="#">parties</a></li>
<li class="line"></li>
<li class="btn_4"><a href="#">our djs</a></li>
<li class="line"></li>
<li class="btn_5"><a href="#">location</a></li>
<li class="line"></li>
<li class="btn_6"><a href="#">contacts</a></li>
</ul>
</div>
<div id="content">
<div id="leftPan">
<div id="news">
<h2></h2>
<div id="news2">
<p class="headline2">LOREM IPSUM DOLOR SIT </p>
<p class="newsText">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam eu nulla. Donec </p>
<p class="headline2"> DOLOR SIT LOREM IPSUM </p>
<p class="newsText">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam eu nulla. Donec </p>
<p class="headline2">LOREM IPSUM DOLOR SIT </p>
<p class="newsText">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam eu nulla. Donec </p>
</div>
</div>
</div>
<div id="rightPan">
<div id="welcome">
<h2></h2>
<p class="headline">LOREM IPSUM DOLOR SIT AMET, CONSECTETUER ADIPISCING ELIT. NAM EU </p>
<img src="shining-star-images/img_welcome.jpg" width="80" height="72" alt="" />
<p id="welText">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam eu nulla. Donec lobortis purus vel urna. Nunc laoreet lacinia nunc. In volutpat sodales ipsum. Sed vestibulum. Integer in ante. Sed posuere ligula rhoncus</p>
<div class="clear"></div>
</div>
<div id="events">
<h2></h2>
<div class="evItem" id="leftEv"> <img src="shining-star-images/img_events.jpg" width="71" height="71" alt="" />
<p><a href="#">Lorem ipsum dolor sit amet, consectetuer</a><br />
adipiscing elit. Nam eu nulla. Donec lobortis purus vel urna. Nunc </p>
<div class="clear"></div>
</div>
<div class="evItem" id="rightEv"> <img src="shining-star-images/img_events-11.jpg" width="71" height="71" alt="" />
<p><a href="#">Lorem ipsum dolor sit amet, consectetuer</a><br />
adipiscing elit. Nam eu nulla. Donec lobortis purus vel urna. Nunc </p>
<div class="clear"></div>
</div>
<div class="clear"></div>
</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="#">PARTIES</a> | <a href="#">OUR DJS</a> | <a href="#">LOCATION</a> | <a href="#">NEWS</a> | <a href="#">CONTACTS</a><br/>
Copyright © Your Company Name | Design by <a href="http://freshtemplates.com/">Website Templates</a></p>
</div>
</div>
</body>
</html>
Related examples in the same category