classic : Effect « Templates « HTML / CSS






classic

     

<!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>Classic Website</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type='text/css'>
/* CSS Document */
body{
  margin: 0;
  padding:0;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11px;
  line-height: 1.5em;
  color: #444444;
  background: #c2c2c2;
}
a:link, a:visited { color: #720803; text-decoration: none; font-weight: bold;} 
a:active, a:hover { color: #720803; text-decoration: none; font-weight: bold; }

h1 {
  margin:0px;
  padding-left: 40px;
  padding-top: 40px;
  font-weight: bold;
  font-size: 18px;
  color:#981d1d;
}
h2 {
  margin: 0px;
  font-weight: bold;
  padding-left: 40px;
  font-size: 16px;
  color:#ea6300;
}
h3 {
  margin:20px 0px 20px 40px;
  font-weight: bold;
  font-size: 12px;
  color:#adadad;
}

#container {
  margin: auto;
  margin-top: 10px;
  width: 770px;
  border: solid 5px #FFFFFF;
  background: #FFFFFF;
}
#left_column {
  float: left;
  width: 27px;
  height: 442px;
  background: url(classic-images/left_corner.jpg) no-repeat;
}
#left_title {
  padding: 20px;
  height: 43px;
  color: #5e5e5e;
  font-size: 14px;
  font-weight: bold;
  line-height: 1.5em;
  letter-spacing: 2px;

}
#left_title span {
  font-size: 24px;
  color:#c61000;
}
#menu_column {
  float: left;
  width: 230px;
  background: url(classic-images/left_title.jpg) no-repeat;
}
.menu_list {
  float: left;
  width: 230px;
}
.menu_list ul {
  list-style-type: none;
  margin: 10px;
  padding: 0;
  width: 213px;
}
.menu_list li a {
  display: block;
  height: 25px;
  padding-top: 8px;
  color: #666666;
  padding-left: 50px;
  background: url(classic-images/menu_button.gif);
}
.menu_list li a:hover, .menu_list li .current {
  color: #a81407;
}
#new {
  float: left;
  width: 180px;
  padding-top: 20px;
  padding-left: 30px;
  text-align: justify;
  padding-right: 20px;
}
#new span {
  background: #f09e00;
  border: thin dotted;
  color: #FFFFFF;
  padding: 5px;
}
#contact {
  float: left;
  margin-top: 20px;
  padding-left: 20px;
  padding-top: 10px;
  width: 180px;
  background: #720803;
  color: #FFFFFF;
  height: 80px;
}
#contact span {
  font-size: 14px;
  font-weight: bold;
}
#right_column {
  float: right;
  width: 513px;
}
#right_header {
  height: 251px;
  color: #FFFFFF;
  background: url(classic-images/header.jpg) no-repeat;
}
.right_link {
  float: left;
  margin: auto;
}
.right_link ul {
  margin: 0px;
  list-style: none;
  padding-left: 300px;
}
.right_link li{
  display: inline;
}
.right_link li a {
  float: left;
  margin-top: 55px;
  width: 100px;
  color: #FFFFFF;
  text-decoration: none;
  text-align: center;
  background: url(classic-images/bullet.gif) no-repeat;
}
.right_slogan {
  float: right;
  text-align: right;
  margin-top: 70px;
  padding-right: 15px;
  width: 260px;
  color: #CCCCCC;

}
#content {
  background: url(classic-images/right_bg.jpg) repeat-x;
}
#content p {
  margin-top: 15px;
  text-align: justify;
  padding-left: 40px;
  padding-right: 40px;
}

.wedo img {
  float: right;
  padding-left: 10px;
}
#footer {
  clear: both;
  width: 770px;
  height: 32px;
  padding-top: 20px;
  text-align: center;
  background: #dedede;
  font-weight: bold;
}

</style>


