bubble : Effect « Templates « HTML / CSS

bubble

     

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>BUBBLE</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type='text/css'>
html, body {
margin : 0;
padding : 0;
}
body {
font : 73% "lucida sans", "Trebuchet MS", Arial, Helvetica, Tahoma, sans-serif;
color : #a52a2a;
background : #2e2e2e url(bubble-images/bg.jpg) repeat top center;
}
#container {
width : 750px;
margin : 0 auto;
padding : 0;
line-height : 1.5em;
background : #eee;
color : #666;
}
#top {
height : 350px;
margin : 0;
padding : 0;
background : #ad6743 url(bubble-images/top.jpg);
color : #000;
}
#top h1 {
padding : 10px;
margin : 0;
font : bold 90% "lucida sans", Helvetica, "Trebuchet MS", arial, Tahoma, sans-serif;
letter-spacing : 5px;
text-align : right;
color : #000;
background : inherit;
}
#leftnav {
line-height : 2em;
float : left;
width : 180px;
margin : 0;
padding : 0;
color : #666;
background : #f7f7f7 url(bubble-images/side.jpg) no-repeat top center;
}
#content {
margin : 0 0 20px 190px;
padding : 0;
}
#content p {
margin : 0 25px 5px 15px;
}
#content p a {
text-decoration : none;
background : inherit;
color : #286E87;
}
#content p a:hover {
text-decoration : underline;
color : #818181;
background : inherit;
}
#footer {
clear : both;
margin : 0;
padding : 0.5em;
color : #fff;
background : #286e87;
}
#leftnav p {
margin : 10px;
}
h2 {
margin : 0 0 20px 0;
padding : 10px;
font-size : 140%;
letter-spacing : 5px;
color : #286e87;
background : inherit;
}
h3 {
margin : 0;
padding : 20px 0 10px 20px;
font-size : 140%;
text-transform : none;
color : #fff;
background : inherit;
}
blockquote {
font-weight : bold;
font-style : italic;
color : #b29b35;
}
#footer img {
float : right;
}
*> html #footer img {
margin : 0;
}
a:link, a:visited {
color : #000;
background : inherit;
text-decoration : none;
}
a:hover {
text-decoration : none;
color : #ccc;
background : inherit;
}
a:active {
text-decoration : none;
color : #fff;
background : inherit;
}
#navlist li {
list-style-type : square;
background : inherit;
color : #286e87;
margin : 0 15px 0 0;
padding : 0;
}
.gallery {
height : 100px;
}
#gallery img {
float : left;
padding : 10px;
}
img {
border : none;
}
.quotebox {
margin : 10px;
border : 1px solid #fff;
padding : 20px;
color : #fff;
background : #818181;
font-size : 0.9em;
}

</style>


