simplescheme-magazine : Simple « Templates « HTML / CSS






simplescheme-magazine

  

<!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>SimpleScheme Magazine - About Us</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type='text/css'>
* {
  margin: 0; padding: 0;
}
body {
  text-align: center;
  font: 12px Verdana;
  color: #333333;
  background: #F7F6F6 url(simplescheme-magazine-images/background.gif) repeat-x 0 0;
}
a {
  color: #003366;
}
a:hover {
  text-decoration: none;
  color: #ff0000;
}
img {
  border: 0;
}

.break {
  font-size: 0;
  width: 0; height: 0;
  clear: both;
}
.alignleft {
  float: left;
  margin: 4px 10px 5px 0;
}
.alignright {
  float: right;
  margin: 4px 0 5px 10px;
}
.aligncenter {
  text-align: center;
}
.hidden {
  display: none;
}

/** BEGIN wrapper **/
#wrapper {
  width: 980px;
  margin: auto auto;
  text-align: left;
}
/** END wrapper **/

/** BEGIN header **/
#header {
  height: 200px;
  margin-bottom: 15px;
}
  #header .pages {
    list-style-type: none;
    height: 39px;
    padding-top: 3px;
    float: left;
  }
    #header .pages li {
      float: left;
    }
    #header .pages li a {
      display: block;
      font-size: 0.9em;
      font-weight: bold;
      text-transform: uppercase;
      padding: 12px 15px;
      text-decoration: none;
    }
    #header .pages li a:hover {
      text-decoration: underline;
    }
  #header form {
    width: 245px; height: 26px;
    background: url(simplescheme-magazine-images/search.gif) no-repeat 0 8px;
    float: right;
    padding: 8px 30px 0 0;
  }
    #header form input {
      border: 0;
      float: left;
      width: 170px;
      margin: 5px;
    }
    #header form button {
      border: 0;
      text-indent: -9999px;
      font-size: 0;
      width: 60px; height: 26px;
      float: right;
      background-color: transparent;
    }
  #header .logo {
    clear: both;
    float: left;
    padding: 30px 0 36px 20px;
  }
    #header .logo h1 {
      font-size: 2em;
      text-transform: uppercase;
    }
      #header .logo h1 a {
        text-decoration: none;
      }
    #header .logo p {
      color: #888888;
      font-weight: bold;
      font-size: 1.2em;
      text-transform: uppercase;
    }
  #header .sponsor {
    float: right;
    padding: 25px 0;
  }
  #header .categories {
    clear: both;
    list-style-type: none;
    height: 40px;
    border-bottom: 5px solid #003366;
    border-top: 1px solid #DDDDDD;
    overflow: hidden;
  }
    #header .categories li {
      float: left;
    }
    #header .categories li a {
      display: block;
      padding: 13px;
      color: #333333;
      border-right: 1px solid #dddddd;
      text-decoration: none;
    }
    #header .categories li a:hover {
      background-color: #003366;
      color: #ffffff;
    }
/** END header **/

/** BEGIN content **/
#content {
  clear: both;
  width: 650px;
  float: left;
  padding-bottom: 10px;
}
  #featured {
    border: 1px solid #DDDDDD;
    padding: 10px;
    margin-bottom: 10px;
    height: 245px;
  }
    #featured .post {
      padding: 10px;
    }
    #featured h2 {
      font-size: 1.6em;
      margin-bottom: 5px;
    }
      #featured h2 a {
        text-decoration: none;
      }
    #featured .details {
      font-size: 0.9em;
      margin-bottom: 15px;
      color: #888888;
    }
      #featured .details a {
        color: #888888;
        text-decoration: none;
      }
      #featured .details a:hover {
        color: #003366;
        text-decoration: underline;
      }
    #featured .thumb {
      border: 1px solid #dddddd;
      padding: 5px;
      float: left;
      margin: 0 10px 10px 0;
    }
      #featured .thumb a {
        width: 300px; height: 175px;
        display: block;
        overflow: hidden;
      }
      #featured .thumb a img {
        width: 300px;
      }
    #featured p {
      line-height: 1.4em;
      margin-bottom: 10px;
    }
    #featured .tags {
      clear: both;
      font-size: 0.9em;
      color: #888888;
      margin-bottom: 0;
    }
      #featured .tags a {
        text-decoration: none;
      }
    #featured .readmore {
      font-size: 0.8em;
    }
  #content .recent {
    border: 1px solid #DDDDDD;
  }
    #content .recent .post {
      padding: 15px;
      clear: both;
    }
      #content .recent .post h2 {
        font-size: 1.5em;
        margin-bottom: 10px;
      }
        #content .recent .post h2 a {
          text-decoration: none;
        }
      #content .recent .post img {
        float: right;
        padding: 5px;
        border: 1px solid #DDDDDD;
        background-color: #FFFFFF;
        margin-left: 20px;
      }
      #content .recent .post p {
        line-height: 1.4em;
        margin-bottom: 10px;
      }
      #content .recent .post .readmore {
        font-size: 0.8em;
      }
    #content .recent .o {
      background-color: #EEEEEE;
    }
  #content {
    
  }
