Broadcaster
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type='text/css'>
@charset "utf-8";
/* CSS Document */
body {
background: #ECECF3 url(body-bg.png) top center repeat-y;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
}
h1, h2, h3 {
font-family: Georgia, "Times New Roman", Times, serif;
font-weight : bold;
}
h1 {
font-size:24px;
font-weight: bold;
color: #0066A4;
}
h2 {
font-size: 16px;
font-weight: bold;
color:#009DDC;
}
h3 {
font-size: 14px;
font-weight:bold;
color: #0066A4;
}
#wrap {
margin: 0px auto;
width: 980px;
padding-right: 5px;
text-align: justify;
}
#header-topspace {
background: #0A4AAC url(logo.png) left no-repeat;
margin-left: 2px;
height: 120px;
border-bottom: solid 5px #C6CCD7;
border-top: solid 5px #638CAF;
}
#header-space {
height: 70px;
width: 400px;
border-right: 2px #999;
padding-left: 10px;
}
#logo-text {
position: absolute;
}
#logo-slogan {
position: absolute;
margin-top: 42px;
}
#navbar {
height: 28px;
background: url(nav-bg.png) repeat-x;
margin-right: 4px;
margin-left: 4px;
}
/* Navigation Bar */
#nav {
background : #ec6a1c;
height : 25px;
border-bottom : 1px solid #666666;
}
#nav-bar {
width : auto;
height : 24px;
margin : 0;
padding : 0 0 0 0;
background : url(nav-bg.jpg) repeat-x;
font : bold 12px/25px Verdana, Arial, Tahoma, Sans-serif;
}
#nav-bar ul {
float : left;
list-style : none;
margin : 0;
padding : 0;
}
#nav-bar ul li {
display : inline;
}
#nav-bar ul li a {
display : block;
float : left;
padding : 0 10px;
color : #666;
text-decoration : none;
}
#nav-bar ul li a:hover {
color : #000000;
}
#nav-bar ul li#selected a {
color : #000000;
}
#content-wrap {
width: 970px;
text-align: justify;
}
/* Search */
form.search {
position : relative;
top : 10px;
right : 15px;
background : transparent;
border : none;
float:right;
}
form.search input.textbox {
margin : 0;
padding : 1px 2px;
width : 120px;
background : #fff url(shade.gif) top repeat-x;
color : #333;
}
form.search input.button {
background : #ccc url(searchbg.gif) repeat-x;
border: solid 1px #009DDC;
color : #333;
width : 70px;
height : 21px;
}
#content {
width: 730px;
padding-left: 10px;
padding-top: 10px;
}
#content h1 {
margin-top : 10px;
font : bold 110% Verdana, 'Trebuchet MS', Sans-serif;
color : #005C82;
padding : 5px 0 5px 5px;
border: 1px solid #D6D3D3;
text-align : justify;
background: url(post-title.png) repeat-x;
}
/* Sidebar */
#sidebar {
float : right;
width : 200px;
position: relative;
padding-right: 10px;
padding-top: 20px;
background : #fff;
}
#sidebar h1 {
margin-top : 0;
padding : 5px 0 5px 5px;
font : bold 0.9em Verdana, 'Trebuchet MS', Sans-serif;
color : #494949;
background: #fff url(sidebar-title.png) repeat-x;
border: solid 1px #D6D3D3;
}
#sidebar .left-box {
background : #fff;
margin-top : 0;
padding-left : 5px;
padding-bottom: 10px;
}
#sidebar ul.sidemenu {
list-style : none;
text-align : left;
margin : 3px 0 2px 0;
padding : 0;
text-decoration : none;
}
#sidebar ul.sidemenu li {
padding : 2px 0 0px 0px;
list-style-type: disc;
margin : 0 2px;
}
#sidebar ul.sidemenu a {
text-decoration : none;
background-image : none;
}
#sidebar ul.sidemenu a:hover {
text-decoration : underline;
background-image : none;
}
/* Additional Formatting */
blockquote {
margin : 10px;
padding : 0 0 0 40px;
border : 1px solid #D6D3D3;
background : #F7F7F7 url(quote.png) no-repeat;
}
code {
margin : 4px 8px;
padding : 0 0 0 40px;
text-align : left;
display : block;
overflow : auto;
font : 500 1em/1.5em 'Lucida Console', 'courier new', monospace;
background : #F7F7F7 url(code.png) no-repeat;;
border : 1px dashed #D6D3D3;
}
ul, ol {
margin : 5px 20px;
padding : 0 20px;
color : #333333;
}
ul span, ol span {
color : #333333;
}
form {
margin : 10px;
padding : 0 5px;
border : 1px solid #D6D3D3;
background: #fff url(post-title.png) repeat-x;
}
label {
display : block;
font-weight : bold;
margin : 5px 0;
color: #333333;
}
input {
padding : 2px;
border : 1px solid #D7C3C3;
font : normal 1em Verdana, sans-serif;
color : #000000;
background : #fff url(shade.gif) top repeat-x;
background-color : #ffffff;
}
textarea {
width : 400px;
padding : 2px;
font-family : Verdana, sans-serif;
border : 1px solid #D7C3C3;
background-color : #ffffff;
height : 100px;
background : #fff url(shade.gif) top repeat-x;
display : block;
color : #000;
}
input.button {
margin : 0;
font : bolder 12px Arial, Sans-serif;
border : 1px solid #ccc;
padding : 2px 3px;
background : #fff;
color : #131212;
}
/* Images */
img {
border : none;
}
img.float-right {
margin : 5px 0 10px 10px;
}
img.float-left {
margin : 5px 10px 10px 0;
}
/* Post Footer */
.post-footer {
border-bottom : 1px solid #D6D3D3;
padding : 5px;
margin : 20px 10px 0 2px;
font-size : 95%;
background-color : #F7F7F7;
}
.post-footer .date {
padding-left : 20px;
margin : 0 10px 0 5px;
text-align : right;
font-size : 9px;
color : #009DDC;
}
.post-footer .readmore {
background : url(page.gif) no-repeat left center;
padding-left : 20px;
margin : 0 10px 0 5px;
}
#footer {
background: #3A5D7A;
padding-top: 10px;
border-top: solid 5px #638CAF;
padding-bottom: 10px;
color: #ffffff;
}
#footer a:link {
color: #fff;
}
#footer a:visited {
color: #fff;
}
</style>
<title>Broadcast</title>
<style type="text/css">
<!--
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
a:link {
color: #000066;
}
a:visited {
color: #000066;
}
-->
</style></head>
<body>
<div id="wrap">
<div id="header-topspace">
<div id="header-logo"></div>
</div>
<form class="search" method="post" action="#">
<p>
<input class="textbox" type="text" name="search_query" value="" />
<input class="button" type="submit" name="Submit" value="Search" />
</p>
</form>
<div id="header-space">
<h1 id="logo-text">Broadcast</h1>
<h2 id="logo-slogan">Your slogan goes here.</h2>
</div>
<div id="navbar">
<div id="nav-bar">
<ul>
<li id="selected"><a href="#">Home</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Downloads</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Support</a></li>
<li><a href="#">About</a></li>
</ul>
</div>
</div> <!-- Nav End -->
<div id="sidebar">
<p></p>
<h1>Sidebar Links</h1>
<div class="left-box">
<ul class="sidemenu">
<li><a href="index.html">Home</a></li>
<li><a href="http://teachmelinux.googlepages.com">Teach Me Linux</a></li>
<li><a href="http://nuahs.deviantart.com">nuaHs</a></li>
<li><a href="http://gigacore.deviantart.com">Gigacore</a></li>
<li><a href="http://www.gigasmilies.com">GigaSmilies</a></li>
</ul>
</div>
<h1>Useful Resources</h1>
<div class="left-box">
<ul class="sidemenu">
<li><a href="http://www.w3schools.com">w3schools</a><a href="http://partners.ipower.com/z/57/CD5822/"></a></li>
<li><a href="http://www.csszengarden.com">CSS Zen Garden</a></li>
<li><a href="http://www.opendesigns.org/">Open Designs</a><a href="http://www.fotolia.com/partner/114283"></a></li>
<li><a href="http://www.w3.com/">W3C</a><a href="http://www.bigstockphoto.com/?refid=grKPpdNw6k"></a></li>
<li><a href="http://en.wikipedia.org">Wikipedia</a></li>
</ul>
</div>
<h1>Some Text</h1>
<div class="left-box">
<p><strong>Quotes</strong></p>
<p align="left">The first rule of hurricane coverage is that every broadcast must begin with palm trees bending in the wind. <br />
- Carl Hiaasen</p>
</div>
<h1>About Author</h1>
<div class="left-box">
<p>I'm Santhosh. S. I love web-designing and learning xHTML and CSS. Visit my <a href="http:/santhosh.themebin.com/blog">blog</a> for more info and to read some tutorials.</p>
</div>
</div>
<div id="content">
<h1>Welcome to Broadcast</h1>
<p><strong>Broadcast</strong> template is a free Template for your website. This is a valid xHTML and Valid CSS template and W3C-Compilant. The template is designed by <a href="http://www.themebin.com">ThemeBin</a>. The template weighs just 16.8 KB. This template is licensed under <a href="http://creativecommons.org/licenses/by/2.5/">Creavtive Commons India 2.5 License,</a> which means you are free to modify this template as per your needs for any purpose. And please keep the back link to my site in the credits (footer) intact. That will make the CC License vaild.</p>
<p>For more templates, themes, wallpapers and more, visit <a href="http://www.themebin.com">my website</a>. Hope you find this template useful and best of luck!</p>
<p align="right" class="post-footer"><a href="#" class="readmore">Read more</a><span class="date">Feb 23, 2008</span></p>
<h1>Samples</h1>
<h2>Image and Text</h2>
<p><img src="Broadcaster-images/ff.jpg" alt="FireFox" align="left" class="float-left" />Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce velit pede, lacinia eu, tempor nec, vestibulum non, dolor. Aenean malesuada laoreet lacus. Vivamus lementum, felis ac ullamcorper blandit, neque erat porttitor lorem, non aliqfet quam magna ac enim. Morbi tempus odio eu lorem. Quisque volutpat, odio id gravida commodo, turpis orci consequat augue, eget dignissim odio tellus et lacus. Nulla nulla nisl, porta eu, ullamcorper vitae, facilisis in, nulla.Curabitur a pede. Mauris at metus quis nulla eleifend pharetra. Sed accumsan. Maecenas ipsum. Aliquam erat volutpat.</p>
<h2>Code</h2>
<p><code>
#sample {<br />
text-align: left;<br />
font-weight: bold;<br />
color: #FFFFFF;<br />
}</code></p>
<h2>Block Quote</h2>
<blockquote><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce velit pede, lacinia eu, tempor nec, vestibulum non, dolor. Aenean malesuada laoreet lacus....</p></blockquote>
<h2>Example List </h2>
<ol>
<li><span>Sunday</span></li>
<li><span>Monday</span></li>
</ol>
<ul>
<li><span>Tuesday</span></li>
<li><span>Wednesday</span></li>
</ul>
<h3>Sample Form</h3>
<form action="#">
<p>
<label>Name</label>
<input name="dname" value="Your Name" type="text" size="30" />
<label>Email</label>
<input name="demail" value="Your Email" type="text" size="30" />
<label>Your Comments</label>
<textarea rows="5" cols="5"></textarea>
<br />
<input class="button" type="submit" />
</p>
</form>
<p> </p>
<p align="right" class="post-footer"><a href="#" class="readmore">Read more</a><span class="date">Feb 24, 2008</span></p>
<p></p>
</div>
<div id="footer">
<!--Removing the links will void the Creative Commons License. If you want to remove the link, contact me via mail.-->
<div align="center">© 2008 <strong>Your Company</strong> | Valid <a href="http://validator.w3.org/check?uri=referer">XHTML</a> | <a href="http://jigsaw.w3.org/css-validator/check/referer">CSS</a> | Design by: <a href="http://www.themebin.com/">ThemeBin</a> <a href="#">Home</a>|Sitemap</div>
</div>
</div>
</body>
</html>
Related examples in the same category