old-wall : Design 6 « Templates « HTML / CSS






old-wall

   

<!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>Old Wall</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type='text/css'>
/*
CSS Credit: http://www.templatemo.com/
*/

html {
  background: #343933;
}

body {
  margin: 0;
  padding:0;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  line-height: 1.5em;
  color: #333333;
  width: 100%;
  display: table;
}

a { color: #d4d2c5; text-decoration:none; }
a:hover {  color: #fff; }

#background_section_top {
  width: 100%;
  height:88px;
  background: url(old-wall-images/background_section_top_bg.jpg) repeat-x;
}

#background_section_mid {
  width: 100%;
  background: #aeac9c url(old-wall-images/background_section_mid_bg.jpg) repeat-x;
}

#background_section_bottom{
  width: 100%;
  background:url(old-wall-images/background_section_bottom_bg.jpg) bottom repeat-x;
}

#background_bottom{
  width: 100%;
  background: #343933 url(old-wall-images/background_bottom_bg.jpg) top repeat-x;
  overflow: hidden;
}

.container {
  width: 960px;
  margin: auto;
}

#header {
  width: 960px;
  height: 88px;
  background:url(old-wall-images/header_bg.jpg) no-repeat;
}

/* Logo Area */
#logo_section {
  width:auto;
  height:auto;
  margin-top: 22px;
  margin-left: 38px;
  padding: 5px 0;
  float:left;  
  display: inline;
  font-size: 36px;
  font-family: Impact;
  color: #d4d2c5;
}

#header_text {
  width: 390px;
  height: 52px;
  margin-top: 12px;
  margin-left: 32px;
  float: right;  
  display: inline;
  font-size: 11px;
  color: #d4d2c5;
  text-align: right;
}

/* Left Section */
#left_section {
  float: left;
  width: 199px;  
  margin: 0 0 0 36px;
}

#left_section .image_box {
  margin-top: 8px;
  padding: 1px;
}

#left_section .section_box_2 {
  margin: 8px 1px 0 1px;  
  background: url(old-wall-images/tempatemo_recent_article.jpg) no-repeat;
  width: 177px;
  height: 63px;
  padding: 45px 8px 0 10px;
}

.section_box_2 h3 {
  margin:0;
  padding: 0;
  font-size: 14px;
  color: #fff;
  text-align: right;  
}

.section_box_2 p {
  margin:0;
  padding: 0;
  font-size: 12px;
  color: #fff;
  text-align: right;  
}
.section_box {
  width: 188px;
  margin: 0;
  padding: 0 0 10px 7px;
  border-left: 2px solid #20282a;
  border-right:2px solid #20282a;
  background:  #323732;
}
.section_box_last {
  width: 188px;
  margin: 0;
  padding: 0 0 10px 7px;
  border-left: 2px solid #20282a;
  border-right:2px solid #20282a;
  border-bottom: 2px solid #20282a;
  background:  #323732;
}

.section_box .section_title {
  width: 160px;
  height: 23px;
  border-bottom: 1px dashed #898c82;
  border-top: 1px dashed #898c82;
  margin: 0;
  padding: 5px 0 0 20px;
  font-size: 13px;
  font-weight: bold;
  color: #cdccc0;
}

.section_box ul {
  list-style: none;
  margin: 12px 0 15px 20px;
  padding: 0;
}

.section_box_last .section_title {
  width: 160px;
  height: 23px;
  border-bottom: 1px dashed #898c82;
  border-top: 1px dashed #898c82;
  margin: 0;
  padding: 5px 0 0 20px;
  font-size: 13px;
  font-weight: bold;
  color: #cdccc0;
}

.section_box_last ul {
  list-style: none;
  margin: 12px 0 15px 20px;
  padding: 0;
}

.clener_with_height {
  clear: both;
  height: 1px;
}
/* Right Section */

#right_section {
  float: right;
  width: 690px;  

}

/* Menu Section */
#menu_section{
  margin: 0;
  padding: 0;
}

#menu_section ul {
  float: right;
  margin: 0;
  padding: 0;
  list-style: none;
}

