dynamic : Design 5 « Templates « HTML / CSS






  1. HTML / CSS
  2. Templates
  3. Design 5

dynamic

    

<!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" />

<!-- page title -->
<title>dynamic - a premium HTML web template</title>

<!--
A free web template by spyka Webmaster (http://www.spyka.net)
//-->

<style type='text/css'>



/** global **/
body {
  background:#f4f4f4 url('dynamic-images/bodybg.png') no-repeat scroll top center;
  font-family:Arial, Helvetica, sans-serif;
  font-size:11px;
  color:#555555;
  margin:0 auto;
  padding:0;
}
* {
  margin:0;
  padding:0;
}


/** element defaults **/
table {
  width:100%;
  font-family:Arial, Helvetica, sans-serif;
  font-size:11px;
  text-align:left;
}
th, td {
  padding:5px 10px;
}
th {
  color:#fff;
  border-top:3px solid #00254A;
  background-color:#1E4B78;
}
td {
  background:#fff;
  border-bottom:1px solid #d0d0d0;
}
code, blockquote {
  display:block;
  border-left:5px solid #ddd;
  padding:10px;
  margin-bottom:20px;
}
blockquote {
  border-left:5px solid #00274E;
}
blockquote p {
  font-style:italic;
  font-family:Georgia, "Times New Roman", Times, serif;
  margin:0;
  color:#00274E;
  height: 1%;
}
p {
  line-height:1.9em;
  margin-bottom:20px;
}
a {
  color:#245289;
}
a:hover {
  color:#002245;
}
a:focus {
  outline:none;
}
fieldset {
  display:block;
  border:none;
  border-top:1px solid #e0e0e0;
}
fieldset legend {
  font-weight:bold;
  font-size:13px;
  padding-right:10px;
  color:#222;
}
fieldset form {
  padding-top:15px;
}
fieldset p label {
  float:left;
  width:150px;
  font-family:Arial, Helvetica, sans-serif;
}
fieldset form input, fieldset form select, fieldset form textarea {
  padding:5px;
  color:#333333;
  font-size:13px;
  font-family:Arial, Helvetica, sans-serif;
  border:1px solid #ddd;
}
form input.formbutton {
  margin-left:150px;
  border:none;
  font-family:Arial, Helvetica, sans-serif;
  border:1px solid #002142;
  background-color:#245289;
  color:#ffffff;
  font-weight:bold;
  padding:5px 10px;
  font-size:12px;
}
span.required {
  font-family:Verdana, Arial, Helvetica, sans-serif;
  color:#ff0000;
}
h1 {
  font-size:45px;
  font-family:Georgia, "Times New Roman", Times, serif;
  color:#01203F;
  font-weight:normal;
}
h2 {
  color:#111;
  font-family:Arial,Helvetica,sans-serif;
  font-size:33px;
  font-weight:bold;
  letter-spacing:-2px;
  padding:0 0 5px;
  margin:0;
}
h3 {
  color:#152F4E;
  font-weight:normal;
  font-size:20px;
  margin-bottom:10px;
}
h4 {
  padding-bottom:10px;
  font-size:15px;
  color:#555555;
}
h5 {
  padding-bottom:10px;
  font-size:13px;
  color:#666666;
}
ul, ol {
  margin:0 0 35px 35px;
}
li {
  padding-bottom:5px;
}
li ol, li ul {
  font-size:1.0em;
  margin-bottom:0;
  padding-top:5px;
}


/** wrapper **/
div#wrapper {
  width:950px;
  margin:0 auto;
  padding:0;
}

