our-work : Design 6 « Templates « HTML / CSS






  1. HTML / CSS
  2. Templates
  3. Design 6

our-work

   

<!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>Our Work | Gallery</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type='text/css'>
body {
  margin: 0;
  padding: 0;
  line-height: 1.7em;
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  font-size: 12px;
  color: #d1c7ba;
    background: #372e23;
}
    
a:link, a:visited { color: #ffffff; text-decoration: none; font-weight: normal; } 
a:active, a:hover { color: #FFFF33; text-decoration: underline; }

p { margin: 0px; padding: 0px; }

img { margin: 0px; padding: 0px; border: none; }

.cleaner { clear: both; width: 100%; height: 0px; font-size: 0px;  }

.cleaner_h10 { clear: both; width:100%; height: 10px; }
.cleaner_h20 { clear: both; width:100%; height: 20px; }
.cleaner_h30 { clear: both; width:100%; height: 30px; }
.cleaner_h40 { clear: both; width:100%; height: 40px; }
.cleaner_h50 { clear: both; width:100%; height: 50px; }
.cleaner_h60 { clear: both; width:100%; height: 60px; }

h1 {
  margin: 0px;
  padding: 2px 0;
  font-size: 30px;
  font-weight: bold;
}

h2 {
  margin: 0 0 15px 0;
  padding: 10px 0;
  font-size: 26px;
  font-weight: bold;
  color: #ffffff;
}

h3 {
  margin: 0 0 10px 0;
  padding: 0px;
  font-size: 16px;
  font-weight: bold;
  color: #a8ae12;
}

.image_wrapper {
  margin-top: 3px;
  margin-bottom: 5px;
  border: 5px solid #e8e8e8;
  padding: 1px;
  background: #fff;
}

.fl_image {
  float: left;
  margin-right: 30px 
}

.fr_image {
  float: right;
  margin-left: 20px 
}

.button_01 a {
  display: block;
  width: 97px;
  height: 28px;
  padding: 6px 35px 0 2px;
  color: #372e23;
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  text-decoration: none;
  background: url(our-work-images/button_01_bg.jpg) no-repeat;
}

.button_01 a:hover {
  color: #372e23;
  background: url(our-work-images/button_01_bg_hover.jpg) no-repeat;
}

.button_02 a {
  display: block;
  padding: 2px 0 0 24px;
  color: #9b9c11;
  font-size: 14px;
  font-weight: bold;
  text-decoration: none;
  background: url(our-work-images/link_button.jpg) center left no-repeat;
}

.fl { float: left; }
.fr { float: right; }

.margin_r_10 { margin-right: 10px; }
.margin_r_20 { margin-right: 20px; }
.margin_r_40 { margin-right: 40px; }

/* site title */

#site_title_bar_wrapper {
  width: 100%;
  height: 100px;
  margin: 0 auto;  
  background: url(our-work-images/site_title_bg_wrapper.jpg) no-repeat center top;
}

#site_title_bar {
  width: 950px;
  height: 100px;
  margin: 0 auto;
  padding: 0 20px;
  background: url(our-work-images/site_title_bg.jpg) no-repeat center top;
}

#site_title_bar  #site_title {
  float: left;
  padding: 30px 0 0 0;
}

#site_title h1 a {
  margin: 0px;
  padding: 0px;
  font-size: 24px;
  color: #ffffff;
  font-weight: bold;
  text-decoration: none;
}

#site_title h1 a:hover {
  font-weight: bold;  
  text-decoration: none;
}

#site_title h1 a span {
  display: block;
  margin-left: 5px;
  font-size: 14px;
  color: #dccdcd;
  font-weight: bold;
  letter-spacing: 4px;
}


#site_title_bar .social_network {
  float: right;
  margin: 0px;
  padding: 20px 0 0 0;
  list-style: none;
}


.social_network li {
  margin: 0px;
  padding: 0px;
  display: inline;
}

.social_network li a {
  float: left;
  display: block;
  width: 62px;
  height: 78px;
  margin-left: 10px;
}
/* end of site title */

/* banner */

#banner_wrapper {
  width: 100%;
  height: 310px;
  margin: 0 auto;  
  background: url(our-work-images/banner_bg_wrapper.jpg) no-repeat center top;
}

#banner {
  width: 890px;
  height: 210px;
  margin: 0 auto;
  padding: 50px 50px;
  background: url(our-work-images/banner_bg.jpg) no-repeat center top;
}

#banner #banner_content {
  float: left;
  width: 550px;
}

#banner #banner_content h2 {
  font-size: 40px;
  margin-bottom: 20px;
  color: #000000;
  font-weight: normal;
}

#banner #banner_content p {
  line-height: 28px;
  font-size: 26px;
  letter-spacing: 2px;
  color: #666666;
  margin-bottom: 20px;
}

#banner #banner_content span {
  color: #e88d23;
}

#banner .banner_image {
  float: right;
  width: 253px;
  height: 247px;
  background: url(our-work-images/banner_image.png) no-repeat;
}

/* end of banner */

/* menu */