#menu_section ul li {
  
  margin: 0px;
  padding: 0px;
  display: inline;
}

#menu_section ul li a {
  float: left;
  width: 99px;
  height: 24px;
  padding: 4px 0 0 0;
  margin: 0 10px 0 0;
  font-size: 11px;
  font-weight: bold;
  font-family: Tahoma;
  text-align: center;
  text-decoration: none;
  color: #d4d2c5;
  background: url(old-wall-images/menu_bg.jpg) repeat-x top;
  border: 4px #323732 solid;
  border-top: none;
}

#menu_section li a:hover, #menu_section li .current {
  color: #fff;
}

/* End OF menu*/

.content_area {
  margin : 105px 20px 5px 20px;
  padding: 0;
}
.content_area h1 {
  color: #664e3c;
  font-size: 23px;
  margin: 0;
  padding: 0;
  margin-bottom: 10px;
}

.content_area p {
  color: #4a4a4a;
  font-size: 11px;
  text-align: justify;
  margin: 0;
  padding: 0;
  margin-bottom: 10px;
}

.content_area a {
  color: #fff;
  text-decoration: none;
}

.content_area a:hover {
  text-decoration: underline;
}
.two_column_section {
  margin: 20px;
}

.two_column_section  .two_column_left {
  float: left;  
  width: 335px;
  margin: 0;
  padding: 10px;
}
.two_column_left h1 {
  font-size: 15px;
  color: #6e5a4c;
  margin: 0;
  padding: 0;
  margin-bottom: 12px;
}
.two_column_left .gallery_box {
  margin: 0;
  background: #a2a091 url(old-wall-images/gallery_box_bottom.jpg) bottom right no-repeat;
  border-top: 1px dashed #fff;
  border-bottom : 1px dashed #fff;
  margin-bottom: 15px;
  padding: 0 10px 0 10px;
}
.gallery_box p {
  text-align: justify;
  color: #424242;
  font-size: 12px;
}  
.gallery_box p span.header {
  color: #e7e4d4;
  font-size: 14px;
  font-weight: bold;
}  
.gallery_box img {
  margin: 0 5px 0px 0;
  float: left;
}  
.two_column_section  .two_column_right {
  float: right;  
  width: 255px;  
  margin: 0;
  padding: 10px;  
}
.two_column_right h1 {
  font-size: 15px;
  color: #6e5a4c;
  margin: 0;
  padding: 0;
  margin-bottom: 12px;
}
.two_column_right .body {
  min-height: 177px;
  width: 185px;
  background: url(old-wall-images/2_column_right_bg.jpg) top no-repeat;
  margin: 0;
  padding: 25px;
}

.body h2 {
  font-size: 12px;
  color: #010101;
  margin: 0;
  padding: 0;
}
.body p {
  font-size: 12px;
  color: #4c4c4c;
  text-align: justify;
  margin: 0;
  padding: 0;
  margin-bottom: 10px;
}
.body a {
  color: #010101;
  text-decoration: none;
}
.body a:hover {
  text-decoration: underline;
}
.bottom_panel {
  padding: 10px;
}
.bottom_panel .bottom_section_box_1 {
  float: left;
  width: 200px;
  margin: 0 20px 0 30px;;
  padding: 0;  
}
.bottom_panel .bottom_section_box_2 {
  float: left;
  width: 420px;
  margin: 5px 40px 0 40px;;
  padding: 0;  
}
.bottom_section_box_2 h3 {
  color: #d0cec2;
  font-size: 12px;
  font-weight: bold;
  margin:0;
  padding: 0;
  
}
.bottom_section_box_2 p {
  color: #d0cec2;
  font-size: 12px;  
  margin: 5px 0 0 0;
}
.bottom_panel #footer {
  
  margin: 0px 0 5px 0;
  padding: 5px 0 5px 0;
  width: 100%;
  color: #d0cec2;

}
#footer a {
  color: #d0cec2;
}
#footer a:hover {
  color: #FFFF00;
  text-decoration: underline;
}

</style>


</head>
<body>
<div id="background_section_top">
  <div class="container">
    <div id="header">
      <div id="logo_section">Old Wall</div>
      <div id="header_text"> 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. </div>
    </div>
    <!--  end of header section -->
  </div>
  <!--  end of container  -->
