Nautica03 : Design « Templates « HTML / CSS

Home
HTML / CSS
1.CSS
2.CSS Controls
3.Form
4.IE Firefox
5.Layout
6.Marquee Attributes
7.Meta Tags
8.Microsoft Attributes
9.Object
10.Reference
11.Style Basics
12.Tags
13.Templates
14.XML
HTML / CSS » Templates » Design 




Nautica03
  

<!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>
  <title> Nautica03 By http://www.studio7designs.com </title>
  <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
  <meta name="Author" content="Aran @ Studio7designs.com" />
  <meta name="Robots" content="index,follow" />
  <meta name="Description" content="Put your description text here" />
  <meta name="Keywords" content="Open Source Web Design and Templates" />
<style type='text/css'>
/* Thank you (www.iseeyou-designs.com) for your help with the mouseovers ... This CSS style sheet was developed by www.studio7designs.com  ... drop me off and email if you have any questions aran@studio7designs.com  Have fun! */

html{
  padding:0;
  margin:0;
}

body{
  background:#ffffff url('Nautica03-images/bg.jpg') top center repeat-x;
  margin:0;
  padding:0;
  color:#999999;
  font-family:"Trebuchet MS",arial,sans-serif;
  font-size:62.5%;
  text-align:center;
}

h1{
  font-family:"Trebuchet MS",arial,sans-serif;
  font-size:2.6em;
  font-weight:normal;
  background:#fff url(Nautica03-images/booksmall.gifno-repeat bottom left;
  padding:0 0 10px 50px;
  margin:20px 5px 5px 5px;
}

h3{
  color:#9aba11;
  font-family:geneva,arial,sans-serif;
  font-weight:normal;
  text-transform:uppercase;
  word-spacing:4px;
  letter-spacing:3px;
  font-size:0.8em;
  font-weight:bold;
  padding:0 2px;
  margin:0;
}

h2{
  font-family:"Lucida Grande","Lucida Sans Unicode",arial,sans-serif;
  font-size:1.4em;
  margin:auto;
  text-transform:capitalize;
}

h2 span{
  background:#fff url(Nautica03-images/booksmall.gifno-repeat bottom right;
  padding:10px 50px 0px 0;
  margin:auto;
  line-height:2em;
}

p{
  line-height:1.8em;
}

a{
  text-decoration:none;
  color:#72a12d;
  border-bottom:1px solid #dbe6be;
}

a:hover{
  color:#999999;
  background-color:#fcfded;
  border-bottom:1px solid #aecb6e;
}

#border{
  width:700px;
  padding:0;
  margin:15px auto;
  background:#fff 
  
}

#blogtitle{
  width:700px;
  margin:10px auto;
    padding:0 0 5px 0;
  text-align:left;
  padding-left: 20px;
    font-size:1.1em;
    line-height:1.2em;
  
}

#small{
background: url(Nautica03-images/nautica.jpgno-repeat;
padding-left: 20px;
}

#blogtitle a:link, a:visited{
  color:#b8ce83;
}

#blogtitle a:hover, a:active{
  color:#cccccc;
}

#container{
  font-size:1.2em;
  text-align:left;
  margin:0px 0 0px 0;
  padding:10px;
  border-color:#686923;
  border-style:solid;
  border-width:0 0px;
}

#introduction{
  float:right;
  width:170px;
  padding:10px 20px;
  margin:20px 0 20px 20px;
  background: url(Nautica03-images/menu.gifno-repeat;
  text-align:center;
  line-height:1.5em;
  color:#999999;
  font-size:1.0em;
  font-family:"Lucida Grande","Lucida Sans Unicode",arial,sans-serif;
  letter-spacing:0px;
}

#introduction ul, #introduction li {
text-align:center;
  list-style: none;
  margin: 0;
  padding: 0;
}

#introduction a {
  border-bottom: none;
  color:#999999;
}

#introduction h3{
  text-align: center;
  position:static;
}

.splitright {
background-color: #ffffff;
margin:19px 0 0 0;
width: 45%;
float: right;
overflow: hidden;
}

.splitleft {
background-color: #ffffff;
margin:19px 0 0 0;
width: 45%;
float: left;
overflow: hidden;
}

.maintext {
background-color: #ffffff;
text-align:justify;
margin:0px auto;
padding-top:5px;
width: 65%;
float: left;
overflow: hidden;
}

.maintext img{
  display:inline;
  color:#303030;
  border: 2px dashed #CCCCCC;
  background-color: #FFFFFF;
  top: 0px;
  clip: rect(0px,auto,auto,auto);
  padding: 2px;
}

.maintext2 {
background-color: #ffffff;
padding:5px;
margin:0px auto;
width: 75%;
height:45px;
float: left;
overflow: hidden;
}

.maintext3 {
background-color: #ffffff;
margin:0px 0px 0px 0px;
width: 100%;
float: left;

}

#footer{
background-color: #ffffff;
border-top: 1px solid #86C32A;
margin:80px 0 0 0;
padding-top: 5px;
width: 100%;
float: left;
overflow: hidden;
}


#footer a{
  background-color:#fff;
  border:0;
}
#footer a:link, a:visited{
  color:#b8ce83;
}

#footer a:hover, a:active{
  color:#999999;
}

