foxy : Design 5 « Templates « HTML / CSS






foxy

    

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>foxy - free web template</title>
<style type='text/css'>
/*
  global
*/
* {
  padding:0;
  margin:0;
}
body {
  font-family:Georgia, "Times New Roman", Times, serif;
  font-size:1.0em;
  background-color:#333333;
  margin:0 auto;
  padding:0;
  height:100%;
}

/*
  structure 
*/
div#wrap {
  min-height:100%;
  margin:0 auto;
  width:80%;
  padding-top:40px;
}
div#header {
  background-image:url('foxy-images/header-middle.png');
  background-repeat:repeat-x;
  background-position:top left;
  height:149px;
}
div#innerheader {
  background-image:url('foxy-images/header-right.png');
  background-repeat:no-repeat;
  background-position:top right;
  height:149px;
}
div#title {
  background-image:url('foxy-images/header-left.png');
  background-repeat:no-repeat;
  background-position:top left;
  height:149px;
  padding-top:30px;
  padding-left:30px;
}
div#content {
  border-left:6px solid #414141;
  border-right:6px solid #414141;
  background-color:#AE0000;
}
div#page {
  background-color:#ffffff;
  width:70%;
  float:left;
  min-height:100px;
  background-image:url('foxy-images/page-corner.png');
  background-position:top right;
  background-repeat:no-repeat;
}
div.innerpage {
  padding:10px;
  background-image:url('foxy-images/page-corner-bottom.png');
  background-repeat:no-repeat;
  background-position:bottom right;
}

div#sidebar {
  width:27%;
  float:left;
  margin-top:50px;
}



/*
  nav
*/
div#sidebar ul {
  list-style:none;
  margin:0;
  padding:0;
}
div#sidebar ul li {
}
div#sidebar ul li a {
  background-color:#910000;
  color:#ffffff;
  border-bottom:2px solid #7D0000;
  border-right:2px solid #7D0000;
  border-left:1px solid #620000;
  display:block;
  padding:16px 7px;
  text-decoration:none;
  font-size:0.9em;
}
div#sidebar ul li a:hover {
  background-color:#880000;
}



/*
  headers
*/
h1 {
  color:#ffffff;
  font-size:2.8em;
  font-family:Georgia, "Times New Roman", Times, serif;
  font-weight:normal;
}
h2 {
  color:#4A0000;
  font-weight:normal;
  padding:0;
  margin:-10px 0 0 0;
}

h3 {
  font-size:1.4em;
  color:#7F0000;
  font-weight:normal;
}



/*
  links
*/
a {
  color:#910000;
}
a:hover {
  color:#880000;
}
div#sidebar ul li a.selected, div#sidebar ul li a.selected:hover {
  background-color:#ffffff;
  border-left:none;
  border-right:none;
  font-weight:bold;
  color:#910000;
}



/*
  paragraphs
*/
p {
  font-size:0.9em;
  color:#333333;
  line-height:2.05em;
  padding-bottom:20px;
}



/*
  footer
*/
div#footer {
  padding:10px 0;
  border-left:6px solid #414141;
  border-right:6px solid #414141;
  background-color:#AE0000;
}
div#footer p {
  text-align:center;
  margin:0;
  padding:0;
}
div#footer p, div#footer a {
  color:#ffffff;
  font-family:Arial, Helvetica, sans-serif;
}



/*
  forms, labels, inputs
*/
input.button {
  font-weight:bold;
  padding:5px 15px;
}
input, textarea {
  padding:5px;
  background-color:#ffffff;
  border:1px solid #dddddd;
}
label {
  font-weight:bold;
}
form input.formbutton {
  background-color:#950303;
  color:#FFFFFF;
  font-weight:bold;
  padding:5px 10px;
}



/*
  tabbles
*/
table {
  width:100%;
  font-size:0.85em;
}
table tr th {
  color:#ffffff;
  background-color:#333333;
}
table tr th, table tr td {
  padding:5px 10px;
  text-align:left;
}
table tr td {
  border-bottom:1px solid #dddddd;
}



/*
  lists
*/
div.sidebar ul {
  list-style:none;
  padding:0;
  border-top:4px solid #dddddd;
  margin:0 0 20px 0
}
ul {
  margin:0 0 20px 20px;
  padding:0;
  list-style:square;
}
ul li {
  padding:3px 0;
}



/*
  miscs
*/
code {
  border:1px solid #cccccc;
  background-color:#dddddd;
  color:#333333;
  display:block;
  padding:10px 5px;
  margin:10px 0;
}
.clear {
  clear:both; 
}
.right { 
  float:right; 
}
.left  {
  float:left;  
}
*:focus {
  outline:none;
}

</style>


