flare : Effect « Templates « HTML / CSS

flare
     

<!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=UTF-8" />
  <title>flare - by Tony Pires</title>
<style type='text/css'>
* {
  margin: 0; 
  padding: 0; 
}

/* GENERAL STYLES AND LAYOUT */

body  {
  font: 11px Arial, Helvetica, sans-serif;
  background: #000;
  text-align: center;
  color: #DDD;
}

h1,
h2,
h3 {
  font-family: "Arial Black", Gadget, sans-serif;
}

h2,
h3 {
  text-transform: uppercase;
  line-height: 28px;
}

h2 {
  font-size: 16px;
}

h3 {
  font-size: 13px;
}

h4 {
  font-size: 11px;
}

p {
  line-height: 1.6em;
  padding-bottom: 8px;
}

.pJustify p {
  text-align: justify;
}

a { 
  color: #DDD;
  text-decoration: none;
}

#container a:hover { 
  border-bottom: none;
}

b,
strong {
  color: #FFF;
}

i,
em {
  font-family: Georgia, "Times New Roman", Times, serif;
}

#col1 ul,
#col2 ul,
#col3 ul,
ol {
  line-height: 1.8em;
  margin: 10px 0 10px 30px;
}

ul {
  list-style: none;
  list-style-image: url(flare-images/bullet.gif);
}

blockquote {
  background: url(flare-images/quote.gif) no-repeat;
  font: 14px Georgia, "Times New Roman", Times, serif;
  font-style: italic;
  line-height: 1.8em;
  margin: 0 auto;
  padding: 10px 0 20px 50px;
  width: 75%;
}

blockquote.bqOptionalL,
blockquote.bqOptionalR {
  background: none;
  background: url(flare-images/gradient.gif) repeat-x #111;
  border: 3px double #444;
  color: #BBB;
  line-height: 1.8em;
  margin: 0 0 10px 0;
  padding: 5px 10px;
  width: 200px;
}

blockquote.bqOptionalL {
  float: left;
  margin-right: 20px;
}

blockquote.bqOptionalR {
  float: right;
  margin-left: 20px;
}

blockquote .bqAuthor {
  color: #777;
}

code {
  background: #151515;
  border-top: 1px solid #333;
  border-bottom: 1px solid #333;
  padding: 4px;
}

/* TABLE STYLES */

table {
  border-bottom: 1px solid #151515;
  border-left: 1px solid #151515;
  margin: 10px auto;
  padding: 0;
}

th {
  background: url(flare-images/newsbar.gif) repeat-x;
  height: 24px;
  color: #00AEEF;
  font-size: 12px;
  font-weight: normal;
  padding: 0 8px;
}

tr.trAlt {
  background: #111;
}

td {
  border-right: 1px solid #151515;
  border-top: 1px solid #151515;
  padding: 5px 8px;
}

td.ra {
  text-align: right;
}

/* MENUBAR STYLES AND LAYOUT */

#menubar {
  background: url(flare-images/menubar.gif) repeat-x;
  height: 40px;
  text-align: center;
}

#menubar li {
  background: url(flare-images/button.gif) center center repeat-x;
  display: inline;
  font: 28px "Arial Black", Gadget, sans-serif;
  line-height: 40px;
  margin: 0 4px;
  text-transform: uppercase;
}

#menubar .capL {
  background: url(flare-images/buttonL.gif) center left no-repeat;
}

#menubar .capR {
  background: url(flare-images/buttonR.gif) center right no-repeat;
}

#menubar a {
  font-size: 14px;
  position: relative;
  top: -6px;
}

#menubar a:hover {
  color: #444;
}

#menubar li.current a:hover {
  color: #DDD;
}

#menubar li.current {
  background: url(flare-images/buttonA.gif) center center repeat-x;
}

#menubar li.current .capL {
  background: url(flare-images/buttonLA.gif) center left no-repeat;
}

#menubar li.current .capR {
  background: url(flare-images/buttonRA.gif) center right no-repeat;
}

/* MAIN LAYOUT */

