Biru_Manteb : Design 4 « Templates « HTML / CSS

Biru_Manteb

     

<!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>Biru_Manteb &raquo; Made Bay Kodokhunt aka Hendrawan</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="Author" content="hendrawan ak.a kodokhunt" />
<style type='text/css'>
/*Author Name: Hendrawan
  Author NickName: Kodokhunt
  URI 1:http://kodokhunt.blogsome.com
  URI 2:http://dot.choosen.net
  OFFICE 1:http://bascomp.org
  OFFICE 2:http://choosen.net
  */
/*---------------|||||||||||Global------------------------------------------------------*/
  
  body {
    margin:0 auto;
    margin-bottom: 30px;
    margin-top: 0px;
    background:#2763A5 url(Biru_Manteb-img/back.gif);
    }

  a {
    color: #6DA6E2;
    text-decoration: none;
    font-weight: bold;
    }

  a:hover {
    color:#2763A5;
    font-weight: bold;
    text-decoration: underline;
    }
    
/*---------------|||||||||||Container------------------------------------------------------*/

  #container {
    width: 750px;
    margin: 0 auto;
    font-family: Georgia, Times New Roman, Times, serif;
    font-size: 11px;
    line-height: 1.6em;
    margin-top:30px;
    color: #666;
    background-color: #fff;
    }
    
  #container2 {
    width: 750px;
    margin: 0 auto;
    font-family: Georgia, Times New Roman, Times, serif;
    font-size: 11px;
    line-height: 1.6em;
    color: #666;
    background-color: #fff;
    }
    
/*---------------|||||||||||header-------------------------------------------------------------------*/

  #header {
    width: 745px;
    border: 2px solid #fff;
    padding-bottom:10px;
    padding-top: 10px;
    clear: both;
    background:url(Biru_Manteb-img/head.gif) no-repeat;
    }
    
  #header p { 
    margin-top: -3px;
    margin-left: 30px;
    color: #fff;
      font-family: Georgia, Times New Roman, Times, serif;
    }
      
  #header h1 {
    font-family: Georgia, Times New Roman, Times, serif;
    font-weight: bold;
    font-size: 32px;
    color: #fff;
    margin-bottom: 10px;
    margin-top:30px;
    margin-left: 10px;
    }
    
  #header a {
    color: #6DA6E2;
    text-decoration: none;
    }

  #header a:hover {
    color: #999;
    }
      
/*---------------|||||||||||Menu-------------------------------------------------*/

    #menu {
      float:left;
      width:745px;
      font-size:93%;
    padding-bottom: 1px;  
    background:url(Biru_Manteb-img/menu.gif);
      line-height:normal;
      }
    
    #menu ul {
    margin:0;
    padding:10px 10px 0 20px;
    list-style:none;
      }
    
    #menu li {
      display:inline;
      margin:0;
      padding:0;
      }
    
    #menu a {
      float:left;
      background:url(Biru_Manteb-img/left.gif) no-repeat left top;
      margin:0;
      padding:0 0 0 6px;
      text-decoration:none;
      }
    
    #menu a span {
      float:left;
      display:block;
      background:url(Biru_Manteb-img/right.gif) no-repeat right top;
      padding:5px 15px 4px 6px;
      color:#fff;
      }
    
    #menu a span {
    float:none;
    }
    
    #menu a:hover {
     background-position:0% -42px;
      }
    
    #menu a:hover span {
     background-position:100% -42px;
      }

/*---------------|||||||||||Content------------------------------------------------*/

  #content {
    width: 520px;
    padding-left: 10px;
    padding-right: 10px;
   padding-top: 10px;
    float: left; 
    }
    
  #content p {
    padding-bottom: 12px;
    border-bottom: 1px solid #ddd;
    }
    
  #content h2 {
    color: #666;
    font-size: 16px;
    font-weight:bold;
    text-decoration:underline;
    font-family: Georgia, Times New Roman, Times, serif;
    background-color: #fff;
    }
    
  #content h2 a {
    color: #666;
    text-decoration: none;
    }

  #content h2 a:hover {
    color: #999;
    }

/*---------------|||||||||||Sidebar------------------------------------------*/

  #sidebar {
    width: 175px;
    padding-left: 19px;
    padding-right: 10px;
    padding-top: 10px;
    padding-bottom: 0.5em;
    float: right;background:#F1F1F1;
    border-right:4px solid #fff;
    }
    
  #sidebar p {
    padding-bottom: 10px;
    }
    
    #sidebar h2 {
    color: #2763A5;
    font-size: 16px;
    padding-left:15px;
    background:url(Biru_Manteb-img/arrow.gif)no-repeat bottom left;
    font-weight:bold;border-bottom: 1px solid #ddd;
    font-family: Georgia, Times New Roman, Times, serif;
    }
    
