communication-1.0 : Design 3 « Templates « HTML / CSS






communication-1.0

   

<!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>Communicaton 1.0</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type='text/css'>
/*
Template Design by ZhengDesign.com
http://www.zhengdesign.com
Released for free under a Creative Commons Attribution-Share Alike 3.0 Philippines
*/

* {
  margin: 0;
  padding: 0;
}


html, body {
  height: 100%;
}

body {
  margin: 0;
  background: #1B2430 url(communication-1.0-images/image01.jpg) repeat left top;
  line-height: 20px;
  text-align: justify;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
  color: #FFFFFF;
}

h1, h2, h3 {
  margin-top: 1.5em;
}

h1 {
  font-size: 2em;
}

h2 {
  font-size: 1.4em;
}

h3 {
  font-size: 1em;
}

p, ul, ol {
  margin-top: 1.5em;
}

ul, ol {
  margin-left: 3em;
}

blockquote {
  margin-left: 3em;
  margin-right: 3em;
}

a {
  color: #B6D434;
}

#wrapper {
  width: 920px;
  height: 100%;
  min-height: 100%;
  margin: 0 auto;
  padding: 0px;
  background: url(communication-1.0-images/image02.jpg) repeat-y left top;
}

html>body #wrapper {
  height: auto;
}

#logo {
  width: 920px;
  height: 70px;
  margin: 0 auto;
  padding-top: 50px;
  padding-left: 50px;
  background: url(communication-1.0-images/image03.jpg) repeat-y left top;
}

#logo h1 {
  margin: 0px;
  padding: 0px;
  letter-spacing: -3px;
  text-transform: uppercase;
  font-weight: normal;
  font-size: 36px;
  color: #DCECFB
}

#logo p {
  margin: 0px;
  padding: 5px 0px 0px 2px;
  text-transform: uppercase;
  font-size: 12px;
  font-weight: normal;
  color: #000000;
}

#logo span {
  margin: 0px;
  padding: 0px;
  font-size: 16px;
}

#header {
  width: 920px;
  height: 270px;
  margin: 0 auto;
  background: url(communication-1.0-images/image05.jpg) no-repeat left top;
}

#menu {
  width: 920px;
  height: 90px;
  margin: 0 auto;
  background: url(communication-1.0-images/image04.jpg) no-repeat left top;
  color: #FFFFFF;
}

#menu ul {
  margin: 0px;
  padding: 20px 55px;
  list-style: none;
}

#menu li {
  display: inline;
}

#menu a {
  display: block;
  float: left;
  margin-right: 3px;
  padding: 6px 30px 6px 30px;
  text-decoration: none;
  color: #FFFFFF;
}

#menu .active {
  background: #B6D434;
  color: #000000;
}

#menu a:hover {
  background: #B6D434;
  color: #000000;
}

#page {
  width: 920px;
  margin: 0 auto;
  padding: 20px 0px;
  background: url(communication-1.0-images/image06.jpg) repeat-y left top;
}

#content {
  float: left;
  width: 476px;
  padding: 0px 40px 0px 70px;
  background: url(communication-1.0-images/image08.jpg) repeat-y right top;
}

#content h2 {
  letter-spacing: -1px;
  text-transform: uppercase;
  font-weight: normal;
  font-size: 24px;
  color: #B6D434;
}

#content .byline {
  margin: 0px;
  padding: 0px;
  letter-spacing: -1px;
  text-transform: uppercase;
  font-size: 24px;
}

#sidebar {
  float: right;
  width: 224px;
  padding: 0px 70px 0px 40px;
}

#sidebar a {
}

#sidebar .more {
  display: block;
  width: 70px;
  height: 22px;
  padding: 0px 0px 0px 16px;
  background: url(communication-1.0-images/image09.jpg) no-repeat left top;
  text-decoration: none;
  font-size: 10px;
  color: #000000;
} 

#sidebar h2 {
  text-transform: uppercase;
  font-size: 20px;
  font-weight: normal;
}

#footer {
  clear: both;
  width: 920px;
  margin: 0 auto;
  padding: 20px;
  background: url(communication-1.0-images/image07.jpg) no-repeat left top;
}

#footer p {
  margin: 0px;
  padding: 0px;
  text-align: center;
  text-transform: uppercase;
  font-size: 10px;
  color: #FFFFFF;
}

#footer a {
  color: #FFFFFF;
}

</style>


