blue_sky : Blue « Templates « HTML / CSS

HTML / CSS » Templates » Blue 
blue_sky
     

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type='text/css'>
body {
  margin:0;
  padding:0;
  background: url(blue_sky-images/bckg.jpgrepeat-x #5dcaf1;
  }
{
  color:#FFFFFF;
  }

p a {
  color:#e6ff14;
  }
  p a:hover {
    text-decoration:none;
    color:#e6ff14;
    }
    
h1 {
  font-size:24px;
  color:#FFF;
  padding:0;
  font-weight:normal;
  }

{
  padding:0;
  margin:0;
  }

input {
  border:1px solid #1698e3;
  width:180px;
  font-size:12px;
  font-family:"Trebuchet MS", Arial;
  color:#0a71cb;
  }

.b{
  color:#1a6290;
  }  

/*main div which containes all content structure*/  
#container {
  position:absolute;
  width:980px;
  left:50%;
  margin:0px 0px 0px -490px;
  padding:0;
  font-family:"Trebuchet MS", Arial;
  font-size:12px;
  color:#FFFFFF;
  }
/*little top bar with home and contact us links*/
#head_navbar {
  height:25px;
  margin:0;
  padding:5px 30px 0 0;
  text-align:right;
  }
  #head_navbar ul {
    margin:0;
    padding:0;
    }
    #head_navbar ul li{
      display:inline;
      color:#C1D8EF;
      }
      #head_navbar ul li a{
        color:#C1D8EF;
        text-decoration:none;
        }
      #head_navbar ul li a:hover{
        color:#C1D8EF;
        text-decoration:underline;
        }
/*head and company name*/
#company_name {
  font-size:24px;
  font-weight:normal;
  padding:40px 0 0 30px;
  height:75px;
  background: url(blue_sky-images/company_name_bckg.jpg);
  }
  #company_name a{
    text-decoration:none;
    }
  #company_name .y {
    color:#e6ff14;
    }
/*all page structure without header including footer*/    
#content_container{
  float:left;
  width:100%;
  }
/*div created for correct grouping content columns without footer. to separate them*/  
#main {
  width:600px;
  float:left;
  padding:0 20px 0 20px;
  }
/*main menu*/
#menu {
  margin:10px 10px 10px 0px;
  }
#menu a{
  padding:10px 10px 0 10px;
  text-decoration:none;
  }
  #menu a:hover{
    text-decoration:none;
    color: #e6ff14;
    border-bottom:2px solid #e6ff14;
    }
/*first post styles*/
#first_post {
  padding:0 0 20px 0;
  border-bottom:1px dashed #6bf1fb;
  }  
  #first_post h1{
    padding-top:30px;
    }
    #first_post p{
      padding:0;
      
      }  
      #first_post .b{
        color:#1a6290;
        }    
/*first column under first post. left column*/
#first_column {
  width:290px;
  float:left;
  margin-right:20px;
  padding-top:10px;
  }  
  #first_column p{
    padding:0 0 20px 0;
      }  
    #first_column .b{
      color:#1a6290;
      }  
/*second column under first post. right column*/            
#second_column {
  width:290px;
  float:left;
  padding-top:10px;
  }    
  #second_column p{
    padding:0 0 20px 0;
    }  
    #second_column .b{
      color:#1a6290;
      }  
/*read more style*/
 a.read_more{
  display:block;
  width:40px;
  height:15px;
  font-size:11px;
  text-align:center;
  padding:0 10px 0 10px;
  margin-top:10px;
  background-color:#28a4e5;
  border:1px solid #77e1f8;
  text-decoration:none;
  color:#FFFFFF;
  }
   a.read_more:hover{
    display:block;
    width:40px;
    height:15px;
    font-size:11px;
    text-align:center;
    padding:0 10px 0 10px;
    background-color:#1497F1;
    border:1px solid #77e1f8;
    text-decoration:none;
    color:#FFFFFF;
    }
/*search div*/
#search {
  margin:20px 10px 0px 0px;
  padding-bottom:25px;
  }
#search a{
  padding:10px 10px 0 17px;
  text-decoration:none;
  background:url(blue_sky-images/search_str.gifno-repeat;
  background-position:0 12px;
  font-weight:bold;
  }
  #search a:hover{
    text-decoration:none;
    color: #e6ff14;
    }

/*categories styles*/
#categories {
  padding:0 0 20px 0;
  }  
  #categories h1{
    padding-top:0px;
    }

#items {
  float:left;
  margin-bottom:30px;
  }