/** END content **/

/** BEGIN sidebar **/
#sidebar {
  width: 320px;
  float: right;
}
  #sidebar .box {
    border: 1px solid #DDDDDD;
    margin-bottom: 10px;
  }
    #sidebar .box h2 {
      font-size: 0.9em;
      text-transform: uppercase;
      color: #003366;
      background-color: #EEEEEE;
      padding: 10px;
      border-bottom: 1px solid #dddddd;
    }
    #sidebar .box ul {
      list-style-type: square;
      list-style-position: inside;
      padding: 10px;
    }
      #sidebar .box ul li {
        line-height: 1.4em;
        color: #888888;
        padding: 2px 0;
      }
      #sidebar .box ul li a {
        color: #888888;
        text-decoration: none;
      }
      #sidebar .box ul li a:hover {
        color: #003366;
        font-weight: bold;
        text-decoration: underline;
      }
    #sidebar .box .video {
      padding: 12px;
    }
    #sidebar .box .flickr {
      padding: 5px;
      text-align: center;
    }
      #sidebar .box .flickr img {
        margin: 6px;
      }
    #sidebar .box .tags {
      padding: 10px;
    }
      #sidebar .box .tags a {
        color: #888888;
        text-decoration: none;
      }
      #sidebar .box .tags a:hover {
        color: #003366;
        text-decoration: underline;
      }
    #sidebar .box .popular {
      list-style-type: none;
      list-style-position: outside;
    }
      #sidebar .box .popular li {
        padding: 5px 0;
      }
      #sidebar .box .popular li a {
        color: #003366;
        text-decoration: underline;
        font-weight: bold;
      }
      #sidebar .box .popular li p {
        padding-top: 5px;
      }
    #sidebar .box .sponsors {
      padding: 10px 10px 0;
      text-align: center;
    }
      #sidebar .box .sponsors img {
        margin: 6px;
      }
    #sidebar .box .bookmarks {
      list-style-type: none;
      list-style-position: outside;
      padding: 5px 10px 10px;
    }
      #sidebar .box .bookmarks li {
        font-family: Arial;
        border-bottom: 1px dotted #CCCCCB;
        padding: 5px 0 5px 20px;
        background-position: 0 6px;
        background-repeat: no-repeat;
      }
      #sidebar .box .bookmarks li a {
        color: #DA3372;
      }
      #sidebar .box .bookmarks li.rss { background-image: url(simplescheme-magazine-images/rss.gif); }
      #sidebar .box .bookmarks li.twt { background-image: url(simplescheme-magazine-images/twitter.gif); }
      #sidebar .box .bookmarks li.fcb { background-image: url(simplescheme-magazine-images/facebook.gif); }
      #sidebar .box .bookmarks li.ldi { background-image: url(simplescheme-magazine-images/linkedin.gif); }
  #sidebar .l {
    float: left;
    width: 155px;
  }
  #sidebar .r {
    float: right;
    width: 155px;
  }
/** END sidebar **/

/** BEGIN footer **/
#footer {
  clear: both;
  background-color: #003366;
  color: #ffffff;
  font-size: 0.9em;
  padding: 20px 10px;
}
  #footer a {
    color: #ffffff;
  }
  #footer p {
    width: 980px;
    margin: auto auto;
    text-align: left;
  }
/** END footer **/

