solutionyellow : Yellow « Templates « HTML / CSS

solutionyellow
  

<!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>Solution Yellow</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type='text/css'>
/*
Template Design by TheWebhub.com
http://www.thewebhub.com
Released for free under a Creative Commons Attribution-Share Alike 3.0 Philippines
*/

/** Common Styles */

body {
  margin: 0px;
  padding: 0;
  background: #000000;
  line-height: 1.6em;
  text-align: justify;
  font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
  font-size: 13px;
  color: #C9C9C9;

}

h1 {
  font-size: 32px;
  font-weight: normal;
  text-transform: lowercase;
}

h2, h3, h4, h5, h6 {
  padding: 0;
  margin: 0;
  font-size: 22px;
  font-weight: normal;
  text-transform: uppercase;
  letter-spacing: 0px;
  font-family: Arial, Helvetica, sans-serif;
  color: #FFFFFF;
}

ul {
  margin-left: 0px;
  padding-left: 0px;
  list-style-type: none;
}

a {
  border-bottom: 1px dotted #E8E026;
  text-decoration: none;
  color: #E8E026;
}

a:hover {
  text-decoration: none;
}

/** HEADER */

#header {
  width: 800px;
  height: 80px;
  margin: 0px auto;
  padding: 40px 0 0 0;
  background: url(solutionyellow-images/images05.jpg) no-repeat left top;
  font-family: Arial, Helvetica, sans-serif;
}

#header h1 {
  margin: 0px;
  padding-left: 15px;
  text-transform: uppercase;
  font-size: 24px;
  color: #FFFFFF;
}

#header b {
  color: #000000;
}

#header h2 {
  margin: 0px;
  margin-top: -5px;
  padding-left: 15px;
  font-size: 11px;
}

#header h2 a {
  color: #000000;
}

/** MENU */

#menu-wrap {
  background: #1A1A1A url(solutionyellow-images/images01.jpg) repeat-x left bottom;
  height: 50px;
}

#menu {
  width: 800px;
  height: 30px;
  margin: 0px auto;
}

#menu ul {
  margin-left: 10px;
  padding: 0px;
  list-style: none;
}

#menu li {
  display: inline;
}

#menu a {
  display: block;
  float: left;
  border: none;
  padding: 15px 20px 0 10px;
  text-transform: uppercase;
  text-decoration: none;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  font-weight: bold;
  color: #FFFFFF;
}

#menu a:hover {
  background: url(solutionyellow-images/images04.jpg) no-repeat left 85%;
  color: #FFFFFF;
}

#menu .current_page a {
  background: url(solutionyellow-images/images04.jpg) no-repeat left 85%;
}
/** CONTENT */

#content {
  width: 800px;
  margin: 0px auto;
  padding: 0;
}

#columnA {
  float: right;
  width: 520px;
  margin-top: -90px;
}

#columnA h1, #columnA h2 {
  margin: 20px 0;
  padding: 5px 5px;
  border-left: #E8E026 5px solid;
}

#columnA p {
}

#columnA b {
  color: #E8E026;
}

#columnB {
  float: left;
  width: 235px;
  margin-left: 10px;
}

#columnB h2 {
  margin: 10px 0;
  padding-bottom: 10px;
  font-size: large;
}

#columnB li {
  margin-bottom: 30px;
  padding-left: 7px;
  border-left: #E8E026 5px solid;
}

/** FOOTER */

#footer-wrap {
  background: #1A1A1A url(solutionyellow-images/images01.jpg) repeat-x left top;
  height: 100px;
}

#footer {
  width: 800px;
  margin: 0px auto;
  padding-top: 30px;
  font-size: 12px;
}

#footer .copyright {
  margin: 0px;
}

#footer .links {
  margin: 0px;
}

#footer .css {
  padding-left: 20px;
  background: url(solutionyellow-images/images02.png) no-repeat left 50%;
}

#footer .xhtml {
  padding-left: 20px;
  background: url(solutionyellow-images/images03.png) no-repeat left 50%;
}