/*---------------|||||||||||Footer-----------------------------------------------*/

  #footer {
    clear: both;
    width: 745px;
    font-size:10px;border:2px solid #fff;
       background:#2763A5 url(Biru_Manteb-img/foot.gif);
     background-repeat: no-repeat;
    }
    
  #footer p {
    color:#fff;
    padding: 2px;
    text-align: center;
    }
    
  #footer p a {
    color: #fff;
    background:#2763A5 url(Biru_Manteb-img/foot.gif);
    font-weight:100;
    border-bottom: 1px dotted #fff;
    }
    
  #footer p a:hover {
    color: #fff;
    text-decoration: none;
    border-bottom: 0px dotted #fff;
    }
  
/*---------------|||||||||||Search--------------------------------------------------------------*/

  form {
    float:right;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
    margin-right:5px;
    color:#fff;
    }
    
  input {
    background-color: #fff;
    color: #999;
    border: 1px solid #2763A5;
    font-size: 11px;
    padding: 3px;
    }
    
  .button {
    padding: 2px;
    background-color: #6DA6E2;
    color: #fff;
    border: 1px solid #2763A5;
    font-size: 11px;
    }
     
/*---------------|||||||||||Others--------------------------------------------------------------*/    
  
  a img{
    border: none;
    }
  .box {
      background-color: #fff;
      border: 1px solid #2763A5;
    padding: 5px;
    font-family: Georgia, Times New Roman, Times, serif;
    color: #000;
    font-size: 10px;
    }
  

</style>


</head>

<body>
<!--Contain-->
<div id="container">
    
<!--Skuadron Atas-->
<div id="header">
  <!--Search Facilty-->
  <form method="get" action="http://www.google.com/custom">
       <input name="q" size="25" maxlength="255" value="" type="text" />
        <input name="sa" value="search" type="submit" />
         <input name="cof" value="" type="hidden" />
         </form>
      