#bodyBackground {
  background: url(flare-images/flare.jpg) no-repeat top center;
}

#container { 
  width: 780px;
  margin: 0 auto;
  text-align: left;
} 

/* HEADER STYLES AND LAYOUT */

#header {
  color: #000;
  height: 270px;
  padding: 0 10px 0 20px;
  text-align: center;
} 

#header h1 {
  /* This title should stay about 3-8 characters if possible */
  font-size: 64px;
  margin-bottom: -20px; /* Adjust this if you have decenders in your title */
  padding-top: 100px;
}

#header h1 a {
  color: #000;
}

#header h2 {
  font-size: 14px;
  text-transform: uppercase;
}

/* 3 COLUMN STYLES AND LAYOUT */

#col1, 
#col2, 
#col3,
.cf3rd { 
  float: left; 
  width: 240px;
}

.colBorder {
  border-top: 4px solid #222;
}

#colFull {
  width: 810px;
}

.cf3rd {
  list-style: none;
  list-style-image: none;
  margin: 10px -30px 0 0;
  position: relative;
  left: -30px;
}

.cf3rd li {
  border-bottom: 1px dotted #2f3e3e;
  line-height: 28px;
}

#col1 h2, 
#col1 h3, 
#col1 h4,
#col1 a:hover { 
  color: #EC008C;
}

#col2 h2, 
#col2 h3, 
#col2 h4,
#col2 a:hover { 
  color: #CCFF00;
}

#col3 h2, 
#col3 h3, 
#col3 h4,
#col3 a:hover { 
  color: #00AEEF;
}

#colFull h2, 
#colFull h3, 
#colFull h4   {
  color: #5e7b7b;
}

.cf3rd h4 {
  font-size: 12px;
}

#col2,
.cf3rd {
  padding: 0 30px;
} 

#col1 a {
  border-bottom: 1px dotted #EC008C;
}

#col2 a {
  border-bottom: 1px dotted #CCFF00;
}

#col3 a {
  border-bottom: 1px dotted #00AEEF;
}

.cf3rd a {
  display: block;
}

.cf3rd a:hover {
  color: #5e7b7b;
}

/* 2 COLUMN STYLES AND LAYOUT */

body.twoCol #col1, 
body.twoCol #col2,
body.twoCol #col3 { 
  float: left; 
  width: 375px;
}

body.twoCol #col1 {
  padding: 0 15px 0 0;
} 

body.twoCol #col2,
body.twoCol #col3 {
  padding: 0 0 0 15px;
} 

/* 1 COLUMN STYLES AND LAYOUT */

body.oneCol #col1,
body.oneCol #col2,
body.oneCol #col3 { 
  float: none;
  width: 100%;
}

body.oneCol #col1,
body.oneCol #col2,
body.oneCol #col3 {
  padding: 0;
} 


/* NEWS COLUMN STYLES */

.news h4 {
  background: url(flare-images/newsbar.gif) repeat-x;
  font-weight: normal;
  line-height: 24px;
  height: 24px;
  margin-bottom: 5px;
  padding: 0 4px;
}

#container .news h4 a {
  border: none;
}

.news h4 span {
  font-size: 10px;
  float: right;
}

.news h4 a {
  float: left;
}

/* IMAGE GALLERY STYLES */

.galleryPrev img {
  margin-bottom: 8px;
}

#container .galleryPrev a:hover img {
  border-width: 2px;
  padding: 2px;
}

/* FOOTER STYLES AND LAYOUT */

#footer { 
  margin-top: 30px;
  padding: 0 10px 0 20px;
  background: url(flare-images/footer.jpg) repeat-y;
} 

#footer p {
  padding: 10px 0;
  text-align: center;
}

#footer a {
  border-bottom: 1px dotted #666;
}

/* FLOATS AND CLEARS */

.floatImgR {
  float: right;
  margin-left: 8px;
  padding: 3px;
}

.floatImgL {
  float: left;
  margin-right: 8px;
  padding: 3px;
}


#col1 .floatImgR,
#col1 .floatImgL {
  border: 1px solid #EC008C;
}


