pixabella06 : Design 6 « Templates « HTML / CSS






pixabella06

   

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
           "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>

<title>Pixabella06 HTML Template</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<style type='text/css'>
@charset "utf-8";
* {
   margin: 0;
   padding: 0; }
body {
   color: #555555;
   font-family: 'Trebuchet MS', Arial, Verdana, Helvetica, sans-serif;
   font-size: 75%;
   background: #d57b97 url(pixabella06-img/pinkback.png) repeat-x; }


/******** Content variations ********/
#head { 
   background-color: #000; }
#outerwrapper {
   width: 960px; 
   background-color: #fff;
   margin: 0 auto;
   line-height: 1.4em;
   color: #404040; }
#innerwrapper {
   float: left; 
   margin-left:5px;
   width:760px;}
#content {
   float: left; 
   width: 550px; }
#contentmid {
   float: right;
   margin-right: 10px;
   width: 550px; }
#midsidebar { /* C-S-S Layout */
   margin-right: 10px; 
   width: 180px;
   float: right; }
#leftsidebar { /* S-C-S Layout */
   margin-right: 10px; 
   width: 180px;
   float: left; }
#rightsidebar {
   float: right; 
   margin-right: 5px; 
   width: 180px; }

/***** General Styles *****/
a {
   text-decoration: none;
   color: #8e1a3c;
   font-weight: bold; }
a:hover {
   color: #df6e91;
   text-decoration: none; }
a img {
   border:0; }
p {
   margin-bottom: 10px; }
code, pre {font-size: 1.2em; 
  color:#df6e91; }
blockquote:before, blockquote:after {content: "\"";
  font-size: 16pt;
  font-family: serif; }
blockquote {
  margin: 10px 0 0 0; 
  padding: 5px;
  background: #fff5f8;
  border: 1px solid #ffdcf8;
  line-height: 1.6em;
  color: #df6e91;
  font-style:italic; }
blockquote p {display: inline; }
blockquote a { 
   text-decoration: underline; }
table {
   border-collapse: collapse; 
   margin: 10px auto 15px auto;
   border: 1px solid #ffdcf8; }
th {
   background: #fff5f8; 
   height: 25px; 
   padding: 0 10px;
   color: #df6e91; 
   text-align: left; }
td {
   padding: 0 10px; 
   height: 25px; }
tr.odd {
   background: #fafafa; }
tr.even {
   background: #f6f6f6; }
form {
   background: #fff5f8; 
   margin: 10px auto; 
   padding: 5px; 
   border: 1px solid #ffdcf8; }
label {
   color: #df6e91;
   display: block; 
   font-weight: bold; 
   margin: 5px 0 ; }
input {
   padding: 2px; 
   border: 1px solid #ffdcf8; }
textarea {
   width: 400px; 
   padding: 2px; 
   border: 1px solid #ffdcf8;
   height: 100px; 
   display: block; }
input.button {
   margin: 0;
   color: #df6e91;
   padding: 2px 3px;   
   border: 1px solid #ffdcf8; }
input, select, textarea {
   font-family: Arial, Helvetica, sans-serif; 
   font-size: 1.0em; }
h2 {
   font-size: 1.25em;
   font-weight: bold;
   color: #111;
   line-height: 1.2;
   margin: 0 0 5px 0; }
h3 {
   font-size: 1.1em; 
   display: block; 
   margin: 10px 0; } 
h4 {
   margin-bottom: 15px; 
   font-size: 10pt; 
   font-weight: bold; }
ul, ol {
   list-style-position: inside; }
img {
   border: 1px solid #f1f1f1;  
   background-color: #f5f5f5; 
   margin: 5px;
   padding: 5px; 
   text-align: center; }
img.float-right {
   margin: 5px 0px 5px 15px; 
   float:right; }
img.float-left {
   margin: 0 10px 5px 0px;
   float:left; }
   
/***** Identity ******/
#topbar {
   width: auto !important; 
   width /**/:760px; 
   height: 45px;
   border: 0px; }
#identity {
   height: 45px;
   width: 410px;
   border: 0px;
   float: left; }
#identity h1 {
   font-size: 1.0em;
   padding: 5px 0 0 3px; }
#identity h1 a, #identity h1 a:hover {
   color: #fff;
   text-decoration: none; }
#identity p.head2 {
   color: #fff;
   font-size: 0.9em; 
   padding-left: 3px; 
   font-weight: normal;
   line-height: 1.7; }

/****** Top Navigation ******/
#topnav {width: 350px; 
   height: 45px;
   border: 0px solid #000000;
   font-size: 0.9em;
   color: #fff;
   float: right; }
#topnav ul {margin: 0px;
   width: auto;
   list-style-type: none;
   line-height: 1.0em;
   border: 0px solid #000000;
   float: right; }