<h1>Biru_Manteb Gitu Loh..!!</h1>
<p>[ This Template used for my company site on http://choosen.net ]</p>

<!--Navigasi Skuad-->
<div id="menu">
  <ul>
    <li><a href="#"><span>Home</span></a></li>
    <li><a href="#"><span>Profile</span></a></li>
    <li><a href="#"><span>Services</span></a></li>
    <li><a href="#"><span>The Staff</span></a></li>
    <li><a href="#"><span>Downloads</span></a></li>
    <li><a href="#"><span>Contact</span></a></li>
  </ul>
 </div>
</div>
<!--Contain2 Skuad-->
<div id="container2">
  <!--COntent SKuad-->
  <div id="content">
    <h2><img src="Biru_Manteb-img/no_1.gif" alt="" align="bottom" />[Biru_Manteb]</h2>
      <p>
      Welcome To My Biru_Manteb Design, This my Fourth Design for OPen Source Community, 
      This Design used -I hope- for Bussiness website, you can customizing the menu and anything else
      with your idea and is very simply. <br />The Background Idea just only repeat the source image.<br />
      Background Menu, Header, Footer and Arrow in the sidebar used an image, if you think this make your site slowly you can change it,
      maybe with "background-color:#2763A5;", but trust me its makes not cool, huh..<br />
      I hope you can enjoy with this template, No right reserved and links back to me, <br />
      just remember this template was design by <a href="http://dot.choosen.net">me</a><br /><br />
      salam!!<br />Indonesia Goes Open Source<br />
      <a href="#">..more</a></p>
    <h2><img src="Biru_Manteb-img/no_2.gif" alt="" align="bottom" />[Lorem Ipsum]</h2>
      <p>Ini Isi dari website, ini isi dari website
      Ini Isi dari website, ini isi dari website
      Ini Isi dari website, ini isi dari website
      Ini Isi dari website, ini isi dari website
      Ini Isi dari website, ini isi dari website
      Ini Isi dari website, ini isi dari website
      Ini Isi dari website, ini isi dari website
      Ini Isi dari website, ini isi dari website
      Ini Isi dari website, ini isi dari website
      Ini Isi dari website, ini isi dari website</p>  
  </div>

<!--SideBar Here Bro-->
<div id="sidebar">
  <!--Skuad Right-->
<h2>Links!!!</h2>
<p>
&raquo;&nbsp;<a href="http://kodokhunt.blogsome.com">kodokhunt!</a><br />
&raquo;&nbsp;<a href="http://dot.choosen.net">hendrawan!</a><br />
&raquo;&nbsp;<a href="http://bascomp.org">Bascomp.org!</a><br />
&raquo;&nbsp;<a href="http://choosen.net">Choosen.net!</a><br />
&raquo;&nbsp;<a href="http://oswd.org">OSWD!</a><br />
&raquo;&nbsp;<a href="http://openwebdesign.org">OpenWebDesign!</a>
</p>
<h2>Support</h2>
<p>Add Our Banner to your web site or promote me in your email signature.<br />
Just simply copy and paste the source below to link Back to <a href="#">Us</a>..<br />
<textarea cols="30" rows="4" class="box">
&lt;a href=&quot;#&quot; title=&quot;&quot;&nbsp;target=&quot;_blank&quot;&gt;&lt;img src=&quot;http://domain.tld/Biru_Manteb-img/*.gif&quot; border=&quot;0&quot; width=&quot;120px&quot; height=&quot;60px&quot; /&gt;&lt;/a&gt;
</textarea><br />
</p>
<h2>Lorem Ipsum!!!</h2>
<p>
This sidebar..
used for latest news, latest activity,
testimonial, your client links, your partner links,
maybe a random image..up to you!!!
</p>
</div>

</div><!--End Contain2 here-->

<!--Known Ur Footer-->
<div id="footer">
<p><a href="#">Copyright</a> &copy; 2006 your Company Name, No Rights Reserved | Design by <a href="http://kodokhunt.blogsome.com">kodokhunt</a> aka <a href="http://dot.choosen.net">hendrawan</a></p>
</div>

</div><!--End Contain here-->

</body>
</html>
<!--Made on 12 Muharram 1427 H >> hep Phun, "kodokhunt, yo!"-->

Related examples in the same category

1.	arrangement
2.	arthemia
3.	artica
4.	aspherical
5.	assiduous
6.	asterisk
7.	astounded
8.	astroturfd
9.	atomohost
10.	atrandafir582
11.	AttainDigital
12.	audi-template
13.	aurelius
14.	authenticity
15.	autoportal
16.	axian
17.	azulmedia2-1
18.	azure
19.	bagatelle
20.	balanced
21.	bananaleaf
22.	barricade
23.	begrimed
24.	belowthehorizon
25.	bennevis
26.	bermuda01
27.	besmart
28.	bestwebdesign
29.	beta
30.	beyond
31.	bigdeal
32.	BigSpaceLove
33.	bioessence
34.	bittersweet
35.	Black
36.	chamberlandsrestaurant
37.	chara
38.	characterized
39.	charcoal
40.	charitable-organization
41.	chary
42.	chasmogamous
43.	chesspiece
44.	chic
45.	chicanery
46.	chromz
47.	churchsitev.2
48.	citrus-island1-1
49.	clementine
50.	clicker
51.	modernclassic
52.	modernmagic
53.	modernworld
54.	A_Simple_Theme
55.	minimalistica
56.	miniseries
57.	mint-idea
58.	minty
59.	mirax
60.	miscellaneous
61.	mistybud
62.	mlpdesign02
63.	mlpdesign03
64.	mlpdesign04
65.	mlpdesign08
66.	model-4-me
67.	model-portfolio
68.	modelagency
69.	modelportfolio
70.	model_2
71.	moderna
72.	Modified
73.	modulation
74.	module-mag
75.	mokofactory
76.	monster
77.	mork-horisont
78.	mountainbreeze
79.	mouse
80.	mrtechie
81.	multiflex2
82.	multiple
83.	multiplex
84.	music
85.	muzzle
86.	MyCode
87.	mydiary
88.	myfamily
89.	myhedspacefree08
90.	mykindathing
91.	myportfolio
92.	mystic-garden
93.	Mythology
94.	myvalentine
95.	naeve
96.	natheless
97.	nationalpark
98.	neapolitan
99.	neatness
100.	nebuladog
101.	nedweb
102.	NelVoize
103.	neoneon
104.	neonix
105.	neoplanet-01
106.	neotech
107.	netindustries
108.	neuphoric
109.	neutral
110.	neutraldesk
111.	neutralgreen
112.	new kitchen design
113.	new-fast-host
114.	new-home
115.	new-rise
116.	new-year