#col2 .floatImgR,
#col2 .floatImgL {
  border: 1px solid #CCFF00;
}


#col3 .floatImgR,
#col3 .floatImgL {
  border: 1px solid #00AEEF;
}

.clearfloat {
  clear:both;
    height: 4px;
    font-size: 1px;
    line-height: 0px;
}

</style>


  
  <!--[if IE]><style>.capR { margin-left: -14px; }</style><![endif]-->
  
</head>

<body>
  
    <div id="menubar">
      <ul>
          <li class="current"><span class="capL">&nbsp;</span><a href="index.html">Home</a><span class="capR">&nbsp;<!--[if IE]> <![endif]--></span></li>
            
            <li><span class="capL">&nbsp;</span><a href="twocolumn.html">About</a><span class="capR">&nbsp;<!--[if IE]> <![endif]--></span></li>
            
            <li><span class="capL">&nbsp;</span><a href="twocolumn.html">2 Column</a><span class="capR">&nbsp;<!--[if IE]> <![endif]--></span></li>
            
            <li><span class="capL">&nbsp;</span><a href="onecolumn.html">Single</a><span class="capR">&nbsp;<!--[if IE]> <![endif]--></span></li>
            
            <li><span class="capL">&nbsp;</span><a href="onecolumn.html">More</a><span class="capR">&nbsp;<!--[if IE]> <![endif]--></span></li>
            
        <li><span class="capL">&nbsp;</span><a href="contact.html">Contact</a><span class="capR">&nbsp;<!--[if IE]> <![endif]--></span></li>
        </ul>
        
    </div>
    
    <div id="bodyBackground">
    
  <div id="container">
    
      <div id="header">
      
        <h1><a href="#">flare</a></h1>
        <h2>a short blurb about you</h2>
        
      </div><!-- end #header -->
    
    <div id="col1">
    
    <h2>Welcome</h2>
    
      <p>Thank you for downloading this template. I hope you enjoy using it.<img class="floatImgR" src="flare-images/girl.jpg" alt="Me" /> I have tested it on a variety of web browsers, and it has been coded using web standards such as CSS and XHTML. Feel free to customize it to your specific requirements. <b>Be sure to check out the 2 and 1 column alternate layouts!</b></p>
      
      <p>You will notice that this section does not have justified paragraphs. That is because floating images in a paragraph makes the justified paragraph look bad. This is controlled through the use of the "pJustify" class.</p>
      
      <div class="pJustify">
      
        <h3>H3 level heading</h3>
        
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam,  justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam  ante ac quam. Maecenas urna purus, fermentum id, <a href="#">molestie</a> in, commodo  porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis  ligula. </p>
        
      </div>
      
    </div><!-- end #col1 -->
    
    <div id="col2" class="news pJustify">
    
      <h2>News</h2>
      
      <h4><a href="#">News Article Title</a> <span>5/30/08</span></h4>
      
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam,  justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam  ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo  porttitor, felis. Nam blandit quam ut lacus.</p> 
      
      <p>Quisque ornare risus quis  ligula. <a href="#">Phasellus</a> tristique purus a augue condimentum adipiscing. Aenean  sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio.</p>
      
      <h4><a href="#">News Article Title</a> <span>5/30/08</span></h4>
      
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam,  justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam  ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo  porttitor, felis. Nam blandit quam ut lacus.</p> 
      
      <p>Quisque ornare risus quis  ligula. <a href="#">Phasellus</a> tristique purus a augue condimentum adipiscing. Aenean  sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio.</p>
      
    </div><!-- end #col2 -->
    
    <div id="col3" class="pJustify">
    
      <h2>Other Stuff</h2>
      
      <p>Maecenas urna purus, fermentum id, molestie in, commodo  porttitor, felis. Nam blandit quam ut lacus.</p>
      
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam,  justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam  ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo  porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis  ligula. Phasellus tristique purus a augue condimentum adipiscing.</p>
      
      <h3>Gallery</h3>
      
      <div class="galleryPrev">
        <a href="#"><img src="flare-images/gallery/1.jpg" alt="1" class="floatImgL" /></a>
        <a href="#"><img src="flare-images/gallery/2.jpg" alt="2" class="floatImgL" /></a>
        <a href="#"><img src="flare-images/gallery/3.jpg" alt="3" class="floatImgL" /></a>
        <a href="#"><img src="flare-images/gallery/4.jpg" alt="4" class="floatImgL" /></a>
      </div>
      
    </div><!-- end #col3 -->
      
      <div class="clearfloat colBorder"></div>
      
    <div id="colFull">
    
        <h2>Links</h2>
        
        <ul class="cf3rd">
          <li><h4>Maecenas urna purus</h4></li>
            <li><a href="#">Nam blandit quam ut lacus</a></li>
            <li><a href="#">Lorem ipsum dolor</a></li>
            <li><a href="#">Praesent aliquam</a></li>
            <li><a href="#">Quisque ornare risus</a></li>
            <li><a href="#">Nam blandit quam</a></li>
        </ul>
        
      <ul class="cf3rd">
          <li><h4>Maecenas urna purus</h4></li>
            <li><a href="#">Nam blandit quam ut lacus</a></li>
            <li><a href="#">Lorem ipsum dolor</a></li>
            <li><a href="#">Praesent aliquam</a></li>
            <li><a href="#">Quisque ornare risus</a></li>
            <li><a href="#">Nam blandit quam</a></li>
        </ul>
        
      <ul class="cf3rd">
          <li><h4>Maecenas urna purus</h4></li>
            <li><a href="#">Nam blandit quam ut lacus</a></li>
            <li><a href="#">Lorem ipsum dolor</a></li>
            <li><a href="http://curiouscat.com/travels/dc/">Washington DC photos</a></li>
            <li><a href="http://curiouscat.com/travels/newyorkcity.cfm">New York city photos</a></li>
            <li><a href="http://curiouscat.com/travel/cybercafe.cfm">Cyber Cafe Directory</a></li>
        </ul>
        
    </div><!-- end #colFull -->
      
      <br class="clearfloat" />
      
    <div id="footer">
    
      <p>Copyright &copy; 2008, yoursite.com - <a href="#">Contact</a> - Designed by <a href="mailto:mrpires@gmail.com">Tony Pires</a> &nbsp; &nbsp; downloaded from <a href="http://css4free.com/" title="CSS web site gallary">CSS4Free</a></p>
      
    </div><!-- end #footer -->
    
  </div><!-- end #container -->
  
  </div><!-- end #bodyBackground -->
  
