tattoopattern : Effect 2 « Templates « HTML / CSS






tattoopattern

   

<!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" />
<title>tattooPattern</title>
<style type='text/css'>
body {
  text-align:center;
}
a {
  text-decoration:none;
  color:#000000
}
a:hover {
  text-decoration: underline;
}
#wrap {
  width:800px;
  text-align:left;
  margin:0 auto;
}

.floatl{ float:left}
.folatr{ float:right}
.clearfix{ clear:both}


.main {width:533px;}
/* header */
#header { background:url(tattoopattern-images/header.jpg);  height:189px;
  position:relative
}
#logo {
  position:absolute;
  top:50px;
  left:100px;
  color:#000000
}
#logo h1 {
  font-size:34px;
  font-weight:700;
  
}
#logo div {
  padding-left:100px;
}

/* content */
#content {background:url(tattoopattern-images/main.jpg);  height:520px; color:#FFFFFF}

.blog { width: 200px; margin: 15px 0 0 50px;height: 150px;display: inline; }
.blog h2, .blogg h2 {font-size:22px; color:#FFFFFF; padding:0 0 10px 0}
.blogg {clear:both;margin: 0 0 0 50px;}
.blogg p {font-family:Verdana, Arial, Helvetica, sans-serif;width: 440px;}

ul#nav { font-size:24px; margin:250px 0 0 70px}
ul#nav a{ color:#FFFFFF}
/* footer */
#footer {background:url(tattoopattern-images/footer.jpg); height:80px; clear:both; padding:10px 0 0 80px}

#xhtml{float:right;margin-right: 100px;}
.side {background:url(tattoopattern-images/side.jpg);  width:267px;height:709px}



</style>


<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="wrap">
  <div class="floatl main">
    <div id="header">
      <div id="logo">
        <h1>tattooPattern</h1>
        <div>short slogan here</div>
      </div>
    </div>
    <!-- /header -->
    <div id="content">
      <div class="blog floatl">
        <h2>Sections 1</h2>
        <ul class="meun">
          <li><a href="#">Latin literature </a></li>
          <li><a href="#">making over years </a></li>
          <li><a href="#">Richard Clintock </a></li>
          <li><a href="#">Latin professor </a></li>
          <li><a href="#">Hampden Sydney </a></li>
        </ul>
      </div>
      <div class="blog last folatr">
        <h2>Sections 1</h2>
        <ul class="meun">
          <li><a href="#">Latin literature </a></li>
          <li><a href="#">making over years </a></li>
          <li><a href="#">Richard Clintock </a></li>
          <li><a href="#">Latin professor </a></li>
          <li><a href="#">Hampden Sydney </a></li>
        </ul>
      </div>
      <div class="blogg">
        <h2>Free CSS Templates</h2>
        <p>This is tattooPattern, a free, fully standards-compliant CSS template designed by <a href="http://www.free-css-templates.com/">Free CSS Templates</a>.
          
          This free template is released under a Creative Commons Attributions 2.5 license, so you?re pretty much free to do whatever you want with it (even use it commercially) provided you keep the links in the footer intact. Aside from that, have fun with it :) </p>
      </div>
    </div>
  </div>
  <div class="folatr side">
    <ul id="nav">
      <li><a href="#">Home</a></li>
      <li><a href="#">About us</a></li>
      <li><a href="#">Production</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </div>
  <!-- /content -->
  <div id="footer">
    <div id="ftlink"> <a href="#">Home</a> | <a href="#">About Us</a> | <a href="#">Contact</a> </div>
    <p id="copyright"> 2008. All Rights Reserved. <br/>
      <a href="http://www.templatesold.com/" target="_blank">Website Templates</a> by <a href="http://www.free-css-templates.com/" target="_blank">Free CSS Templates</a></p>
    <div id="xhtml"><img src="tattoopattern-images/xhtml.jpg" alt=" xhtml vaild" /> <img src="tattoopattern-images/css.jpg" alt="css vaild" /></div>
  </div>
  <!-- /footer -->
</div>
</body>
</html>

   
    
    
  








Related examples in the same category

1.bigpixels
2.binary-news
3.mosaic
4.perfection
5.plain1
6.plain2
7.plastic-surgery
8.plastics
9.overdose
10.outlined
11.optimism
12.optimistic
13.Modern_Theme
14.MultiStrangeColor
15.modern
16.minimalistic
17.primitive
18.sparkle
19.sparkling
20.spotlight
21.simplyfluid
22.slider
23.pragmatic
24.popular
25.primitif
26.pure-web-2.0
27.pure
28.reflection
29.reflections
30.royal-cyan
31.royal_policy
32.smalltown
33.smallwindow
34.smartdesign
35.smarttouch
36.splendid
37.workfire
38.webtile
39.Wide_Side
40.zionnarrow
41.zionnarrows
42.xtreme
43.ZEN
44.zenlike
45.wondrous
46.stonewalled
47.tattoopatt
48.tastelessly
49.tasty
50.thebarn
51.tinfoil_helmet
52.tomato
53.metal-feel
54.metal
55.historical
56.historicpaper
57.historyofwar
58.lonelyness