/** sitename+nav **/
div#sitename {
  margin-top:50px;
  padding:17px 10px 10px;
}
div#sitename h1 {
  font-size:45px;
}
div#sitename h1 a {
  color:#124171;
  font-weight:normal;
  letter-spacing:-4px;
  text-decoration:none;
  font-family:Arial, Helvetica, sans-serif;
  padding-bottom:5px;
}
div#navbar {
  background:#E0E0E0 url('dynamic-images/nav-bg.png') repeat-x scroll top left;
}
div#navbar ul {
  list-style:none;
  margin:0;
  padding:0;
  display:block;
}
div#navbar div.clear {
  background:transparent url('dynamic-images/nav-left.png') no-repeat scroll top left;
}
div#navbar ul.clear {
  height:47px;
  background:transparent url('dynamic-images/nav-right.png') no-repeat scroll top right;
}
div#navbar ul li {
  float:left;
  display:block;
  padding:13px 10px 12px;
}
div#navbar ul li a {
  float:left;
  color:#777;
  text-decoration:none;
  display:block;
  font-size:12px;
  margin:0 5px;
  cursor:pointer;
}
div#navbar ul li a span {
  padding:3px 4px 4px;
  display:block;
  float:left;
}
div#navbar ul li.sfHover a,
div#navbar ul li a:hover {
  color:#333;
}
div#navbar ul li.selected a,
div#navbar ul li.selected a:hover {
  border:none;
  color:#fff;
  background:#1E4B78 url('dynamic-images/nav-selected-right.png') no-repeat scroll top right;
}
div#navbar ul li.selected a span,
div#navbar ul li.selected a:hover span {
  background:transparent url('dynamic-images/nav-selected-left.png') no-repeat scroll top left;
}



/** header **/
div#header {
  background:#1E4B78 url('dynamic-images/header-bg.png') repeat-x scroll bottom left;
  border-top:1px solid #2865A2;
  padding:40px 25px 14px;
}
div.header-bottom {
  display:block;
  height:36px;
  margin-bottom:15px;
  background:transparent url('dynamic-images/header-bottom.png') no-repeat scroll bottom left;
}
div#header h2 {
  color:#fff;
  font-weight:normal;
}
div#header p {
  color:#fff;
  font-weight:bold;
  padding-bottom:0;
  font-size:16px;
}
div.header-text {
  float:left;
  width:590px;
}
div.header-images {
  width:290px;
  float:right;
}
div.header-images div {
  float:right;
}
div.header-images img {
  border:5px solid #2865A2;
}

p.header-buttons {
  margin-top:15px;
}

p.header-buttons a.button {
  background:transparent url('dynamic-images/button-bg.png') no-repeat scroll top left;
  color:#2865A2;
  display:block;
  float:left;
  font-size:13px;
  margin-right:10px;
  text-align:center;
  text-decoration:none;
  width:100px;
  height:31px;
  padding-top:1px;
}
p.header-buttons a.button:hover {
  background-position:bottom left;
}
p.header-buttons a.color-button {
  background:transparent url('dynamic-images/button-color-bg.png') no-repeat scroll top left;
  color:#fff;
}



/** body **/
div#body-wrapper {
  background-color:#ffffff;

}
div#body {
  padding:10px 14px;
  border:1px solid #ddd;
  border-bottom:none;
  font-size:12px;
}