#menu_wrapper {
  width: 100%;
  height: 60px;
  margin: 0 auto;  
  background:  url(our-work-images/menu_bg_wrapper.jpg) no-repeat center top;
}

#menu {
  width: 950px;
  height: 60px;
  margin: 0 auto;
  padding: 0 20px;
  background: url(our-work-images/menu_bg.jpg) no-repeat center top;
}

#menu ul {
  float: left;
  margin: 0px;
  padding: 5px 0 0 0;
  list-style: none;
}

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

#menu ul li a {
  position: relative;
  float: left;
  display: block;
  width: 118px;
  height: 42px;
  padding: 13px 0 0 0;
  text-align: center;
  font-size: 16px;
  text-decoration: none;
  color: #ffffff;  
  font-weight: bold;
  outline: none;
  background: url(our-work-images/menu_button_bg.png) no-repeat;
}

#menu li a:hover, #menu li .current {
  background:url(our-work-images/menu_button_bg_hover.png) no-repeat;
}

/* end of menu */

/* content */

#content {
  width: 940px;
  margin: 0 auto;
  padding: 50px 25px;  
  background: url(our-work-images/content_middle.jpg) repeat-y center top;
}

#content #twitter_section {
  clear: both;
  margin-bottom: 20px;
}

#content #twitter_section p {
  float: left;
  width: 800px;
  font-size: 26px;
  line-height: 34px;
  color: #2a90c1;
}

#content #twitter_section .followme a {
  display: block;
  float: right;
  width: 128px;
  height: 128px;
  background: url(our-work-images/twitter.png) no-repeat;
}

#content p {
  margin-bottom: 10px;
}

.section_w940 {
  clear: both;
  width: 940px;
}

.section_w600 {
  float: left;
  width: 600px;
}

.section_w300 {
  float: left;
  width: 300px;
}

.news_box{
  margin-bottom: 10px;
  border-bottom: 1px dashed #ccc;  
  color: #ffffff;
}

.news_box .post_info {
  color: #AAAAAA;
}

.news_box .post_info a {
  color: #ffffff;
  font-weight: bold;
}

.news_box .post_info strong {
  color: #ffffff;
}

.news_box a{
  color: #bac019;
}

.featured_project {
  float: left;
  width: 280px;
  margin-bottom: 40px;
}

.featured_project h3 {

}

.featured_project img {
  margin-bottom: 10px;
  border: 5px solid #4d4337;
}


.featured_project p {
  margin-bottom: 10px;
  
}

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

.paging li {
  margin: 0px;
  padding: 0px;
  display: inline;
}

.paging li a {
  float: left;
  display: block;
  padding: 1px 5px;
  background: #221c14;
  margin-right:2px;
}

.paging li a:hover, .paging li .current {
  text-decoration: none;
  background: #a8ae12;
}

/* content */

/* footer */

#footer_wrapper {
  width: 100%;
  margin: 0 auto;
  background: #221c14 url(our-work-images/footer_bg.jpg) repeat-x top;
}

#footer {
  width: 960px;
  margin: 0 auto;
  padding: 40px 10px;
  color: #cccccc;
}

#footer  a {
  color: #ffffff;
}

#footer .section_w240 {
  float: left;
  width: 200px;
  padding-right: 40px;
}

#footer .section_w240 h3 {
  font-size:14px;
  font-weight: bold;
  color: #a8ae12;
  
}

#footer .footer_list {
  margin: 0px;
  padding: 0px;
  list-style: none;
}

#footer .footer_list li {
  margin: 0px;
  padding: 3px 0;
}

#footer .footer_list li a {
  color: #cccccc;
}

#footer .footer_list li a:hover {
  color: #a8ae12;
  text-decoration: none;
}
/* end of footer */

</style>


</head>
<body>
<div id="site_title_bar_wrapper">
  <div id="site_title_bar">
    <div id="site_title">
      <h1><a href="#"> <img src="our-work-images/logo.png" alt="" /> <span>free css templates</span> </a></h1>
    </div>
    <ul class="social_network">
      <li><a href="#"><img src="our-work-images/facebook_icon.png" alt="" /></a></li>
      <li><a href="#"><img src="our-work-images/linkin_icon.png" alt="" /></a></li>
      <li><a href="#"><img src="our-work-images/twitter_icon.png" alt="" /></a></li>
    </ul>
  </div>
  <!-- end of site_title_bar -->
</div>
<!-- end of site_title_bar_wrapper -->
<div id="menu_wrapper">
  <div id="menu">
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About Us</a></li>
      <li><a href="#">Portfolio</a></li>
      <li><a href="gallery.html" class="current">Gallery</a></li>
      <li><a href="#" class="last">Contact Us</a></li>
    </ul>
  </div>
  <!-- end of menu -->
