Round corner
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Free Css Template 121</title>
<style type='text/css'>
* {
margin:0;
padding:0;
}
body {
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
background: #ffffff;
color: #4e4e4e;
}
a {
color:#fda016;
text-decoration:underline;
}
a:hover {
color:#fda016;
text-decoration:none;
}
#container {
width: 800px;
margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
}
#header {
width:800px;
height:398px;
background:url(121-images/headerBackground.jpg) no-repeat left top;
}
.logoContainer {
height:54px;
}
.logo {
float:left;
}
.author {
float:right;
margin-top:30px;
}
h1 {
color:#fda016;
font-size:48px;
}
h2 {
font-size:36px;
color:#ababab;
}
.logo span {
color:#abca33;
}
.sloganContainer {
height:270px;
width:800px;
}
.sloganLeft {
float:left;
width:190px;
padding-top:30px;
}
.sloganLeft span {
color:#abca33;
}
.sloganRight {
float:right;
width:200px;
padding-top:30px;
}
.sloganRight span {
color:#fda016;
}
#sidebar1 {
float: left; /* since this element is floated, a width must be given */
width: 202px; /* the actual width of this div, in standards-compliant browsers, or standards mode in Internet Explorer will include the padding and border in addition to the width */
background: #e5e5e5; /* the background color will be displayed for the length of the content in the column, but no further */
}
.sidebarBottom {
vertical-align:bottom;
}
.floatLeft {
float:left;
margin:0 20px 20px 0;
}
#mainContent p {
padding-top:30px;
}
#mainContent {
margin: 0 0 0 230px; /* the left margin on this div element creates the column down the left side of the page - no matter how much content the sidebar1 div contains, the column space will remain. You can remove this margin if you want the #mainContent div's text to fill the #sidebar1 space when the content in #sidebar1 ends. */
padding: 0 20px; /* remember that padding is the space inside the div box and margin is the space outside the div box */
}
h3 {
font-size:14px;
margin:0 10px;
}
#sidebar1 li {
list-style:none;
background:url(121-images/sidebarP.gif) no-repeat left 5px;
padding-left:15px;
margin:10px 10px;
}
#sidebar1 a {
color:#4e4e4e;
text-decoration:underline;
}
#sidebar1 a:hover {
color:#4e4e4e;
text-decoration:none;
}
#footer {
background:#f0f0f0;
margin-bottom:20px;
}
#footer p {
text-align:center;
margin:2px 20px;
}
.footerBottom {
vertical-align:bottom;
}
.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}
/*begin main menu*/
#navcontainer ul {
padding-left: 0;
margin-left: 0;
color: White;
float: left;
width: 100%;
font-family: arial, helvetica, sans-serif;
}
#navcontainer ul li {
display: inline;
}
#navcontainer ul li a {
padding:0 46px 0 12px;
color: #ababab;
text-decoration: none;
float: left;
border-right: 1px solid #fff;
font-size:36px;
background:url(121-images/menuP.gif) no-repeat left 15px;
}
#navcontainer ul li a:hover {
color: #fda016;
background:url(121-images/menuActiveP.gif) no-repeat left 15px;
}
#navcontainer #active a {
color: #fda016;
background:url(121-images/menuActiveP.gif) no-repeat left 15px;
}
/*end main menu*/
</style>
<style type="text/css">
/* place css box model fixes for IE 5* in this conditional comment */
#sidebar1 { width: 230px; }
</style>
<![endif]--><!--[if IE]>
<style type="text/css">
/* place css fixes for all versions of IE in this conditional comment */
#sidebar1 { padding-top: 30px; }
#mainContent { zoom: 1; }
/* the above proprietary zoom property gives IE the hasLayout it needs to avoid several bugs */
</style>
<![endif]-->
</head>
<body>
<!-- begin #container -->
<div id="container">
<!-- begin #header -->
<div id="header">
<div class="logoContainer">
<div class="logo">
<h1>fresh <span>fruit</span></h1>
</div>
<div class="author">
design by <a href="http://www.flash-templates-today.com">Flash-Templates-Today.com</a>
</div>
</div>
<br class="clearfloat" />
<div class="sloganContainer">
<div class="sloganLeft">
<h2>Best <span>fruits</span> for your family</h2>
</div>
<div class="sloganRight">
<h2>Fresh <span>fruits</span> for your family</h2>
</div>
</div>
<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="#" id="current">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Service</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
<!-- end #header -->
<!-- begin #sidebar1 -->
<div id="sidebar1">
<img src="121-images/sidebarTop.gif" alt="image preview" width="202" height="20" />
<h3>Sponsors</h3>
<ul>
<li><a href="http://www.flash-templates-today.com">Free Flash Templates</a></li>
<li><a href="http://www.templateholder.com">Free Web Templates</a></li>
<li><a href="http://www.freecsstemplate.net">Free Css Templates</a></li>
</ul>
<h3>Testimonials</h3>
<ul>
<li>Congratulations for your web site. You did a great job!<br /><br /><strong>Author:</strong> Ludovic Tourne</li>
<li>First thank you for this wonderfull webside it is really nice<br /><br /><strong>Author:</strong> victoir</li>
<li>Hello, Wonderfull Templates you have.<br /><br /><strong>Author:</strong> richard</li>
<li>Thank you for your great site.<br /><br /><strong>Author:</strong> Miro</li>
<li>Hello,<br />I have visited http://www.flash-templates-today.com today and really like it, your site looks good and would benefit both of us and our visitors.<br />Your website is very rich in contents and have a high traffic and good alexa ranking.<br /><br /><strong>Author:</strong> kalem</li>
</ul>
<img src="121-images/sidebarBottom.gif" alt="image preview" width="202" height="20" class="sidebarBottom" /></div>
<!-- end #sidebar1 -->
<!-- begin #mainContent -->
<div id="mainContent">
<strong> All website template is released under a Creative Commons Attribution 2.5 License</strong><br /><br />
We request you retain the full copyright notice below including the link to <a href="http://www.flash-templates-today.com">www.flash-templates-today.com</a>. This not only gives respect to the large amount of time given freely by the developers but also helps build interest, traffic and use of our free and paid designs. If you cannot (for good reason) retain the full copyright we request you at least leave in place the Website Templates line, with Website Templates linked to <a href="http://www.flash-templates-today.com">www.flash-templates-today.com</a>. If you refuse to include even this then support may be affected.<br /><br />
<strong>You are allowed to use this design only if you agree to the following conditions:</strong><br />
- You can not remove copyright notice from any our template without our permission.<br />
- If you modify any our template it still should contain copyright because it is based on our work.<br />
- You may copy, distribute, modify, etc. any our template as long as link to our website remains untouched.<br /><br />
For support please visit <a href="http://www.flash-templates-today.com/contact.php">http://www.flash-templates-today.com/contact.php</a>
<p>
<img src="121-images/pic1.jpg" alt="image preview" width="179" height="145" class="floatLeft" /> <strong>What does Flash Template mean?</strong><br /><br />
Flash Template is a ready-made Flash Site that you can download and use for free! Flash Template was created by professional and independent designers for you. You need only to make your adjustments and your flash site is ready. If you open .fla file you can easily change the text information and graphics of the site. There's no need to make animation - our designers already did it. After your text and graphics adjustments you need only to upload .swf file to your server and enjoy your ready Flash Site! Using Free Flash Templates you can save your time and money!
</p>
<p>
<img src="121-images/pic2.jpg" alt="image preview" width="179" height="145" class="floatLeft" /> <strong>Your Flash Site will be look professional!</strong><br /><br />
An extensive number of unique Flash Templates is at your service. All templates on our site were created specially for you! Our independent designers created flash professional templates. Also our templates are unique. It means you can use our flash templates to create your own site!
</p>
</div>
<!-- end #mainContent -->
<!-- This clearing element should immediately follow the #mainContent div in order to force the #container div to contain all child floats --><br class="clearfloat" />
<!-- begin #footer -->
<div id="footer">
<img src="121-images/footerTop.gif" alt="image preview" width="800" height="15" />
<p>
Copyright ©2010
| <a class="footerLink" href="http://validator.w3.org/check/referer" title="This page validates as XHTML 1.0 Strict"><abbr title="eXtensible HyperText Markup Language">XHTML</abbr></a>
| <a class="footerLink" href="http://jigsaw.w3.org/css-validator/check/referer" title="This page validates as CSS"><abbr title="Cascading Style Sheets">CSS</abbr></a><br />
Site created by <a title="free flash templates" href="http://www.flash-templates-today.com">Free Flash Templates</a>
</p>
<img src="121-images/footerBottom.gif" alt="image preview" width="800" height="15" class="footerBottom" /></div>
<!-- end #footer -->
</div>
<!-- end #container -->
</body>
</html>
Related examples in the same category