/* ~~~~~~~~~ PROPS FOR THE MENU GO OUT TO EXPLODING-BOY.COM ~~~~~~~~~ */

    #topmenu {
  position: relative;
  top: 13px;
  left: 0px;
  width: 600px;
  font-size:93%;
  margin: 0;
  line-height:normal;
  height: 35px;
      }
    #topmenu ul {
    margin:0;
    padding:0px 0px 0 0px;
    list-style:none;
      }
    #topmenu li {
      display:inline;
      margin:0;
      padding:0;
      }
    #topmenu a {
      float:left;
      background:url(Nautica03-images/menuleft.gifno-repeat left top;
      margin:0;
      padding:0 0 0 4px;
      text-decoration:none;
      }
    #topmenu a span {
      float:left;
      display:block;
      background:url(Nautica03-images/menuright.gifno-repeat right top;
      padding:5px 15px 4px 6px;
      color:#669900;
      }
    
    /* Commented Backslash Hack hides rule from IE5-Mac \*/
    #topmenu a span {float:none;}
    /* End IE5-Mac hack */
    #topmenu a:hover span {
      color:#999999;
      }
    #topmenu a:hover {
      background-position:0% -42px;
      }
    #topmenu a:hover span {
      background-position:100% -42px;
    }
  
  .left{
margin:10px 10px 5px 0;
float:left;
}

.right{
margin:2px 0 2px 2px;
float:right;
}

</style>


</head>

<body>

     <div id="blogtitle"><div id="small">Your Blog news or current info and links etc |  <a href="#">Link</a>  |  <a href="#">Link</a>  |   <a href="#">Link</a></div></div>

<div id="border">

  <div id="container">

    <div id="content">
    
      <div id="topmenu">
     <ul>
    <li><a href="#" title="Downloads"><span>Downloads</span></a></li>
    <li><a href="#" title="Gallery"><span>Gallery</span></a></li>
  <li><a href="#" title="Links"><span>Subscribe</span></a></li>
  <li><a href="#" title="Links"><span>Blog</span></a></li>
  <li><a href="#" title="Links"><span>Contact</span></a></li>
  <li><a href="#" title="Links"><span>RSS</span></a></li>
  </ul>
</div>
      <div id="introduction">
        <h3>Page navigation</h3>
        <ul>
          <li><a href="#">Example Link 1</a></li>
          <li><a href="#">Example Link 2</a></li>
          <li><a href="#">Example Link 3</a></li>
          <li><a href="#">Example Link 4</a></li>
        </ul>
        <h3>sub page menu </h3>
        <ul>
          <li><a href="#">Example Link 1</a></li>
          <li><a href="#">Example Link 2</a></li>
          <li><a href="#">Example Link 3</a></li>
          <li><a href="#">Example Link 4</a></li>
        </ul>
<br />
<br />
<br />
 <img src="Nautica03-images/n3.jpg" alt="n3 logo" width="160" height="59" /><br />
   </div>
     <br />
     <br />

               <h2><span>Nautica03</span></h2>

        <div class="maintext">
      
        <p>
        Thank you to the multiple OS designers for the tips and tricks that made this template possibel and for all the              inspiration for this theme. <br />
        This is a OS template for your enjoyment. Thanks OWD and others for support All I ask is that you <a href="mailto:aran@studio7designs.com">email me</a>, and if you can, please keep a <a href="http://www.studio7designs.com">link</a>              to me at the footer.</p>
        <p>
       This template is version 1.0 - I hope to make some updates to this template when I have more experience, namely             the ability to keep the footer at the bottom of the page no matter the content. right now there is a 150px margin             keeping it below the text... Obviously you would want to change that per page as your page gets longer. </p>
       <p>
        I must thank &quot;<a href=                "http://openwebdesign.org/viewdesign.phtml?id=2586&amp;referer=%2Fbrowse.php%3Fpage%3D3">I see frogs</a>&quot; for the great            ideas with the mouse overs on the a hover, I think it looks sweet with this design. If you have any questions or            comments            please email me or visit my <a href="http://www.studio7designs.com">website</a> for more            templates.<br />
      Thanks for looking!<br />
      <br />
      <img src="Nautica03-images/mountain.jpg" alt="mountain" class="left" width="115" height="92" /> <br />
      This photo was taken on Van Island BC <br />
      This shows the .left class that can be applied to images in the &lt;img src=&quot;image.jpg&quot; alt=&quot;image            &quot; class=&quot;left&quot; </p>
      </div>
       
      <div class="maintext3"><div class="splitleft">
        <p>This is a split left box that you can use to split your text if you would like to do so. you can also set the
      <br />
        backround color in the split left class.
      </p>
        </div>
      
        <div class="splitright">
        
      <p>This is a split right box that you can use to split your text if you would like to do so. Image example:            <br /> you can also set the backround color in the class.  <img src="Nautica03-images/greenright.jpg" alt="end of text leaf"       width="50" height="28" /></p></div>
      
    </div>
    </div>
    </div>

    <div id="footer">Original Template  by <a href="http://www.iseeyou-designs.com">STUDIO7DESIGNS </a> | Copyright 2006         Your Company Name </div>

       </div>




    </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.dragonfly
50.nautica
51.Nautica022
52.Nautica02Liquid
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.