blue-neutral : Blue « Templates « HTML / CSS

blue-neutral

     

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="cz">
<head>
<title>Blue Neutral</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type='text/css'>

*{
padding:0;
margin:0;
}

body
{
  background-color: white;
  font-family: arial;
  font-size: 12px;
  color: #496b91;
}

#Inner
{
  background: url("blue-neutral-img/bac.gif") top left repeat-x;
  height: 248px;
}

#Container
{
  width: 1000px;
  margin: 0px auto;
}

#TopPart
{
  height: 248px;
}

#Head
{
  height: 239px;
    background: url("blue-neutral-img/header.gif") top left no-repeat;
    width: 1000px;
  float: left;
  margin-top: 9px;
}

.email
{
  color: white;
  padding-left: 855px;
  padding-top: 58px;
}

.name
{
  color: white;
  font-size: 23px;
  padding-left: 765px;
  padding-top: 37px;
}

.adress
{
  color: white;
  font-size: 17px;
  padding-left: 770px;
  padding-top: 0px;
}

#Menu
{
  width: 900px;
  height: 54px;
  display: block;
}

#Menu a
{
  width: 150px;
  height: 54px;
  float: left;
  background: url("blue-neutral-img/menu.gif") top left no-repeat;
  color: #2a5e9d;
  text-decoration: none;
  font-weight: bold;
  font-size: 15px;
}

#Menu a span
{
  margin-left: 38px;
    line-height: 80px;
}

#Menu a:hover, #Menu a.active
{
  background-position: -150px 0px;
}

#CentralPart
{
  width: 900px;
  margin-left: 2px;
  clear: both;
  padding-top: 9px;
}

#Shadow
{
    width: 904px;
  margin-left: 96px;
  background: url("blue-neutral-img/shadow.gif") top left repeat-y;
}

#LeftPart
{
  width: 450px;
  float: left;
  margin-top: -27px;
}

*>#LeftPart
{
  margin-top: 0px;
}

#RightPart
{
  float: right;
  width: 450px;
  margin-top: -27px;
}

*>#RightPart
{
  margin-top: 0px;
}

.cleaner
{
    clear: both;
}

#Page
{
  width: 450px;
  float: left;
}

.article_left
{
    background: url("blue-neutral-img/bac-left.gif") top left no-repeat;
    width: 450px;
    height: 158px;
    float: left;
  padding-top: 20px;
  margin-top: 10px;
}

.heading_left
{
  padding-left: 50px;
  padding-bottom: 17px;
}

.paragraf_left
{
  padding: 5px 90px 10px 50px;
  text-align: justify;
}

.paragraf_left2
{
  padding: 5px 10px 10px 50px;
  text-align: justify;
}


.heading_right
{
  padding-left: 270px;
  padding-bottom: 17px;
}

.article_right
{
    background: url("blue-neutral-img/bac-right.gif") top left no-repeat;
    width: 450px;
    height: 158px;
    float: left;
    padding-top: 20px;
  margin-top: 10px;
}

.paragraf_right
{
  text-align: justify;
  padding: 5px 50px 10px 90px;
}

.paragraf_right2
{
  text-align: justify;
  color: #496b91;
  padding: 5px 50px 10px 10px;
}

h1
{
  font-size: 18px;
  color: #2a5e9d;
  padding-left: 50px;
  background: url("blue-neutral-img/arrow2.gif") top left no-repeat;
  line-height: 45px;
  margin-left: 3px;
}

h2
{
  font-size: 18px;
  color: #2a5e9d;
}

h3
{
  font-size: 12px;
  line-height: 20px;
  font-weight: bold;
  color: #2a5e9d;
  padding-left: 10px;
}

#News
{
  float: left;
  background: url("blue-neutral-img/flowers.gif") bottom right no-repeat;
  background-color: #eef0f2;
  padding-top: 5px;
  min-height: 400px;
  height: 400x;
  width: 448px;
}

*>#News
{
  height: auto;
}

.news_heading
{
    background: url("blue-neutral-img/arrow3.gif") top right no-repeat;
  line-height: 45px;
  padding-left: 345px;
}

#Bottom
{
  width: 904px;
  margin-left: 48px;
  float: left;
  padding-top: 10px;
  background: url("blue-neutral-img/bottom.gif") top right no-repeat;
}

*>#Bottom
{
    margin-left: 96px;
}

.down
{
  margin-left: 650px;
  padding-bottom: 10px;
  font-size: 11px;
}

.down a
{
    color: #5a5551;
}

</style>