.item {
    display:block;
    width:310px;
    height:18px;
    background-color:#5DC7FF;
    padding:5px 0 5px 10px;
    border-left:5px solid #68eaff;
    border-bottom:1px solid #36bbee;
    }
    .item a{
      text-decoration:none;
      }
      .item a:hover{
        text-decoration:none;
        }
    .item_over{
      display:block;
      width:310px;
      height:18px;
      background-color:#25a1e5;
      padding:5px 0 5px 10px;
      border-left:5px solid #29dcf5;
      border-bottom:1px solid #36bbee;
      }
        .item span.y{
          display:block;
          width:170px;
          font-weight:bold;
          color: #fff;
          font-size:12px;
          float:left;
          }
          .item span.b{
            width:120px;
            font-weight:normal;
            color:#1a6290;
            font-size:10px;
            line-height:0.9;
            }
        .item_over span.y{
          display:block;
          width:170px;
          font-weight:bold;
          color: #e6ff14;
          font-size:12px;
          float:left;
          cursor:pointer;
          }
          .item_over a{
            text-decoration:none;
            }
          .item_over a:hover{
            text-decoration:none;
            }
            .item_over span.b{
            width:120px;
            font-weight:normal;
            color:#1a6290;
            font-size:10px;
            line-height:0.9;
            }
/*links*/
#links {
  float:left;
  width:155px;
  }
  #links ul {
    margin-top:0;
    padding-left:17px;
    margin-left:0;
    }
    #links ul li {
      list-style-image:url(blue_sky-images/links_str.gif);
      }
      #links ul li a{
        text-decoration:underline;
        }
        #links ul li a:hover{
        text-decoration:none;
        }

#links_2 {
  float:left;
  width:155px;
  }
  #links_2 ul {
    margin-top:0;
    padding-left:17px;
    margin-left:0;
    }
    #links_2 ul li {
      list-style-image:url(blue_sky-images/links_str.gif);
      }
      #links_2 ul li a{
        text-decoration:underline;
        }
        #links_2 ul li a:hover{
        text-decoration:none;
        }
            
/*right bar of content part*/              
#right {
  width:310px;
  float:left;
  clear:right;
  }
/*footer*/
#footer {
  float:left;
  background:url(blue_sky-images/footer_bckg.jpgrepeat-x;
  height:45px;
  width:960px;
  padding-top:30px;
  padding-left:20px;
    }
    #footer a{
      text-decoration:none;
      color:#1a6290;
      }
      #footer a:hover{
        text-decoration:underline;
        }
/*footer parts. left and right*/
#footer_left {
  width:48%;
  float:left;
  color:#1a6290;
  padding-left:10px;
  }
  
#footer_right {
  width:48%;
  float:left;
  text-align:right;
  }
  #footer_right a {
    color:#e6ff14;
    text-decoration:underline;
    }
    #footer_right a:hover {
      color:#e6ff14;
      text-decoration:none;
      }        

</style>


</head>

<body>
<div id="container">
  <div id="head_navbar">
      <ul>
          <li> · <a href="#">home</a></li>
            <li>&nbsp; · <a href="#">contact us</a></li>
        </ul>
  </div>
  <div id="company_name"><a href="#">REALITY <span class="y">DESIGN</span></a><span class="y"></span></div>
  <div id="content_container">
    <div id="main">
      <div id="menu"><a href="#">home</a> | <a href="#">about us</a> | <a href="#">our team</a> | <a href="#">products</a> | <a href="#">contact us</a> </div>
      <div id="first_post">
        <h1>Welcome to Reality <span class="b">Design</span></h1>
         <p><strong>Blue Sky</strong> is a free template released by <a href="http://www.realitysoftware.ca">Reality Software</a> under the <a href="http://creativecommons.org/licenses/by/3.0/">Creative Commons Attribution   3.0</a> license, which means you can use it in any way you want provided you   keep the link to the author intact.<br /><br />
         Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi consectetuer   nisl. Sed nisi lacus, dapibus eget, dapibus eu, luctus vitae, turpis. Sed orci   mi, vehicula nec, egestas et, dignissim sed, purus. Integer sed erat. Ut eget   elit ut diam mattis mattis. Donec venenatis viverra elit. Suspendisse orci.   Morbi aliquet. In rutrum, pede non rutrum luctus, risus lorem blandit nulla, vel   fermentum sem est in metus. Ut mauris. Cras fermentum dui sed neque. </p>
      </div>
       <div id="first_column">
       <h1>About Reality <span class="b">Design</span></h1>
       <p><strong>Lorem ipsum</strong> dolor sit amet, <a href="#">consectetuer</a> adipiscing elit. Morbi consectetuer   nisl. Sed nisi lacus, dapibus eget, dapibus eu, luctus vitae, turpis. Sed orci   mi, vehicula nec, <a href="#">egestas</a> et, dignissim sed, purus. Integer sed erat. Ut eget   elit ut diam mattis mattis. Donec venenatis viverra elit. Suspendisse orci.   Morbi aliquet. In rutrum, pede non rutrum luctus, risus lorem blandit nulla, vel   fermentum sem est <a href="#">in metus</a>. Ut mauris. Cras fermentum dui sed neque. 
       <a href="#" class="read_more">more...</a></p>
      </div>
       <div id="second_column">
       <h1> Reality <span class="b">Vision</span></h1>
       <p>Morbi consectetuer <a href="#">lorem 
