mlpdesign04 : Design 4 « Templates « HTML / CSS

HTML / CSS » Templates » Design 4 
mlpdesign04
   

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/2001/REC-xhtml11-20010531/DTD/xhtml11-flat.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>mlpdesign04</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type='text/css'>
/* MLP Design (http://www.mlpdesign.net) */

/* Global Style Settings */
body   
  background:url(mlpdesign04-images/bodybg.giftop center repeat-y #EEE;
    color:#666;
    font:normal 12px Arial,sans-serif;
    text-align:center;
    padding:0;
    margin:0}  

h1     font-size:20px; text-align:left; margin:0
h2     font-size:11px; text-align:left; margin:0}  
h3     font-size:10px; text-align:left; margin:0}

input,textarea 
  background-color:inherit;
    color:#AAA;
    border:1px solid #F9C; 
    padding:2px;
    margin:0 0 2px 0;}

blockquote
  background:url(mlpdesign04-images/quote.gifno-repeat;
    color:#AAA; 
    padding:0 0 0 45px;
    margin:15px 30px;
    display:block; }
  
strong font-weight:bold; }
img    border:0; padding:0; margin:0}    

.img  border:0; margin:0 1em 0 0float:left;}
.button border:0; padding:0; margin:0;}
.commentform  margin:0 0 0 25px; }
.clear clear:both; }


/* Wrappers */
#wrapper1
  background:url(mlpdesign04-images/borderbottom.gifbottom center no-repeat #FFF;
    color:inherit;
    width:730px;
    padding:0 0 35px 0;
    margin:auto; }

#wrapper2
  background:url(mlpdesign04-images/banner.giftop center no-repeat;
    width:730px;
    padding:0;
    margin:auto; }
       

/* Header Items */
#header
  width:710px;
    height:140px;
    margin:auto;}
   
#title
  background-color:inherit; 
    color:#FFF;
    width:180px;
    font-size:24px; font-weight:bold;
    text-align:center;
    padding:0;
    margin:1.25em 0 0 0;
    float:right; }

#title a    
  background-color:inherit;
    color:#FFF;
    text-decoration: none;
        
#tagline
  background-color:inherit;
    color:#AAA;
    width:350px;
    font-size:12px;
    padding:10px 0 0 0;
    margin:auto;
    clear:right;}
    
#navbar ul 
  width: 510px; 
    height:30px;
    font-size:14px;
    padding: 0;
    margin:2.75em 0 0 0;
    float:left;}

#navbar ul li  
  text-align:center;
    border-left:1px solid #EEE;    
    padding:0 5px;
    display: inline;
    float: left;}

#navbar a
  background-color:inherit;
    color:#FFF;
    text-decoration: none;}   

#navbar ul li.first
  {border:0}    
     
#navbar a:hover,#navbar a.current-cat
  background-color:inherit;
    color:#666;
    text-decoration: none;}
    

/* Content Items */    
#maindiv
  width:700px;
    padding:0;
    margin:auto; }
    
#maindiv ul 
  list-style:none;
    text-align:left;   
    padding:0;
    margin:0 0 10px 30px;}

#maindiv ul li 
  background: url(mlpdesign04-images/bullet.gif0 4px no-repeat;
    padding:2px 0 2px 18px;
    display:block; }
    
#content
  width:475px;
    text-align:left;
    padding:0;
    margin:0;
    float:left;}

#content span
  background-color:inherit;
    color:#999;
    font-size:11px;
    word-spacing:1px; }
    
#content a
  background-color:inherit;
    color:#F9C;
    text-decoration:none; }

#content a:hover
  text-decoration:underline; }    
    
#content .item
  padding:15px 15px 0 15px;
    margin:0}  
    

/* Sidebar Items */
#sidebar
  width:210px;
    padding:30px 0 0 0;
    margin:0;
    float:right; }
    