/** content+sidebar styles **/
div.column {
  float:left;
  line-height:1.9em;
  padding:10px 0;
}
div.column h3 {
  color:#212121;
  font-family:'Lucida Grande','Lucida Sans Unicode',Geneva,Verdana,Sans-Serif;
}
div.column h1 {
  margin:20px 0;
}
div.column h2 {
  padding-bottom:10px;
  font-size:27px;
}
div.column-right {
  margin-left:15px;
}
div.column-left {
  margin-right:15px;
}
div.column-650 { width:650px; }
div.column-240 { width:240px; }
div.bcnav {
  background:#EDEDED url('dynamic-images/nav-bg.png') repeat-x scroll top left;
  border-bottom:1px solid #ddd;
}
div.bcnav div.bcnav-left {
  background:transparent url('dynamic-images/nav-left.png') no-repeat scroll top left;
}
div.bcnav div.bcnav-right {
  padding:12px 12px 10px;
  background:transparent url('dynamic-images/nav-right.png') no-repeat scroll top right;
}
div.bcnav h3 {
  border:none;
  color:#666;
  font-family:"Trebuchet MS", Verdana, Arial;
  font-weight:bold;
  text-transform:uppercase;
  font-size:13px;
  margin:0;
  float:left;
}
div.bcnav ul {
  color:#555555;
  font-family:"Trebuchet MS",Verdana,Arial;
  font-size:14px;
  padding-left:10px;
  margin:0;
  float:left;
  list-style:none;
}
div.bcnav ul li {
  float:left;
  display:block;
  padding:0 2px;
}
div#sidebar ul {
  margin:0;
  padding:0;
  list-style:none;
}
div#sidebar li ul {
  margin-bottom:20px;
}
div#sidebar li ul li {
  display:block;
  padding:6px 15px;
  color:#777;
  border-bottom:1px dotted #e0e0e0;
}
div#sidebar li ul li a {
  font-size:12px;
  font-weight:normal;
  color:#555;
  text-decoration:underline;
}
div#sidebar li ul li a:hover {
  color:#222;
}
div#sidebar ul ul {
  background-color:#f4f4f4;
  border-bottom:4px solid #f0f0f0;
}
div#sidebar h4 {
  background:#1E4B78 url('dynamic-images/header-bg.png') repeat-x scroll bottom left;
  border-top:1px solid #2865A2;
  font-size:12px;
  color:#fff;
  letter-spacing:0px;
  margin:0;
  padding:0;
  text-transform:uppercase;
  padding:6px 15px;
  display:block;
}

/** footer **/
div#footer {
  background:#903838 url('dynamic-images/footer-bg.png') no-repeat scroll left bottom;
  padding:16px 20px 20px;
  color:#eee;
}
div#footer a {
  color:#eee;
  font-weight:bold;
  text-decoration:underline;
}

/** clear **/
.clear:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}
 
.clear {
  display: inline-block;
}
.clear {
  display: block;
}


</style>