</head>
<body>
<div id="wrapper">
  <div id="logo">
    <h1>Communicaton 1.0</h1>
    <p>Free CSS Template</p>
  </div>
  <div id="menu">
    <ul>
      <li><a href="#" class="active">About Us</a></li>
      <li><a href="#">Services</a></li>
      <li><a href="#">Solutions</a></li>
      <li><a href="#">Partners</a></li>
      <li><a href="#">Training</a></li>
      <li><a href="#">Support</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </div>
  <div id="header">&nbsp;</div>
  <div id="page">
    <div id="content">
      <h2>Welcome to my website </h2>
      <p class="byline">Lorem Ipsum Dolor Sit Amit</p>
      <p><strong>Communication v1.0</strong> is a free CSS web template. This design uses pure CSS and no tables for layout and is released under the <a href="http://creativecommons.org/licenses/by-sa/3.0/ph/">Creative Commons Attribution-Share Alike 3.0 Philippines License</a>, which basically says that:</p>
      <ul>
        <li>You <strong>CAN</strong> use this design for both personal or commercial purposes free of charge.</li>
        <li>You <strong>CAN</strong> copy, distribute and transmit this template.</li>
        <li>You <strong>CAN</strong> modify this template however you want.</li>
      </ul>
      <p>Thanks goes to <a href="#">Stock Exchange</a> for the free photo I used in this template. </p>
      <p>&nbsp;</p>
    </div>
    <div id="sidebar">
      <h2>Latest News</h2>
      <p>Nunc euismod, felis et adipiscing volutpat, mauris ligula lacinia lacus ac accumsan pede lacus sed nulla.</p>
      <p><a href="#" class="more">Read More</a> </p>
      <p>Nunc euismod, felis et adipiscing volutpat, mauris ligula lacinia lacus ac accumsan pede lacus sed nulla.</p>
      <p><a href="#" class="more">Read More</a> </p>
    </div>
    <div style="clear: both;">&nbsp;</div>
  </div>
  <div id="footer">
    <p>&copy;&nbsp;Copyright 2009. All Rights Reserved | Design by <a href="http://www.zhengdesign.com">zhengdesign.com</a> </p>
  </div>
</div>
</body>
</html>

   
    
    
  








Related examples in the same category

1.blankspace
2.Blasphemy
3.blended
4.blewwave
5.blootoon
6.blush
7.boardroom
8.BOOM
9.boorish
10.boosting
11.bordered
12.boswell
13.bounderies
14.boxedtype
15.boxes_template
16.boxybox
17.branches
18.breaking_ontop
19.brewedcoffee
20.brightfolio
21.brightsideoflife1.0
22.Broadcaster
23.broadsheet
24.brycesunrise
25.bucolic
26.burgeon
27.buzz
28.BW
29.bwdec2007
30.calliope
31.callofduty2
32.candiiclouds
33.cantya-studio
34.canuckington-post
35.canvass
36.capricious
37.capsicum
38.carbonated
39.carbonizer
40.carlmelon
41.caronline
42.carrera
43.castellated
44.catch_info
45.cattleya
46.center-stage
47.COIL
48.col1
49.col2
50.col3
51.collaboration
52.collectiveblue
53.collegemusic
54.colorus
55.colosseum
56.columna
57.combination
58.ComingSoon
59.commission
60.communication-co
61.communication
62.community-live
63.compiled
64.complete-collection
65.complimentary
66.component
67.compressed
68.compromise
69.compus
70.conceptnova
71.concrete
72.concurrence
73.condition
74.conglomerate
75.conjunction
76.connection
77.connections
78.consulting-co
79.contemplate
80.convergence
81.cookiefusion
82.Copy of modify
83.corporattica
84.Cosmopolitan
85.counterstrike
86.cover
87.coverage
88.coxswain
89.creamburn
90.crisp2
91.criterion
92.crystalblack
93.css-heaven-1
94.cssgallery
95.cssheaven-2
96.cssmajesty
97.cubismo
98.cultivated
99.cultureshock
100.cupofcoffee
101.customary
102.customize
103.cyano
104.cyanspark
105.cyberarray
106.daleri-mega
107.daleri-structure
108.dalmatians
109.danmyaz1
110.dapple
111.david-kruger
112.deardiary
113.decorative
114.deepimpact
115.deerpark
116.dekada
117.delta
118.delzep_enterprise
119.description
120.deserted
121.desertsand
122.design-gallery
123.design-studio
124.design10
125.Design9
126.designersstudio
127.designersworld
128.designgalo
129.designhq
130.designstudio
131.Design_Agency
132.deskspace
133.detachable
134.deviation
135.devision
136.dewdrops
137.dezinstudio
138.didactic
139.Did_My_Time
140.differential
141.digitalweb
142.dimension
143.diminishing
144.dirtylicious
145.disambiguation
146.discovery
147.distillate
148.distinctive
149.diversity
150.DJ