earthlingtwo : Earth « Templates « HTML / CSS






  1. HTML / CSS
  2. Templates
  3. Earth

earthlingtwo

  

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!--
Design by Free CSS Templates
http://www.freecsstemplates.org
Released for free under a Creative Commons Attribution 2.5 License

Name       : EarthlingTwo  
Description: A two-column, fixed-width design with dark color scheme.
Version    : 1.0
Released   : 20090918
-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>EarthlingTwo by Free CSS Templates</title>
<style type='text/css'>

/*
Design by Free CSS Templates
http://www.freecsstemplates.org
Released for free under a Creative Commons Attribution 2.5 License
*/

body {
  margin: 0;
  padding: 0;
  background: #F7F7F7 url(earthlingtwo-images/img01.jpg) repeat left top;
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: 14px;
  color: #5A554E;
}

h1, h2, h3 {
  margin: 0;
  padding: 0;
  font-weight: normal;
  color: #32639A;
  font-family: Georgia, "Times New Roman", Times, serif;
}

h1 {
  font-size: 2em;
}

h2 {
  font-size: 2.4em;
}

h3 {
  font-size: 1.6em;
}

p, ul, ol {
  margin-top: 0;
  line-height: 200%;
  font-family: "Trebuchet MS", Georgia, "Times New Roman", Times, serif;
}

ul, ol {
  margin: 0px;
  padding: 0px;
  list-style: none;
}

a {
  text-decoration: underline;
  color: #516C00;
}

a:hover {
  text-decoration: none;
}

h2 a {
  text-decoration: none;
}

#wrapper {
  margin: 0px;
  padding: 0px;
  background: url(earthlingtwo-images/img02.jpg) repeat-x left top;
}

/* Header */

#header {
  width: 1000px;
  height: 235px;
  margin: 0 auto;
  padding: 0px;
  background: url(earthlingtwo-images/img03.jpg) no-repeat left top;
}

/* Logo */

#logo {
  float: left;
  margin: 0;
  padding: 115px 0px 0px 50px;
  color: #000000;
}

#logo h1, #logo p {
  margin: 0;
  padding: 0;
  font-family: Georgia, "Times New Roman", Times, serif;
}

#logo h1 {
  letter-spacing: -1px;
  text-transform: lowercase;
  font-size: 44px;
}

#logo h1 a {
  color: #FFFFFF;
}

#logo p {
  margin: -30px 0px 0px 0px;
  padding: 26px 0 0 2px;
  font: normal 19px Georgia, "Times New Roman", Times, serif;
  color: #C5E8FF;
} 

#logo a {
  border: none;
  background: none;
  text-decoration: none;
  color: #C5E8FF;
}

/* Search */

#search {
  float: right;
  width: 280px;
  height: 60px;
  padding: 20px 0px 0px 0px;
  background: #E2E2E2;
  border-bottom: 4px solid #FFFFFF;
}

#search form {
  height: 41px;
  margin: 0;
  padding: 10px 0 0 20px;
}

#search fieldset {
  margin: 0;
  padding: 0;
  border: none;
}

#search-text {
  width: 170px;
  padding: 6px 5px 2px 5px;
  border: 1px solid #DEDEDE;
  background: #FFFFFF;
  text-transform: lowercase;
  font: normal 11px Arial, Helvetica, sans-serif;
  color: #5D781D;
}

#search-submit {
  width: 50px;
  height: 22px;
  border: none;
  background: #B9B9B9;
  color: #000000;
}

#banner {
  margin-bottom: 20px;
  border: 12px #ECECEC solid;
}

/* Menu */

#menu {
  width: 1000px;
  height: 65px;
  margin: 0 auto;
  padding: 0;
  background: url(earthlingtwo-images/img04.jpg) no-repeat left top;
}

#menu ul {
  float: right;
  margin: 0;
  padding: 0px 25px 0px 0px;
  list-style: none;
  line-height: normal;
}

#menu li {
  float: left;
}

#menu a {
  display: block;
  width: 120px;
  height: 39px;
  margin-left: 10px;
  padding-top: 15px;
  background: url(earthlingtwo-images/img05.jpg) repeat-x left top;
  font-family: Georgia, "Times New Roman", Times, serif;
  text-decoration: none;
  text-align: center;
  font-size: 18px;
  font-weight: normal;
  color: #FFFFFF;
  border: none;
}

#menu a:hover, #menu .current_page_item a {
  text-decoration: none;
}

#menu .current_page_item a {
  background: url(earthlingtwo-images/img06.jpg) no-repeat left top;
  padding-left: 0;
  color: #493E2B;
}