</head>
<body>
<div id="wrapper">

  <div id="sitename" class="clear">
      <!-- YOUR SITE NAME -->
    <h1><a href="#">dynamic</a></h1>
  </div>
  
  <div id="navbar">  
    <div class="clear">
      <ul class="sf-menu clear">
              <!-- PAGE NAVIGATION -->
        <li><a href="index.html"><span>home</span></a></li>
        <li class="selected"><a href="examples.html"><span>examples</span></a></li>
                 <li><a href="blog.html"><span>blog</span></a></li>
        <li><a href="#"><span>products</span></a></li>
        <li><a href="#"><span>portfolio</span></a></li>
        <li><a href="#"><span>support</span></a></li>
        <li><a href="#"><span>contact</span></a></li>
      </ul>
    </div>
  </div>
  
  <div id="header" class="clear">
    <div class="header-text">
      <h2><strong>Pellentesque</strong> habitant morbi tristique </h2>      
    </div>
  </div>
  <div class="header-bottom"></div>
  
  <div id="body-wrapper">
  
    <!-- BREADCRUMB NAVIGATION -->
    <div class="bcnav">
      <div class="bcnav-left">
        <div class="bcnav-right clear">
          <h3>you are here:</h3>
          <ul class="bcnavlist">
            <li><a href="#">home</a></li>
                        <li>/</li>
            <li><a href="#">products</a></li>
                        <li>/</li>
            <li>widget</li>
          </ul>
        </div>
      </div>
    </div>

    
    <div id="body" class="clear">

      
      <div class="clear">
        <div class="column column-650 column-left">
                    <h2>Examples</h2>
        
                    <h1>Heading H1</h1>
                    <h2>Heading H2</h2>
                    <h3>Heading H3</h3>
                    <h4>Heading H4</h4>
        
                    <h5>Heading H5</h5>
                    <p>&nbsp;</p>
        
                    
                    <h3>Lists</h3>
        
                    <ul>
                        <li>List item</li>
                        <li>List item</li>
        
                        <li>List item</li>
                    </ul>
                            
                    <ol>
                        <li>List item</li>
                        <li>List item</li>
                        <li>List item</li>
                    </ol>
        
                    <p>&nbsp;</p>
                    
                        
                    <h3>Code and blockquote</h3>
                    <code>&lt;? echo('Hello world'); ?&gt;</code>
        
                    <blockquote><p>Mauris sit amet tortor in urna tincidunt aliquam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas</p></blockquote>
                    <p>&nbsp;</p>
                    
                    
                    
                    <h3>Table</h3>
        
                    <table cellspacing="0">
                        <tbody><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>
        
                    </tbody></table>
        
                    <p>&nbsp;</p>
                    
                    <h3>Form</h3>
        
                    <fieldset>
        
                        <legend>Form legend</legend>
                        <form action="#" method="get">
                            <p><label for="name">Name:</label>
                            <input name="name" id="name" value="" type="text" /></p>
        
            
                            <p><label for="email">Email:</label>
                            <input name="email" id="email" value="" type="text" /></p>
        
                            <p><label for="message">Message:</label>
                            <textarea cols="60" rows="11" name="message" id="message"></textarea></p>
        
                            <p><input name="send" class="formbutton" value="Send" type="submit" /></p>
                        </form>
        
                    </fieldset>

        </div>
        <div id="sidebar" class="column column-240 column-right">
          <ul>  
                        <li>
        
                            <h4>Links</h4>
            
                            <ul>
                                <li><a href="http://www.spyka.net" title="spyka Webmaster resources">spyka webmaster</a></li>
                                <li><a href="http://www.justfreetemplates.com" title="free web templates">Free web templates</a></li>
                                <li><a href="http://www.spyka.net/forums" title="webmaster forums">Webmaster forums</a></li>
                                <li><a href="http://www.awesomestyles.com/mybb-themes" title="mybb themes">MyBB themes</a></li>
        
                                <li><a href="http://www.awesomestyles.com" title="free phpbb3 themes">phpBB3 styles</a></li>
                            </ul>
                        </li>
                        
                        <li>
            
                            <h4>Categories</h4>
                            <ul>
                              <li><a href="#">Lorem ipsum dolor sit amet.</a></li>
        
                              <li><a href="#">Quisque consequat nunc a felis.</a></li>
                              <li><a href="#">Suspendisse consequat magna at.</a></li>
                              <li><a href="#">Etiam eget diam id ligula rhoncus.</a></li>
                              <li><a href="#">Sed in mauris non nibh.</a></li>
                            </ul>
                        </li>
                        <li>
        
                            <h4>Sponsors</h4>
            
                            <ul>
            
                                <li><a href="http://www.themeforest.net/?ref=spykawg" title="premium templates"><strong>ThemeForest</strong></a> - premium HTML templates, WordPress themes and PHP scripts</li>
                                <li><a href="http://www.dreamhost.com/r.cgi?259541" title="web hosting"><strong>Web hosting</strong></a> - 50 dollars off when you use promocode <strong>awesome50</strong></li>
                                <li><a href="http://www.4templates.com/?aff=spykawg" title="4templates"><strong>4templates</strong></a> - brilliant premium templates</li>
        
            
                            </ul>
                        </li>
                    </ul> 
        </div>
      </div>
      <!-- end three column -->

      
      
      
    </div>
    
  </div>
  
  <div id="footer">
    <p>&copy; 2009. Design by <a href="http://www.spyka.net">Free CSS Templates</a> &amp; <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.dzine
9.eastern-tales
10.easybreeze
11.easymoto
12.eatlon
13.ebullient
14.echo
15.ecolution-warrior
16.ecom-1
17.edgy
18.edy-builders
19.efflorescence
20.elements
21.elitecircle1-0
22.emblazoned
23.embouteillage
24.emerald
25.emergence
26.emperor
27.empireserver
28.emporium
29.enclosed
30.endless
31.energybox
32.enlight
33.enlighten1-0
34.enormous
35.enter
36.enthusiastica
37.entomology
38.envision1-0
39.epod
40.equivalency
41.ergophobia
42.established
43.etags
44.euphonics
45.europe
46.everydayseries
47.evolution
48.exalted
49.excess
50.excursus
51.Executive Template
52.executive
53.Exotic_Blue
54.Exotic_Red
55.fotografix
56.fotolandia
57.foundation
58.foxy
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