ice-bubble
?<!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>Ice Bubble</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type='text/css'>
/*
CSS Credit: http://www.templatemo.com/
*/
html {
background: #333;
}
body {
margin: 0;
padding:0;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 1.5em;
color: #fff;
width: 100%;
display: table;
background: url(ice-bubble-images/bg.jpg) repeat-x #666;
}
a { color: #0ff; }
a:hover { color: #cf0; }
#container {
width: 1000px;
margin: auto;
background: #000;
}
#header_section {
width: 1000px;
height: 419px;
background:url(ice-bubble-images/header.jpg) no-repeat;
}
#content_section {
width: 1000px;
background: #000;
}
/* Menu Section */
#menu_panel{
width:100%;
height: 78px;
margin: 0 auto;
background: url(ice-bubble-images/menu_bg.jpg) repeat-x;
float:left;
}
#menu_panel #menu_section{
width: auto;
height: 50px;
margin:0 auto;
padding: 0 0 0 20px;
color: #03a0a6;
}
#menu_section ul {
float: left;
width: 960px;
margin: 0;
padding-top: 15px;
list-style: none;
}
#menu_section ul li{
display: inline;
}
#menu_section ul li a{
float: left;
width: 120px;
padding-top: 18px;
font-size: 17px;
font-weight: bold;
text-align: center;
text-decoration: none;
color: #fff;
padding-left: 10px;
padding-right: 10px;
}
#menu_section li a:hover, #menu_section li .current{
color: #fff;
height: 50px;
background:url(ice-bubble-images/menu_current.jpg) repeat-x;
}
/* End Of Menu */
/* Logo Area */
#logo_section {
width: 400px;
height: auto;
margin-top: 70px;
margin-left: 36px;
float:left;
display: inline;
}
#logo_section h1 {
padding-top: 20px;
font-size: 36px;
color:#fff;
margin:0px;
}
#logo_section h2{
font-size:18px;
color:#fff;
padding:0px;
}
/* End Of Logo Area*/
/* Left Section */
#left_section{
width: 577px;
float: left;
margin-left: 35px;
margin-top: 10px;
display: inline;
}
.post{
width: 577px;
margin-bottom: 35px;
}
.post_top{
height: 53px;
width: 577px;
}
.post_top_left{
width: 48px;
background:url(ice-bubble-images/post_top_left.jpg) no-repeat;
height: 43px;
float: left;
padding-top: 10px;
padding-left: 10px;
font-size: 18px;
}
.post_top_left span{
margin-left: 5px;
font-size: 17px;
display: block;
}
.post_top_right{
width: 499px;
background:url(ice-bubble-images/post_top_right.jpg) no-repeat;
height: 35px;
float: right;
padding-top: 18px;
padding-left: 20px;
color: #fff;
font-size: 17px;
}
.post_middle{
width: 577px;
background: #001724;
}
.post_middle p{
color: #fff;
text-align: justify;
margin: 20px;
}
.post_middle img{
border: #ccc solid 1px;
float: left;
margin: 3px 15px 3px 0px;
}
.post_bottom{
width: 577px;
height: 46px;
background: url(ice-bubble-images/post_bottom.jpg) no-repeat;
}
/* End Of Left */
/* Right Section */
#right_section{
display: inline;
width: 320px;
float: right;
margin-top: 10px;
margin-right: 35px;
}
.section{
width: 320px;
margin-bottom: 35px;
}
.section .section_top{
height: 53px;
width: 320px;
}
.section_top_left{
width: 48px;
background:url(ice-bubble-images/post_top_left.jpg) no-repeat;
height: 43px;
float: left;
padding-top: 10px;
padding-left: 10px;
font-size: 18px;
}
.section_top_left span{
margin-left: 5px;
font-size: 17px;
display: block;
}
.section_top_right{
width: 242px;
background: url(ice-bubble-images/post_top_right.jpg) no-repeat right;
float: right;
height: 35px;
padding-top: 18px;
padding-left: 20px;
color: #fff;
font-size: 17px;
margin: 0px;
}
.section_middle{
width: 320px;
background: #001724;
}
.section_middle p{
color: #fff;
text-align: justify;
padding: 20px;
margin: 0px;
}
.section_middle img{
margin-top: 20px;
margin-left: 22px;
border: none;
}
.section_middle ul{
padding-bottom:15px;
padding-top: 20px;
padding-left: 35px;
margin: 0px;
color: #fff;
}
.section_bottom{
width: 320px;
height: 46px;
background: url(ice-bubble-images/post_bottom.jpg) no-repeat center;
}
/* End Of Right */
.clear{
clear:both;
height: 1px;
}
span.post{
margin: 15px 25px 0px 25px;
color: #fff;
font-size: 11px;
display: block;
}
* html span.post{
margin-top: 0px;
}
#footer{
width: 100%;
height: 28px;
background: url(ice-bubble-images/footer_bg.jpg) repeat-x;
text-align: center;
padding-top: 15px;
color: #fff;
}
#footer a{
color: #fff;
}
</style>
</head>
<body>
<div id="container">
<div id="header_section">
<div id="menu_panel">
<div id="menu_section">
<ul>
<li><a href="http://www.free-css.com/" class="current">Home</a></li>
<li><a href="http://www.free-css.com/">Recent Posts</a></li>
<li><a href="http://www.free-css.com/">Archives</a></li>
<li><a href="http://www.free-css.com/">Gallery</a></li>
<li><a href="http://www.free-css.com/">About Us</a></li>
<li><a href="http://www.free-css.com/">Contact Us</a></li>
</ul>
</div>
</div>
<div id="logo_section">
<h1>Ice Bubble</h1>
<h2>Your tag line goes here</h2>
</div>
</div>
<div id="content_section">
<div id="left_section">
<div class="post">
<div class="post_top">
<div class="post_top_left"> FEB <span>24</span> </div>
<div class="post_top_right"> Post Title One goes here </div>
</div>
<div class="post_middle">
<div class="clear"></div>
<p><img alt="" src="ice-bubble-images/067_fashion.jpg" />Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque lobortis odio ac sapien. Proin semper justo non dui. Sed ut felis in tellus condimentum rhoncus. Sed dui.</p>
<p> Cras quis purus in est molestie malesuada. Vivamus interdum, pede sed malesuada facilisis, odio nibh gravida nulla, nec malesuada lacus arcu id leo.</p>
<div class="clear"></div>
</div>
<div class="post_bottom">
<div class="clear"> </div>
<span class="post">Posted By: Admin | Category: <a href="http://www.free-css.com/">CSS Templates</a> | Date: 18:30, 24 February 2024</span> </div>
</div>
<div class="post">
<div class="post_top">
<div class="post_top_left"> DEC <span>18</span> </div>
<div class="post_top_right"> Post Title Two goes here </div>
</div>
<div class="post_middle">
<div class="clear"></div>
<p><img alt="" src="ice-bubble-images/053_business.jpg" />Sed ut felis in tellus condimentum rhoncus. Sed dui. Maecenas molestie, risus egestas rutrum aliquam, ligula enim bibendum eros, vel ultrices tellus mi eget purus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque lobortis odio ac sapien. Proin semper justo non dui. </p>
<p> Etiam ac metus eu quam vestibulum facilisis. Cras quis purus in est molestie malesuada. Vivamus interdum, pede sed malesuada facilisis, odio nibh gravida nulla, nec malesuada lacus arcu id leo. Mauris diam ligula, adipiscing a, mollis eu, gravida eget, orci. Nam lacinia, enim in elementum posuere.</p>
<div class="clear"></div>
</div>
<div class="post_bottom">
<div class="clear"> </div>
<span class="post">Posted By: Admin | Category: <a href="http://www.free-css.com/">Flash Templates</a> | Date: 21:40, 18 December 2024</span> </div>
</div>
<div class="post">
<div class="post_top">
<div class="post_top_left"> DEC <span>12</span> </div>
<div class="post_top_right"> Post Title Three goes here </div>
</div>
<div class="post_middle">
<div class="clear"></div>
<p>Maecenas molestie, risus egestas rutrum aliquam, ligula enim bibendum eros, vel ultrices tellus mi eget purus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque lobortis odio ac sapien. Proin semper justo non dui. </p>
<p> Vivamus interdum, pede sed malesuada facilisis, odio nibh gravida nulla, nec malesuada lacus arcu id leo. Mauris diam ligula, adipiscing a, mollis eu, gravida eget, orci.</p>
<div class="clear"></div>
</div>
<div class="post_bottom">
<div class="clear"> </div>
<span class="post">Posted By: Admin | Category: <a href="http://www.free-css.com/">Flash Templates</a> | Date: 14:25, 12 December 2024</span> </div>
</div>
</div>
<div id="right_section">
<div class="section">
<div class="section_top">
<div class="section_top_left"> </div>
<div class="section_top_right"> About This Blog</div>
</div>
<div class="section_middle">
<p>This free blog website template is provided by TemplateMo.com. You may download, modify and apply this layout for your blog content management systems. Have Fun!</p>
</div>
<div class="section_bottom"> </div>
</div>
<div class="section">
<div class="section_top">
<div class="section_top_left"> </div>
<div class="section_top_right"> Categories</div>
</div>
<div class="section_middle">
<ul>
<li><a href="http://www.free-css.com/">Web Design</a></li>
<li><a href="http://www.free-css.com/">JavaScripts</a></li>
<li><a href="http://www.free-css.com/">Photo Gallery</a></li>
<li><a href="http://www.free-css.com/">CSS Templates</a></li>
<li><a href="http://www.free-css.com/">Flash Templates</a></li>
</ul>
</div>
<div class="section_bottom"> </div>
</div>
<div class="section">
<div class="section_top">
<div class="section_top_left"> </div>
<div class="section_top_right"> Advertisements</div>
</div>
<div class="section_middle"> <a href="http://www.free-css.com/"><img alt="" src="ice-bubble-images/ads.jpg" /></a> <a href="http://www.free-css.com/"><img alt="" src="ice-bubble-images/ads.jpg" /></a> <a href="http://www.free-css.com/"><img alt="" src="ice-bubble-images/ads.jpg" /></a> <a href="http://www.free-css.com/"><img alt="" src="ice-bubble-images/ads.jpg" /></a> </div>
<div class="section_bottom"> </div>
</div>
</div>
<div class="clear"> </div>
</div>
<div id="footer"> Copyright 2024 Your Company Name | Designed by <a href="http://www.templatemo.com">Free CSS Templates</a> </div>
</div>
</body>
</html>
Related examples in the same category