#sidebar .heading
  background:url(mlpdesign04-images/heading.gifno-repeat;
    background-color:inherit;
    color:#FFF;
    width:205px;
    height:25px;
    text-align:center;    
    font-size:12px; font-weight:bold;
    line-height:1.75em;
    padding:0;
    margin:5px auto 10px auto; }

#sidebar a
  background-color:inherit;
    color:#666;
    text-decoration:none; }

#sidebar a:hover
  background-color:inherit;
    color:#F9C; }  
      
/* Footer Items */    
#footer
  background-color:#FFF;
    color:#CCC;
    width:700px;
    font-size:11px;
    padding:8px 0;
    margin:auto; }

#footer a
  background-color:inherit;
    color:#CCC;
    text-decoration:none; }

#footer a:hover
  background-color:inherit;
    color:#F9C; 

</style>


</head>
<body>
<div id="wrapper1">
  <div id="wrapper2">
    <!--Header Items -->
    <div id="header">
      <div id="title"> <a href="http://www.free-css.com/">mlpdesign04</a></div>
      <div id="navbar">
        <ul>
          <li class="first"><a href="http://www.free-css.com/">Home</a></li>
          <li><a class="current-cat">About</a></li>
          <li><a href="http://www.free-css.com/">Page 3</a></li>
          <li><a href="http://www.free-css.com/">Page 4</a></li>
          <li><a href="http://www.free-css.com/">Page 5</a></li>
        </ul>
      </div>
      <div id="tagline">
        <p>This could be your tagline, or a brief description of your website. Or you could leave it blank. It's all up to you.</p>
      </div>
    </div>
    <!-- Main Body Items -->
    <div id="maindiv">
      <!-- Articles -->
      <div id="content">
        <div class="item">
          <h1>About this template</h1>
          <span>Posted on 11 April 20072:16 PM by <a href="http://www.free-css.com/">webmasterneo</a> | <a href="http://www.free-css.com/">Comment(s)</a>.</span>
          <p>This template, mlpdesign04 (a.k.a. "pink"), is released as an open source template under <a href="http://creativecommons.org/licenses/by-nc/2.5/">Creative Commons Non-Commercial</a>. If you use it, please retain the "Template Design by MLP Design" tag and link in place. For commercial use, please contact me.</p>
          <p>Please DO NOT use it in adult or adult-oriented websites!</p>
        </div>
        <div class="item">
          <h1>Reminders when editing</h1>
          <span>Posted on 11 April 20072:16 PM by <a href="http://www.free-css.com/">webmasterneo</a> | <a href="http://www.free-css.com/">Comment(s)</a>.</span>
          <p>To keep the design from messing up, change items in the index.html file only when they are outside the &lt;tags>. If you wish to edit the color, font, size, etc, do so within the stylesheet (default.cssfile. Otherwise, the code may not validate or may not show up properly in other browsers.</p>
        </div>
        <div class="item">
          <h1>Space fillers, an image, and the blockquote</h1>
          <span>Posted on 11 April 20072:16 PM by <a href="http://www.free-css.com/">webmasterneo</a> | <a href="http://www.free-css.com/">Comment(s)</a>.</span>
          <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed eleifend laoreet magna. Donec auctor libero id massa.</p>
          <blockquote>
            <p>Aenean sit amet enim ac urna dictum lobortis. Praesent convallis sapien eu tortor. Phasellus eros tortor, lacinia ut, pellentesque in, venenatis in, elit.</p>
          </blockquote>
          <p><img class="img" src="mlpdesign04-images/adj.gif" alt="" />Proin congue risus eget eros. Morbi ornare, enim ac convallis pellentesque, metus arcu sagittis diam, nec fringilla nunc eros id arcu. Nunc sagittis ligula id justo. Nam et pede a mi facilisis consequat.</p>
        </div>
      </div>
      <!-- Sidebar -->
      <div id="sidebar">
        <div class="heading">Search</div>
        <form action="POST">
          <p>
            <input type="text" name="search" value="Enter search term..." size="20" />
            <input type="" name="submit" src="mlpdesign04-images/submit.gif" class="button" />
          </p>
        </form>
        <div class="heading">Categories</div>
        <ul>
          <li><a href="http://www.free-css.com/">Category One</a></li>
          <li><a href="http://www.free-css.com/">Category Two</a></li>
          <li><a href="http://www.free-css.com/">Category Three</a></li>
          <li><a href="http://www.free-css.com/">Category Four</a></li>
        </ul>
        <div class="heading">Archives</div>
        <ul>
          <li><a href="http://www.free-css.com/">March 2007</a></li>
          <li><a href="http://www.free-css.com/">February 2007</a></li>
          <li><a href="http://www.free-css.com/">January 2007</a></li>
          <li><a href="http://www.free-css.com/">December 2006</a></li>
        </ul>
        <div class="heading">Links</div>
        <ul>
          <li><a href="http://www.free-css.com/">Home</a></li>
          <li><a href="http://www.free-css.com/">Link Two</a></li>
          <li><a href="http://www.free-css.com/">Link Three</a></li>
          <li><a href="http://www.free-css.com/">Link Four</a></li>
          <li><a href="http://www.free-css.com/">Link Five</a></li>
        </ul>
      </div>
      <div class="clear"></div>
    </div>
  </div>
</div>
<!-- Footer -->
<div id="footer">
  <p>&copy; Copyright 2007 Yout Name. All rights reserved. <br />
    Template design &amp; code by <a href="http://www.mlpdesign.net" title="Template by mlpdesign.net">MLP Design</a>.</p>
</div>
</body>
</html>

   
    
    
  
Related examples in the same category
1.arrangement
2.arthemia
3.artica
4.aspherical
5.assiduous
6.asterisk
7.astounded
8.astroturfd
9.atomohost
10.atrandafir582
11.AttainDigital
12.audi-template
13.aurelius
14.authenticity
15.autoportal
16.axian
17.azulmedia2-1
18.azure
19.bagatelle
20.balanced
21.bananaleaf
22.barricade
23.begrimed
24.belowthehorizon
25.bennevis
26.bermuda01
27.besmart
28.bestwebdesign
29.beta
30.beyond
31.bigdeal
32.BigSpaceLove
33.bioessence
34.Biru_Manteb
35.bittersweet
36.Black
37.chamberlandsrestaurant
38.chara
39.characterized
40.charcoal
41.charitable-organization
42.chary
43.chasmogamous
44.chesspiece
45.chic
46.chicanery
47.chromz
48.churchsitev.2
49.citrus-island1-1
50.clementine
51.clicker
52.modernclassic
53.modernmagic
54.modernworld
55.A_Simple_Theme
56.minimalistica
57.miniseries
58.mint-idea
59.minty
60.mirax
61.miscellaneous
62.mistybud
63.mlpdesign02
64.mlpdesign03
65.mlpdesign08
66.model-4-me
67.model-portfolio
68.modelagency
69.modelportfolio
70.model_2
71.moderna
72.Modified
73.modulation
74.module-mag
75.mokofactory
76.monster
77.mork-horisont
78.mountainbreeze
79.mouse
80.mrtechie
81.multiflex2
82.multiple
83.multiplex
84.music
85.muzzle
86.MyCode
87.mydiary
88.myfamily
89.myhedspacefree08
90.mykindathing
91.myportfolio
92.mystic-garden
93.Mythology
94.myvalentine
95.naeve
96.natheless
97.nationalpark
98.neapolitan
99.neatness
100.nebuladog
101.nedweb
102.NelVoize
103.neoneon
104.neonix
105.neoplanet-01
106.neotech
107.netindustries
108.neuphoric
109.neutral
110.neutraldesk
111.neutralgreen
112.new kitchen design
113.new-fast-host
114.new-home
115.new-rise
116.new-year
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.