ablaze : Design 2 « Templates « HTML / CSS






  1. HTML / CSS
  2. Templates
  3. Design 2

ablaze

     

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>ablaze - a free css template</title>
<style type='text/css'>
/** global **/
body {
  margin:0px auto;
  padding:0;
  font-family:Verdana, Geneva, sans-serif;
  font-size:12px;
  color:#333;
  background:#fff url('ablaze-images/body-bg.png') repeat-x;
}

body.small-header {
  background:#fff url('ablaze-images/body-bg-small.png') repeat-x;
}

body.slider-header {
  background:#fff url('ablaze-images/body-bg-slider.png') repeat-x;
}

* {
  margin:0;
  padding:0;
}


/** element defaults **/
table {
  width:100%;
  font-family:Arial, Helvetica, sans-serif;
  text-align:left;
}
th, td {
  padding:5px 10px;
}
th {
  color:#fff;
  border-top:3px solid #870101;
  background-color:#A50000;
}
td {
  border-bottom:1px solid #f4f4f4;
}
code, blockquote {
  display:block;
  border-left:5px solid #ddd;
  padding:10px;
  margin-bottom:20px;
}
blockquote p {
  font-style:italic;
  font-family:Georgia, "Times New Roman", Times, serif;
  margin:0;
  height: 1%;
}
p {
  line-height:1.9em;
  margin-bottom:20px;
}
a {
  color:#0D3C84;
}
a:hover {
  color:#870101;
}
a:focus {
  outline:none;
}
fieldset {
  display:block;
  border:none;
  border-top:1px solid #e0e0e0;
}
fieldset legend {
  font-weight:bold;
  font-size:13px;
  padding-right:10px;
  color:#222;
}
fieldset form {
  padding-top:15px;
}
fieldset p label {
  float:left;
  width:150px;
  font-family:Arial, Helvetica, sans-serif;
}
form input, form select, form textarea {
  padding:5px;
  color:#333333;
  font-size:13px;
  font-family:Arial, Helvetica, sans-serif;
  border:1px solid #ddd;
}
form input.formbutton {
  margin-left:150px;
  background:#A50000;
  border:none;
  border-bottom:3px solid #870101;
  color:#ffffff;
  font-weight:bold;
  padding:5px 10px;
  font-size:13px;
}
h1 {
  font-size:45px;
  font-family:Arial, Helvetica, sans-serif;
}
h2 {
  color:#000;
  font-family:Arial,Helvetica,sans-serif;
  font-size:30px;
  font-weight:bold;
  letter-spacing:-2px;
  padding:0 0 5px;
  margin:0;
}
h3 {
  font-family:Arial,Helvetica,sans-serif;
  color:#0D357B;
  font-size:20px;
  padding-bottom:10px;
}
h4 {
  font-family:Arial,Helvetica,sans-serif;
  padding-bottom:10px;
  font-size:15px;
  color:#870101;
}
h5 {
  padding-bottom:10px;
  font-size:13px;
  color:#666666;
}
ul, ol {
  margin:0 0 35px 35px;
}
li {
  padding-bottom:5px;
}


/** wrapper **/
div#wrapper {
  width:960px;
  margin:0px auto;
  padding:0;
}


/** sitename **/
div#sitename {
  float:left; 
  width:20%;
}
div#sitename h1 {
  font-size:48px;
  letter-spacing:-5px;
  margin:0;
  height:72px;
  padding:18px 0 0;
  text-transform:uppercase;
  text-shadow: 2px 2px #000;
}
div#sitename h1 a,
div#sitename h1 a:hover {
  color:#fff;
  font-weight:normal;
  text-decoration:none;
}
div#sitename h1 strong {
  color: #A81212;
}
div#nav {
  width:75%;
  float:right;
  padding:30px 0 0 0;
  margin:0;
}
div#nav ul {
  list-style:none;
  float:right;
  padding:0 0 0 50px;
  margin:-10px 0 0 50px;
}
div#nav ul li {
  display:inline;
  float:left;
  margin:0 5px;
  padding-bottom:0;
}
div#nav ul li a, div#nav ul li a:visited, div#nav ul li a:hover {
  float:left;
  text-decoration:none;
  color:#ffffff;
  font-weight:normal;
  font-size: 13px;
  font-family:Arial Rounded MT Bold, Helvetica, sans-serif;
  display: block;
}
div#nav ul li a span {
  display:block;
  padding:10px;
}
div#nav ul li a:hover {
  background: #ff9900 url('ablaze-images/nav-sprite.gif') no-repeat scroll right -35px;
}
div#nav ul li a:hover span {
  background: transparent url('ablaze-images/top-nav-hover-left.gif') no-repeat;
}
div#nav ul li.selected a, div#nav ul li.selected a:hover {
  background: #222 url('ablaze-images/nav-sprite.gif') no-repeat scroll top right;
}
div#nav ul li.selected a span, div#nav ul li.selected a:hover span {
  background: transparent url('ablaze-images/top-nav-selected-left.gif') no-repeat;
}

