moderna : Design 4 « 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 » Design 4 




moderna
   

<!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>MODERNA</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type='text/css'>

body {
margin : 0;
padding : 0;
font : 73"lucida sans", tahoma, "Trebuchet MS", arial, verdana, sans-serif;
color : #555;
background : #f7f7f7;
}
#container {
width : 99.5%;
margin-left : auto;
margin-right : auto;
padding : 0;
line-height : 1.5em;
}
#banner {
height : 150px;
padding : 0;
background : #f7f7f7 url(moderna-images/image00.jpgno-repeat;
color : #333;
}
#banner h1 {margin : 0;
padding : 5px;
background : transparent;
color : #fff;
}
#navlist {
padding : 4px 5px 5px 0;
margin : 0 0 20px 0;
text-align : left;
letter-spacing : 3px;
color : #fff;
background : #476042;
}
#navlist li {
list-style : none;
margin : 0;
display : inline;
}
#navlist li a {
padding : 5px 0.75em;
margin : 0;
color : #fff;
background : #476042;
text-decoration : none;
}
#navlist li a:link {
color : #fff;
background : #476042;
}
#navlist li a:visited {
color : #fff;
background : #476042;
}
#navlist li a:hover {
color : #000;
background : #7ABA2E;
}
#navlist li a#current {
color : #fff;
background : #7ABA2E;
}
.menu ul li {
line-height : 1.8em;
margin : 0 10px 0 0;
padding : 0;
list-style-type : square;
color : #476042;
background : inherit;
}
.menu ul li a {
color : #f17c0b;
background : inherit;
}
.menu ul li a:hover {
color : #7ABA2E;
background : inherit;
}
#content {
padding : 0;
margin-left : 170px;
margin-right : 170px;
border-left : 1px dashed #333;
border-right : 1px dashed #333;
color : #555;
background-color : #f7f7f7;
}
#content p {
margin : 20px;
}
#sidebar-a {
float : left;
width : 140px;
margin-left : 5px;
padding : 0 5px 0 5px;
color : #666;
background : #f7f7f7;
}
#sidebar-b {
float : right;
width : 140px;
margin : 0 5px 0 0 ;
padding : 0 5px 15px 5px;
color : #333;
background : #faf8e9;
}
#footer {
clear : both;
padding : 5px;
margin : 0;
background : #476042;
color : #f7f7f7;
}

{
text-decoration : none;
color : #f17c0b;
background : inherit;
}
a:hover {
text-decoration : underline;
color : #aaa;
background : inherit;
}
a img {
border : 0;
}
.border {
padding : 10px;
margin : 10px;
border : 1px solid #476042;
}
.imgleft {
float : left;
border : 1px solid #90b905;
margin : 5px 10px 10px 15px;
padding : 5px;
}
h1 {
margin : 20px;
padding : 5px;
font-size : 150%;
letter-spacing : 3px;
color : #fff;
background : #476042;
}
h2 {
padding-left : 20px;
font-size : 140%;
text-transform : uppercase;
letter-spacing : 10px;
color : #476042;
background : inherit;
}
h3 {
padding : 5px;
text-transform : uppercase;
font-size : 110%;
color : #fff;
background : #476042;
}
h4 {
padding : 5px;
text-transform : uppercase;
font-size : 110%;
color : #fff;
background : #f17c0b;
}
blockquote {
font-weight : bold;
font-style : italic;
color : #b29b35;
}
.clear {
clear : both;
width : 100%;
}
.col3,.col3center {
float: left;
width: 30.5%;
}
.col3center {
margin: 0 3%;
}

</style>


