iblue2b : Blue « Templates « HTML / CSS






iblue2b

    

<!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>
<title>iBlue2b</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type='text/css'>
/*
Theme Name: iBlue2b
Theme URI: http://www.darjanpanic.com
Description: iBlue2b Template v1 by Brian Green and Darjan Panic.
Version: 1.0
Author: Brian Green and Darjan Panic

Use it however you want, just leave the links in the footer :)
*/

body {
background: url(iblue2b-images/bg.jpg) no-repeat;
}

a {
color: #376EAB;
}

#line1 {
background: #464646;
height:30px;
width: 360px;
float:left;
display: block;
background: url(iblue2b-images/bg.gif);
}

#line2 {
background: #376EAB;
height:30px;
width: 380px;
float:right;
display: block;
}

#line3 {
text-align:center;
background: #464646;
height:30px;
width: 360px;
float:left;
display: block;
background: url(iblue2b-images/bg.gif);
color: #ffffff;
font-size: 10px;
line-height: 30px;
font-family: tahoma;
}

#line3 a:link {
color: #ffffff;
font-size: 10px;
font-family: tahoma;
text-decoration: underline;
}
#line3 a:visited {
color: #ffffff;
font-size: 10px;
font-family: tahoma;
text-decoration: underline;
}

#line3 a:hover {
color: #ffffff;
font-size: 10px;
font-family: tahoma;
text-decoration: underline;
}

#line4 {
background: #376EAB;
height:30px;
width: 380px;
float:right;
display: block;
}

#container {
width: 750px;
border-top: dotted 1px #c7c7c7;
margin-top:5px;
padding-top: 5px;
}



#left {
margin-top:5px;
width: 180px;
height: 100px;
float: left;
color: #c7c7c7;
font-family: verdana;
font-size: 10px;
}

#center {
margin-top:5px;
width: 180px;
float: left;
}

#right {
margin-top:5px;
width: 380px;
float: right;
}

#name {
padding-left: 180px;
font-family: "trebuchet ms";
font-size: 36px;
color: #376EAB;
text-decoration: none;
}

#name a {
text-decoration: none;
}

.black {
font-family: "trebuchet ms";
font-size: 24px;
color: #464646;
}

h1 {
border-left: 5px solid #464646;
font-family: "trebuchet ms";
font-size: 24px;
padding: 0px;
margin: 0px;
padding-left: 10px;
color: #464646;
}

.storytitle {
border-left: 5px solid #464646;
font-family: "trebuchet ms";
font-size: 24px;
padding: 0px;
margin: 0px;
padding-left: 10px;
color: #464646;
}

.storytitle a:link {
border-left: 5px solid #464646;
font-family: "trebuchet ms";
font-size: 24px;
padding: 0px;
margin: 0px;
padding-left: 10px;
text-decoration: none;
color: #464646;
}

.storytitle a:visited{
border-left: 5px solid #464646;
font-family: "trebuchet ms";
font-size: 24px;
padding: 0px;
margin: 0px;
padding-left: 10px;
text-decoration: none;
color: #464646;
}

.storytitle a:hover{
border-left: 5px solid #464646;
font-family: "trebuchet ms";
font-size: 24px;
padding: 0px;
margin: 0px;
padding-left: 10px;
text-decoration: underline;
color: #464646;
}

h2 {
border-left: 5px solid #464646;
color: #376EAB;
font-family: verdana;
font-size: 10px;
padding: 2px;
margin: 0px;
line-height: 14px;
padding-left: 10px;
margin-top: 20px;
}

blockquote {
background: url(iblue2b-images/bq1.gif) left top no-repeat;
margin: 5px;
padding: 5px;
}

blockquote p {
color: #0f3762;
font-family: verdana;
font-size: 10px;
padding: 15px;
background: url(iblue2b-images/bq2.gif) right bottom no-repeat;
}

#content {
border-top: dotted 1px #c7c7c7;
border-bottom: dotted 1px #c7c7c7;
color: #464646;
font-family: verdana;
font-size: 10px;
}

#menu p {
border-top: dotted 1px #464646;
border-bottom: 5px solid #464646;
color: #c7c7c7;
font-family: verdana;
font-size: 10px;
padding: 0px;
margin: 0px;
padding-right: 10px;
padding-left: 10px;
}

#menu a:link {
color: #464646;
font-family: "trebuchet ms";
font-size: 12px;
font-size: 12px;
padding-left: 10px;
margin-left: 0px;
padding-right: 10px;
margin-right: 0px;
text-decoration: none;
font-weight: bold;

}