/* Page */

#page {
  width: 900px;
  margin: 0px auto;
  padding: 40px 50px 0px 50px;
  background: #FFFFFF;
}

/* Content */

#content {
  float: left;
  width: 570px;
  padding: 0px 0px 0px 0px;
}

.post {
  margin-bottom: 15px;
}

.post-bgtop {
}

.post-bgbtm {
}

.post .title {
  margin-bottom: 10px;
  padding: 12px 0 0 0px;
  letter-spacing: -.5px;
  font-size: 36px;
  color: #493E2B;
}

.post .title a {
  color: #493E2B;
  border: none;
}

.post .meta {
  margin: -10px 0px 0px 0px;
  padding: 0px 0px 10px 0px;
  letter-spacing: -1px;
  font-size: 23px;
  font-weight: normal;
  color: #6E8D3D;
  font-family: Georgia, "Times New Roman", Times, serif;
}

.post .meta .date {
  float: left;
}

.post .meta .posted {
  float: right;
}

.post .meta a {
}

.post .entry {
  background: url(earthlingtwo-images/img08.jpg) no-repeat left top;
  padding: 25px 0px 0px 0px;
  text-align: justify;
}

.links {
  padding-top: 20px;
}

.more {
  padding-left: 16px;
  background: url(earthlingtwo-images/img10.gif) no-repeat left 3px;
  text-decoration: underline;
  font-size: 12px;
  font-weight: normal;
}

.comments {
  padding-left: 18px;
  background: url(earthlingtwo-images/img11.gif) no-repeat left 4px;
  text-decoration: underline;
  font-size: 12px;
  font-weight: normal;
}


/* Sidebar */

#sidebar {
  float: right;
  width: 273px;
  padding: 0px;
  color: #787878;
}

#sidebar ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

#sidebar li {
  margin: 0;
  padding: 0;
}

#sidebar li ul {
  margin: 0px 0px;
  padding-bottom: 20px;
}

#sidebar li li {
  line-height: 35px;
  margin: 0px;
  padding: 2px 0px;
  border-left: none;
}

#sidebar li li span {
  height: 19px;
  margin-right: 16px;
  padding: 4px 12px;
  background: #3D2A0B url(earthlingtwo-images/img12.jpg) repeat-x left top;
  font-size: 12px;
  color: #FFFFFF;
}

#sidebar li li span a {
  color: #FFFFFF;
}

#sidebar h2 {
  height: 65px;
  background: url(earthlingtwo-images/img09.jpg) no-repeat left bottom;
  letter-spacing: -.5px;
  font-size: 28px;
  color: #493E2B;
}

#sidebar p {
  margin: 0 0px;
  padding: 0px 0px 30px 0px;
  text-align: justify;
}

#sidebar p strong {
  color: #4A3E29;
}

#sidebar a {
  border: none;
}

#sidebar a:hover {
}

/* Calendar */

#calendar {
}

#calendar_wrap {
  padding: 20px;
}

#calendar table {
  width: 100%;
}

#calendar tbody td {
  text-align: center;
}

#calendar #next {
  text-align: right;
}

/* Footer */

#footer-content {
  width: 900px;
  height: 255px;
  margin: 0 auto;
  padding: 60px 50px 0px 50px;
  background: url(earthlingtwo-images/img15.jpg) no-repeat left top;
  font-size: 12px;
  color: #887450;
}

#footer-content .column1 {
  float: left;
  width: 570px;
}

#footer-content .column2 {
  float: right;
  width: 273px;
}

#footer-content h2 {
  padding-bottom: 10px;
  font-size: 22px;
  color: #E3D2B6;
}

#footer-content strong {
  color: #E3D2B6;
}

#footer-content a {
  color: #AA8B55;
}

#footer-content a:hover {
  color: #AA8B55;
}

.list li {
  margin-bottom: 6px;
}

#footer {
  height: 50px;
  margin: 0 auto;
  padding: 0px 0 15px 0;
  font-family: Arial, Helvetica, sans-serif;
}

#footer p {
  margin: 0;
  line-height: normal;
  font-size: 12px;
  text-align: center;
  color: #82A2B9;
}

#footer a {
  text-decoration: underline;
  color: #82A2B9;
}

</style>


