cubismo : Design 3 « Templates « HTML / CSS






cubismo

   

<!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" xml:lang="en" lang="en">
<head>
<title>Cubismo</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<style type='text/css'>
/*  
Template Name: Cubismo
Version: 1.0
Author: Igor Penjivrag
Author URI: http://www.colorlightstudio.com/
*/

html, body {
  background: url(cubismo-img/bg.gif);
  font-family: Georgia;
  border: 0;
}

body, p, h1, h2, h3, h4, ul, ol, li, form, blockquote {
  margin: 0;
  padding: 0;
}

a {
  text-decoration: none;
  color: #559AD3;
}

a:hover {
  text-decoration: underline;
}

/* Header */

#header {
  width: 100%;
  height: 6.25em;
  padding-top: 10px;
}

#header h2 {
  font-size: 30px;
  color: #fff;
  padding-top: 25px;
  font-weight: normal;
}

#header h2 a {
  color: #fff;
}

#header h2 a:hover {
  color: #ADE166;
  text-decoration: none;
}

#header p {
  padding-top: 1px;
  color: #fff;
  font-size: 13px;
  color: #8F8F8F;
}

/* Wrap */

#wrap {
  width: 781px;
  margin: 0 auto;
}

#menu {
  width: 100%;
  font-size: 14px;
  position: relative;
}

#menu ul {
  width: 100%;
}

#menu li {
  display: block;
  line-height: 2.5em;
  float: left;
  margin-right: 10px;
  background: url(cubismo-img/menu_left_bg.gif) no-repeat left;
  font-weight: bolder;
}

#menu li a {
  line-height: 2.5em;
  display: block;
  background: url(cubismo-img/menu_bg_right.jpg) repeat-x right;
  margin-left: 1px;
  color: #fff;
  padding-left: 19px;
  padding-right: 20px;
}

* html #menu li a {
  width: 1%;
}

#menu li.current, #menu li.current a {
  background: #fff;
  color: #559AD3;
}

#menu li.current a:hover {
  text-decoration: none;
}

/* Login (menu) */

#login {
  /* float: right; */
  position: absolute;
  right: 0px;
  top: 15px;
  font-size: 11px;
  color: #8F8F8F;
  /* padding-top: 15px; */
}

/* Page Description */

#page_desc {
  width: 100%;
  height: 3.1em;
  font-size: 14px;
  padding-bottom: 10px;
  background: #EEEEEE;
}

#page_desc p {
  padding-left: 20px;
  line-height: 3.1em;
  float: left;
  width: 499px;
  background: #fff;
}

/* Search */

#search {
  float: right;
  width: 262px;
  height: 3.1em;
  background: #fff;
}

#search form {
  margin-top: 0.65em;
  position: relative;
}

#search input.sfield {
  background: #fff;
  border: #B8C7DA 1px solid;
  width: 159px;
  height: 21px;
  font-size: 13px;
  padding: 3px 2px 0 3px;
}

#search input.sbutton {
  position: absolute;
  top: 0;
  left: 180px;
}

/* Content */

#content_wrap {
  background: #EEEEEE url(cubismo-img/content_wrap_bg.gif) repeat-y;
  padding: 0 16px;
  width: 749px;
}

#content {
  width: 486px;
  float: left;
}

#content h2 {
  font-size: 15px;
}

#content p {
  font-size: 13px;
  line-height: 20px;
  padding: 10px 0;
}

#content ul, #content ol {
  padding: 0.5em 2.5em;
  font-size: 13px;
}

#content ul li {
  background: url(cubismo-img/bullet.gif) no-repeat 0 0.6em;
  line-height: 20px;
  padding-left: 25px;
  list-style: none;
}

#content ol {
  margin-left: 1.4em;
}

#content ol li {
  background: none;
  padding-left: 7px;
  line-height: 20px;
}

#content blockquote {
  background: #F9F9F9;
  border-bottom: #EEEEEE 1px solid;
  border-left: 1px solid #EEEEEE;
  font-size: 13px;
  color: #737373;
  padding: 0 10px;
  width: 87%;
  margin: 10px auto;
  line-height: 20px;
}

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