</body>
</html>
Related examples in the same category

1.	amazinglycool
2.	exposure
3.	expressivestars
4.	extended
5.	external
6.	extracts
7.	falling-away
8.	fantasy
9.	flashyweb
10.	flash_web
11.	fireworks
12.	floating
13.	falling
14.	fantasyland
15.	metamorph_weird
16.	metamorph_violet
17.	metamorph_violetdream
18.	metamorph_mydesign
19.	metamorph_myst
20.	metamorph_mywaves
21.	metamorph_myweb
22.	metamorph_freedom_lt
23.	metamorph_gloryfield
24.	metamorph_horizon
25.	bubble
26.	classic-luxury
27.	classic
28.	classique
29.	classliclink
30.	civilized
31.	metamorph_cool
32.	metamorph_imaginary
33.	metamorph_infinity
34.	metamorph_newage
35.	metamorph_madness
36.	metamorph_heaven
37.	metamorph_lensflare
38.	metamorph_shinyblur_lt
39.	metamorph_sparks_lt
40.	metamorph_soulfrost
41.	metamorph_space
42.	metamorph_spaceglowing
43.	metamorph_sphere
44.	metamorph_starwars
45.	metamorph_steel
46.	metamorph_stones
47.	abundant
48.	chalkboard
49.	cool-web
50.	coolblack
51.	CoolishBlack
52.	coolracing
53.	coolzone
54.	cool_web
55.	creative-media
56.	creative-mind
57.	creative
58.	creevykeel
59.	decayed
60.	essence
61.	essential
62.	auroradesktop
63.	scenic-reflections