/** header **/
div#header {
  padding:40px 0 0;
  margin:0 auto;
  height:135px;
}

.small-header div#header {
  padding-top: 25px;
  height: 64px;
}

.slider-header div#header {
  height: 245px;
}

div#header h2 {
  color:#ffffff;
  padding-bottom:0;
  font-weight:normal;
  font-family:Arial Rounded MT Bold, Arial,Helvetica,sans-serif;
  font-size:32px;
  letter-spacing:0;
  text-shadow: 2px 2px #4C0101;
}
div#header div.tagline, div#header div.slide-text {
  color:#eee;
  font-size:14px;
  padding-bottom:10px;
  font-family:'Lucida Grande','Lucida Sans Unicode',Geneva,Verdana,Sans-Serif;
}
div#header div.tagline a {
  color:#ffffff;
}

/* front page slider styles */
div#jFlowSlide {
  margin:0 auto;
}
div#slides-container {
  height:220px;
}
div#slides-container div#jFlowSlide {
  height:200px;
}
div#slides-container div.jFlowSlideContainer img {
  margin:auto;
  display:block;
  border:4px solid #313D45;
}
div#slides-container div.jFlowSlideContainer div {
}
div#slides-container div.jFlowSlideContainer div.slide-image {
  float:left;
  width:322px;
  padding-top:10px;
}
span.jFlowPrev, span.jFlowNext {
  background-image:url('ablaze-images/slide-prev.gif');
  background-repeat:no-repeat;
  display:block;
  height:25px;
  width:25px;
  float:left;
  margin:0;
  cursor:pointer;
}
span.jFlowPrev span, span.jFlowNext span { display:none; }
span.jFlowNext {
  background-image:url('ablaze-images/slide-next.gif');
  float:right;
}
div#slides-container div.controls {
  position:relative;
  top:-125px;
  width:960px;
  margin:0 auto;
}
div.slide-text {
  padding-top: 10px;
}

/** body **/
div#body {
  padding:10px 0;
  background: transparent url('ablaze-images/body-arrow.png') no-repeat scroll 5px 0;
}


/** content+sidebar styles **/
div#content {
  width:715px;
}
div.column-left {
  float:left;
  margin-right:20px;
}
div.column-right {
  float:right;
}
div#sidebar {
  width:200px;
  padding-top: 15px;
}
div#sidebar ul {
  margin:0;
  padding:0;
  list-style:none;
}
div#sidebar li ul {
  margin-bottom:20px;
  width:200px;
}
div#sidebar li ul li {
  display:block;
  padding:5px 0px;
  color:#777;
}
div#sidebar li ul li a {
  color:#999;
  text-decoration:none;
  font-weight:bold;
}
div#sidebar li ul li a:hover {
  color:#09285E;
  text-decoration:underline;
}


div#sidebar li ul.blocklist li {
  padding:0;
}
div#sidebar li ul.blocklist li.selected-item a {
  color:#870101;
  font-weight:bold;
  background:transparent url('ablaze-images/item-selected.gif') no-repeat scroll right center;
}
div#sidebar li ul.blocklist li.selected-item a:hover {
  text-decoration:none;
}
div#sidebar li ul.blocklist li a {
  width:200px;
  display:block;
  padding:5px 0px;
}

div#sidebar h4 { 
  color:#0C367E;
  font-family:arial;
  font-size:16px;
  text-transform:uppercase;
  font-weight:bold;
  margin:0;
  padding:7px 0px;
}


/** footer **/
#footer {
  margin:0 auto;
  background: #000 url('ablaze-images/footer.jpg') repeat-x scroll bottom left;
  padding: 30px 5px 0;
}

.footer-content {
  width: 960px;
  margin: 0 auto;
  display: block;
  padding-bottom: 30px;
}

#footer a {
  color: #999;
  text-decoration: underline;
}

#footer h4 {
  color: #ccc;
  font-size: 18px;
  font-weight: normal;
  font-family: 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, Sans-Serif;
}

#footer p {
  text-align: left;
  color: #999;
  font-size: 12px;
  font-family: Arial, Helvetica, sans-serif;
  margin: 0;
  padding: 0;
}

#footer form {
  margin: 0;
  padding: 0;
}

#footer form input#searchbutton {
  margin: 0;
  border-bottom: none;
  overflow:visible;
  width:auto;
}

