Enlargable link button
<!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 119</title>
<style type='text/css'>
* {
margin:0;
padding:0;
}
body {
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
background: #2a3841;
color: #dee5ea;
}
a {
color:#c7d72c;
text-decoration:underline;
}
a:hover {
color:#c7d72c;
text-decoration:none;
}
#container {
width: 800px;
background: #2a3841;
margin: 0 auto;
}
#header {
background:#263039;
height:80px;
margin:10px 0;
}
#mainContent {
background: #2a3841;
}
.headerPic {
background:url(119-images/headerBackground.jpg) no-repeat left top;
width:800px;
height:183px;
}
.headerPic p {
padding:20px;
}
#footer {
margin:10px 0;
background:#263039;
height:80px;
}
#footer p {
text-align:center;
padding-top:20px;
}
.logo {
float:left;
font-size:18px;
margin:25px 10px 0 20px;
}
#navcontainer {
float:right;
padding-top:43px;
}
ul#navlist {
margin-left: 0;
padding-left: 0;
white-space: nowrap;
margin-right:3px;
}
#navlist li {
display: inline;
list-style-type: none;
}
#navlist a:link, #navlist a:visited {
color: #fff;
background-color: #2a3841;
text-decoration: none;
font-size:18px;
padding:15px;
border-top:2px solid #4b565e;
}
#navlist a:hover {
color: #c7d72c;
background-color: #2a3841;
text-decoration: none;
border-top:2px solid #959ca0;
padding-top:25px;
}
#navlist #active a {
color: #c7d72c;
background-color: #2a3841;
text-decoration: none;
border-top:2px solid #959ca0;
padding-top:25px;
}
h1 {
color:#b8e2ff;
padding:0 0 10px 0;
}
.testimonials {
float:left;
width:350px;
}
.meaning {
margin-left:400px;
border-left:1px solid #6a7b86;
padding-left:50px;
}
.meaning ul {
list-style:none;
}
.testimonials li {
background:#F00;
list-style:none;
background:url(119-images/p.jpg) no-repeat left top;
padding-left:60px;
padding-bottom:10px;
}
.clearer {
clear:both;
}
hr {
border-top:1px solid #6a7b86;
height:1px;
margin:20px 0;
}
</style>
</head>
<body>
<div id="container">
<!-- begin #header -->
<div id="header">
<div class="logo">
Company Name
</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="#">BLOG</a></li>
<li><a href="#">GALLERY</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</div>
</div>
<!-- end #header -->
<div class="headerPic">
<p>created by <a href="http://www.flash-templates-today.com">Free Flash Templates</a></p>
</div>
<!-- begin #mainContent -->
<div id="mainContent">
<h1>FreeCssTemplate.net Design</h1>
<p>
<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 www.flash-templates-today.com. 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>
<hr />
<div class="testimonials">
<h1>Testimonials about our templates</h1>
<ul>
<li>Thank you for your professional template! It worked perfectly for what I needed and I was able to get my site up and running within a couple hours. The photos are beautiful and colors complimentary and everything works great. Thanks again!<br /><br />Lily from <a href="http://www.360environmental.net">http://www.360environmental.net</a></li>
<li>We us your template on <a href="http://www.bhmaat.nl">www.bhmaat.nl</a>. Our vistors like your design very much! So do we. With our create design we could redesign the site in a couple of hours! The code is clean, well documented and easy to use. Thank you !!!<br /><br />Bas Jobsen</li>
</ul>
</div>
<div class="meaning">
<h1>What does Css Template mean?</h1>
<p>
Css Template is a ready-made XHTML Site that you can download and use for absolute free! Css Template was created by independent designers from Ukraine. You need only to make your adjustments and your css site is ready. If you open html file you can easily change the text information and graphics of the site. There?s no need to make design - our designers already did it. After your text and graphics adjustments you need only to upload files (html, css, images) to your server and enjoy your ready Css Site! Using Free Css Templates you can save your time and money!
</p>
</div>
</div>
<div class="clearer"></div>
<!-- end #mainContent -->
<!-- begin #footer -->
<div id="footer">
<p>
Copyright ©2010 | <a title="This page validates as XHTML 1.0 Strict" href="http://validator.w3.org/check/referer" class="footerLink"><abbr title="eXtensible HyperText Markup Language">XHTML</abbr></a> |
<a title="This page validates as CSS" href="http://jigsaw.w3.org/css-validator/check/referer" class="footerLink"><abbr title="Cascading Style Sheets">CSS</abbr></a><br />
Site created by <a href="http://www.flash-templates-today.com" title="free flash templates">Free Flash Templates</a>
</p>
</div>
<!-- end #footer -->
</div>
</body>
</html>
Related examples in the same category