dragonfly : Design « Templates « HTML / CSS

HTML / CSS » Templates » Design 
dragonfly
   

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!--
Design by Free CSS Templates
http://www.freecsstemplates.org
Released for free under a Creative Commons Attribution 2.5 License

Title      : Dragonfly
Version    : 1.0
Released   : 20090509
Description: A two-column, fixed-width template suitable for corporate websites.

-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Dragonfly by Free Css Templates</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<style type='text/css'>

/*
Design by Free CSS Templates
http://www.freecsstemplates.org
Released for free under a Creative Commons Attribution 2.5 License
*/

{
  margin: 0;
  padding: 0;
}

body {
  background: #FFFFFF url(dragonfly-images/img01.gifrepeat-x;
  text-align: justify;
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: 12px;
  color: #666666;
}

h1, h2, h3 {
  color: #333333;
}

h1, h2 {
  margin-bottom: 20px;
  font-weight: normal;
}

h1 {
  font-size: 197%;
}

h2 {
  font-size: 152%;
}

h3 {
  font-size: 100%;
}

p, ul, ol {
  margin-bottom: 20px;
  line-height: 1.8em;
}

ul, ol {
  margin-left: 3em;
}

blockquote {
  padding-left: 3em;
  background: url(dragonfly-images/img08.gifno-repeat;
  font-style: italic;
}

a:link {
  color: #1953A7;
}

a:active {
  color: #ED5C0C;
}

a:visited {
  color: #666666;
}

a:hover {
  text-decoration: none;
  color: #067600;
}

img {
  border: none;
}

img.left {
  float: left;
  margin: 0 20px 10px 0;
}

/* Menu */

#menu {
  width: 770px;
  height: 65px;
  margin: auto;
  border-right: 1px solid #EDEBD5;
}

#menu ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

#menu li {
  display: inline;
}

#menu a {
  display: block;
  float: left;
  width: 109px;
  height: 45px;
  padding: 20px 0 0 0;
  border-left: 1px solid #EDEBD5;
  text-transform: lowercase;
  text-decoration: none;
  text-align: center;
  font-size: 144%;
  color: #BABABA;
}

#menu a:hover {
  background: #F7F7F4;
}

#menu .active a {
  background: #F49A24;
  color: #FFFFFF;
}

/* Header */

#header {
  width: 770px;
  height: 170px;
  margin: auto;
}

#header h1 {
  float: left;
  width: 220px;
  height: 100px;
  margin: 0;
  padding: 70px 0 0 0;
  background: url(dragonfly-images/img02.jpgno-repeat;
  text-align: center;
  font-size: 36px;
}

#header h2 {
  float: right;
  width: 530px;
  height: 86px;
  margin: 0;
  background: url(dragonfly-images/img03.jpgno-repeat;
  padding: 84px 20px 0 0;
  text-align: right;
}

#header a {
  text-transform: lowercase;
  text-decoration: none;
  font-style: italic;
  font-weight: normal;
  color: #FFFFFF;
}

/* Page */

#page {
  width: 770px;
  margin: auto;
  padding: 20px 0;
}

/* Content */

#content {
  float: left;
  width: 550px;
  padding-top: 10px;
}

.post {
  margin-bottom: 20px;
  padding: 0 20px;
}

.hr {
  border-bottom: 1px solid #EDEBD5;
}

/* Sidebar */

#sidebar {
  float: right;
  width: 210px;
  padding: 5px;
  background: #EDEBD5;
}

#sidebar h2 {
  margin: 0;
  padding: 5px 15px;
  color: #FFFFFF;
}

#sidebar h3 {
  font-size: 85%;
  color: #FFFFFF;
}

#sidebar ul {
  margin: 0;
  padding: 15px;
  list-style: none;
}

#sidebar li {
}

#sidebar a {
  color: #FFFFFF;
}

.orangebox {
  background: url(dragonfly-images/img05.gifrepeat-y;
}

.orangebox h2 {
  background: url(dragonfly-images/img06.gifrepeat-y;
}

/* Footer */

#footer {
  clear: both;
  height: 100px;
  padding: 25px 0;
  background: #EDEBD5 url(dragonfly-images/img04.gifrepeat-x;
}

#footer p {
  margin: 0;
  text-align: center;
  font-size: 77%;
}

#footer a {
  color: #666666;
}

</style>


</head>
<body>
<div id="menu">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Products</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Forums</a></li>
    <li class="active"><a href="#">Support</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</div>
<!-- end #menu -->
<div id="header">
  <h1><a href="#">Dragonfly</a></h1>
  <h2><a href="http://www.freecsstemplates.org/">By Free CSS Templates</a></h2>