#topnav ul li {margin: 0px 5px 0px 10px;
   padding: 10px 5px 0px 5px;
   float: left; }
#topnav ul li a {text-decoration: none;
   color: #fff; }


/****** Searchbox ******/
#logo {
   height: 145px;
   width: 960px;
   background: url(pixabella06-img/pink_butterfly_ban.jpg) no-repeat; }
#sitesearch {
   width: 225px;
   height: 35px;
   float: right;
   margin: 10px 15px 0 0; }
#sitesearch form {
   background: url(pixabella06-img/fgsearch.png) center center no-repeat;
   height: 30px;
   border: 0;
   margin: 0;
   width: 225px;
   text-align: right;
   padding: 11px 0 0 0;
   font-size: 1.0em; }
#sitesearch input {
   color: #337766;
   width: 150px; 
   margin-right: 50px;
   border: none;
   padding: 4px; }


/****** Navigation ******/
#navigation {
   width: 960px;
   background: url(pixabella06-img/nav_frostypink.png) top center repeat-x;
   height: 31px;
   border-top: #e786a4 solid 1px; 
   margin-bottom: 20px;}
#navbar_link {
   height: 30px;
   float: left; }
#navigation #navbar_link ul {
   float: left;
   height:30px;
   width: 100%;
   list-style-type: none; }
#navigation #navbar_link ul li {
   display: inline; }
#navigation #navbar_link ul li a {
   padding: 6px 15px;
   color: #fff;
   text-decoration: none;
   line-height: 1.6em;
   float: left;
   border-right: 1px solid #d36a8b;
   text-decoration: none;
   font-size: 1.0em;
   font-weight: bold; }
#navigation #navbar_link a:hover { 
   text-decoration: none;  
   border-right: 1px solid #d36a8b;
   color: #fff;
   background: #ddd url(pixabella06-img/nav_frostypink.png) center -33px repeat-x; }
   
.currentpage a {background: #ddd url(pixabella06-img/nav_frostypink.png) center -33px repeat-x; }



/****** Sidebar Items ******/
.SidebarItem {
   margin: 0 0 15px 0; }
.SidebarItem ul, #SidebarItem ol {
   list-style: none; }
.SidebarItem li {
   line-height: 1.2; }

/******** Footer ********/
#footer {
   clear: both;
   width: 960px; 
   color: #777;
   height: 25px;
   font-size: 0.8em;
   font-weight: bold;
   margin: 0px auto; }
#footer p {
   font-weight: bold;
   border-top: 1px solid #aaa;
   padding: 5px 0 5px 3px; }
#footer p span {
   padding-right: 3px; }
#footer a {
   color: #777;
   text-decoration: underline; }
#footer a:hover {
   color: #444; }

</style>



<!-- Design by Pixabella - http://www.pixabella.com -->
</head>
<body>
<div id="outerwrapper">