#menu a:visited {
color: #464646;
font-family: "trebuchet ms";
font-size: 12px;
font-size: 12px;
padding-left: 10px;
margin-left: 0px;
padding-right: 10px;
margin-right: 0px;
text-decoration: none;
font-weight: bold;
}

#menu a:hover{
color: #ffffff;
font-family: "trebuchet ms";
font-size: 12px;
text-decoration: none;
font-weight: bold;
background: #376EAB;
}

ul, li {
margin: 0px;
padding: 0px;
list-style: none;
list-style-image: none;
font-family:"Century Gothic", "Trebuchet MS", "Arial Narrow", Arial, sans-serif;
font-weight:normal;
border-bottom:1px solid #C7C7C7;
color:#464646;
text-align:left;
}

#comments {
border-left: 5px solid #464646;
color: #464646;
font-family: verdana;
font-size: 14px;
padding: 0px;
margin: 0px;
line-height: 16px;
padding-left: 10px;
margin-top: 20px;
}

#comment-1 {
margin: 5px;
padding: 5px;
}

#comment-2 {
margin: 5px;
padding: 5px;
background: #e4e4e4;
}

#linkcat-1 h2 {
font-family:"Century Gothic", "Trebuchet MS", "Arial Narrow", Arial, sans-serif;
font-weight:normal;
color:#464646;
font-size: 24px;
margin-bottom: 3px;
line-height: 20px;
}

#categories h2 {
font-family:"Century Gothic", "Trebuchet MS", "Arial Narrow", Arial, sans-serif;
font-weight:normal;
color:#464646;
font-size: 24px;
margin-bottom: 3px;
line-height: 20px;
}

#pagenav h2{
font-family:"Century Gothic", "Trebuchet MS", "Arial Narrow", Arial, sans-serif;
font-weight:normal;
color:#464646;
font-size: 24px;
margin-bottom: 3px;
line-height: 20px;
}

#search h2{
font-family:"Century Gothic", "Trebuchet MS", "Arial Narrow", Arial, sans-serif;
font-weight:normal;
color:#464646;
font-size: 24px;
margin-bottom: 3px;
line-height: 20px;
}

#archives h2{
font-family:"Century Gothic", "Trebuchet MS", "Arial Narrow", Arial, sans-serif;
font-weight:normal;
color:#464646;
font-size: 24px;
margin-bottom: 3px;
line-height: 20px;
}

#meta h2{
font-family:"Century Gothic", "Trebuchet MS", "Arial Narrow", Arial, sans-serif;
font-weight:normal;
color:#464646;
font-size: 24px;
margin-bottom: 3px;
line-height: 20px;
}

.feedback {
font-size: 14px;
padding-bottom: 20px;
margin-bottom: 20px;
}

</style>