ipsum</a>, vel fermentum sem est in metus. Ut mauris. Cras fermentum dui sed neque vitae.

          <br />
           <br />
           <strong>Lorem ipsum</strong> dolor sit amet, consectetuer adipiscing elit. Morbi consectetuer nisl. Sed nisi lacus, dapibus eget, dapibus eu, <a href="#">luctus vitae</a>, turpis. Sed orci mi, vehicula nec, egestas et, dignissim sed, purus. Integer sed 


         <a href="#" class="read_more">more...</a></p>
      </div>
    </div>
    <div id="right">
       <div id="search">
         <input type="text" name="textfield" id="textfield" />
         <a href="#">SEARCH</a></div> 
        
        <div id="categories">
        <h1>Reality <span class="b">Categories</span></h1>
        <div id="items">
          <div class="item" onmouseover="this.className='item_over'"  onmouseout="this.className='item'"> <a href="#"><span class="y">DIGITAL PHOTOGRAPHY</span></a><span class="b">creating comercial<br /> 
             pictures</span></div>  
          <div class="item" onmouseover="this.className='item_over'"  onmouseout="this.className='item'"> <a href="#"><span class="y">CREATIVE WEB DESIGN</span></a><span class="b">professional web<br /> 
           design</span></div>  
          <div class="item" onmouseover="this.className='item_over'"  onmouseout="this.className='item'"> <a href="#"><span class="y">PRINTS  DESIGN</span></a><span class="b">creating comercial<br /> 
           prints</span></div>  
          <div class="item" onmouseover="this.className='item_over'"  onmouseout="this.className='item'"> <a href="#"><span class="y">PHOTO RETOUCH</span></a><span class="b">amazing photo<br /> 
           retouch</span></div>  
          <div class="item" onmouseover="this.className='item_over'"  onmouseout="this.className='item'"> <a href="#"><span class="y">FLASH PROJECTS</span></a><span class="b">creating professional<br /> 
           flash projects</span></div>    
      </div>
     </div>
     <h1>Social <span class="b">Links</span></h1>
        <div id="links">
          <ul>
              <li> <a href="#">best designs</a></li>
                <li> <a href="#">photoshop tutorials</a></li>
              <li> <a href="#">digital books</a></li>
              <li> <a href="#">best awards 2007</a></li>
              <li> <a href="#">photoshop tutorials</a></li>
              <li><a href="#"> digital books</a></li>
          </ul>
        </div>
        <div id="links_2">
          <ul>
              <li> <a href="#">best awards 2007</a></li>
                 <li><a href="#"> photoshop tutorials</a></li>
              <li> <a href="#">digital books</a></li>
                <li><a href="#">best designs</a></li>
               <li> <a href="#">photoshop tutorials</a></li>
                 <li> <a href="#">digital books</a></li>
           </ul>
        </div>
    </div>
   
  </div>
  <div id="footer">
  <div id="footer_left"><a href="#" >home</a>  |  <a href="#">about us</a>  |  <a href="#">our team</a>  |  <a href="#">our people</a>  |  <a href="#">products</a>  | <a href="#">contact us</a></div>
  <div id="footer_right">©2007 All Rights Reserved  ?  Design by <a href="http://www.realitysoftware.ca" title="Website Design">Reality Software</a>? <a href="http://www.free-templates.ru" title="??????? ????????? ???????">free-templates.ru</a></div>
  </div>  
</div>
</body>
</html>

   
    
    
    
    
  
Related examples in the same category
1.metamorph_blue
2.metamorph_bluefeather
3.metamorph_blueflower
4.metamorph_blueglowing
5.metamorph_bluemadness
6.metamorph_bluemess_lt2
7.metamorph_bluerock
8.metamorph_bluething
9.metamorph_bluewave
10.metamorph_bubbleblue_lt
11.metamorph_bubblesonblue
12.metamorph_lightblue
13.metamorph_shiningblue
14.metamorph_simpleblue
15.metamorph_uberblue
16.metamorph_wavesinblue
17.blue-hosting
18.blue-neutral
19.blue-pigment1
20.blue-sky
21.blue-white
22.blue-wood
23.Blue 1
24.blue99
25.blueblogtemplate
26.bluebottle
27.BlueBridge
28.bluebrush
29.bluebusiness
30.bluecarbon
31.bluecorporation
32.bluediamond
33.blueflex
34.BlueFlower
35.BlueFresh
36.bluegray
37.blueled
38.blueminimal
39.blueminimalsidebar
40.blueprism
41.Blueshine
42.blueshuffle
43.BlueSpace
44.BlueSquareShadow
45.bluesurge
46.bluethickline
47.bluetoolkit
48.bluewave
49.blueweb
50.blueworld
51.bluey
52.blue_circles
53.blue_space
54.blue_trees
55.bublue-studio
56.bussinesblue
57.fain-blue
58.fairyblue
59.basicblue
60.CleanandBlue
61.cleanblue
62.freecss_blue
63.flyingblue
64.easy-blue
65.FunkyCoolBlue
66.genericblue
67.gallery-blue
68.MonsterBlue
69.Simple_Blue
70.wide-blue
71.a_bit_modern_bigBlue
72.mistyblue
73.portal_blue
74.SimplyBlue
75.sleekcssblue
76.Sexy_Blue
77.WonderfulBlue
78.sweetbuzzblue
79.light-blue
80.groovyblue
81.iblue2b
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.