#content img.right {
  float: right;
  margin: 10px 0 10px 10px;
}

#content img.center {
   display: block;
  margin: 10px auto;
}

/* Content Form */

#content form {
  background: #FAFAFA;
  width: 435px;
  border: #EDEDED 1px solid;
  padding: 15px 0 15px 15px;
  margin: 10px auto;
}

#content form p {
  padding: 0px 0 5px 0;
  line-height: 20px;
}

#content form input {
  border: #EEEEEE 1px solid;
  background: #fff;
  padding: 5px;
  font-size: 15px;
  font-family: Georgia;
}

#content form textarea {
  border: #EEEEEE 1px solid;
  width: 405px;
  height: 170px;
  padding: 3px;
  font-size: 15px;
  font-family: Georgia;
}


/* Caption */

#caption {
  width: 100%;
  height: 1.9em;
  background: #fff;
}

#caption h2 {
  line-height: 1.9em;
  padding-left: 18px;
}

/* Post */

.post {
  background: #fff;
  margin-top: 15px;
  padding: 5px 15px 15px 15px;
}

.post h2 {
  padding: 10px 0;
}

.post h2 a {
  color: #C52101;
}

.post p a {
  text-decoration: underline;
}

.post p a:hover {
  text-decoration: none;
}

.post_details {
  padding: 0 15px;
  background: #fff;
}

.post_details p {
  padding: 5px 0;
   margin-top: 1px;
  font-size: 12px !important;
}

.post_details p a {
  text-decoration: none;
}

.post_details p a:hover {
  text-decoration: underline;
}

/* More Posts */

#more_posts {
  background: #fff;
  padding: 0 15px;
  margin-top: 15px;
}

#more_posts p {
  font-size: 12px;
}


#sidebar {
  width: 216px;
  float: right;
  padding: 15px;
}

#sidebar h2 {
  font-size: 13px;
  color: #75A546;
  padding: 10px 0;
}

#sidebar p, #sidebar li {
  font-size: 12px;
}

#sidebar p {
  padding: 10px 0;
  line-height: 20px;
}

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

#sidebar li {
  background: url(cubismo-img/bullet.gif) no-repeat 0 9px;
  padding-left: 23px;
  line-height: 23px;
}

/* Footer */

#footer {
  background: #fff;
  height: 2.7em;
  border-top: #EEEEEE 15px solid;
  border-bottom: #EEEEEE 15px solid;
  clear: both;
}

#footer ul {
  width: 490px;
  float: left;
  padding: 10px 0px 0 10px;
}

#footer li {
  display: inline;
  list-style: none;
}

#footer li a {
  display: block;
  float: left;
  line-height: 24px;
  font-size: 12px;
  padding: 0 6px;
  margin-right: 19px;
  color: #2E2E2E;
}

#footer li.current a {
  color: #fff;
  background: #5EA3DB;
}

#footer p {
  width: 100px;
  float: right;
  font-size: 11px;
  line-height: 3.5em;
}

#footer p a {
  color: #C52101;
}

/* Copyright */

#copyright {
  width: 781px;
  margin: 0 auto;
  text-align: center;
  font-size: 11px;
  padding: 15px 0 25px 0;
  color: #8F8F8F;
}

#copyright p {
  line-height: 19px;
}

/* Fix */

#menu:after,
#menu ul:after,
#content_wrap:after,
#footer:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}



</style>