</head>
<body>
<div id="container">
  <div id="banner">
    <h1>Your <span style="color: #000;">Company</span> Name</h1>
  </div>
  <ul id="navlist">
    <li id="active"><a id="current" href="http://www.free-css.com/">HOMEPAGE</a></li>
    <li><a href="http://www.free-css.com/">ABOUT</a></li>
    <li><a href="http://www.free-css.com/">GALLERY</a></li>
    <li><a href="http://www.free-css.com/">PRODUCTS</a></li>
    <li><a href="http://www.free-css.com/">LINKS</a></li>
    <li><a href="http://www.free-css.com/">CONTACT</a></li>
  </ul>
  <div id="sidebar-a">
    <h2>Links</h2>
    <div class="menu">
      <ul>
        <li><a href="http://www.free-css.com/">Snapp Happy</a></li>
        <li><a href="http://www.free-css.com/">Andreas Viklund</a></li>
        <li><a href="http://www.free-css.com/">James Koster</a></li>
        <li><a href="http://www.free-css.com/">OSWD</a></li>
        <li><a href="http://www.free-css.com/">CSS play</a></li>
        <li><a href="http://www.free-css.com/">Listamatic</a></li>
      </ul>
    </div>
    <p><img class="border" src="moderna-images/image02.jpg" alt="box" />Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse a tortor. </p>
  </div>
  <div id="sidebar-b">
    <h3>Information</h3>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse a tortor. Pellentesque sollicitudin, ante nec posuere tempus, arcu lectus vehicula mi, ac rhoncus lorem turpis sed sapien.</p>
    <h3>Gallery</h3>
    <img class="border" src="moderna-images/image02.jpg" alt="box" />
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse a tortor. </p>
  </div>
  <div id="content">
    <h2>Welcome to <span style="font-weight:bold; color:#891E18;">Moderna</span> Template</h2>
    <blockquote>All images were created by me so feel free to use them if you wish. The page has been tested in Mozilla and IE6/7. The page validates as XHTML 1.0 Transitional using valid CSS.<br />
      For more FREE CSS templates visit my website.</blockquote>
    <p><img class="imgleft" src="moderna-images/image02.jpg" alt="box" />Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse a tortor. Pellentesque sollicitudin, ante nec posuere tempus, arcu lectus vehicula mi, ac rhoncus lorem turpis sed sapien. Pellentesque <a href="http://www.free-css.com/">egestas</a>. Ut eros massa, dignissim at, auctor vitae, consectetuer ut, felis. Ut tincidunt sem in ipsum. </p>
    <p>This is a <a href="http://www.free-css.com/">link</a> to nowhere. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse a tortor. Pellentesque sollicitudin, ante nec posuere tempus, arcu lectus vehicula mi, ac rhoncus lorem turpis sed sapien. Pellentesque egestas. Ut eros massa, dignissim at, auctor vitae, consectetuer ut, felis. Ut tincidunt sem in ipsum. </p>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse a tortor. Pellentesque sollicitudin, ante nec posuere tempus, arcu lectus vehicula mi, ac rhoncus lorem turpis sed sapien. Pellentesque egestas. Ut eros massa, dignissim at, auctor vitae, consectetuer ut, felis. Ut tincidunt sem in ipsum. </p>
    <div class="col3">
      <h1>Article 1</h1>
      <div class="navlist">
        <ul>
          <li><a href="http://www.free-css.com/">BBC News</a></li>
          <li><a href="http://www.free-css.com/">Hartlepool Today</a></li>
          <li><a href="http://www.free-css.com/"> SV Horizons</a></li>
        </ul>
      </div>
    </div>
    <div class="col3center">
      <h1>Article 2</h1>
      <div class="navlist">
        <ul>
          <li><a href="http://www.free-css.com/">OWD</a></li>
          <li><a href="http://www.free-css.com/">CSS Drive</a></li>
          <li><a href="http://www.free-css.com/">Listamatic</a></li>
        </ul>
      </div>
    </div>
    <div class="col3">
      <h1>Article 3</h1>
      <div class="navlist">
        <ul>
          <li><a href="http://www.free-css.com/">Stu Nicholls</a></li>
          <li><a href="http://www.free-css.com/">Andreas Viklund</a></li>
          <li><a href="http://www.free-css.com/">Jay Kay</a></li>
        </ul>
      </div>
    </div>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse a tortor. Pellentesque sollicitudin, ante nec posuere tempus, arcu lectus vehicula mi, ac rhoncus lorem turpis sed sapien. Pellentesque egestas. Ut eros massa, dignissim at, auctor vitae, consectetuer ut, felis. Ut tincidunt sem in ipsum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse a tortor. Pellentesque sollicitudin, ante nec posuere tempus, arcu lectus vehicula mi, ac rhoncus lorem turpis sed sapien. Pellentesque egestas. Ut eros massa, dignissim at, auctor vitae, consectetuer ut, felis. Ut tincidunt sem in ipsum. </p>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse a tortor. Pellentesque sollicitudin, ante nec posuere tempus, arcu lectus vehicula mi, ac rhoncus lorem turpis sed sapien. Pellentesque egestas. Ut eros massa, dignissim at, auctor vitae, consectetuer ut, felis. Ut tincidunt sem in ipsum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </p>
  </div>
  <div id="footer"> <a href="http://www.free-css.com/">Homepage</a> | <a href="http://www.free-css.com/">contact</a> | &copy; 2007 Anyone | Design by <a href="http://www.mitchinson.net"> www.mitchinson.net</a> | Licensed under a <a rel="license" target="_blank" href="http://creativecommons.org/licenses/by/3.0/">Creative Commons Attribution 3.0 License</a></div>
</div>
</body>
</html>

   
    
    
  














Related examples in the same category
1.arrangement
2.arthemia
3.artica
4.aspherical
5.assiduous
6.asterisk
7.astounded
8.astroturfd
9.atomohost
10.atrandafir582
11.AttainDigital
12.audi-template
13.aurelius
14.authenticity
15.autoportal
16.axian
17.azulmedia2-1
18.azure
19.bagatelle
20.balanced
21.bananaleaf
22.barricade
23.begrimed
24.belowthehorizon
25.bennevis
26.bermuda01
27.besmart
28.bestwebdesign
29.beta
30.beyond
31.bigdeal
32.BigSpaceLove
33.bioessence
34.Biru_Manteb
35.bittersweet
36.Black
37.chamberlandsrestaurant
38.chara
39.characterized
40.charcoal
41.charitable-organization
42.chary
43.chasmogamous
44.chesspiece
45.chic
46.chicanery
47.chromz
48.churchsitev.2
49.citrus-island1-1
50.clementine
51.clicker
52.modernclassic
53.modernmagic
54.modernworld
55.A_Simple_Theme
56.minimalistica
57.miniseries
58.mint-idea
59.minty
60.mirax
61.miscellaneous
62.mistybud
63.mlpdesign02
64.mlpdesign03
65.mlpdesign04
66.mlpdesign08
67.model-4-me
68.model-portfolio
69.modelagency
70.modelportfolio
71.model_2
72.Modified
73.modulation
74.module-mag
75.mokofactory
76.monster
77.mork-horisont
78.mountainbreeze
79.mouse
80.mrtechie
81.multiflex2
82.multiple
83.multiplex
84.music
85.muzzle
86.MyCode
87.mydiary
88.myfamily
89.myhedspacefree08
90.mykindathing
91.myportfolio
92.mystic-garden
93.Mythology
94.myvalentine
95.naeve
96.natheless
97.nationalpark
98.neapolitan
99.neatness
100.nebuladog
101.nedweb
102.NelVoize
103.neoneon
104.neonix
105.neoplanet-01
106.neotech
107.netindustries
108.neuphoric
109.neutral
110.neutraldesk
111.neutralgreen
112.new kitchen design
113.new-fast-host
114.new-home
115.new-rise
116.new-year
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.