<div id="head">
     <div id="topbar">
        <div id="identity">
         <h1><a href='#'>Page Title</a></h1>
         <p class='head2'><strong>Page Description, something meaningful upto a dozen words</strong></p>
      </div><!-- end of identity -->

        <div id="pagetop">
           <div id="topnav">
               <ul>
                  <li><a href="#">RSS Feed</a></li>
                <li><a href="#" rel="nofollow">Login</a></li>
                <li><a href="#" rel="nofollow">Contact</a></li>
               </ul>
           </div><!-- end of topnav -->
        </div><!-- end of pagetop -->
   </div><!-- end of topbar -->
   <div id="logo">
      <div id="sitesearch">
        <form method="get" id="searchform" action="#">
          <input type="text" id="searchfield" name="searchfield" value="Search..." class="txt" />
          <input type="hidden" name="submit" value="search" />
          </form>
      </div><!-- end of sitesearch -->
   </div><!-- end of logo -->
   <div id="navigation">
      <div id="navbar_link">
        <ul>
           <li class="currentpage"><a href='#'>Home</a></li>
           <li><a href="#">About Me</a></li>
           <li><a href="#">My Flickr</a></li>
           <li><a href="#">Contact Me</a></li>
        </ul>
      </div><!-- end of navbar_link -->
      </div><!-- end of navigation -->
  </div><!-- end of head -->


  <div id="innerwrapper">
     <div id="contentmid">
       <h2>Page Title</h2>
        <p>Thanks for downloading pixabella05, my tribute to Hawaiian shirts. The image in the header was created in Inkscape and the flowers get their inspiration from African Violets. This 3 column, content first template is valid XHTML transitional, and includes two page layouts, a sidebar-content-sidebar and content-sidebar-sidebar. This text is <b>bold</b>, this is <u>underlined</u>, and this is <i>italic</i>. <a href="#">Links</a> are blue, but change to orange on hover.</p>
        <p>This page shows examples of a blockquote, placing an image into your page, using a table, a sample contact form, showing code excerpts, and order and unordered lists. Hope you like it.</p>
        <h3>License</h3>
        <p>Pixabella05 is licensed under the <a href="http://creativecommons.org/licenses/by/2.5/">Creative Commons Attribution 2.5</a>. Please read and agree to the terms contained within this attribution so you understand the usage agreements.</p>
    <blockquote>If you decide to use this template, I ask that you leave the "Design by <a href="http://www.pixabella.com">Pixabella</a>" link in the footer. This recognition from users of my templates is all the encouragement I need to keep designing and updating my free HTML Templates</blockquote>

  
    <h3>An Image With Text</h3>
    <p><img src="pixabella06-img/pink_azalea_small.jpg" width="100" height="88" alt="Pink Azalea" class="float-left" />Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras bibendum tristique odio. Aenean interdum sem nec elit scelerisque vehicula. Suspendisse vestibulum. In eu lectus. Aliquam sit amet nulla. Donec purus. Nullam commodo porttitor massa. Etiam lobortis tellus in est. Ut pellentesque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas ac nibh nec quam porttitor sagittis.  
    </p><p>Etiam iaculis lectus ut nibh. Etiam interdum nulla ut lectus. Nulla vulputate, arcu eu pulvinar molestie, purus diam sagittis ligula, ac facilisis lacus sapien auctor urna. Etiam leo. Nam eget purus at odio iaculis vehicula. Nam pede orci, varius sit amet, mattis at, scelerisque sed, diam. Ut sagittis ipsum at lorem. Praesent non nibh. Cras vulputate. Cras in lacus ac libero tincidunt aliquam. Morbi placerat tristique lacus. Phasellus enim. Nullam malesuada molestie lectus. Vivamus sit amet arcu. Duis convallis justo ut velit.</p>
        
    <h3>A Table with Data</h3>
    <table>
      <tr>
        <th class="first">Username</th>
        <th>Phone</th>
        <th>Dept Homepage</th>
      </tr>
      <tr class="odd">
        <td class="first">Harry Smith</td>
        <td>012-1234 5678</td>
        <td><a href="#">Accounts Department</a></td>
      </tr>
      <tr class="even">
        <td class="first">Susan Jenkins</td>
        <td>012-2345 6789</td>
        <td><a href="#">Marketing Whizzkids</a></td>
            </tr>
      <tr class="odd">
        <td class="first">Todd Rhodes</td>
        <td>012-3456 7891</td>
        <td><a href="#">Manufacturing</a></td>
      </tr>
      <tr class="even">
        <td class="first">Wendy Kline</td>
        <td>012-4567 8912</td>
        <td><a href="#">Customer Care</a></td>
      </tr>
    </table>
      
        <h3>Code</h3>
        <p><code>
            code, pre { <br />
            display: block; { <br />
            font-size:10pt; <br />
            margin:0 0 0 20px; <br />        
            }
    </code></p>  
    
    <h3>Ordered and Unordered Lists</h3>
    
    <b>Ordered List</b>
    <ol> 
        <li>First</li>
        <li>Second</li>
        <li>Third</li>
    </ol>
    
    <b>Unordered List</b>
    <ul>
        <li>First</li>
        <li>Second</li>
        <li>Third</li>
    </ul>
    <h3>Final Paragraph</h3>
    <p>Etiam iaculis lectus ut nibh. Etiam interdum nulla ut lectus. Nulla vulputate, arcu eu pulvinar molestie, purus diam sagittis ligula, ac facilisis lacus sapien auctor urna. Etiam leo. Nam eget purus at odio iaculis vehicula. Nam pede orci, varius sit amet, mattis at, scelerisque sed, diam. Ut sagittis ipsum at lorem. Praesent non nibh. Cras vulputate. Cras in lacus ac libero tincidunt aliquam. Morbi placerat tristique lacus. Phasellus enim. Nullam malesuada molestie lectus. Vivamus sit amet arcu. Duis convallis justo ut velit.</p>
    
      <h3>Example Form</h3>
        <form action="#">
            <p>
      <label>Name</label>
      <input name="dname" value=" " type="text" size="30" alt="Name" />
      <label>Email</label>
      <input name="demail" value=" " type="text" size="30" alt="Email" />
      <label>Your Comments</label>
      <textarea rows="5" cols="5"></textarea>
      <br />  
      <input class="button" type="submit" value="Send" />    
      </p>    
        </form>  
     </div><!-- end of content -->  
     <div id="leftsidebar">
        <div class="SidebarItem">
          <h2>About Us</h2>
          <p><img src="pixabella06-img/pink_azalea_xsmall.jpg" width="40" height="35" alt="Pink Azalea" class="float-left" />Every website needs an about us page, and the sidebar is the perfect place to give a quick overview.</p><p>Of course, you could just keep going, maybe provide your entire about us page right here, but will they read it? </p><p>By using the sidebar to give some details about your company, you are providing context on every page for customers who may begin their visit on another page. </p><p>Once you've got their attention, simply gt them to click the link to your main about us page. <a href="#">Read more about us.</a></p>
       </div>
   </div><!-- end of sidebar -->
  </div><!-- end innerwrapper -->
  
   <div id="rightsidebar">
      <div class="SidebarItem">
        <h2>Layout Types</h2>
          <ul>
          <li><a href="index.html">Green S-C-S Layout</a></li>
          <li><a href="index2.html">Green C-S-S Layout</a></li>
          <li><a href="index3.html">Pink S-C-S Layout</a></li>
          <li><a href="index4.html">Pink C-S-S Layout</a></li>
      </ul>
      </div>
      <div class="SidebarItem">
      <h2>Testimonials</h2>
      <p>I can't thank you enough for this great template, <i>A. Customer, Smallville, USA.</i></p>
      <p>Why pay for webdesign services when I can get fantastic free templates right here, Thank you. <i>Corporate Dude, NY</i></p>
      <p>This is really great, but where do I get cheap flights to Hawaii?  <i>Village Idiot, Back of Beyond.</i></p>
      </div>
   </div><!-- end of rightsidebar -->  

<div id="footer">
  <p><span style="float: left;">&#169; 2007 Company Name</span><span style="float: right;">Design by <a href="http://www.pixabella.com" title="Free HTML Templates">Pixabella</a></span>
<div style="display:none;"><a href="http://free-templates.ru">???? ??/a></div>
    </p>
</div><!-- end of footer -->
</div><!-- end of outerwrapper -->
</body>
</html>

   
    
    
  








Related examples in the same category

1.newave
2.newdarkside
3.newday
4.newera
5.newfangled
6.newgreeny
7.newgreys
8.newhorizon
9.news portal
10.news-print
11.newsbeat
12.newsflash
13.newsportal
14.newsroll
15.newstheme
16.newwave-business-inc
17.new_rise
18.NiceSite
19.nimbuslike
20.nixed
21.noimages
22.noname1
23.nonzero
24.nothingfanzy
25.nourish
26.nowhere
27.NuahSwirl
28.nullbullum
29.numerology
30.o-no-typography
31.obsess
32.obsession
33.obtanium
34.office-plants
35.offlimits
36.offrecord
37.oheon_com_110100021
38.ohgreenworld
39.Okeanos
40.old-wall
41.oldarchitecture
42.Olive
43.one-penny
44.one_two_three
45.online-edu
46.onlinemoviestore
47.oodles
48.openyourwindows
49.opposed
50.optimal-touch
51.orchidaceae
52.ordinaire
53.ormeggiare
54.ornamental
55.ornate
56.OrngBlu
57.oswd_blozilla
58.our-work
59.ourhouse
60.outdoorv1.0
61.outliers
62.outoftheblue
63.outtabox
64.oxidation
65.package
66.paddy-harvest
67.pagedrape
68.paivi-k
69.paleforest
70.palmtrees
71.pamphlet
72.pancorbo
73.papira
74.paradigm
75.paradise1983
76.parchmenter
77.particle
78.particles
79.pastel
80.pastelco
81.pastelflowers
82.pastries
83.path-fider
84.patternmaker
85.PattyMcFatPat01
86.PattyMcFatPat03
87.pc
88.Pear Template
89.pear
90.pedestrian
91.penchantforphotos
92.pencilpink
93.people
94.perfectblemish
95.performance
96.perplex
97.personified
98.pillars
99.pills
100.pinnacle
101.Pistachio
102.pixabella
103.pixabella04
104.pixelationingreen
105.plaidshirt
106.plainandsimple
107.planning-feed
108.pluralism
109.plurkified
110.pointspace
111.pollinate
112.pollinating
113.pollination