high5 : Holiday « Templates « HTML / CSS

high5
    

<!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>High5</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type='text/css'>
@charset "utf-8";
/*-------------------------------------------------------------*/
/* CSS Document                                                */
/* Template Name: High5                                   */
/* Designed By: Santhosh                                       */
/* Homepage: www.themebin.com                                  */
/*-------------------------------------------------------------*/

body {
  font: 75%/150% Verdana, Arial, Helvetica, sans-serif; 
  background: url(body.png);
  text-align: justify;
  margin: 0;
}

#topbg {
  background: url(topbg.png) repeat-x;
}

#wrap {
  width: 1000px;
  margin: 0 auto;
}

#header {
  height: 162px;
}

a, a:visited {
  color: #003366;
}

a:hover {
  color: #0066CC;
  text-decoration: none;
}

h1 {
  font-size: 24px;
  font-weight: bold;
}

h2 {
  color: #333333;
  font-size: 16px;
  background: url(h2.png) no-repeat;
  padding-left: 26px;
  height: 26px;
  padding-top: 3px;
}

h3 {
  color: #000066;
  font-size: 12px;
  background: url(write.png) no-repeat;
  padding-left: 17px;
}

#blogtitle {
  color: #EFEFEF;
  margin: 0;
  padding: 20px 0 0 50px;
}

#tagline {
  color: #fff;
  padding: 12px 0 0 50px;
}


#wrap2 {
  background: url(wrap.png) center repeat-y;
  margin: 0;
}

#welcome {
  height: 90px;
  width: 635px;
  padding-left: 20px;
  color: #000;
  margin-top: 28px;
  font-size: 11px;
}

#userpic {
  width: 75px;
  height: 75px;
  margin-left: 50px;
  margin-right: 10px;
  margin-top: 15px;
  float: left;
  background: url(user_pic.png) no-repeat; 
}

/* Search */ 

form.search {
  position: relative;
  background: url(searchbg.png) center no-repeat;
  width: 264px;
  border: none;
  float: right;
  margin-top: 15px;
  margin-right: 25px;
  height: 74px;
}

form.search input.textbox {
  margin: 0;
  padding: 15px 2px;
  padding-left: 30px;
  width: 160px;
  background: none;
  border: none;
  color: #fff;
}

form.search input.button {
  background : url(search-button.png) no-repeat;
  color: #333;
  border: none;
  width: 25px;
  height: 20px;
  cursor: pointer;
  margin-left: 15px;
}


/* Nav */

#nav {
  padding-top: 10px;
  background: none;
  height : 25px;
  position: relative;
  margin-left: 40px;
}

#nbar a {
  font-weight: normal;
}

#nbar {
  position: relative;
  width: auto;
  height: 24px;
  margin: 0;
  padding : 0 0 0 0;
  font: 12px/25px Verdana, Arial, Tahoma, Sans-serif;
}

#nbar ul {
  float: left;
  list-style : none;
  margin: 0;
  padding: 0;
}

#nbar ul li {
  display: inline;
}

#nbar ul li a {
  display: block;
  float: left;
  padding: 0 10px;
  color: #222;
  text-decoration: none;
  border: solid 1px #E7E7E7;
  background: url(gradbot.gif) bottom repeat-x;
  margin-left: 5px;
}

#nbar ul li a:hover {
  color: #000;
  background: url(gradtop.gif) top repeat-x;  
}

#nbar ul li#selected a {
  color: #000000;
  background: url(gradtop.gif) top repeat-x;
  font-weight: bold;
}


/* Content */

#content-wrap {
  padding: 0 40px 10px 50px;
}

#content-wrap-top {
  background: url(nav.png) center no-repeat;
  height: 63px;
}

#content-wrap-bottom {
  background: url(content-bottom.png) center no-repeat;
  height: 121px;
}

#content {
  width: 645px;
  padding: 5px 5px 5px 5px;
}

#content h1 {
  color: #336699;
  font-size: 18px;
  background: url(h1.png) no-repeat;
  padding-left: 39px;
  height: 36px;
  border-bottom: dotted 1px #000066;
  padding-top: 10px;
}

.post-footer {
  background: url(post-footer.png) center no-repeat;
  height: 35px;
  font-size: 10px;
  padding: 10px 10px 0 10px;
  text-align: right;
}
  

.dated {
  padding-top: 2px;
  background: url(calendar.png) left no-repeat;
  padding-left: 20px;
  float: left;
}

.category {
  background: url(category.png) left no-repeat;
  padding-left: 20px;
  margin-left: 10px;
  float: left;
  height: 16px;
}

.author {
  padding-left: 20px;
  padding-bottom: 5px;
  background: url(user.png) no-repeat;
}

.more {
  padding-right: 20px;
  margin-left: 20px;
  padding-bottom: 5px;
  background: url(more.png) right no-repeat;
}

/* Images */

img {
  border: none;
  background: none;
}

img.float-right {
  margin : 5px 0 10px 10px;
  padding: 2px;
}

img.float-left {
  margin : 5px 10px 10px 0;
  padding: 2px;
}