/** BEGIN miscellaneous **/
#content .postnav {
  clear: both;
  padding: 10px 0;
}
  #content .postnav ul {
    list-style-type: none;
    padding: 10px;
  }
    #content .postnav ul li {
      float: left;
      color: #B5B4BC;
      padding: 4px;
    }
    #content .postnav ul li a {
      color: #636363;
      text-decoration: none;
      display: block;
      padding: 2px 6px;
      border: 1px solid #E2E2E2;
    }
    #content .postnav ul li a:hover {
      border-color: #ffffff;
    }
    #wp_page_numbers ul {
      border-top: 0 !important;
    }
    #wp_page_numbers .page_info {
      padding: 3px 6px !important;
      margin-right: 2px;
      border: 1px solid #e0e0e0 !important;
      margin-top: 4px;
    }
    #wp_page_numbers .active_page a {
      background-color: #ffffff !important;
      border: 0 !important;
    }
#content .single {
  padding: 10px;
}
  #content .single h2 {
    font-size: 1.5em;
    margin-bottom: 10px;
  }
  #content .single p {
    line-height: 1.5em;
    margin-bottom: 10px;
  }
  #content .single ul, #content .single ol {
    list-style-position: inside;
    margin-bottom: 10px;
  }
  #content .single li {
    line-height: 1.5em;
    padding: 2px 0;
  }
  #content .single blockquote {
    padding: 10px 10px 5px;
    margin-bottom: 10px;
    background-color: #eeeeee;
    border-width: 1px 0;
    border-style: solid;
    border-color: #e0e0e0;
  }
  #content .single h3, #content .single h4, #content .single h5, #content .single h6 {
    font-size: 1.2em;
    margin-bottom: 5px;
  }
#comments {
  padding: 10px;
}
  #comments h2 {
    font-size: 1.5em;
    margin-bottom: 10px;
  }
  #comments a {
    text-decoration: none;
  }
  #comments p {
    margin-bottom: 10px;
    line-height: 1.6em;
  }
  #comments form {
    
  }
  #comments form p {
    margin-bottom: 5px;
  }
    #comments form input {
      margin-right: 5px;
    }
    #comments form input, textarea {
      border: 1px solid #cccccc;
      font-size: 0.9em;
      font-family: Verdana;
      padding: 4px;
      background-position: 4px 4px;
      background-repeat: no-repeat;
    }
    #comments form input {
      width: 240px;
      border: 1px solid #cccccc;
    }
    #comments form textarea {
      width: 350px;
      padding: 4px 4px !important;
      border: 1px solid #cccccc;
    }
    #comments form button {
      border: 1px solid #a0a0a0;
      font-size: 1em;
      font-family: Verdana;
      padding: 2px 6px;
    }
  .commentdetails {
    margin-top: 25px;
  }
  .commentauthor {
    margin-bottom: 5px !important;
    font-weight: bold;
  }
  .commentdate {
    font-size: 0.8em;
    margin-bottom: 5px;
    color: #909090;
  }
  .required {
    color: #ff0000;
  }
h2.title {
  font-size: 1em !important;
  text-transform: uppercase;
  padding: 10px;
  color: #565656;
}
.notfound {
  padding: 40px;
}
  .notfound h2 {
    font-size: 18px;
    font-weight: normal;
    margin-bottom: 10px;
  }

/** END miscellaneous **/

/** BEGIN wordpress 2.7 comments **/
#comments ol {
  list-style-type: none;
  clear: both;
  padding: 0;
  margin: 0;
}
  #comments .buffer {
    padding: 10px;
  }
  #comments ol li {
    margin-bottom: 10px;
  }
  #comments ol li ul li {
    border: 1px solid #e0e0e0;
    padding: 10px;
  }
  #comments ol li .avatar {
    float: right;
  }
  #comments ol li .comment-author {
    
  }
    #comments ol li .comment-author .fn {
      font-weight: bold;
      font-size: 1.2em;
    }
  #comments ol li .comment-meta {
    font-size: 0.9em;
    color: #999999;
    margin: 5px 0 10px;
  }
  #comments ol li .reply {
    font-size: 0.9em;
    font-weight: bold;
    padding-bottom: 10px;
  }
  #comments .children {
    list-style-type: none;
  }
#comments .navigation {
  padding: 0 0 40px;
  font-size: 0.9em;
}
  #comments .navigation a {
    color: #999999;
    padding: 3px 8px;
    border: 1px solid #cccccc;
  }
  #comments .navigation a:hover {
    color: #000000;
    border-color: #000000;
    text-decoration: none;
  }