</div>
<!--  end of background Section top  -->
<div id="background_section_mid">
  <div id="background_section_bottom">
    <div class="container">
      <div id="left_section">
        <div class="section_box">
          <div class="section_title">Useful Links</div>
          <ul>
            <li><a href="http://www.free-css.com/">&raquo; Free CSS Templates</a></li>
            <li><a href="http://www.free-css.com/">&raquo; Free Flash Website</a></li>
            <li><a href="http://www.free-css.com/">&raquo; Web Design Blog</a></li>
            <li><a href="http://www.free-css.com/">&raquo; Free Photos</a></li>
            <li><a href="http://www.free-css.com/">&raquo; Premium Templates</a></li>
          </ul>
        </div>
        <div class="section_box_last">
          <div class="section_title">Services</div>
          <ul>
            <li><a href="http://www.free-css.com/">&raquo; Aliquam Elit Rrisus</a></li>
            <li><a href="http://www.free-css.com/">&raquo; Volutpat Quis</a></li>
            <li><a href="http://www.free-css.com/">&raquo; Elementum Eget</a></li>
            <li><a href="http://www.free-css.com/">&raquo; Habitasse Platea</a></li>
            <li><a href="http://www.free-css.com/">&raquo; Aenean Cursus</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</a></li>
          </ul>
        </div>
        <div class="image_box"> <a href="http://www.free-css.com/"><img src="old-wall-images/free.jpg" alt="" border="0" /></a> </div>
        <div class="section_box_2">
          <h3>RECENT ARTICLE</h3>
          <p>Tincidunt vitae, sagittis vel, interdum at, erat.</p>
        </div>
      </div>
      <!--  end of left  -->
      <div id="right_section">
        <div id="menu_section">
          <ul>
            <li><a href="http://www.free-css.com/" class="current">MAIN PAGE</a></li>
            <li><a href="http://www.free-css.com/">GALLERY</a></li>
            <li><a href="http://www.free-css.com/">ABOUT US</a></li>
            <li><a href="http://www.free-css.com/">CONTACT US</a></li>
          </ul>
        </div>
        <div class="content_area">
          <h1>WELCOME TO OUR WEBSITE</h1>
          <p>This website template is provided by TemplateMo. You may use this template for any of your websites.</p>
          <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc quis sem nec tellus blandit tincidunt. Duis vitae velit sed dui malesuada dignissim. Donec mollis aliquet ligula. Maecenas adipiscing elementum ipsum. Pellentesque vitae magna.</p>
          <p>Sed nec est. Suspendisse a nibh tristique justo rhoncus volutpat. Suspendisse vitae neque eget ante tristique vestibulum. 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. Provided by TemplateMo.com</p>
        </div>
        <div class="two_column_section">
          <div class="two_column_left">
            <h1>Popular Posts</h1>
            <div class="gallery_box">
              <p> <img alt="" src="old-wall-images/thumb_1.jpg" /> <span class="header"><a href="http://www.free-css.com/">Fusce blandit turpis vel quam</a></span><br />
                Integer malesuada sagittis sapien. Thank you for visiting. Cras mauris nulla, convallis eu, semper sit amet, scelerisque.</p>
            </div>
            <div class="gallery_box">
              <p> <img alt="" src="old-wall-images/thumb_2.jpg" /> <span class="header"><a href="http://www.free-css.com/">Proin vel libero id erat venenatis</a></span><br />
                Mollis mauris vitae erat. Aliquam eget elit. Quisque nec orci. Phasellus posuere, urna euismod feugiat accumsan. </p>
            </div>
            <div class="gallery_box">
              <p> <img alt="" src="old-wall-images/thumb_3.jpg" /> <span class="header"><a href="http://www.free-css.com/">Donec pellentesque quam</a></span><br />
                Augue tortor euismod enim, auctor volutpat massa orci et nisi. Donec libero. Proin sed purus ut elit molestie mollis. </p>
            </div>
          </div>
          <div class="two_column_right">
            <h1>Announcements</h1>
            <div class="body">
              <h2><a href="http://www.free-css.com/">AUGUST 15, 2024</a></h2>
              <p>Aliquam tristique lacus in sapien. Suspendisse potenti.</p>
              <h2><a href="http://www.free-css.com/">JULY 19, 2024</a></h2>
              <p>Ut sed pede. Nullam vitae tellus. Sed ultrices.</p>
              <h2><a href="http://www.free-css.com/">April 13, 2024</a></h2>
              <p>Sed nec est. Suspendisse a nibh tristique justo rhoncus volutpat.</p>
              <h2><a href="http://www.free-css.com/">FEBRUARY 24, 2024</a></h2>
              <p>varius a, orci. Mauris convallis. Proin vel libero id erat</p>
            </div>
          </div>
        </div>
        <!--  end of 2 column  -->
      </div>
      <!--  end of right  -->
      <div class="clener_with_height">&nbsp;</div>
    </div>
    <!--  end of container -->
  </div>
  <!--  end of background Section middle bottom  -->