</head>
<body>
<div id="wrapper">
  <div id="header">
    <div id="logo">
      <h1><a href="#">EarthlingTwo</a></h1>
      <p>by <a href="http://www.nodethirtythree.com">nodethirtythree</a> + <a href="http://www.freecsstemplates.org/">fct</a></p>
    </div>
  </div>
  <!-- end #header -->
  <div id="menu">
    <ul>
      <li class="current_page_item"><a href="#">Home</a></li>
      <li><a href="#">Services</a></li>
      <li><a href="#">Portfolio</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </div>
  <!-- end #menu -->
  <div id="page">
    <div id="content">
      <div id="banner"><img src="earthlingtwo-images/img07.jpg" alt="" /></div>
      <div class="post">
        <h2 class="title"><a href="#">Lorem ipsum dolor sit amet </a></h2>
        <p class="meta">Aliquam sit amet tempus sed consequat</p>
        <div class="entry">
          <p>This is <strong>EarthlingTwo</strong>, a free template by <a href="http://www.nodethirtythree.com">nodethirtythree</a> and <a href="http://www.freecsstemplates.org">Free CSS Templates</a>.  Its kind of a sequel to an older template I did for FCT a long time ago named <a href="http://www.freecsstemplates.org/preview/earthling">Earthling</a>.</p>
          <p>This template is released under the <a href="http://creativecommons.org/licenses/by/3.0/">Creative Commons Attribution</a> license, so use it however you like, just keep the links back to our sites. The scenic photo above is a public domain work from <a href="http://www.pdphoto.org">PDPhoto.org</a>. Be sure to check out my other work at <a href="http://www.nodethirtythree.com/">my site</a> or follow me on <a href="http://twitter.com/nodethirtythree/">Twitter</a> for news and updates. Have fun.</p>
          <p class="links"><a href="#" class="more">Read More</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#" class="comments">Comments (33)</a></p>
        </div>
      </div>
      <div style="clear: both;">&nbsp;</div>
    </div>
    <!-- end #content -->
    <div id="sidebar">
      <ul>
        <li>
          <h2>Veroeros sit dolore</h2>
          <p><strong>Donec turpis orci</strong> facilisis et ornare eget, sagittis eu massa. Quisque dui diam, euismod et lobortis sed etiam lorem ipsum dolor etiam nullam et faucibus. <a href="#">More&#8230;</a></p>
        </li>
        <li>
          <h2>Categories</h2>
          <ul>
            <li><span>09.13.09</span><a href="#">Vestibulum risus vitae</a></li>
            <li><span>09.13.09</span><a href="#">Condimentum et molestie</a></li>
            <li><span>09.13.09</span><a href="#">Facilisis sed vestibulum</a></li>
            <li><span>09.13.09</span><a href="#">Ipsum primis et sed luctus </a></li>
            <li><span>09.13.09</span><a href="#">Ultrices posuere nulla </a></li>
            <li><span>09.13.09</span><a href="#">Accumsan lorem sodales </a></li>
            <li><span>09.13.09</span><a href="#">Scelerisque consectetur </a></li>
            <li><span>09.13.09</span><a href="#">Maecenas quam aliquet</a></li>
          </ul>
        </li>
      </ul>
    </div>
    <!-- end #sidebar -->
    <div style="clear: both;">&nbsp;</div>
  </div>
  <!-- end #page -->
</div>
<div id="footer-content">
  <div class="column1">
    <h2>Volutpat quisque sed et aliquam</h2>
    <p><strong>Maecenas ut ante</strong> eu velit laoreet tempor accumsan vitae nibh. Aenean commodo, tortor eu porta convolutpat elementum. Proin fermentum molestie erat eget vehicula. Aenean eget tellus mi. Fusce scelerisque odio quis ante bibendum sollicitudin. Suspendisse potenti. Vivamus quam odio, facilisis at ultrices nec, sollicitudin ac risus. Donec ut odio ipsum, sed tincidunt. <a href="#">Learn more&#8230;</a></p>
  </div>
  <div class="column2">
    <ul class="list">
      <li><a href="#">Tempor accumsan vitae sed nibh dolore</a></li>
      <li><a href="#">Aenean commodo, tortor eu porta veroeros</a></li>
      <li><a href="#">Fermentum molestie erat eget consequat</a></li>
      <li><a href="#">Donec vestibulum interdum diam etiam</a></li>
      <li><a href="#">Vehicula aenean eget sed tellus blandit</a></li>
    </ul>
  </div>
</div>
<div id="footer">
  <p> (c) 2009 Sitename.com. Design by <a href="http://www.nodethirtythree.com">nodethirtythree</a> and <a href="http://www.freecsstemplates.org">Free CSS Templates</a>.</p>
</div>
<!-- end #footer -->
</body>
</html>








Related examples in the same category

1.earthling
2.earthy
3.earthycolours