art-gallery : Art « Templates « HTML / CSS

Home
HTML / CSS
1.CSS
2.CSS Controls
3.Form
4.IE Firefox
5.Layout
6.Marquee Attributes
7.Meta Tags
8.Microsoft Attributes
9.Object
10.Reference
11.Style Basics
12.Tags
13.Templates
14.XML
HTML / CSS » Templates » Art 




art-gallery
    

<!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>Art Gallery</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type='text/css'>
body {
  margin: 0;
  padding:0;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 11px;
  line-height: 1.5em;
  color: #241c1a;
  background: url(art-gallery-images/bg.jpgrepeat;
  }

a:link, a:visited color: #7e3200; text-decoration: none; font-weight: bold; 
a:active, a:hover color: #975900; text-decoration: none;font-weight: bold; }
.style1 color: #99FFCC }

h1{
  font-family: "Courier New", Courier, monospace, Century;
  font-size: 20px;
  font-weight: bold;
  color: #61754e;
  margin: 0px;
  padding-top: 20px;
  }

h2 {
  font-family: Georgia, "Times New Roman", Times, serif;
  float: left;
  font-size: 14px;
  font-weight: bold;
  color: #3c4826;
  width: 200px;
  padding: 10px 0px 10px 120px;
  text-decoration: underline;
  }


#container {
  width: 1000px;
  margin: auto;
  background: url(art-gallery-images/container_bg.jpgrepeat-y;
  }

#topsection {
  float: left;
  width: 1000px;
  height: 93px;
  background: url(art-gallery-images/top.jpgno-repeat;
  }

.topmenu{
  float: right;
  width: 400px;
  margin: 0px;
  padding: 55px 100px 0px 0px;
  }

.topmenu ul {
  list-style: none;
  padding: 0px;
  margin: 0px;
  }

.topmenu li{
  display: inline;
  }

.topmenu li a{
  font-size: 12px;
  color: #dceb9f;
  font-weight: bold;
  width: 100px;
  height: 30px;
  margin-left:15px;
  padding: 0px 0px 0px 15px;
  background: url(art-gallery-images/bullet.pngno-repeat;
  background-position: left;
  }

#middlesection {
  float: left;
  width: 1000px;
  }

#left_content {
  float: left;
  width: 346px;
  }

#left_top {
  float: right;
  width: 254px;
  height: 298px;
  }

.leftmenu {
  float: left;
  width: 346px;
  margin: 0px;
  }

.leftmenu ul {
  list-style-type: none;
  margin: 0px;
  padding: 0px 0px 0px 100px;
  }

.leftmenu li a {
  display: block;
  height: 25px;
  font-size: 11px;
  color: #3c4826;
  background: url(art-gallery-images/bullet.pngno-repeat;
  padding-left: 20px;
  background-position: left;
  }

.leftmenu li a:hover ,.leftmenu li .current{
  background: url(art-gallery-images/current.pngno-repeat;
  background-position: left;
  color:#000;
  }

#right_content {
  margin: 0px;
  float: left;
  width: 654px;
  background: url(art-gallery-images/right_photo.jpgno-repeat;
  }

#right_text {
  float: left;
  width: 500px;
  text-align: justify;
  margin: 0px;
  padding: 0px 0px 0px 20px;
  }

#right_text img {
  float: left;
  }

#footersection {
  clear: both;
  width: 1000px;
  height: 50px;
  color: #dde7ab;
  font-weight: bold;
  text-align: center;
  padding-top: 80px;
  background: url(art-gallery-images/footer.jpgno-repeat;
  }

#footersection a{
  color: #FFFFFF;
  }

</style>


