simplyred : Red « Templates « HTML / CSS






simplyred

  

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Simply Red</title>
<style type='text/css'>
/*
  Author  :  Christopher Robinson
  Email    :  christopher@edg3.co.uk
  Website  :  http://www.edg3.co.uk/
*/
* {
  border:0;
  margin:0;
  padding:0;
}

/* general */
a {
  color:#b3000a;
  text-decoration:none;
}
a:hover {
  color:#555;
  text-decoration:none;
}

/* body */
body {
  background:#343434 url('simplyred-image/background_body.jpg') 0 50% repeat-x;
  color:#666;
  font:0.8em "trebuchet ms", helvetica, sans-serif;
}

/* container */
#container {
  background:url('simplyred-image/background_container.jpg') no-repeat;
  height:530px;
  left:50%;
  margin:-265px 0 0 -380px;
  position:absolute;
  top:50%;
  width:760px;
}

/* navigation */
#navigation {  
  height:88px;
  padding:32px;
  width:696px;
}
#navigation ul {
  list-style:none;
}
#navigation ul li {
  float:right;
  height:88px;
  list-style:none;
  width:75px;
}
#navigation ul li a {
  color:#fff;
  display:block;
  height:50px;
  line-height:50px;
  padding:50px 0 0;
  text-align:center;
  width:75px;
}
#navigation ul li a:hover {
  background:url('simplyred-image/navigation.jpg') repeat-x;
  color:#111;
}
#navigation ul li a.active {
  background:url('simplyred-image/navigation.jpg') repeat-x;
}

/* content */
#content {  
  height:320px;
  overflow:auto;
  padding:0 42px;
  width:676px;
}
#content h1 {
  color:#333;
  font-size:200%;
}

/* footer */
#footer {
  color:#fff;
  height:20px;
  padding:35px;
  text-align:right;
  width:696px;
}
#footer a {
  color:#fff;
}

</style>


<meta http-equiv="content-type" content="text/html; charset=utf-8" />
</head>
<body>
<div id="container">
  <div id="navigation">
    <ul>
      <li><a href="http://www.free-css.com/">link four</a></li>
      <li><a href="http://www.free-css.com/">link three</a></li>
      <li><a href="http://www.free-css.com/" class="active">active link</a></li>
      <li><a href="http://www.free-css.com/">link one</a></li>
    </ul>
  </div>
  <div id="content">
    <h1>Important</h1>
    <p>Licensed under the <a target="_blank" href="http://creativecommons.org/licenses/by/2.5/">Creative Commons Attribution 2.5</a>. I have left the actual text design style very basic for you to add your own text / header / quotes / list etc. styles yourself.</p>
    <br />
    <h1>About</h1>
    <p>Designed by Christopher Robinson of EDG3.</p>
    <br />
    <p>This template would be great as a simple personal site which only needs little content and a few pages, you are free to use this design for whatever purpose you wish as long as you do <strong>NOT</strong> sell it or claim it as your own and you leave the link back to my site at the bottom of your pages.</p>
    <br />
    <p>This design is heavily image based yet only uses roughly 100kb of images in its construction.</p>
    <br />
    <p>A logo could be simply inserted into the main image file via editing it in any paint / photoshop program if needed / wanted. Now for some filler text so you can see the scrolling content area.</p>
    <br />
    <h1>header two</h1>
    <p>Volutpat at varius sed sollicitudin et, arcu. Vivamus viverra. Nullam turpis. Vestibulum sed etiam. Lorem ipsum sit amet dolore. Nulla facilisi. Sed tortor. Aenean felis. Quisque eros. Cras lobortis commodo metus. Vestibulum vel purus. In eget odio in sapien adipiscing blandit. Quisque augue tortor, facilisis sit amet, aliquam, suscipit vitae, cursus sed, arcu lorem ipsum dolor sit amet. Fermentum at, varius pretium, elit. Mauris egestas scelerisque nunc. Mauris non ligula quis wisi laoreet malesuada. In commodo. Maecenas lobortis cursus dolor.</p>
    <br />
    <h1>header three</h1>
    <p>Volutpat at varius sed sollicitudin et, arcu. Vivamus viverra. Nullam turpis. Vestibulum sed etiam. Lorem ipsum sit amet dolore. Nulla facilisi. Sed tortor. Aenean felis. Quisque eros. Cras lobortis commodo metus. Vestibulum vel purus. In eget odio in sapien adipiscing blandit. Quisque augue tortor, facilisis sit amet, aliquam, suscipit vitae, cursus sed, arcu lorem ipsum dolor sit amet. Fermentum at, varius pretium, elit. Mauris egestas scelerisque nunc. Mauris non ligula quis wisi laoreet malesuada. In commodo. Maecenas lobortis cursus dolor.</p>
  </div>
  <div id="footer"> Copyright &copy; <a href="http://www.free-css.com/">Simply Red</a> 2007
    &nbsp;&nbsp;|&nbsp;&nbsp;
    Designed by <a href="http://www.edg3.co.uk/">edg3.co.uk</a> &nbsp;&nbsp;|&nbsp;&nbsp;
    Valid <a target="_blank" href="http://jigsaw.w3.org/css-validator/">CSS</a> &amp; <a target="_blank" href="http://validator.w3.org/">XHTML</a> </div>
</div>
</body>
</html>

   
    
  








Related examples in the same category

1.metamorph_blackandred
2.metamorph_blackonred
3.metamorph_red
4.metamorph_redandblack_lt
5.metamorph_reddie
6.metamorph_redfirm
7.metamorph_redflowers_lt
8.metamorph_redinfinity
9.metamorph_redmadness
10.metamorph_redornament
11.metamorph_redstorm
12.All_The_Reds
13.freecss_lightred
14.sleek-red
15.red haze
16.red-accent
17.red-round
18.redalert
19.redavenue
20.redBull
21.redbusiness
22.redcrazycss
23.reddy
24.Redfire2
25.redflex
26.redhaze
27.redhive
28.redish
29.RedLight
30.redline
31.RedOneTemplate
32.redpassion
33.redpepper
34.redplanet
35.redroses
36.redsnow
37.RedSquareShadow
38.red_city
39.Red_Hot
40.Red_Hot_Brazil
41.red_music
42.Red_Splash
43.Red_Tube_Simple
44.Red 2