</head>
<body>
<div id="container">
  <div id="line1"> </div>
  <div id="line2"> </div>
  <div style="clear: both"></div>
  <div id="name">iBlue2B</div>
  <div id="left"> </div>
  <div id="center">
    <div id="menu">
      <p><a href="http://www.free-css.com/">menulink</a><br />
        menu </p>
      <p><a href="http://www.free-css.com/">menulink</a><br />
        menu </p>
      <p><a href="http://www.free-css.com/">menulink</a><br />
        menu </p>
      <p><a href="http://www.free-css.com/">menulink</a><br />
        menu </p>
      <p><a href="http://www.free-css.com/">menulink</a><br />
        menu </p>
      <p><a href="http://www.free-css.com/">menulink</a><br />
        menu </p>
    </div>
  </div>
  <div id="right">
    <div id="content">
      <h1 class="storytitle">Lorem ipsum</h1>
      <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus ac  nisl. Fusce egestas. Praesent vitae neque. Phasellus ultricies, lacus  quis sagittis vulputate, nisi tellus laoreet libero, vitae suscipit  urna urna ullamcorper augue. Phasellus enim. Fusce est tortor, cursus  sit amet, blandit id, sollicitudin a, pede. Sed eu massa id mauris  aliquam placerat. Curabitur turpis. Nulla id tellus. Praesent dolor  odio, tincidunt sit amet, vehicula nec, ornare nec, lectus. Vestibulum  rhoncus quam sed leo. Quisque leo odio, venenatis et, dictum non,  suscipit ut, lacus. Duis eleifend, metus imperdiet sagittis  scelerisque, nibh eros dictum arcu, in aliquam est tortor nec mi. Sed  quis massa vitae mauris ullamcorper faucibus. </p>
      <blockquote>
        <p>Nunc magna. Aliquam sodales porttitor elit. Etiam laoreet ligula sit  amet est. Aliquam vel quam vel diam tempor dictum. Nulla a lorem non  ipsum sagittis dignissim. Integer vestibulum quam eget lorem. Ut in  risus. Suspendisse lacinia posuere lacus. Proin egestas enim sit amet  urna. Cras sit amet lorem sed orci semper.</p>
      </blockquote>
      <p>Proin accumsan magna iaculis leo. Curabitur eget lorem. Vivamus eu  nisi ut risus nonummy scelerisque. Aenean faucibus fermentum orci. Duis  aliquet. Vestibulum non elit in ante condimentum pellentesque. Maecenas  ultricies lacus convallis leo. In hac habitasse platea dictumst.  Quisque imperdiet varius lectus. Vivamus lobortis scelerisque ligula.  Nulla sapien. Cras porta, tellus a dapibus mollis, dolor nisl lobortis  turpis, quis tincidunt turpis est eu nulla. Nullam tincidunt enim at  nulla. Etiam leo orci, porttitor ut, euismod eget, viverra eget,  lectus. Praesent quis augue. Phasellus ac nibh. Duis nulla. Curabitur  at tortor. </p>
      <h1 class="storytitle">Lorem ipsum</h1>
      <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus ac  nisl. Fusce egestas. Praesent vitae neque. Phasellus ultricies, lacus  quis sagittis vulputate, nisi tellus laoreet libero, vitae suscipit  urna urna ullamcorper augue. Phasellus enim. Fusce est tortor, cursus  sit amet, blandit id, sollicitudin a, pede. Sed eu massa id mauris  aliquam placerat. Curabitur turpis. Nulla id tellus. Praesent dolor  odio, tincidunt sit amet, vehicula nec, ornare nec, lectus. Vestibulum  rhoncus quam sed leo. Quisque leo odio, venenatis et, dictum non,  suscipit ut, lacus. Duis eleifend, metus imperdiet sagittis  scelerisque, nibh eros dictum arcu, in aliquam est tortor nec mi. Sed  quis massa vitae mauris ullamcorper faucibus. </p>
      <p>Nunc magna. Aliquam sodales porttitor elit. Etiam laoreet ligula sit  amet est. Aliquam vel quam vel diam tempor dictum. Nulla a lorem non  ipsum sagittis dignissim. Integer vestibulum quam eget lorem. Ut in  risus. Suspendisse lacinia posuere lacus. Proin egestas enim sit amet  urna. Cras sit amet lorem sed orci semper molestie. </p>
      <p>Proin accumsan magna iaculis leo. Curabitur eget lorem. Vivamus eu  nisi ut risus nonummy scelerisque. Aenean faucibus fermentum orci. Duis  aliquet. Vestibulum non elit in ante condimentum pellentesque. Maecenas  ultricies lacus convallis leo. In hac habitasse platea dictumst.  Quisque imperdiet varius lectus. Vivamus lobortis scelerisque ligula.  Nulla sapien. Cras porta, tellus a dapibus mollis, dolor nisl lobortis  turpis, quis tincidunt turpis est eu nulla. Nullam tincidunt enim at  nulla. Etiam leo orci, porttitor ut, euismod eget, viverra eget,  lectus. Praesent quis augue. Phasellus ac nibh. Duis nulla. Curabitur  at tortor. </p>
      <p>&nbsp;</p>
    </div>
  </div>
  <div style="clear: both"></div>
  <div id="line3">Template by <a href="http://www.darjanpanic.com">Darjan Panic</a> &amp; <a href="http://www.briangreens.com">Brian Green</a> </div>
  <div id="line4"></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_sky
54.blue_space
55.blue_trees
56.bublue-studio
57.bussinesblue
58.fain-blue
59.fairyblue
60.basicblue
61.CleanandBlue
62.cleanblue
63.freecss_blue
64.flyingblue
65.easy-blue
66.FunkyCoolBlue
67.genericblue
68.gallery-blue
69.MonsterBlue
70.Simple_Blue
71.wide-blue
72.a_bit_modern_bigBlue
73.mistyblue
74.portal_blue
75.SimplyBlue
76.sleekcssblue
77.Sexy_Blue
78.WonderfulBlue
79.sweetbuzzblue
80.light-blue
81.groovyblue