space : Design 7 « Templates « HTML / CSS

space

  

<!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>Space</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type='text/css'>
* { 
  padding: 0;
  margin: 0;
}

body { 
background: #414b68 url(space-images/fd_body.gif) center;
padding: 0;
  margin: auto;
}

p {
font-size: 75%;
font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif}

h2 { 
text-transform: lowercase;
color: #fff;
}
h3 {
color: #6a83c7;border-bottom: 1px #5e5e5e solid;
font-size: 85%;
font-family: Trebuchet, Georgia;}
a { color: #d2d2c7;
text-decoration: underline;}

#wrap {  margin: 0px auto;  width: 910px; background: #211d2b ;
}



#header {
height: 225px;
margin: 0;
padding: 0;
background-image: url(space-images/head.jpg);}

#header h1 { margin: 0; padding-left: 1px; padding-top: 12px; font-size:95%;; color: #d1b606; }
#header h1 a {
color: #fff; text-decoration: none;
padding-left: 40px;
font-size: 95%;}
#header h2 { margin: 0; padding-left: 45px; padding-top: 2px;
color: #fff;
margin-top: 40px;
text-align: left;
text-indent: 205px;
font-size: 80%;}

#topmenu a { 
color: #FFF;
text-decoration: none;
line-height: 22px;
margin-right: 10px;}
 

#topmenu a:hover {color: #8093c9;}
#topmenu a:visited {color: #b4b4b4;}

#topmenu {  
font: 80%  "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
text-align: right;
background: #444 url(space-images/s_head.jpg);
margin-bottom: 5px;
color: #fff;
height: 22px;
}


#right {
font: 70%;
float: right;
width: 670px;
margin-top: 5px;
margin-left: 10px;
color: #f4f4f4;
}


#left { 
font: 70% "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
width: 200px;
padding: 0px;
display: block;
visibility: inherit;
float: left;
height: 10px;text-transform: uppercase;
margin-left: 5px;}

#left li { list-style-type: none; border-bottom: 1px dotted #fff;
padding-left: 0px;
background-color: #46516e;
margin-top: 2px;}
#left li a {text-decoration: none;
display:block; min-height:1.5em /*Non-IE6*/; height:auto !important; height:1.5em /*IE6*/; line-height:1.5em; padding:0px 10px 0px 40px; border:none; font-weight:normal; text-decoration:none; color: rgb(255,255,255);}
#left li a:hover { text-decoration:none;color: #000;background-color: #686f8b;
background-image: url(space-images/fd_btn_hover.gif);}

.extra {float: left;
color: #fff;
font-size: 80%;
width: 200px;
margin-top: 175px;
margin-left: 15px;}
.titre_extra {color: #6a83c7;border-bottom: 1px #5e5e5e solid;
font-size: 85%;
font-family: Trebuchet, Georgia;}

#footer {
clear:both; 
width:910px;
height: 23px;
margin: 0;
padding: 0;
background-color: #fff;
background-image: url(space-images/fd_btn_hover.gif);
text-align: center;
}
#footer a {
color: #000;}
.col1 {width: 650px; margin-bottom:5px /*IE6*/;text-align: justify;}

.left {float:left; margin:10px 10px 5px 0;}
.right {float:right; margin:10px 0 5px 10px;}

.img {
border: none;}


</style>