</div>
<!-- end of menu_wrapper -->
<div id="content">
  <div class="section_w940">
    <h2>Web Design Projects</h2>
    <div class="featured_project margin_r_40">
      <h3>Project One</h3>
      <a href="#"><img src="our-work-images/image_01.jpg" alt="" /></a>
      <p>Nulla felis nibh, laoreet quis pharetra vel, rhoncus quis est. Pellentesque dictum blandit sagittis. Aenean hendrerit dolor quis nisl sollicitudin ornare.</p>
      <div class="button_02"><a href="#">Visit Site</a></div>
    </div>
    <div class="featured_project margin_r_40">
      <h3>Project Two</h3>
      <a href="#"><img src="our-work-images/image_02.jpg" alt="" /></a>
      <p>In in neque nisl. Sed eget consectetur urna. Donec iaculis, nunc eu auctor vehicula, augue ipsum feugiat arcu, non euismod arcu nibh sit amet arcu.</p>
      <div class="button_02"><a href="#">Visit Site</a></div>
    </div>
    <div class="featured_project">
      <h3>Project Three</h3>
      <a href="#"><img src="our-work-images/image_03.jpg" alt="" /></a>
      <p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Morbi quis orci libero. Mauris elementum convallis sodales.</p>
      <div class="button_02"><a href="#">Visit Site</a></div>
    </div>
    <div class="cleaner"></div>
    <div class="featured_project margin_r_40">
      <h3>Project Four</h3>
      <a href="#"><img src="our-work-images/image_04.jpg" alt="" /></a>
      <p>Donec et leo dui, eu varius augue. Duis posuere lectus non mi egestas et mollis lectus dignissim. Donec egestas fringilla quam eu cursus.</p>
      <div class="button_02"><a href="#">Visit Site</a></div>
    </div>
    <div class="featured_project margin_r_40">
      <h3>Project Five</h3>
      <a href="#"><img src="our-work-images/image_05.jpg" alt="" /></a>
      <p>Fusce sollicitudin rhoncus eros, at fringilla nisl tempor sed. Curabitur nec risus id augue consequat bibendum. Mauris venenatis feugiat suscipit.</p>
      <div class="button_02"><a href="#">Visit Site</a></div>
    </div>
    <div class="featured_project">
      <h3>Project Six</h3>
      <a href="#"><img src="our-work-images/image_06.jpg" alt="" /></a>
      <p>Mauris eros augue, consequat luctus cursus aliquam, molestie eget quam. Donec eu libero erat. Integer nec dolor ac mi feugiat vulputate et sit amet orci.</p>
      <div class="button_02"><a href="#">Visit Site</a></div>
    </div>
    <div class="cleaner"></div>
    <ul class="paging">
      <li><a href="#" class="current">1</a></li>
      <li><a href="#">2</a></li>
      <li><a href="#">3</a></li>
      <li><a href="#">4</a></li>
      <li><a href="#">5</a></li>
      <li><a href="#">Next</a></li>
    </ul>
  </div>
</div>
<!-- end of content -->
<div id="content_bottom"></div>
<div id="footer_wrapper">
  <div id="footer">
    <div class="section_w240">
      <h3>Privacy Policy</h3>
      <div class="sub_content">
        <p>Nullam ultrices tempor nisi, ac egestas diam aliquam a. Ut eleifend semper turpis, id feugiat arcu dignissim eu. Donec mattis adipiscing imperdiet.</p>
      </div>
    </div>
    <div class="section_w240">
      <h3>XHTML/CSS validations</h3>
      <div class="sub_content">
        <p>Aliquam vehicula accumsan arcu, vestibulum cursus purus lobortis eu. Pellentesque vitae neque non lorem vehicula adipiscing. </p>
        <div class="cleaner_h20"></div>
      </div>
    </div>
    <div class="section_w240">
      <h3>Partners</h3>
      <div class="sub_content">
        <ul class="footer_list">
          <li><a href="#">Free CSS Templates</a></li>
          <li><a href="#">Free Flash Files</a></li>
          <li><a href="#">Premium Web Templates</a></li>
          <li><a href="#">Web Design Tips</a></li>
          <li><a href="#">Best Flash Websites</a></li>
        </ul>
      </div>
    </div>
    <div class="section_w240">
      <h3>About</h3>
      <div class="sub_content">
        <ul class="footer_list">
          <li><a href="#">Lorem ipsum dolor</a></li>
          <li><a href="#">Cum sociis</a></li>
          <li><a href="#">Donec quam</a></li>
          <li><a href="#">Nulla consequat</a></li>
          <li><a href="#">In enim justo</a></li>
        </ul>
      </div>
    </div>
    <div class="cleaner_h40"></div>
    <center>
      Copyright &copy; 2048 <a href="#">Your Company Name</a> | Designed by <a href="http://www.templatemo.com/">Free CSS Templates</a>
    </center>
  </div>
  <!-- end of footer -->
</div>
<!-- end of footer wrapper -->
</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.old-wall
41.oldarchitecture
42.Olive
43.one-penny
44.one_two_three
45.online-edu
46.onlinemoviestore
47.oodles
48.openyourwindows
49.opposed
50.optimal-touch
51.orchidaceae
52.ordinaire
53.ormeggiare
54.ornamental
55.ornate
56.OrngBlu
57.oswd_blozilla
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