cool_web : Effect « Templates « HTML / CSS

HTML / CSS » Templates » Effect 
cool_web
    

<!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=iso-8859-1" />
<title>Cool Web</title>
<style type='text/css'>
/* CSS Document */
body{padding:0px; margin:0px; background:#fff; color:#666; font:14px/18px Georgia, "Times New Roman", Times, serif;}
div, p, ul, h2, h3, h4, img{padding:0px; margin:0px;}
ul{list-style-type:none;}
a{background:#0099FF; color:#fff; text-decoration:none;}
a:hover{text-decoration:underline;}

/*----TOP PANEL----*/
#maintopPan{height:277px; background:url(cool_web-images/headerbg2.gif0 0 repeat-x; margin:auto;
#topHeaderPan{width:514px; height:277px; float:left; background:url(cool_web-images/header.jpg0 0 no-repeat;}

#topHeaderPan ul{width:114px; height:124px; position:absolute; top:119px; left:23px;}
#topHeaderPan ul li{width:114px; height:24px; background:url(cool_web-images/dot-line.gif0 100% repeat-x;}
#topHeaderPan ul li a{display:block; width:102px; height:24px; background:url(cool_web-images/bullet1.gif0 9px no-repeat; font:12px/24px Arial, Helvetica, sans-serif; font-weight:bold; text-decoration:none; padding:0 0 0 12px;}
#topHeaderPan ul li a:hover{text-decoration:underline; background:url(cool_web-images/bullet2.gif0 9px no-repeat;
#topHeaderPan ul li.resources{width:114px; height:24px; background:none;}

#topHeaderPan img{width:220px; height:53px; position:absolute; top:24px; left:24px;}
/*----Top Side Menu--*/
#topSidemenuPan{width:264px; height:277px; float:left; background:url(cool_web-images/right-bg.gif100no-repeat #fff; color:#000;}
#topSidemenuPan ul{width:198px;  margin:0 0 0 20px;}
#topSidemenuPan ul li{width:99px; height:277px; float:left;}

#topSidemenuPan ul li.home{width:99px; height:277px;}
#topSidemenuPan ul li.home a{width:99px; height:277px; display:block; background:url(cool_web-images/home-normal.jpg0 0 no-repeat; text-indent:-20000px;}
#topSidemenuPan ul li.home a:hover{width:99px; height:277px; background:url(cool_web-images/home-hover.jpg0 0 no-repeat;}

#topSidemenuPan ul li.contact a{width:99px; height:277px; display:block; background:url(cool_web-images/contact-normal.jpg0 0 no-repeat; text-indent:-20000px;}
#topSidemenuPan ul li.contact a:hover{width:99px; height:277px; background:url(cool_web-images/contact-hover.jpg0 0 no-repeat;}


/*----/TOP PANEL----*/

/*----BODY PANEL----*/
#bodyPan{width:778px; clear:both;}
/*----Left Panel----*/
#leftPan{width:505px; float:left;}
#leftPan p{padding:0 24px 14px;}
#leftPan p span{font-weight:bold;}
#leftPan p.more{width:70px; height:23px; margin:0 0 0 340px;}
#leftPan p.more a{width:70px; height:23px; display:block; background:url(cool_web-images/icon2.gif0 0 no-repeat #fff; color:#589B02; font:14px/23px "Trebuchet MS",Arial, Helvetica, sans-serif; font-weight:bold; text-decoration:none; padding:0 0 0 36px;}
#leftPan p.more a:hover{background:url(cool_web-images/icon2.gif0 0 no-repeat #fff; color:#046CB8; text-decoration:none;}

#leftPan h2{width:220px; height:100px; background:url(cool_web-images/icon1.gif0 50% no-repeat; text-indent:-20000px; margin:0 0 0 22px;}

#leftPaninleftPan{width:270px; float:left;}
#leftPaninleftPan h3{height:55px; background:url(cool_web-images/icon3.gif0 0 no-repeat #fff; color:#046CB8; font:24px/40px Arial, Helvetica, sans-serif; padding:30px 0 0 54px; margin:0 0 0 22px;}
#leftPaninleftPan h4{width:209px; height:90px; background:url(cool_web-images/image1.jpg0 0 no-repeat; margin:0 0 0 22px; text-indent:-2000px;}
#leftPaninleftPan p.strongtext{font:16px/18px Arial, Helvetica, sans-serif; background:#fff; color:#3A3A3A; font-weight:bold; padding:16px 24px 14px;}

#leftPaninleftPan p.moreone{width:100px; height:23px; margin:0 0 35px;}
#leftPaninleftPan p.moreone a{width:100px; height:23px; display:block; background:url(cool_web-images/icon2.gif0 0 no-repeat #fff; color:#589B02; font:14px/23px "Trebuchet MS",Arial, Helvetica, sans-serif; font-weight:bold; text-decoration:none; padding:0 0 0 36px;}
#leftPaninleftPan p.moreone a:hover{background:url(cool_web-images/icon2.gif0 0 no-repeat #fff; color:#046CB8; text-decoration:none;}

#leftPaninrightPan{width:235px; float:left;}

#leftPaninrightPan h4{width:209px; height:90px; background:url(cool_web-images/image2.jpg0 0 no-repeat; text-indent:-2000px; margin:85px 0 0;}

#leftPaninrightPan p{padding:0 0 14px;}
#leftPaninrightPan p.strongtext{font:16px/18px Arial, Helvetica, sans-serif; background:#fff; color:#3A3A3A; font-weight:bold; padding:16px 24px 14px 0;}
#leftPaninrightPan p span{font-weight:bold;}

#leftPaninrightPan p.moretwo{width:100px; height:23px; margin:0 0 35px;}
#leftPaninrightPan p.moretwo a{width:100px; height:23px; display:block; background:url(cool_web-images/icon2.gif0 0 no-repeat #fff; color:#589B02; font:14px/23px "Trebuchet MS",Arial, Helvetica, sans-serif; font-weight:bold; text-decoration:none; padding:0 0 0 36px;}
#leftPaninrightPan p.moretwo a:hover{background:url(cool_web-images/icon2.gif0 0 no-repeat #fff; color:#046CB8; text-decoration:none;}
/*----/Left Panel----*/

/*----Right Panel----*/
#rightPan{width:273px; float:left; background:url(cool_web-images/rightpanbg.gif0 0 repeat-y;}

#rightPan h2{width:85px; height:74px; background:url(cool_web-images/icon4.gif0 0 no-repeat #fff; color:#3A3A3A; font:14px/18px Arial, Helvetica, sans-serif; padding:8px 0 0 66px; text-transform:uppercase; margin:24px 0 0 53px; }
#rightPan h2 span{font-size:48px; line-height:32px; background:#fff; color:#61A804; text-transform:none;}

#rightPan ul{width:190px; margin:36px 0 60px 46px;}
#rightPan ul li.dot{background:url(cool_web-images/bullet.gif0 7px no-repeat; height:47px; padding:0 0 0 20px; font-weight:bold;}
#rightPan ul li{background:none; height:47px; padding:0 0 0 20px;}

#rightbottomPan{width:273px; height:24px; background:url(cool_web-images/rightbottompan.gif0 0 no-repeat;}

/*----Right Panel----*/
#footermainPan{height:168px; background:#4C4C4C; color:#fff; clear:both;}
#footerPan{width:778px; float:left; position:relative;}

#footerPan img{width:218px; height:52px; position:absolute; top:28px; right:30px;}

#footerPan ul{width:320px; position:absolute; top:38px; left:53px;}
#footerPan li{float:left; font:11px/15px "Trebuchet MS",Arial, Helvetica, sans-serif; font-weight:normal;}
#footerPan ul li a{padding:0 5px 0; color:#fff; background:#4C4C4C; text-decoration:none;}
#footerPan ul li a:hover{text-decoration:underline;}

#footerPan ul.templateworld{width:158px; background:#4C4C4C; color:#fff; display:block; position:absolute; top:125px; left:56px;}
#footerPan ul.templateworld li a{background:#4C4C4C; display:block; color:#fff; text-decoration:none;}
#footerPan ul.templateworld li a:hover{text-decoration:underline;}

#footerPan p.copyright{background:#4C4C4C; color:#79D000; font:11px/15px Tahoma,Arial, Helvetica, sans-serif; position:absolute; top:74px; left:58px;}

#footerPanhtml{width:75px; height:24px; display:block; position:absolute; top:95px; left:58px;}
#footerPanhtml a{width:75px; height:24px; background:url(cool_web-images/arrow1.gif9050% no-repeat #DFDFDF; display:block; font:14px/24px "Trebuchet MS",Arial, Helvetica, sans-serif; margin:0; padding:0 0 0 5px; color:#111111; text-transform:uppercase; text-decoration:none; font-weight:bold;}
#footerPanhtml a:hover{background:url(cool_web-images/arrow2.gif9050% no-repeat #DFDFDF; color:#111; text-decoration:none;}

#footerPancss{width:75px; height:24px; display:block; position:absolute; top:95px; left:145px;}
#footerPancss a{width:75px; height:24px; background:url(cool_web-images/arrow2.gif9050% no-repeat #DFDFDF; display:block; font:14px/24px "Trebuchet MS",Arial, Helvetica, sans-serif; margin:0; padding:0 0 0 5px; color:#111111; text-transform:uppercase; text-decoration:none; font-weight:bold;}
#footerPancss a:hover{background:url(cool_web-images/arrow1.gif9050% no-repeat #DFDFDF; color:#111; text-decoration:none;}

</style>


</head>

<body>
<div id="maintopPan">
  <div id="maintopPanOne">
   <div id="topHeaderPan">
       <a href="index.html"><img src="cool_web-images/logo.jpg" title="Cool Web" alt="Cool Web" width="220" height="53" border="0" /></a> 
      <ul>
        <li><a href="#">About Us</a></li>
        <li><a href="#">Company</a></li>
        <li><a href="#">Partners</a></li>
        <li><a href="#">Testimonials</a></li>
        <li class="resources"><a href="#">Resources</a></li>
      </ul>
    </div>
    <div id="topSidemenuPan">
    <ul>
      <li class="home"><a href="#">Home</a></li>
      <li class="contact"><a href="#">Contact</a></li>
    </ul>  
    </div>
  </div>
    
</div>

<div id="bodyPan">
  <div id="leftPan">
    <h2>who we are</h2>
  <p>Cool Web is a <span>free, tableless, W3C-compliant</span> web design layout by Template World. This template has been tested and proven compatible with all major browser environments and operating systems. You are free to modify the design to suit your tastes in any way you like.</p>
  <p>We only ask you to not remove <span>"Design by Template World"</span> and the link http://www.templateworld.com from the footer of the template.</p>
  <p>If you are interested in seeing more of our free web template designs feel free to visit our website, Template World. We intend to add at least 25 new free templates in the coming month.</p>
  <p class="more"><a href="#">read more</a></p>
  
    <div id="leftPaninleftPan">
    <h3>current events</h3>
    <h4>image</h4>
    <p class="strongtext">on 23rd july 2006</p>
    <p><span>sit amet, consectetuer adipi scing elit. Vestibulum liiVm perdiet ut, commodo vel,co</span> auctor vel,</p>
    <p>Etiam orci nulla, aliquet vel Proin , pharetra in, posuere ultrices Proin , sapien. Proin vel lacus. Integerda magna. Cras mi nibh, dapibus simit amet, aliquet ut, venenatis sed,en <span>tortor. Mauris eu leo.</span> </p>
    <p class="moreone"><a href="#">read more</a></p>
    </div>
    <div id="leftPaninrightPan">
    <h4>image</h4>
    <p class="strongtext">on 23rd july 2006</p>
    <p><span>sit amet, consectetuer adipi scing elit. Vestibulum liiVm perdiet ut, commodo vel,co</span> auctor vel,</p>
    <p>Etiam orci nulla, aliquet vel Proin , pharetra in, posuere ultrices Proin , sapien. Proin vel lacus. Integerda magna. Cras mi nibh, dapibus simit amet, aliquet ut, venenatis sed,en <span>tortor. Mauris eu leo.</span> </p>
    <p class="moretwo"><a href="#">read more</a></p>
    </div>
  </div>
  
  <div id="rightPan">
    <h2><span>new</span><br />service 
overview </h2>
<ul>
  <li class="dot">sitamet,consectetuer adipiscing elit.</li>
  <li>posuere ultrices, sapien Nul.</li>
  <li class="dot">sitamet,consectetuer adipiscing elit.</li>
  <li>posuere ultrices, sapien Nul.</li>
  <li class="dot">sitamet,consectetuer adipiscing elit.</li>
  <li>posuere ultrices, sapien Nul.</li>
  <li class="dot">sitamet,consectetuer adipiscing elit.</li>
  <li>posuere ultrices, sapien Nul.</li>
</ul>
  
  <div id="rightbottomPan"><img src="cool_web-images/blank.gif" alt="" /></div>
  </div>
</div>

<div id="footermainPan">
  <div id="footerPan">
    <a href="index.html"><img src="cool_web-images/footerlogo.gif" title="Cool Web" alt="Cool Web" width="218" height="52" border="0" /></a>
    <ul>
    <li><a href="#">Home</a>| </li>
    <li><a href="#">About Us</a> | </li>
    <li><a href="#">Company</a>| </li>
    <li><a href="#">Partners</a> | </li>
    <li><a href="#">Testimonials</a> |</li>
  <li><a href="#">Resource</a> |</li>
  <li><a href="#">Contact</a> </li>
  </ul>
  <p class="copyright">┬ęcool web. All rights reserved.</p>
  <div id="footerPanhtml"><a href="http://validator.w3.org/check?uri=referer" target="_blank">html</a></div> 
   
   <div id="footerPancss"><a href="http://jigsaw.w3.org/css-validator/check/referer" target="_blank">css</a></div>
   <ul class="templateworld">
    <li>Design By:</li>
  <li><a href="http://www.templateworld.com" target="_blank">Template World</a></li>
  </ul>
  </div>
</div>
</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.flare
10.flashyweb
11.flash_web
12.fireworks
13.floating
14.falling
15.fantasyland
16.metamorph_weird
17.metamorph_violet
18.metamorph_violetdream
19.metamorph_mydesign
20.metamorph_myst
21.metamorph_mywaves
22.metamorph_myweb
23.metamorph_freedom_lt
24.metamorph_gloryfield
25.metamorph_horizon
26.bubble
27.classic-luxury
28.classic
29.classique
30.classliclink
31.civilized
32.metamorph_cool
33.metamorph_imaginary
34.metamorph_infinity
35.metamorph_newage
36.metamorph_madness
37.metamorph_heaven
38.metamorph_lensflare
39.metamorph_shinyblur_lt
40.metamorph_sparks_lt
41.metamorph_soulfrost
42.metamorph_space
43.metamorph_spaceglowing
44.metamorph_sphere
45.metamorph_starwars
46.metamorph_steel
47.metamorph_stones
48.abundant
49.chalkboard
50.cool-web
51.coolblack
52.CoolishBlack
53.coolracing
54.coolzone
55.creative-media
56.creative-mind
57.creative
58.creevykeel
59.decayed
60.essence
61.essential
62.auroradesktop
63.scenic-reflections
java2s.com  | Contact Us | Privacy Policy
Copyright 2009 - 12 Demo Source and Support. All rights reserved.
All other trademarks are property of their respective owners.