</head>
<body>
<div id="wrap">
  <div id="header">
    <h2><a href="http://www.free-css.com/">Cubismo</a></h2>
    <p>Your description would go here.</p>
  </div>
  <div id="menu">
    <ul>
      <li class="current"><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/">Services</a></li>
      <li><a href="http://www.free-css.com/">Portfolio</a></li>
      <li><a href="http://www.free-css.com/">Contact</a></li>
    </ul>
    <div id="login">
      <p>Would you like to <a href="http://www.free-css.com/">Login</a> or <a href="http://www.free-css.com/">Register</a> ?</p>
    </div>
  </div>
  <div id="page_desc">
    <p>This would be description of the selected page.</p>
    <div id="search">
      <form action="http://www.free-css.com/">
        <div>
          <input type="text" class="sfield" />
          <input type="image" src="cubismo-img/search_button.gif" class="sbutton" />
        </div>
      </form>
    </div>
  </div>
  <div id="content_wrap">
    <div id="content">
      <div id="caption">
        <h2>Latest Writings</h2>
      </div>
      <div class="post">
        <h2><a href="http://www.free-css.com/">Benefit from the week dolar</a></h2>
        <p>On November 1st 2007 the Canadian dollar hit a new all time high against the <a href="http://www.free-css.com/">US dollar</a> - coming in at 1.0592 US dollars. You've probably also heard that the US dollar is at historic lows versus many other major currencies - most notably the British Pound.</p>
        <blockquote>
          <p>Canadian dollar hit a new all time high against the US dollar - coming in at 1.0592 US dollars. You've probably also heard that the US dollar is at historic low.</p>
        </blockquote>
        <p>From an e-commerce perspective, the low dollar presents an unprece dented opportunity for online merchants to venture into the internati onal marketplace. US based sellers can offer a significant price advantage - often totaling more than 40% - over the local choices available to shoppers in Canada, the UK and most of Eurora duties.</p>
      </div>
      <div class="post_details">
        <p>Writen on 2 November by <a href="http://www.free-css.com/">Author</a>, under <a href="http://www.free-css.com/">Uncategorized</a>. <a href="http://www.free-css.com/">5 Comments</a>.</p>
      </div>
      <div class="post">
        <h2><a href="http://www.free-css.com/">Example of form and lists</a></h2>
        <p>On November 1st 2007 the Canadian dollar hit a new all time high against the US dollar - coming in at 1.0592 US dollars. You've probably also heard that the US dollar is at historic lows versus many other major currencies - most notably the British Pound.</p>
        <ul>
          <li>Item one</li>
          <li>Item two</li>
          <li>Item three</li>
        </ul>
        <ol>
          <li>Item one</li>
          <li>Item two</li>
        </ol>
        <p>From an e-commerce perspective, the low dollar presents an unprece dented opportunity for online merchants to venture into the internati onal marketplace.</p>
        <form action="http://www.free-css.com/">
          <p>
            <label for="name">Name</label>
            <br />
            <input type="text" id="name" />
          </p>
          <p>
            <label for="email">Email</label>
            <br />
            <input type="text" id="email" />
          </p>
          <p>
            <label for="comment">Comment</label>
            <br />
            <textarea id="comment" cols="50" rows="10"></textarea>
          </p>
          <p>
            <input type="submit"/>
          </p>
        </form>
      </div>
      <div class="post_details">
        <p>Writen on 2 November by <a href="http://www.free-css.com/">Author</a>, under <a href="http://www.free-css.com/">Uncategorized</a>. <a href="http://www.free-css.com/">5 Comments</a>.</p>
      </div>
      <div id="more_posts">
        <p><a href="http://www.free-css.com/">&laquo; Older Entries</a>&nbsp;&nbsp;&nbsp;<a href="http://www.free-css.com/"> Recent Entries &raquo;</a></p>
      </div>
    </div>
    <div id="sidebar">
      <h2>About Template</h2>
      <p>This is a free template done by Igor Penjivrag. There is alo a Word Press theme of Cubismo.</p>
      <h2>Recent Entries</h2>
      <ul>
        <li><a href="http://www.free-css.com/">Benefit from the week dolar</a></li>
        <li><a href="http://www.free-css.com/">Benefit from the week dolar</a></li>
        <li><a href="http://www.free-css.com/">Benefit from the week dolar</a></li>
        <li><a href="http://www.free-css.com/">Benefit from the week dolar</a></li>
        <li><a href="http://www.free-css.com/">Benefit from the week dolar</a></li>
      </ul>
      <h2>Categories</h2>
      <ul>
        <li><a href="http://www.free-css.com/">First Category</a></li>
        <li><a href="http://www.free-css.com/">First Category</a></li>
        <li><a href="http://www.free-css.com/">First Category</a></li>
        <li><a href="http://www.free-css.com/">First Category</a></li>
        <li><a href="http://www.free-css.com/">First Category</a></li>
      </ul>
      <h2>Meta</h2>
      <ul>
        <li><a href="http://www.free-css.com/">Register</a></li>
        <li><a href="http://www.free-css.com/">Login</a></li>
        <li><a href="http://www.free-css.com/">Valid XHTML</a></li>
        <li><a href="http://www.free-css.com/">XFN</a></li>
      </ul>
    </div>
    <div id="footer">
      <ul>
        <li class="current"><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/">Services</a></li>
        <li><a href="http://www.free-css.com/">Portfolio</a></li>
        <li><a href="http://www.free-css.com/">Contact</a></li>
      </ul>
      <p><a href="#header">Back on top</a></p>
    </div>
  </div>