</div>
<!--  end of background Section middle  -->
<div id="background_bottom">
  <div class="container">
    <div class="bottom_panel">
      <div class="bottom_section_box_1">
        <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/old-wall-images/vcss-blue" vspace="8" border="0" /> </a> </p>
      </div>
      <div class="bottom_section_box_2">
        <h3> Contact Information</h3>
        <p>Tel: 000-100-1000 &nbsp;&nbsp;&nbsp; Fax: 000-200-2000 &nbsp;&nbsp;&nbsp; Email: info _at_ templatemo.com</p>
        <div id="footer"> Copyright 2024 &copy; Company Name - Designed by <a href="http://www.templatemo.com">Free CSS Templates</a></div>
      </div>
      <div class="clener_with_height">&nbsp;</div>
    </div>
    <!--  end of  bottom  panel -->
  </div>
  <!--  end of container -->
</div>
<!--  end of background bottom  -->
</body>
</html>

   
    
    
  








Related examples in the same category

1.newave
2.newdarkside
3.newday
4.newera
5.newfangled
6.newgreeny
7.newgreys
8.newhorizon
9.news portal
10.news-print
11.newsbeat
12.newsflash
13.newsportal
14.newsroll
15.newstheme
16.newwave-business-inc
17.new_rise
18.NiceSite
19.nimbuslike
20.nixed
21.noimages
22.noname1
23.nonzero
24.nothingfanzy
25.nourish
26.nowhere
27.NuahSwirl
28.nullbullum
29.numerology
30.o-no-typography
31.obsess
32.obsession
33.obtanium
34.office-plants
35.offlimits
36.offrecord
37.oheon_com_110100021
38.ohgreenworld
39.Okeanos
40.oldarchitecture
41.Olive
42.one-penny
43.one_two_three
44.online-edu
45.onlinemoviestore
46.oodles
47.openyourwindows
48.opposed
49.optimal-touch
50.orchidaceae
51.ordinaire
52.ormeggiare
53.ornamental
54.ornate
55.OrngBlu
56.oswd_blozilla
57.our-work
58.ourhouse
59.outdoorv1.0
60.outliers
61.outoftheblue
62.outtabox
63.oxidation
64.package
65.paddy-harvest
66.pagedrape
67.paivi-k
68.paleforest
69.palmtrees
70.pamphlet
71.pancorbo
72.papira
73.paradigm
74.paradise1983
75.parchmenter
76.particle
77.particles
78.pastel
79.pastelco
80.pastelflowers
81.pastries
82.path-fider
83.patternmaker
84.PattyMcFatPat01
85.PattyMcFatPat03
86.pc
87.Pear Template
88.pear
89.pedestrian
90.penchantforphotos
91.pencilpink
92.people
93.perfectblemish
94.performance
95.perplex
96.personified
97.pillars
98.pills
99.pinnacle
100.Pistachio
101.pixabella
102.pixabella04
103.pixabella06
104.pixelationingreen
105.plaidshirt
106.plainandsimple
107.planning-feed
108.pluralism
109.plurkified
110.pointspace
111.pollinate
112.pollinating
113.pollination