/* Addition Stuffs */

blockquote {
  background: #F8F8F8 url(quotebg.png) left repeat-y;
  border: dotted 1px #D7D7D7;
  padding: 5px 5px 5px 25px;
}

code {
  margin : 4px 8px;
  padding : 10px;
  text-align : left;
  display : block;
  overflow : auto;
  font : 500 1em/1.5em 'Lucida Console', 'courier new', monospace;
  background: #F8F8F8 url(quotebg.png) left repeat-y;
  border : 1px dashed #D7C3C3;
}

ul, ol {
  margin: 5px 20px;
  padding: 0 20px;
  color: #333333;
}

ul span, ol span {
  color: #333333;
}


/* Sidebar */

#sidebar {
  width: 230px;
  float: right;
  margin-right: 2px;
  padding: 5px 7px 5px 7px;
  text-align: justify;
}

#sidebar a{
  font-weight: normal;
}

#sidebar h1 {
  color: #333;
  font-size: 14px;
  background: url(h2.png) no-repeat;
  padding-left: 26px;
  height: 24px;
  padding-top: 3px;
  border-bottom: dotted 1px #666;
}

#sidebar .widgetspace {
  padding: 5px 5px 0 10px;
  margin: 0px;
  background: url(sbar.png) repeat-y;
  padding-bottom: 28px;
}

.sidetop {
  background: url(sbar-top.png) no-repeat;
  height: 14px;
}

.sidebot {
  background: url(sbar-bot.png) top no-repeat;
  height: 20px;
}

#sidebar ul.menu {
  list-style: none;
  text-decoration: none;
  margin : 3px 0 2px 0;
  padding: 0;
}

#sidebar ul.menu li {
  background: url(bullet.png) no-repeat;
  padding : 2px 0 0px 25px;
  margin : 0 2px;
}

#sidebar ul.menu a {
  text-decoration : none;
  background-image : none;
}


#sidebar ul.menu a:hover {
  padding-left: 2px;
}

/* Page Navigation */

#navdeck {
  width: 235px;
  margin: 0 auto;
  height: 40px;
  padding: 10px 20px 10px 20px; 
}

#navdeck a {
  text-decoration: none;
}

.old {
  width: 60px;
  margin: 10px 0 20px 10px;
  float: left;
  background: url(prev.png) left no-repeat;
  padding-left: 18px;
}

.new {
  width: 45px;
  float: right;
  margin: 10px 20px 20px 0px;
  background: url(next.png) right no-repeat;
}

.home {
  width: 50px;
  height: 24px;
  float: left;
  margin: 8px 0 20px 7px;
  background: url(home.png) center no-repeat;
}



/* Forms and Text Fields */

form {
  margin : 10px;
  padding : 0 5px;
  border: solid 1px #D7D7D7;
  background: #F8F8F8 url(formbg.png) right repeat-y;
}

label {
  display : block;
  font-weight : bold;
  margin : 5px 0;
  color: #333333;
}

input {
  padding : 2px;
  border : 1px solid #C6D9E9;
  font : normal 1em Verdana, sans-serif;
  color : #000000;
  background:#fff url(gradtop.gif) repeat-x top;
  background-color : #ffffff;
}

textarea {
  width : 400px;
  padding : 2px;
  font-family : Verdana, sans-serif;
  border : 1px solid #C6D9E9;
  background-color : #ffffff;
  height : 100px;
  display : block;
  background:#fff url(gradtop.gif) repeat-x top;
  color : #000;
}

input.button {
  margin : 0;
  font : bolder 12px Arial, Sans-serif;
  border : 1px solid #ccc;
  padding : 2px 3px;
  background : #fff url(gradbot.gif) bottom repeat-x;
  color : #131212;
}

#footer {
  text-align: center;
  font-size: 10px;
}

#footer a {
  font-weight: normal;
}

.clearfix {
  clear:both;
  overflow: hidden;
}


</style>


<!-- WIN IE Style Sheets -->
<!--[if IE]>
  <![if gte IE 5.5]>
     <![if gte IE 7]><link rel="stylesheet" type="text/css" media="screen,projection" href="high5-assets/ie.css" /><![endif]>
     <![if lt IE 7]><link rel="stylesheet" type="text/css" media="screen,projection" href="high5-assets/ie.css" /><![endif]>
  <![endif]>
  <![if lt IE 5.5]><link rel="stylesheet" type="text/css" media="screen,projection" href="high5-assets/ie.css" /><![endif]>