#comments .says {
  display: none;
}
/** END wordpress 2.7 comments **/

</style>


<!--[if lte IE 6]><link rel="stylesheet" type="text/css" href="ie.css" /><![endif]-->
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery.cycle.all.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>
</head>
<body>
<!-- BEGIN wrapper -->
<div id="wrapper">
  <!-- BEGIN header -->
  <div id="header">
    <!-- begin pages -->
    <ul class="pages">
      <li><a href="http://www.free-css.com/">Home</a></li>
      <li><a href="about.html">About Us</a></li>
      <li><a href="page.html">Demo Page</a></li>
      <li><a href="contact.html">Contact Page</a></li>
    </ul>
    <!-- end pages -->
    <form action="http://www.free-css.com/">
      <input type="text" name="s" id="s" value="" />
      <button type="submit">Search</button>
    </form>
    <div class="break"></div>
    <!-- begin logo -->
    <div class="logo">
      <h1><a href="http://www.free-css.com/">SimpleScheme Magazine</a></h1>
      <p>Free CSS Template</p>
    </div>
    <!-- end logo -->
    <!-- begin sponsor -->
    <div class="sponsor"> <a href="http://www.free-css.com/"><img src="simplescheme-magazine-images/ad468x60.gif" alt="" /></a> </div>
    <!-- end sponsor -->
    <!-- begin categories -->
    <ul class="categories">
      <li><a href="http://www.free-css.com/">Advertising</a></li>
      <li><a href="http://www.free-css.com/">Entertainment</a></li>
      <li><a href="http://www.free-css.com/">Fashion</a></li>
      <li><a href="http://www.free-css.com/">Lifestyle</a></li>
      <li><a href="http://www.free-css.com/">Marketing</a></li>
      <li><a href="http://www.free-css.com/">Pictures</a></li>
      <li><a href="http://www.free-css.com/">Resources</a></li>
      <li><a href="http://www.free-css.com/">Videos</a></li>
    </ul>
    <!-- end categories -->
  </div>
  <!-- END header -->
  <!-- BEGIN content -->
  <div id="content">
    <!-- begin recent posts -->
    <div class="recent">
      <!-- begin post -->
      <div class="single">
        <h2>About Us</h2>
        <p>This is an example of a WordPress page, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many pages like this one or sub-pages as you like and manage all of your content inside of WordPress.</p>
      </div>
      <!-- end post -->
    </div>
    <!-- end recent posts -->
  </div>
  <!-- END content -->
  <!-- BEGIN sidebar -->
  <div id="sidebar">
    <!-- begin sponsors -->
    <div class="box">
      <p class="sponsors"> <a href="http://www.free-css.com/"><img src="simplescheme-magazine-images/ad125x125.jpg" alt="" /></a> <a href="http://www.free-css.com/"><img src="simplescheme-magazine-images/ad125x125.jpg" alt="" /></a> </p>
      <ul class="bookmarks">
        <li class="rss"><a href="http://www.free-css.com/">Subscribe via RSS feed</a></li>
        <li class="twt"><a href="http://www.free-css.com/">Follow me on Twitter</a></li>
        <li class="fcb"><a href="http://www.free-css.com/">Connect with me on Facebook</a></li>
        <li class="ldi"><a href="http://www.free-css.com/">Connect with me on LinkedIn</a></li>
      </ul>
    </div>
    <!-- end sponsors -->
    <!-- begin popular posts -->
    <div class="box">
      <h2>Popular Posts</h2>
      <ul class="popular">
        <li> <a href="http://www.free-css.com/">Top 10 Ways to Make Money Online</a>
          <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse interdum..</p>
        </li>
        <li> <a href="http://www.free-css.com/">Top 10 Ways to Make Money Online</a>
          <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse interdum..</p>
        </li>
        <li> <a href="http://www.free-css.com/">Top 10 Ways to Make Money Online</a>
          <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse interdum..</p>
        </li>
      </ul>
    </div>
    <!-- end popular posts -->
    <!-- begin flickr images -->
    <div class="box">
      <h2>Flickr Images</h2>
      <div class="flickr"> <a href="http://www.free-css.com/"><img src="simplescheme-magazine-images/_flickr.jpg" alt="" /></a> <a href="http://www.free-css.com/"><img src="simplescheme-magazine-images/_flickr.jpg" alt="" /></a> <a href="http://www.free-css.com/"><img src="simplescheme-magazine-images/_flickr.jpg" alt="" /></a> <a href="http://www.free-css.com/"><img src="simplescheme-magazine-images/_flickr.jpg" alt="" /></a> <a href="http://www.free-css.com/"><img src="simplescheme-magazine-images/_flickr.jpg" alt="" /></a> <a href="http://www.free-css.com/"><img src="simplescheme-magazine-images/_flickr.jpg" alt="" /></a> </div>
    </div>
    <!-- end flickr images -->
    <!-- begin featured video -->
    <div class="box">
      <h2>Featured Video</h2>
      <div class="video"> <img src="simplescheme-magazine-images/_video.jpg" alt="" /> </div>
    </div>
    <!-- end featured video -->
    <!-- begin tag cloud -->
    <div class="box">
      <h2>Tag Cloud</h2>
      <div class="tags"> <a href="http://www.free-css.com/">Link</a> </div>
    </div>
    <!-- end tag cloud -->
    <!-- BEGIN left -->
    <div class="l">
      <!-- begin categories -->
      <div class="box">
        <h2>Categories</h2>
        <ul>
          <li><a href="http://www.free-css.com/">Advertising</a></li>
          <li><a href="http://www.free-css.com/">Fashion</a></li>
          <li><a href="http://www.free-css.com/">Gadgets</a></li>
          <li><a href="http://www.free-css.com/">Lifestyle</a></li>
          <li><a href="http://www.free-css.com/">Networking</a></li>
          <li><a href="http://www.free-css.com/">News</a></li>
          <li><a href="http://www.free-css.com/">Sports</a></li>
        </ul>
      </div>
      <!-- end categories -->
      <!-- begin meta -->
      <div class="box">
        <h2>Meta</h2>
        <ul>
          <li><a href="http://www.free-css.com/">Log in</a></li>
          <li><a href="http://www.free-css.com/">Valid XHTML</a></li>
        </ul>
      </div>
      <!-- end meta -->
    </div>
    <!-- END left -->
    <!-- BEGIN right -->
    <div class="r">
      <!-- begin archives -->
      <div class="box">
        <h2>Archives</h2>
        <ul>
          <li><a href="http://www.free-css.com/">June 2009</a></li>
          <li><a href="http://www.free-css.com/">May 2009</a></li>
          <li><a href="http://www.free-css.com/">April 2009</a></li>
          <li><a href="http://www.free-css.com/">March 2009</a></li>
          <li><a href="http://www.free-css.com/">February 2009</a></li>
        </ul>
      </div>
      <!-- end archives -->
      <!-- begin blogroll -->
      <div class="box">
        <h2>Blogroll</h2>
        <ul>
          <li><a href="http://www.free-css.com/">Documentation</a></li>
          <li><a href="http://www.free-css.com/">Suggest Ideas</a></li>
          <li><a href="http://www.free-css.com/">Support Forum</a></li>
        </ul>
      </div>
      <!-- end archives -->
    </div>
    <!-- END right -->
  </div>
  <!-- END sidebar -->
</div>
<!-- END wrapper -->
<!-- BEGIN footer -->
<div id="footer">
  <p class="l">Copyright &copy; 2009 - <a href="http://www.free-css.com/">Website Name</a> &middot; All Rights Reserved | Template by: <a href="http://www.wpthemedesigner.com/">WordPress Designer</a> | Get More <a href="http://www.free-css.com/">Free CSS Templates</a> </p>
</div>
<!-- END footer -->
</body>
</html>

   
    
  








Related examples in the same category

1.simple-blue
2.simple-brown
3.simple-elegance
4.simple-jojo
5.simple-personal
6.simple-solution
7.simple-type
8.simple 1
9.simple3column
10.simpleandsleak
11.simpleblog1-0
12.simplecorp
13.simplecurve
14.simpleelegance03
15.simpleevent
16.SimpleMin
17.simplepagedesign
18.simplepassage
19.simplepicture
20.simples
21.simpletex
22.simpleton
23.simpletwocolumn
24.simplex
25.simplified
26.simply_plain_v2