</head>
<body>
<div id="wrap">
  <div id="header">
    <h1> <a href="http://www.free-css.com/">Your website name here</a></h1>
    <h2>.: some text here what you want :.</h2>
  </div>
  <div id="topmenu"> <a href="http://www.free-css.com/">Home</a> | <a href="http://www.free-css.com/">About</a> | <a href="http://www.free-css.com/">Product</a> | <a href="http://www.free-css.com/">Designs</a> | <a href="http://www.free-css.com/">Gallery</a> | <a href="http://www.free-css.com/">Contact</a></div>
  <div id="right">
    <!-- Content unit - One column -->
    <div class="col1">
      <p>&nbsp;</p>
      <h3>Template just one restriction to use it <a href="http://www.free-css.com/">a link</a></h3>
      <p><span class="Style1"> if you want to use this template, please leave a link to studio-plume.org wherever you want </span></p>
      <p><img class="left" src="space-images/ill1.jpg" alt="" width="125" height="100" /></p>
      <p><span class="Style1"><br />
        explicabo</span></p>
      <p>Lorem ipsum dolor sit amet, consectetuer <a href="http://www.free-css.com/">adipiscing elit</a>, sed diam nonummy nibh euismod tincidunt ut laoreet dolore <a href="http://www.free-css.com/">magna aliquam</a> erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis. <a href="http://www.free-css.com/">Read more &raquo;</a></p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <h3>Sed ut perspiciatis <a href="http://www.free-css.com/">Architecto</a></h3>
      <p><span class="Style1"> Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui</span></p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <h3><span class="Style1">explicabo</span></h3>
      <p>Lorem ipsum dolor sit amet, consectetuer <a href="http://www.free-css.com/">adipiscing elit</a>, sed diam nonummy nibh euismod tincidunt ut laoreet dolore <a href="http://www.free-css.com/">magna aliquam</a> erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis. <a href="http://www.free-css.com/">Read more &raquo;</a></p>
      <p>&nbsp;</p>
      <h3>Sed ut perspiciatis <a href="http://www.free-css.com/">Architecto</a></h3>
      <p> <img class="right" src="space-images/ill1.jpg" alt="" width="125" height="100" /><br />
        Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <h3><span class="Style1">explicabo</span></h3>
      <p>Lorem ipsum dolor sit amet, consectetuer <a href="http://www.free-css.com/">adipiscing elit</a>, sed diam nonummy nibh euismod tincidunt ut laoreet dolore <a href="http://www.free-css.com/">magna aliquam</a> erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis. <a href="http://www.free-css.com/">Read more &raquo;</a></p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
    </div>
  </div>
  <div id="left">
    <ul>
      <li><a href="http://www.free-css.com/">Home</a></li>
      <li><a href="http://www.free-css.com/">About</a></li>
      <li><a href="http://www.free-css.com/">Product</a></li>
      <li><a href="http://www.free-css.com/">Designs</a></li>
      <li><a href="http://www.free-css.com/">Gallery</a></li>
      <li><a href="http://www.free-css.com/">Contact</a></li>
      <li><a href="http://www.free-css.com/">Photos</a></li>
      <li><a href="http://www.free-css.com/">Forum</a></li>
    </ul>
  </div>
  <div class="extra">
    <p class="titre_extra">Some news here</p>
    <p> archive 2006 </p>
    <p> archive 2007 </p>
    <p class="titre_extra">Some news here</p>
    <p> archive 2004 </p>
    <p> archive 2005 </p>
  </div>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <div id="footer">
    <p>design by kty<a href="http://www.studio-plume.org"> www.studio-plume.org</a></p>
  </div>
</div>
</body>
</html>

Related examples in the same category

1.	SimpleSimple
2.	simplestyle_1
3.	simplestyle_2
4.	simplestyle_3
5.	simplestyle_4
6.	simplestyle_5
7.	simplestyle_6
8.	pomodoro
9.	portcentral
10.	portfolio-extended
11.	portfolio
12.	postscriptum
13.	powderpuff
14.	power
15.	precision
16.	predilection
17.	premiumseries
18.	prepaid
19.	presented
20.	pressurized
21.	prideandprejudice
22.	primitiveelement
23.	printing
24.	pristine
25.	private-lawyer-co
26.	product-landing-page
27.	production
28.	ProductPackage
29.	programme
30.	progress
31.	projection
32.	proofing
33.	Prosperity
34.	province
35.	purensimple
36.	purgatory_shuffle
37.	puzzled
38.	quadrangle
39.	quartz-istorage
40.	quatrain
41.	racetrackplaya
42.	radiance
43.	rainonleaves
44.	ramblingsoul-2
45.	ramblingsoul-9
46.	ramblingsoul3
47.	ramblingsoul4
48.	ramblingsoul5
49.	ramblingsoul7
50.	ramblingsoul_2
51.	ramblingsoul_3
52.	random
53.	rational
54.	realize
55.	realone
56.	rebel-magazine
57.	reckoning
58.	recreations
59.	reference
60.	regeneracy
61.	rehabilitation
62.	reinvent
63.	replenish
64.	republic
65.	resizeme
66.	resplendissant
67.	revolt-01
68.	ridinghood
69.	rockband
70.	rogue
71.	Rothko
72.	route66
73.	rust
74.	safe-as-houses
75.	sahara
76.	sampling
77.	Sapphire
78.	schemermag
79.	scotchmark
80.	scribbled
81.	secretlab
82.	seduction
83.	selcouth
84.	sensa
85.	settings
86.	shallowgrunge
87.	shalom-typo
88.	shape
89.	she
90.	showcase
91.	sifiso
92.	silenceandharmony
93.	SILK
94.	Simpatico
95.	sindromk
96.	singapore
97.	sinorcaish
98.	six-oh-six
99.	sixpence
100.	sixties_style
101.	skipopia
102.	skitemplate
103.	sky
104.	sliced
105.	slight_amnesia
106.	socialnet
107.	softenedcells
108.	solemnity
109.	solitude
110.	soloss
111.	solutions
112.	somewhere-peaceful
113.	soniatemplate
114.	spaced
115.	spasaloon
116.	spatter
117.	speedracing
118.	spheroids
119.	spidercity
120.	splash
121.	splatt
122.	spontaneous