</div>
<div id="copyright">
  <p>Copyright 2007 by <b>Your Name</b>.</p>
  <p>Design by <a href="http://colorlightstudio.com">Igor Penjivrag</a>. Background by <a href="http://squidfingers.com">Squid Fingers</a>.</p>
</div>
</body>
</html>

   
    
    
  








Related examples in the same category

1.blankspace
2.Blasphemy
3.blended
4.blewwave
5.blootoon
6.blush
7.boardroom
8.BOOM
9.boorish
10.boosting
11.bordered
12.boswell
13.bounderies
14.boxedtype
15.boxes_template
16.boxybox
17.branches
18.breaking_ontop
19.brewedcoffee
20.brightfolio
21.brightsideoflife1.0
22.Broadcaster
23.broadsheet
24.brycesunrise
25.bucolic
26.burgeon
27.buzz
28.BW
29.bwdec2007
30.calliope
31.callofduty2
32.candiiclouds
33.cantya-studio
34.canuckington-post
35.canvass
36.capricious
37.capsicum
38.carbonated
39.carbonizer
40.carlmelon
41.caronline
42.carrera
43.castellated
44.catch_info
45.cattleya
46.center-stage
47.COIL
48.col1
49.col2
50.col3
51.collaboration
52.collectiveblue
53.collegemusic
54.colorus
55.colosseum
56.columna
57.combination
58.ComingSoon
59.commission
60.communication-1.0
61.communication-co
62.communication
63.community-live
64.compiled
65.complete-collection
66.complimentary
67.component
68.compressed
69.compromise
70.compus
71.conceptnova
72.concrete
73.concurrence
74.condition
75.conglomerate
76.conjunction
77.connection
78.connections
79.consulting-co
80.contemplate
81.convergence
82.cookiefusion
83.Copy of modify
84.corporattica
85.Cosmopolitan
86.counterstrike
87.cover
88.coverage
89.coxswain
90.creamburn
91.crisp2
92.criterion
93.crystalblack
94.css-heaven-1
95.cssgallery
96.cssheaven-2
97.cssmajesty
98.cultivated
99.cultureshock
100.cupofcoffee
101.customary
102.customize
103.cyano
104.cyanspark
105.cyberarray
106.daleri-mega
107.daleri-structure
108.dalmatians
109.danmyaz1
110.dapple
111.david-kruger
112.deardiary
113.decorative
114.deepimpact
115.deerpark
116.dekada
117.delta
118.delzep_enterprise
119.description
120.deserted
121.desertsand
122.design-gallery
123.design-studio
124.design10
125.Design9
126.designersstudio
127.designersworld
128.designgalo
129.designhq
130.designstudio
131.Design_Agency
132.deskspace
133.detachable
134.deviation
135.devision
136.dewdrops
137.dezinstudio
138.didactic
139.Did_My_Time
140.differential
141.digitalweb
142.dimension
143.diminishing
144.dirtylicious
145.disambiguation
146.discovery
147.distillate
148.distinctive
149.diversity
150.DJ