<link href="menu.css" rel="stylesheet" type="text/css" />
<!--[if lt IE 8]>
<style type="text/css" media="screen">
#menuh{float:none;}
body{behavior:url(csshover.htc); font-size:73%;}
#menuh ul li{float:left; width: 100%;}
#menuh a{height:1%;font:bold 1em/1.4em "lucida sans", helvetica, "Trebuchet MS", arial, sans-serif;}
</style>
<![endif]-->
</head>
<body>
<div id="container">
  <div id="top">
    <h1><a href="http://www.free-css.com/">Homepage</a> | <a href="http://www.free-css.com/"> contact</a></h1>
    <div id="menuh-container">
      <div id="menuh">
        <ul>
          <li><a href="http://www.free-css.com/" class="top_parent">&nbsp; Homepage</a>
            <ul>
              <li><a href="http://www.free-css.com/">&bull; About</a></li>
            </ul>
          </li>
        </ul>
        <ul>
          <li><a href="http://www.free-css.com/" class="top_parent">&nbsp; Gallery 1</a>
            <ul>
              <li><a href="http://www.free-css.com/">&bull; Link 1</a></li>
              <li><a href="http://www.free-css.com/">&bull; Link 2</a></li>
              <li><a href="http://www.free-css.com/">&bull; Link 3</a></li>
            </ul>
          </li>
        </ul>
        <ul>
          <li><a href="http://www.free-css.com/" class="top_parent">&nbsp; Gallery 2</a>
            <ul>
              <li><a href="http://www.free-css.com/">&bull; Link 1</a></li>
              <li><a href="http://www.free-css.com/">&bull; Link 2</a></li>
              <li><a href="http://www.free-css.com/">&bull; Link 3</a></li>
            </ul>
          </li>
        </ul>
        <ul>
          <li><a href="http://www.free-css.com/" class="top_parent">&nbsp; Gallery 3</a></li>
        </ul>
        <ul>
          <li><a href="http://www.free-css.com/" class="top_parent">&nbsp; Resources</a></li>
        </ul>
        <ul>
          <li><a href="http://www.free-css.com/" class="top_parent">&nbsp; Contact</a></li>
        </ul>
      </div>
    </div>
  </div>
  <div id="leftnav">
    <h3>Links</h3>
    <div id="nav">
      <ul id="navlist">
        <li><a href="http://www.free-css.com/">Home</a></li>
        <li><a href="http://www.free-css.com/">Open Designs</a></li>
        <li><a href="http://www.free-css.com/">Andreas Viklund</a></li>
        <li><a href="http://www.free-css.com/">James Koster</a></li>
        <li><a href="http://www.free-css.com/">CSS play</a></li>
        <li><a href="http://www.free-css.com/">Listamatic</a></li>
      </ul>
    </div>
    <p>This is a <a href="http://www.free-css.com/">LINK</a> to nowhere. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi quis ligula. Donec tortor purus, ornare vel, tincidunt at, lacinia ac, leo. Nunc fermentum congue odio.</p>
    <p class="quotebox">"You can't depend on your eyes if your imagination is out of focus" ~ Mark Twain</p>
  </div>
  <div id="content">
    <h2>Your Company Name</h2>
    <blockquote>All images were created by me so feel free to use them if you wish. The page has been tested in Mozilla and IE7. The page validates as XHTML 1.0 Transitional using valid CSS.<br />
      For more FREE templates visit my website.</blockquote>
    <h2>Header</h2>
    <div class="gallery"> <img src="bubble-images/img.jpg" alt="" /> <img src="bubble-images/img.jpg" alt=""/> <img src="bubble-images/img.jpg" alt=""/> <img src="bubble-images/img.jpg" alt=""/>
      <div class="clear"></div>
    </div>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi quis ligula. Donec tortor purus, ornare vel, tincidunt at, lacinia ac, leo. Nunc fermentum congue odio. Mauris cursus, pede vitae sagittis luctus, dolor felis aliquam arcu, ac pulvinar lacus massa non ipsum. </p>
    <h2>Header</h2>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi quis ligula. Donec tortor purus, ornare vel, tincidunt at, lacinia ac, leo. Nunc fermentum congue odio. Mauris cursus, pede vitae sagittis luctus, dolor felis aliquam arcu, ac pulvinar lacus massa non ipsum. </p>
  </div>
  <div id="footer"> <a href="http://www.free-css.com/">Homepage</a> | <a href="http://www.free-css.com/">contact</a> | <a href="http://validator.w3.org/check?uri=referer">html</a> | <a href="http://jigsaw.w3.org/css-validator">css</a> | &copy; 2007 Anyone | Design by <a href="http://www.mitchinson.net"> www.mitchinson.net</a> | This work is licensed under a <a rel="license" target="_blank" href="http://creativecommons.org/licenses/by/3.0/">Creative Commons Attribution 3.0 License</a> </div>
</div>
</body>
</html>

Related examples in the same category

1.	amazinglycool
2.	exposure
3.	expressivestars
4.	extended
5.	external
6.	extracts
7.	falling-away
8.	fantasy
9.	flare
10.	flashyweb
11.	flash_web
12.	fireworks
13.	floating
14.	falling
15.	fantasyland
16.	metamorph_weird
17.	metamorph_violet
18.	metamorph_violetdream
19.	metamorph_mydesign
20.	metamorph_myst
21.	metamorph_mywaves
22.	metamorph_myweb
23.	metamorph_freedom_lt
24.	metamorph_gloryfield
25.	metamorph_horizon
26.	classic-luxury
27.	classic
28.	classique
29.	classliclink
30.	civilized
31.	metamorph_cool
32.	metamorph_imaginary
33.	metamorph_infinity
34.	metamorph_newage
35.	metamorph_madness
36.	metamorph_heaven
37.	metamorph_lensflare
38.	metamorph_shinyblur_lt
39.	metamorph_sparks_lt
40.	metamorph_soulfrost
41.	metamorph_space
42.	metamorph_spaceglowing
43.	metamorph_sphere
44.	metamorph_starwars
45.	metamorph_steel
46.	metamorph_stones
47.	abundant
48.	chalkboard
49.	cool-web
50.	coolblack
51.	CoolishBlack
52.	coolracing
53.	coolzone
54.	cool_web
55.	creative-media
56.	creative-mind
57.	creative
58.	creevykeel
59.	decayed
60.	essence
61.	essential
62.	auroradesktop
63.	scenic-reflections