</head>
<body>
<div id="container">
  <div id="topsection">
    <div class="topmenu">
      <ul>
        <li><a href="http://www.free-css.com/">HOME</a></li>
        <li><a href="http://www.free-css.com/">PORTFOLIO</a></li>
        <li><a href="http://www.free-css.com/">COMPANY</a></li>
        <li><a href="http://www.free-css.com/">CONTACT</a></li>
      </ul>
    </div>
  </div>
  <div id="middlesection">
    <div id="left_content">
      <div id="left_top"><img src="art-gallery-images/left_photo.jpg" alt="" /></div>
      <h2>CATEGORIES</h2>
      <div class="leftmenu">
        <ul>
          <li> <a href="http://www.free-css.com/">&raquo; Web Design</a></li>
          <li> <a href="http://www.free-css.com/">&raquo; Photo Gallery</a></li>
          <li> <a href="http://www.free-css.com/">&raquo; Flash Templates</a></li>
          <li> <a href="http://www.free-css.com/">&raquo; CSS Templates</a></li>
        </ul>
      </div>
      <h2>PORTFOLIO</h2>
      <div class="leftmenu">
        <ul>
          <li> <a href="http://www.free-css.com/">&raquo; Quisque rhoncus nulla</a></li>
          <li> <a href="http://www.free-css.com/">&raquo; Suspendisse a nibh</a></li>
          <li> <a href="http://www.free-css.com/">&raquo; Maecenas adipiscing</a></li>
        </ul>
      </div>
      <h2>QUICK LINKS</h2>
      <div class="leftmenu">
        <ul>
          <li> <a href="http://www.free-css.com/">&raquo; Duis scelerisque</a></li>
          <li> <a href="http://www.free-css.com/">&raquo; Maecenas aliquam</a></li>
          <li> <a href="http://www.free-css.com/">&raquo; Vestibulum quis pede</a></li>
        </ul>
      </div>
    </div>
    <div id="right_content">
      <div id="right_text">
        <h1>Art Gallery</h1>
        <p>This is a FREE CSS web template provided by TemplateMo.com. You may apply this layout for any of your websites. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc quis sem  nec tellus blandit tincidunt.</p>
        <p>Duis vitae velit sed dui malesuada  dignissim. Donec mollis aliquet ligula. Maecenas adipiscing elementum  ipsum. Pellentesque vitae magna. Sed nec est. Suspendisse a nibh  tristique justo rhoncus volutpat. Suspendisse vitae neque eget ante  tristique vestibulum.</p>
        <p>Pellentesque dolor nulla, congue vitae, fringilla in, varius a, orci.  Mauris convallis. Proin vel libero id erat venenatis accumsan. Nunc  blandit orci sit amet risus. Lorem ipsum dolor sit amet, consectetuer  adipiscing elit. Ut iaculis lacinia purus. Duis pulvinar scelerisque  ante.</p>
        <h1>OUR LATEST WORK</h1>
        <p><img src="art-gallery-images/photo.jpg" alt="" width="249" height="162" />Cum sociis natoque penatibus et magnis dis parturient montes, nascetur  ridiculus mus. Curabitur quis velit quis tortor tincidunt aliquet.  Vivamus leo velit, convallis id, ultrices sit amet, tempor a, libero.  Quisque rhoncus nulla quis sem.</p>
        <p>In sed risus ac felis varius bibendum. Vestibulum dapibus tortor vel orci. Maecenas  vulputate, arcu id fermentum eleifend, tortor enim tincidunt mauris,  fringilla tincidunt purus urna vel risus. Fusce vulputate tellus ac  felis. Praesent mauris. Quisque gravida faucibus ligula. Aliquam magna.  Phasellus id felis.</p>
        <h1>Aliquam tristique lacus in sapien</h1>
        <p>Nulla enim nibh, consectetuer sed, vestibulum elementum, sagittis nec, diam. Mauris blandit vehicula neque. Proin consectetuer. Donec venenatis. Cras urna metus, feugiat non, consectetuer quis, pretium quis, nunc.</p>
        <p>Aliquam elit risus, volutpat quis, mattis ac, elementum eget, mauris. In hac habitasse platea dictumst. Aenean cursus. Maecenas aliquam, ligula id egestas suscipit, nisi sapien dignissim nibh, ac vestibulum lorem urna in neque.</p>
        <p><a href="http://validator.w3.org/check?uri=referer"><img height="31" alt="" src="http://www.w3.org/Icons/valid-xhtml10" width="88" vspace="8" border="0" /></a><a href="http://jigsaw.w3.org/css-validator/check/referer"><img alt="" src="http://jigsaw.w3.org/css-validator/art-gallery-images/vcss-blue" vspace="8" border="0" /></a></p>
      </div>
    </div>
  </div>
  <div id="footersection">Copyright © Your Company Name · Designed by <a href="http://www.templatemo.com" class="style1">TemplateMo.com</a></div>
</div>
</body>
</html>

   
    
    
    
  














Related examples in the same category
1.metamorph_artgallery
2.metamorph_burninghouse
3.metamorph_burningshore
4.metamorph_dreamclouds
5.metamorph_dreamingirl
6.metamorph_ball
7.metamorph_ballway
8.metamorph_abstractred
9.metamorph_bubles
10.adornment
11.airwaves
12.metamorph_movie
13.artclass
14.artdesign
15.ArtDesign1
16.ArtDesign2
17.ArtDesign3
18.ArtDesign4
19.artist
20.artistic
21.studio-980
22.studio
23.Studio5
24.studio_art
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.