</head>
<body>
<div id="WholePage">
  <div id="Inner">
    <div id="Container">
      <div id="TopPart">
        <div id="Head">
          <div class="email"> info@company.com<br/>
            +415 777 896 231 </div>
          <div class="name"> COMPANY NAME </div>
          <div class="adress"> www.companyname.com </div>
        </div>
      </div>
      <div id="Shadow">
        <div id="CentralPart">
          <div id="Menu"> <a class="homepage" href="http://www.free-css.com/"><span>Homepage</span></a> <a class="about-us" href="http://www.free-css.com/"><span>About Us</span></a> <a class="products" href="http://www.free-css.com/"><span>Products</span></a> <a class="services" href="http://www.free-css.com/"><span>Services</span></a> <a class="support" href="http://www.free-css.com/"><span>Support</span></a> <a class="contact" href="http://www.free-css.com/"><span>Contact</span></a> </div>
          <div id="LeftPart">
            <div class="article_left">
              <h2 class="heading_left">Welcome to our site</h2>
              <p class="paragraf_left">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis mauris. Mauris ac lacus eget lorem suscipit dictum. Proin placerat, sapien nec molestie scelerisque, magna libero tincidunt diam, a dapibus risus nulla quis nisi. Suspendisse sodales. Cras sit amet felis quis pede sodales venenatis. </p>
            </div>
            <div id="Page">
              <h1>Homepage</h1>
              <p class="paragraf_left2">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis mauris. Mauris ac lacus eget lorem suscipit dictum. Proin placerat, sapien nec molestie scelerisque, magna libero tincidunt diam, a dapibus risus nulla quis nisi. Suspendisse sodales. Cras sit amet felis quis pede sodales venenatis. Nunc hendrerit lectus a sem. Donec augue quam, molestie ac, aliquam a, consectetuer consequat, nibh. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Quisque interdum condimentum leo. Cras dictum lectus a nibh. Praesent vel ligula. Cras lobortis aliquet nibh. Donec aliquam imperdiet lorem. Nam accumsan mollis ante. </p>
              <p class="paragraf_left2">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis mauris. Mauris ac lacus eget lorem suscipit dictum. Proin placerat, sapien nec molestie scelerisque, magna libero tincidunt diam, a dapibus risus nulla quis nisi. Suspendisse sodales. Cras sit amet felis quis pede sodales venenatis. Nunc hendrerit lectus a sem. Donec augue quam, molestie ac, aliquam a, consectetuer consequat, nibh. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Quisque interdum condimentum leo. Cras dictum lectus a nibh. Praesent vel ligula. Cras lobortis aliquet nibh. Donec aliquam imperdiet lorem. Nam accumsan mollis ante.Vestibulum commodo pellentesque libero. Nulla mi. Integer interdum. Morbi at lacus. Duis suscipit consectetuer lectus. Nullam erat. Proin et lorem. Proin et felis eget purus sodales tempor. Morbi rutrum. Morbi enim. </p>
            </div>
          </div>
          <div id="RightPart">
            <div class="article_right">
              <h2 class="heading_right">Job vacancies</h2>
              <p class="paragraf_right">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis mauris. Mauris ac lacus eget lorem suscipit dictum. Proin placerat, sapien nec molestie scelerisque, magna libero tincidunt diam, a dapibus risus nulla quis nisi. Suspendisse sodales. Cras sit amet felis quis pede sodales venenatis. </p>
            </div>
            <div id="News">
              <h2 class="news_heading">News</h2>
              <h3>| 14.3.2007 |</h3>
              <p class="paragraf_right2">Vestibulum commodo pellentesque libero. Nulla mi. Integer interdum. Morbi at lacus. Duis suscipit consectetuer lectus. Nullam erat. Proin et lorem. Proin et felis eget purus sodales tempor. Morbi rutrum. Morbi enim. Maecenas quis sem. Curabitur ipsum. Nam rhoncus, leo non pharetra convallis, dui libero suscipit lorem, at euismod turpis erat id nibh.Nunc rutrum est sit amet mi. Morbi mattis, mauris sed semper tincidunt, turpis elit elementum elit, pretium porta justo elit vitae ligula.</p>
              <h3>| 17.5.2007 |</h3>
              <p class="paragraf_right2">Vestibulum commodo pellentesque libero. Nulla mi. Integer interdum. Morbi at lacus. Duis suscipit consectetuer lectus. Nullam erat. Proin et lorem. Proin et felis eget purus sodales tempor. Morbi rutrum. Morbi enim. Maecenas quis sem. Curabitur ipsum. Nam rhoncus, leo non pharetra convallis, dui libero suscipit lorem, at euismod turpis erat id nibh.</p>
              <h3>| 21.7.2007 |</h3>
              <p class="paragraf_right2">Vestibulum commodo pellentesque libero. Nulla mi. Integer interdum. Morbi at lacus. Duis suscipit consectetuer lectus. Nullam erat. Proin et lorem. Proin et felis eget purus sodales tempor. Morbi rutrum. Morbi enim. Maecenas quis sem. Curabitur ipsum. Nam rhoncus, leo non pharetra convallis, dui libero suscipit lorem.</p>
            </div>
          </div>
          <div class="cleaner"></div>
        </div>
      </div>
      <div id="Bottom">
        <p class="down">Copyright &copy; 2007, <a href="http://www.sunlight.cz">Design by: Sunlight webdesign</a></p>
      </div>
    </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-pigment1
19.	blue-sky
20.	blue-white
21.	blue-wood
22.	Blue 1
23.	blue99
24.	blueblogtemplate
25.	bluebottle
26.	BlueBridge
27.	bluebrush
28.	bluebusiness
29.	bluecarbon
30.	bluecorporation
31.	bluediamond
32.	blueflex
33.	BlueFlower
34.	BlueFresh
35.	bluegray
36.	blueled
37.	blueminimal
38.	blueminimalsidebar
39.	blueprism
40.	Blueshine
41.	blueshuffle
42.	BlueSpace
43.	BlueSquareShadow
44.	bluesurge
45.	bluethickline
46.	bluetoolkit
47.	bluewave
48.	blueweb
49.	blueworld
50.	bluey
51.	blue_circles
52.	blue_sky
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