#footer form input#searchquery {
  background-color: #333;
  color: #fff;
  font-family: Arial, Helvetica, sans-serif;
  border: none;
  padding: 6px 3px;
}

#footer ul {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid #222;
}

#footer ul li {
  padding: 0;
}

#footer ul li a  {
  display: inline-block; /* for IE 6, 7 */
}

#footer ul li a {
  text-decoration: none;
  display: block;
  font-size: 11px;
  padding: 7px 10px;
  border-bottom: 1px solid #222;
}

#footer ul li a:hover {
  background-color: #111;
}

.footer-box {
  width: 220px;
  margin-right: 26px;
  float: left;
}

.end-footer-box {
  margin-right: 0;
}

#footer-links {
  background-color: #000;
  color: #ccc;
  padding: 5px;
}
div#footer-links p {
  text-align: right;
  padding: 0;
  margin: 0 auto;
  font-size: 10px;
  width: 960px;
  display: block;
}
#footer-links a {
  color: #eee;
  font-weight: bold;
  text-decoration: underline;
}




/** clear fix **/
.clear:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}
 
.clear {
  display: inline-block;
}
.clear {
  clear:both;
  display: block;
}

</style>


<!--
ablaze, a free CSS web template by spyka Webmaster (www.spyka.net)

Download: http://www.spyka.net/web-templates/ablaze/

License: Creative Commons Attribution
//-->
</head>

<body class="small-header">
  <div id="wrapper">
    <div id="sitename">
      <h1><a href="#">site<strong>name</strong></a></h1>
    </div>
       <div id="nav">
      <ul>
        <li><a href="index.html"><span>Home</span></a></li>
                <li><a href="page.html"><span>Static Page</span></a></li>
        <li class="selected"><a href="examples.html"><span>Examples</span></a></li>
        <li><a href="#"><span>Solutions</span></a></li>
        <li><a href="#"><span>Contact</span></a></li>
      </ul>
    </div>

    <div id="header" class="clear">
      <h2>A handful of HTML code examples</h2>
    </div>
    <div id="body" class="clear">
      <div id="sidebar" class="column-left">
        <ul>
                  <li>
            <h4>Navigate</h4>
                        <ul class="blocklist">
                            <li><a href="index.html">Home</a></li>
                            <li><a href="page.html">Static Page</a></li>
                            <li class="selected-item"><a href="examples.html">Examples</a></li>
                            <li><a href="#">Solutions</a></li>
                            <li><a href="#">Contact</a></li>
                        </ul>

          </li>  
          <li>
            <h4>Links</h4>
            <ul>
              <li><a href="http://www.spyka.net" title="spyka Webmaster resources">spyka webmaster</a></li>
              <li><a href="http://www.justfreetemplates.com" title="free web templates">Free web templates</a></li>
              <li><a href="http://www.spyka.net/forums" title="webmaster forums">Webmaster forums</a></li>
              <li><a href="http://www.awesomestyles.com/mybb-themes" title="mybb themes">MyBB themes</a></li>
              <li><a href="http://www.awesomestyles.com" title="free phpbb3 themes">phpBB3 styles</a></li>
    
            </ul>
          </li>
        </ul>
      </div>
      <div id="content" class="column-right">
              <h2>Examples</h2>

        <h1>Heading H1</h1>
        <h2>Heading H2</h2>
        <h3>Heading H3</h3>
        <h4>Heading H4</h4>
        <h5>Heading H5</h5>
        <p>&nbsp;</p>

        
        <h3>Lists</h3>
        <ul>
          <li>List item</li>
          <li>List item</li>
          <li>List item</li>
        </ul>
            
        <ol>

          <li>List item</li>
          <li>List item</li>
          <li>List item</li>
        </ol>
        <p>&nbsp;</p>
        
          
        <h3>Code and blockquote</h3>
        <code>&lt;? echo('Hello world'); ?&gt;</code>

        <blockquote><p>Mauris sit amet tortor in urna tincidunt aliquam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas</p></blockquote>
        <p>&nbsp;</p>
        
        
        
        <h3>Table</h3>
        <table>
          <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Age</th>
          </tr>
          <tr>
            <td>1</td>
            <td>John Smith</td>
            <td>28</td>

          </tr>
          <tr>
            <td>2</td>
            <td>Fred James</td>
            <td>49</td>
          </tr>
          <tr>
            <td>3</td>
            <td>Rachel Johnson</td>
            <td>19</td>
          </tr>
  
        </table>
        <p>&nbsp;</p>
        
        <h3>Form</h3>
        <fieldset>

          <legend>Form legend</legend>
          <form action="#" method="get">
            <p><label for="name">Name:</label>
            <input type="text" name="name" id="name" value="" /><br /></p>    
            <p><label for="email">Email:</label>
            <input type="text" name="email" id="email" value="" /><br /></p>
            <p><label for="message">Message:</label>  
            <textarea cols="60" rows="11" name="message" id="message"></textarea><br /></p>
            <p><input type="submit" name="send" class="formbutton" value="Send" /></p>
          </form>
  
        </fieldset>
      </div>
    </div>
  </div>
     <div id="footer">
          <div class="footer-content">

            <div class="footer-box">
                <h4>About our site</h4>
    
                <p>
                    Morbi fermentum, nunc id pellentesque blandit, lectus velit pellentesque nisl, a condimentum est velit sed nisi. Sed libero velit, eleifend nec porttitor a, porta quis leo. In hac habitasse platea dictumst. 
                </p>
            </div>
            
            <div class="footer-box">
                <h4>Categories</h4>

                <ul>
                  <li><a href="#">Lorem ipsum dolor sit amet.</a></li>
                  <li><a href="#">Quisque consequat nunc a felis.</a></li>
                  <li><a href="#">Suspendisse consequat magna at.</a></li>
                  <li><a href="#">Etiam eget diam id ligula rhoncus.</a></li>
                  <li><a href="#">Sed in mauris non nibh.</a></li>

                </ul>
            </div>
            
            <div class="footer-box">
    
                <h4>Network sites</h4>
                <ul>
                    <li><a href="http://www.spyka.net" title="spyka Webmaster resources">spyka webmaster</a></li>
                    <li><a href="http://www.justfreetemplates.com" title="free web templates">Free web templates</a></li>

                    <li><a href="http://www.spyka.net/forums" title="webmaster forums">Webmaster forums</a></li>
                    <li><a href="http://www.awesomestyles.com/mybb-themes" title="mybb themes">MyBB themes</a></li>
                    <li><a href="http://www.awesomestyles.com" title="free phpbb3 themes">phpBB3 styles</a></li>
                </ul>  
            </div>
            
            <div class="footer-box end-footer-box">
                <h4>Search our site</h4>

                <form action="#" method="get">
                    <p>
                        <input type="text" id="searchquery" size="18" name="searchterm" />
    
                        <input type="submit" id="searchbutton" value="Search" class="formbutton" />
                    </p>
                </form>
            </div>     
            <div class="clear"></div> 
        </div>
        <div id="footer-links">

        <!-- A link to http://www.spyka.net must remain. To remove link see http://www.spyka.net/licensing -->
                <p>&copy; YourSite 2010. Website design by <a href="http://www.spyka.net">Free CSS Templates</a> | <a href="http://www.justfreetemplates.com">Free Web Templates</a></p>
        </div>  
    </div>