<![endif]-->
</head>
<body>
<div id="topbg">
  <div id="wrap">
    <div id="header">
      <h1 id="blogtitle">High5</h1>
      <div id="tagline">The Beautiful Tagline Goes Here..</div>
      <form class="search" method="post" action="http://www.free-css.com/">
        <p>
          <input class="textbox" type="text" name="search_query" value="Search" onfocus="if (this.value == 'Search') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Search';}" />
          <input class="button" type="submit" name="Submit" value="" />
        </p>
      </form>
      <div id="userpic"></div>
      <div id="welcome">Use this place to display short welcome message to your visitors or to add any sort of information about your site or yourself. And also, you can use this space to display 468 x 60 Ad and help montize your site.</div>
    </div>
    <div id="content-wrap-top">
      <div id="nav">
        <div id="nbar">
          <ul>
            <li id="selected"><a href="http://www.free-css.com/">Home</a></li>
            <li><a href="http://www.free-css.com/">Products</a></li>
            <li><a href="http://www.free-css.com/">Downloads</a></li>
            <li><a href="http://www.free-css.com/">Services</a></li>
            <li><a href="http://www.free-css.com/">Support</a></li>
            <li><a href="http://www.free-css.com/">About</a></li>
          </ul>
        </div>
      </div>
    </div>
    <div id="wrap2">
      <div id="content-wrap">
        <div id="sidebar">
          <div class="sidetop"></div>
          <div class="widgetspace">
            <h1>Sidebar Links</h1>
            <ul class="menu">
              <li><a href="http://www.free-css.com/">Home</a></li>
              <li><a href="http://www.free-css.com/">Teach Me Linux</a></li>
              <li><a href="http://www.free-css.com/">deviantART</a></li>
              <li><a href="http://www.free-css.com/">Gigacore</a></li>
              <li><a href="http://www.free-css.com/">Digg</a></li>
            </ul>
          </div>
          <div class="sidebot"></div>
          <div class="sidetop"></div>
          <div class="widgetspace">
            <h1>Useful Resources</h1>
            <ul class="menu">
              <li><a href="http://www.free-css.com/">w3schools</a></li>
              <li><a href="http://www.free-css.com/">CSS Zen Garden</a></li>
              <li><a href="http://www.free-css.com/">Open Designs</a></li>
              <li><a href="http://www.free-css.com/">W3C</a></li>
              <li><a href="http://www.free-css.com/">ThemeBot</a></li>
            </ul>
          </div>
          <div class="sidebot"></div>
          <div class="sidetop"></div>
          <div class="widgetspace">
            <h1>Sample Text</h1>
            <p><strong>Quotes</strong></p>
            <p>A table, a chair, a bowl of fruit and a violin; what else does a man need to be happy? <br />
              -Albert Einstein </p>
          </div>
          <div class="sidebot"></div>
          <div class="sidetop"></div>
          <div class="widgetspace">
            <h1>About me!</h1>
            <p>I'm Santhosh. S. I love web-designing and learning xHTML and CSS. Visit my <a href="http://www.free-css.com/">blog</a> for more info and to read some tutorials. <a href="http://www.free-css.com/">Follow me on Twitter</a>!</p>
          </div>
          <div class="sidebot"></div>
        </div>
        <div id="content">
          <h1>Welcome to High5</h1>
          <p><strong>High5</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.free-css.com/">ThemeBin</a>. The template weighs just 30.5 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.free-css.com/">my website</a>. Hope you find this template useful and best of luck!</p>
          <p><strong>How to change the user picture in welcome message?</strong></p>
          <p>To change the user picture beside the welcome message above, replace the user_pic.png in assets folder with your own 75x75 .png picture.</p>
          <p class="post-footer"><span class="dated">Oct 16, 2008</span><span class="category">Category</span><span class="author">Santhosh</span><span class="more">Read more...</span></p>
          <h1>Samples</h1>
          <h2>Image and Text</h2>
          <p><img src="high5-assets/Desktop.png" alt="" 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="http://www.free-css.com/">
            <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>&nbsp;</p>
          <p class="post-footer"><span class="dated">Oct 16, 2008</span><span class="category">Category</span><span class="author">Santhosh</span><span class="more">Read more...</span></p>
          <br />
        </div>
      </div>
    </div>
    <!-- End Wrap2 -->
    <div id="content-wrap-bottom"><br />
      <br />
      <div id="navdeck">
        <div class="old"><a href="http://www.free-css.com/">Previous</a></div>
        <div class="home"><a href="http://www.free-css.com/">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a></div>
        <div class="new"><a href="http://www.free-css.com/">Next</a></div>
      </div>
    </div>
    <div id="footer"> &copy; 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>
      <!-- Please Do Not remove this link, thank u -->
&nbsp;&nbsp;&nbsp;&nbsp;<a href="http://www.free-css.com/">Home</a>|Sitemap </div>
  </div>
  <!-- End Wrap -->
</div>
<!-- End Top BG -->
</body>
</html>
Related examples in the same category

1.	metamorph_helloween
2.	Christmas-2008
3.	christmas
4.	metamorph_diving
5.	metamorph_summertime
6.	metamorph_valentine
7.	metamorph_happyness
8.	happy-holidays
9.	metamorph_partytime
10.	metamorph_peacefull
11.	feel-the-music
12.	partytime
13.	Romantic
14.	thegathering
15.	theharvest
16.	timetorest
17.	treasure-hunters
18.	vacation
19.	happyeaster
20.	holiday 2
21.	holidayseason
22.	harvest
23.	harvestfield
24.	hotspring