</head>
<body>
<div id="wrap">
  
  <div id="header">
    <div id="innerheader">
      <div id="title">
        <h1>foxy template</h1>
        <h2>Another free web template by spyka webmaster</h2>
      </div>
    </div>
  </div>
  
  <div id="content">
    <div id="page">
    <div class="innerpage">
      <h3>List</h3>
        <ul>
          <li>List item</li>
          <li>List item</li>
          <li>List item</li>
        </ul>
        <p>&nbsp;</p>
        
        <h3>Code</h3>
        <code>&lt;? echo('Hello world'); ?&gt;</code>
        <p>&nbsp;</p>
        
        <h3>Form</h3>
        <form action="#" method="get">
          <p><label for="name">Name:</label><br />
          <input type="text" name="name" id="name" value="" /><br /></p>

          <p><label for="email">Email:</label><br />
          <input type="text" name="email" id="email" value="" /><br /></p>
          <p><label for="message">Message:</label><br />
  
          <textarea cols="60" rows="11" name="message" id="message"></textarea><br /></p>
          <p><input type="submit" name="send" class="formbutton" value="Send" /></p>
        </form>
        <p>&nbsp;</p>
        
        <h3>Table</h3>
        <table>
          <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Age</th>
          </tr>
          <tr>
            <td>1</td>
            <td>John Smith</td>
            <td>28</td>
          </tr>
          <tr>
            <td>2</td>
            <td>Fred James</td>
            <td>49</td>
          </tr>
          <tr>
            <td>3</td>
            <td>Rachel Johnson</td>
            <td>19</td>
          </tr>
        </table>
        </div>
    </div>
    <div id="sidebar">
      <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="examples.html" class="selected">Examples</a></li>
        <li><a href="http://www.spyka.net/web-templates">Web templates</a></li>
        <li><a href="http://www.spyka.net/licesing">License</a></li>
        <li><a href="http://www.spyka.net/contact">Contact</a></li>
      </ul>
    </div>
    <div class="clear"></div>
  </div>
  
  <div id="footer">
    <p>&copy; 2009. MySite.com. Design: <a href="http://www.spyka.net">spyka webmaster</a> | <a href="http://www.justfreetemplates.com">Free Web Templates</a></p>
  </div>
</div>

</body>
</html>

   
    
    
    
  








Related examples in the same category

1.d-tv
2.dogstemplate
3.domesticated
4.dottis
5.duet-plasma
6.dusky
7.dusplic
8.dynamic
9.dzine
10.eastern-tales
11.easybreeze
12.easymoto
13.eatlon
14.ebullient
15.echo
16.ecolution-warrior
17.ecom-1
18.edgy
19.edy-builders
20.efflorescence
21.elements
22.elitecircle1-0
23.emblazoned
24.embouteillage
25.emerald
26.emergence
27.emperor
28.empireserver
29.emporium
30.enclosed
31.endless
32.energybox
33.enlight
34.enlighten1-0
35.enormous
36.enter
37.enthusiastica
38.entomology
39.envision1-0
40.epod
41.equivalency
42.ergophobia
43.established
44.etags
45.euphonics
46.europe
47.everydayseries
48.evolution
49.exalted
50.excess
51.excursus
52.Executive Template
53.executive
54.Exotic_Blue
55.Exotic_Red
56.fotografix
57.fotolandia
58.foundation
59.fractalbroccoli
60.fragrance
61.frankincense
62.freches-fruechtchen
63.free-css-lunch
64.freecsstemplate 55
65.freecsstemplateno57
66.freecsswebsitetemplate39
67.freecss_greentextile
68.freecss_modern
69.freecss_monolit
70.freecss_redleaves
71.freecss_set
72.freeport
73.freeradicals
74.freestyle
75.frozenage
76.ftd-redblack
77.ftdbusiness
78.ftdcinema
79.ftddrops
80.ftdExplosionBlue
81.ftditight
82.ftdkiwi
83.ftdlagoon
84.ftdLight
85.ftdLightBlue
86.ftdluminescent
87.ftdMoonLight
88.ftdprime
89.ftdspace
90.ftdvivid
91.ftdworld
92.funkytimes
93.funride
94.futuremag-aio
95.fword_three
96.galaxy
97.gallerize
98.gamberetto
99.gameportal
100.Ganesh01
101.gastropoda
102.gathering14
103.gazebo
104.gconsultant
105.general
106.genesis
107.genghiskahn
108.genius_web
109.gentle_wiki
110.geoforce
111.gestured
112.gift-gallery
113.giftig-gruen
114.gila
115.glazed
116.godetia
117.godofgates
118.GoFlexible
119.goinggrey
120.gradientis
121.grandenally
122.grandhost
123.GraniteGlass
124.greefies