#footer a {
  border: none;
  text-decoration: none;
  color: #E8E026;
}

</style>


</head>
<body>
<div id="menu-wrap">
  <div id="menu">
    <ul>
      <li class="current_page"><a href="http://www.free-css.com/">Homepage</a></li>
      <li><a href="http://www.free-css.com/">Our Products</a></li>
      <li><a href="http://www.free-css.com/">Our Services</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="header">
  <h1>SolutionYellow</h1>
  <h2><b><a href="http://www.free-css.com/">Free CSS Template</a></b></h2>
</div>
<div id="content">
  <div id="columnA">
    <h2>Welcome to <b>Sitename.com</b></h2>
    <p>This template was coded using valid XHTML 1.0 Transitional and CSS 2.1 markups, which is distributed under the <a target="_blank" href="http://creativecommons.org/licenses/by-sa/3.0/ph/">Creative Commons Attribution-Share Alike 3.0 Philippines</a>. In a nutshell, you are free to:</p>
    <ul>
      <li><strong>to Share</strong> - to copy, distribute and transmit the work</li>
      <li><strong>to Remix</strong> - to adapt the work</li>
    </ul>
    <p>Under the following conditions:</p>
    <ul>
      <li><strong>Attribution</strong> - you must link back to <strong>my site</strong> (the footer has already my link and that's fine.)</li>
      <li><strong>Share Alike</strong> - if you alter, transform, or build upon this work, you may distribute the resulting work only under the same, similar or a compatible license.</li>
    </ul>
    <h2>other <b>Credits</b></h2>
    <p>Suspendisse potenti. Donec nulla est, laoreet quis, pellentesque in, congue in, dui. Nunc rhoncus placerat augue. Donec justo odio, eleifend varius, volutpat venenatis, sagittis ut, orci. Donec nulla est, laoreet quis, pellentesque in, congue in, dui. Nunc rhoncus placerat augue. Donec justo odio, eleifend varius, volutpat venenatis, sagittis ut, orci. Nullam et orci in erat viverra ornare. Nunc pellentesque. Sed vestibulum blandit nisl. Quisque elementum convallis purus. Quisque pellentesque semper massa.</p>
  </div>
  <div id="columnB">
    <h2>Recent Updates</h2>
    <ul>
      <li>Aliquam gravida massa eu arcu.Etiam odio rhoncus placerat mi, suscipit et, rhoncus ac, lacinia, nisl. <a href="http://www.free-css.com/">More&hellip;</a></li>
      <li>Donec justo odio, eleifend varius, volutpat venenatis, sagittis ut, orci. Donec nulla est, laoreet quis, pellentesque in, congue in, dui. <a href="http://www.free-css.com/">More&hellip;</a></li>
      <li>Sed vestibulum blandit nisl. Quisque elementum convallis purus. Quisque pellentesque semper massa. <a href="http://www.free-css.com/">More&hellip;</a></li>
      <li>Suspendisse potenti. Donec nulla est, laoreet quis, pellentesque in, congue in, dui. Nunc rhoncus placerat augue sagittis ut, orci. <a href="http://www.free-css.com/">More&hellip;</a></li>
    </ul>
  </div>
  <div style="clear: both;">&nbsp;</div>
</div>
<div id="footer-wrap">
  <div id="footer">
    <p class="copyright">Copyright &copy; 2006 Sitename.com. Template Designed by <a href="http://www.thewebhub.com/">TheWebHub.com</a>&nbsp;&nbsp;&nbsp;Free Icons by <a href="http://famfamfam.com/">FAMFAMFAM</a></p>
    <p class="links"><a target="_blank" href="http://validator.w3.org/check/referer" class="xhtml">Valid XHTML</a>&nbsp;&nbsp;&nbsp;<a target="_blank" href="http://jigsaw.w3.org/css-validator/check/referer" class="css">Valid CSS</a> </p>
  </div>
</div>
</body>
</html>
Related examples in the same category

1.	metamorph_yellowfield
2.	yellowbubbles
3.	yellowbusiness
4.	yellowing
5.	yellowstone