</body>
</html>








Related examples in the same category

1.metamorph_drop
2.metamorph_energybolt
3.metamorph_exit
4.metamorph_global
5.metamorph_glowing
6.metamorph_host
7.metamorph_icybreeze
8.metamorph_interiordesign
9.metamorph_interstate60
10.metamorph_lotr
11.metamorph_lyrics_lt
12.metamorph_melancholy_lt
13.metamorph_mercuryworld
14.metamorph_metaform
15.metamorph_models
16.metamorph_nuke
17.metamorph_oldheavens
18.metamorph_palmbeach
19.metamorph_strongrey_lt
20.metamorph_thames
21.metamorph_transitional
22.metamorph_tropic
23.metamorph_truncata
24.metamorph_tubes
25.metamorph_tunel
26.aboutfruts
27.abrasive
28.abscond
29.abstraction
30.acallia-development
31.accomplishable
32.actualbiz
33.adhesive
34.adios
35.advantage
36.aero-solutions
37.aerolyk
38.affection
39.agency
40.ahoy
41.al-infolabs
42.alexx-c
43.alieninvasion
44.alpha
45.altered
46.altruism
47.ambiance
48.amoreira
49.angryhornet
50.anibanner01
51.AnotherSquare
52.anther
53.anthropod
54.Antikoerperchen
55.antiquity
56.aphotic
57.applique
58.aprilshowers
59.Arbenting-MinimalistResumeTemplate
60.expanding-portfolio
61.experience
62.expertvision
63.exploitable
64.ezine02
65.familiar
66.favorite-cakes
67.featherlight
68.featuring
69.femflex1
70.fernando1
71.fertilization
72.Fibre
73.fibreglass
74.filaments
75.findingpeace
76.firerescuesquad
77.fivestar
78.Flair Template
79.flair
80.flan2
81.flange
82.flattering
83.flavour
84.fleur
85.flightandfight
86.fluidity
87.fluidsolution
88.flyover-builders
89.WP-Bliss
90.website-design
91.website-traffic