</div>
<!-- end #header -->
<div id="page">
  <div id="content">
    <div class="post hr">
      <h1>Welcome to <em>Dragonfly!</em></h1>
      <img src="dragonfly-images/img07.jpg" alt="" width="120" height="120" class="left" />
      <p><strong>Dragonfly</strong> is a free template from <a href="http://www.freecsstemplates.org/">Free CSS Templates</a> released under a <a href="http://creativecommons.org/licenses/by/2.5/">Creative Commons Attribution 2.5 License</a>. The photos are from <a href="http://www.pdphoto.org/">PDPhoto.org</a>. You're free to use it for both commercial or personal use. I only ask that you link back to my site in some way. <em>Enjoy :)</em></p>
    </div>
    <div class="post">
      <h2>Lorem Ipsum Dolor</h2>
      <p>In posuere eleifend odio. Quisque semper augue mattis wisi. Maecenas ligula. Pellentesque viverra vulputate enim. Aliquam erat volutpat. Pellentesque tristique ante ut risus. Quisque dictum. Integer nisl risus, sagittis convallis, rutrum id, elementum congue, nibh. Suspendisse dictum porta lectus. Donec placerat odio vel elit. Nullam ante orci, pellentesque eget, tempus quis, ultrices in, est. Curabitur sit amet nulla. Nam in massa. Sed vel tellus.</p>
      <h3>Curabitur Sem Urna</h3>
      <p>Vel consequat, suscipit in, mattis placerat, nulla. Sed ac leo. Pellentesque imperdie:</p>
      <blockquote>
        <p>In posuere eleifend odio quisque semper augue mattis wisi maecenas ligula. 
          Donec leo, vivamus fermentum nibh in augue praesent a lacus at urna congue rutrum.   
          Quisque dictum integer nisl risus, sagittis convallis, rutrum id, congue, and nibh. </p>
      </blockquote>
    </div>
  </div>
  <!-- end #content -->
  <div id="sidebar">
    <div id="updates" class="orangebox">
      <h2>Recent Updates</h2>
        <ul>
          <li><a href="#">Fusce dui neque fringilla</a></li>
          <li><a href="#">Eget tempor eget nonummy</a></li>
          <li><a href="#">Magna lacus bibendum mauris</a></li>
          <li><a href="#">Nec metus sed donec</a></li>
          <li><a href="#">Magna lacus bibendum mauris</a></li>
          <li><a href="#">Velit semper nisi molestie</a></li>
          <li><a href="#">Eget tempor eget nonummy</a></li>
        </ul>
      <h2>Categories</h2>
        <ul>
          <li><a href="#">Nec metus sed donec</a></li>
          <li><a href="#">Magna lacus bibendum mauris</a></li>
          <li><a href="#">Velit semper nisi molestie</a></li>
          <li><a href="#">Eget tempor eget nonummy</a></li>
          <li><a href="#">Nec metus sed donec</a></li>
          <li><a href="#">Magna lacus bibendum mauris</a></li>
          <li><a href="#">Velit semper nisi molestie</a></li>
        </ul>
    </div>
  </div>
  <!-- end #sidebar -->
  <div style="clear: both;">&nbsp;</div>
</div>
<!-- end #page -->
<div id="footer">
  <p id="legal">Copyright &copy; 2009 Dragonfly. All Rights Reserved. Designed by <a href="http://www.freecsstemplates.org/">Free CSS Templates</a>.</p>
  <p id="links"><a href="#">Privacy Policy</a> | <a href="#">Terms of Use</a></p>
</div>
<!-- end #footer -->
</body>
</html>

   
    
    
  
Related examples in the same category
1.wcsst-10
2.wcsst-11
3.wcsst-12
4.wcsst-15
5.wcsst-16
6.wcsst-17
7.wcsst-18
8.wcsst-19
9.wcsst-2
10.wcsst-20
11.wcsst-21
12.wcsst-22
13.wcsst-23
14.wcsst-24
15.wcsst-25
16.wcsst-26
17.wcsst-3
18.wcsst-4
19.wcsst-5
20.wcsst-6
21.beez-design
22.metamorph_camomile
23.metamorph_champagne
24.metamorph_clover
25.metamorph_dao
26.metamorph_dna
27.metamorph_lilac
28.metamorph_lilium
29.metamorph_lime
30.metamorph_limemint_lt
31.metamorph_lionpride
32.metamorph_swallowtail-indexl
33.metamorph_synchronized_lt
34.metamorph_temple
35.metamorph_vectorart
36.metamorph_wow
37.wcsst-7
38.wcsst-9
39.bouquet
40.baseline
41.beautifulday
42.bedazzled
43.Beehives
44.beez
45.begeodan
46.cleo-studio
47.cloverleaf
48.CMS Style
49.nautica
50.Nautica022
51.Nautica02Liquid
52.Nautica03
53.Nautica04
54.nautica05
55.nautica05dark
56.nautica08
57.nauticax
58.soothing
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.