<style type="text/css">
<!--
.style1 {
  font-size: 12px;
  font-weight: bold;
}
-->
</style>
</head>
<body>
<div id="container">
  <div id="left_column"></div>
  <div id="menu_column">
    <div id="left_title">Classic Website<br />
      <span>Company</span></div>
    <div class="menu_list">
      <ul>
        <li><a href="http://www.free-css.com/">About Us</a></li>
        <li><a href="http://www.free-css.com/">Our Services</a></li>
        <li><a href="http://www.free-css.com/">Our Support</a></li>
        <li><a href="http://www.free-css.com/" class="current">Testimonials</a></li>
        <li><a href="http://www.free-css.com/">Current Events</a></li>
        <li><a href="http://www.free-css.com/">Free Websites</a></li>
        <li><a href="http://www.free-css.com/">Web Templates</a></li>
        <li><a href="http://www.free-css.com/">Web Design</a></li>
        <li><a href="http://www.free-css.com/">HTML Layouts</a></li>
        <li><a href="http://www.free-css.com/">Free CSS Templates</a></li>
      </ul>
    </div>
    <div id="new">
      <p class="style1">LATEST NEWS &amp; EVENTS</p>
      <p><span>Post Date: 15-10-2020</span></p>
      <p> Aliquam tristique lacus in sapien. Suspendisse potenti. Ut sed pede. Nullam vitae tellus. </p>
      <p><span>Post Date: 14-10-2020</span></p>
      <p>Aliquam sagittis molestie sapien. Nulla tellus risus, tincidunt vitae, sagittis vel, interdum at, erat. </p>
      <p><a target="_blank" 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 target="_blank" href="http://jigsaw.w3.org/css-validator/check/referer"><img alt="" src="http://jigsaw.w3.org/css-validator/classic-images/vcss-blue" vspace="8" border="0" /></a></p>
    </div>
    <div id="contact"><span>QUICK CONTACT<br />
      </span> Tel: 000-100-2000<br />
      Fax: 001-101-3000<br />
      Email: info[at]templatemo.com</div>
  </div>
  <div id="right_column">
    <div id="right_header">
      <div class="right_link">
        <ul>
          <li><a href="http://www.free-css.com/">Main Page</a></li>
          <li><a href="http://www.free-css.com/">Contact Us</a></li>
        </ul>
      </div>
      <div class="right_slogan"><strong>... YOUR COMPANY SLOGAN TEXT GOES HERE ...<br />
        </strong> You are free to modify the design to suit your tastes in any way you like.</div>
    </div>
    <div id="content">
      <h1>WELCOME TO FREE WEBSITE</h1>
      <p>This is a free CSS template provided by TemplateMo.com website. You may use this free website for any of your websites. Credit goes to PDPhoto.org for photos.</p>
      <p>Aliquam tristique lacus in sapien. Suspendisse potenti. Ut sed pede. Nullam vitae tellus. Sed ultrices. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur velit tellus, placerat et, dapibus varius, aliquet quis, purus. Aliquam sagittis molestie sapien. Nulla tellus risus, tincidunt vitae, sagittis vel, interdum at, erat. Duis vitae velit. Ut ultricies. Fusce sollicitudin nisl a lectus. Pellentesque odio. </p>
      <p><img src="classic-images/line.jpg" alt="" width="430" height="2" /></p>
      <div class="wedo">
        <h2>WHAT WE DO?</h2>
        <p><strong><img src="classic-images/pic.jpg" alt="" width="133" height="176" />Vivamus a massa.</strong> Donec iaculis felis id neque. Morbi nunc. Praesent varius egestas velit. Donec a massa ut pede pulvinar vulputate. Nulla et augue. </p>
        <p><strong>Cras magna velit,</strong> pellentesque mattis, faucibus vitae, feugiat vitae, sapien. Donec ante. Fusce ac orci sit amet velit ultrices condimentum.</p>
        <p><strong>Duis vitae velit.</strong> Ut ultricies. Fusce sollicitudin nisl a lectus. Pellentesque odio. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed leo. Duis suscipit lorem in risus.</p>
      </div>
      <p><img src="classic-images/line.jpg" alt="" /></p>
      <div class="wedo">
        <h2>CUSTOMER SUPPORT</h2>
        <p>Praesent vel diam. Cras sed leo tempor neque placerat pretium. Curabitur nec odio. Phasellus tincidunt, tortor lacinia blandit commodo, nunc augue mattis eros, ut convallis est augue vel orci. Nunc ante erat, varius eu, luctus ac, tristique nec, justo. Fusce dignissim eros ac massa. Phasellus ligula augue, vestibulum in, cursus non, euismod et, pede.</p>
        <p>&nbsp;</p>
      </div>
    </div>
  </div>
  <div id="footer">Copyright  Your Company Name  Designed by <a href="http://www.templatemo.com">TemplateMo.com</a></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.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