metamorph_ballway : Art « Templates « HTML / CSS

metamorph_ballway
      

<!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>Metamorphosis Design Free Css Templates</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<style type='text/css'>
/*
Design by Metamorphosis Design
http://www.metamorphozis.com
Released for free under a Creative Commons Attribution 2.5 License
*/

*

body {
  margin: 0;
  padding: 0;
  background:  #FFFFFF url(metamorph_ballway-images/back_all.gif) repeat-x top left;
  font-size: 13px;
  color: #000000;
}

body, th, td, input, textarea, select, option {
  font-weight: normal;
  font-family: Tahoma, Helvetica, sans-serif;
}

h1, h2, h3 {
  font-weight: normal;
  color: #0F7EAC;
}

h1 {
  font-size: 24px;
}

h2 {
  font-size: 18px;
}

h3 {
  font-size: 1em;
}


a {
  color: #0F7EAC;
}

a:hover {
  text-decoration: none;
  color: #0F7EAC;
}

/* Header */

#header {
  width: 890px;
  height: 400px;
  margin: 0px auto;
  background: url(metamorph_ballway-images/header.jpg) no-repeat;
}

/* Logo */

#logo {
  float: left;
  padding: 40px 0 0 0;
}

#logo h1 {
  margin: 0;
  text-transform: lowercase;
  font-size: 24px;
  font-weight: normal;
  color: #FFFFFF;
}

#logo h1 a {
  padding-right: 20px;
  text-decoration: none;
  color: #FFFFFF;
}

#logo H2 {
  text-transform: uppercase;
  font-size: 10px;
}

#logo a {
  text-decoration: none;
  color: #FFFFFF;
}

/* Menu */

#menu {
  
}

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

#menu li {
  display: inline;
}

#menu a {
  display: block;
  float: left;
  margin-left: 20px;
  text-decoration: none;
  text-transform: lowercase;
  font-size: 24px;
  color: #3E6EAA;
}

#menu a:hover, .active a {
  border-bottom: 3px solid #3E6EAA;
}


/* Page */

#page {
  width: 890px;
  margin: 0 auto;
background: #ffffff;
border-left: 10px solid #ffffff;
border-right: 10px solid #ffffff;
}

#main {
  width: 850px;
  margin: 0 auto;
}

/* Content */

#content {
  float: left;
  width: 590px;
}

.post {
  padding: 20px 20px;
  background: url(metamorph_ballway-images/bg04.jpg) repeat-x top left;

}

.title {
  margin: 0;
  color: #0F7EAC;
}

.byline {
  margin: 0;
  color: #0F7EAC;
}

.meta {
  text-align: left;
  color: #000000;
}

.meta .more {
  padding-left: 20px;
}

.meta .comments {
  padding-left: 20px;
}

/* Sidebar */

#sidebar {
  float: right;
  margin-top: 50px;
  width: 230px;
}

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

#sidebar li {
}

#sidebar li ul {
  padding: 15px 0;
}

#sidebar li li {
  padding: 5px;
  padding-left: 20px;
}

#sidebar h2 {
  margin: 0;
  padding: 10px 0 0 20px;
  height: 40px;
  color: #3E6EAA;
  background: url(metamorph_ballway-images/small.gif) repeat-x;
}

#sidebar a {
}

#sidebar a:hover {
}


#calendar1 {
  padding: 10px 5px 10px 5px;
}

#calendar table {
  width: 100%;
  text-align: center;
}

#calendar thead {

}

#calendar tbody td {
  border: 1px solid #F1F1F1;
}

#calendar #prev {
  text-align: left;
}

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

#calendar tfoot a {
  text-decoration: none;
  font-weight: bold;
}

#calendar #now {
  background: #81CFF3;
  border: 1px solid #5D9DE4;
  font-weight: bold;
  color: #ffffff
}


/* Footer */

#footer {
  clear: both;
  margin: 0px;
  padding-top: 20px;
  height: 60px;
  border-top: #0F7EAC solid 4px;
  background: #F2F2F2 url(metamorph_ballway-images/footer.gif) repeat-x left top;
}

#footer p {
  margin: 0px;
  padding: 0px;
  font-size: 10px;
  text-align: center;
  color: #717171;
}

</style>


</head>
<body>
<div id="page">
<!-- start header -->
<div id="header">
  <div id="logo">
    <h1><a href="#">Metamorph_iceflower</a></h1>
      <h2><a href="http://www.metamorphozis.com/" id="metamorph">Design by Metamorphosis Design</a></h2>
  </div>
  <div id="menu">
    <ul>
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Blog</a></li>
      <li><a href="#">Gallery</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact </a></li>
    </ul>
  </div>
</div>
<!-- end header -->
<!-- start page -->
<div id="main">
  <!-- start content -->
  <div id="content">
    <div class="post">
      <h1 class="title">Welcome To Our Website</h1>
      <p class="byline"><small>Posted on March 15th, 2009 by <a href="#">admin</a> | <a href="#">Edit</a></small></p>      
      <p>This website template is released under  a Creative Commons Attribution 2.5 License</p>
          <p>We request you retain the full copyright notice below including the link to www.metamorphozis.com.<br />
            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.metamorphozis.com. If you refuse 
            to include even this then support may be affected.<br />
                <br />
            You are allowed to use this design only if you agree to the following conditions:<br />
            - You cannot remove copyright notice from this design without our permission.<br />
            - If you modify this design it still should contain copyright because it is based on our work.<br />
            - You may copy, distribute, modify, etc. this template as long as link to our website remains untouched.<br />
            For support visit <a href="http://www.metamorphozis.com/contact/contact.php">http://www.metamorphozis.com/contact/contact.php</a><br />
  <br />
            The Metamorphosis Design : 2008 </p>
    </div>
    
    <div class="post">
      <h2 class="title">Proin gravida orci porttitor </h2>
      <p class="byline"><small>Posted on March 15th, 2009 by <a href="#">admin</a> | <a href="#">Edit</a></small></p>
      <div class="entry">
        <h4><a href="#">Web Design Starter's Guide</a></h4>
          <ol>
        <li><a href="http://www.metamorphozis.com/free_templates/free_templates.php">More Free Website Templates</a></li>
        <li><a href="http://www.metamorphozis.com/shop/flash_templates.php">Flash Templates</a></li>
                <li><a href="http://www.metamorphozis.com/website_hosting/index.php">Top Hosting Providers</a></li>
                <li><a href="http://www.metamorphozis.com/contact/contact.php">Support For Free Website Templates</a></li>
             
      </ol>
      <br />
      </div>      
    </div>
    
    <div class="post">
      <h2 class="title">Risus Pellentesque Pharetra</h2>
      <p class="byline"><small>Posted on March 25th, 2009 by <a href="#">admin</a> | <a href="#">Edit</a></small></p>
      <div class="entry">
        <p>Maecenas pede nisl, elementum eu, ornare ac, malesuada at, erat. Proin gravida orci porttitor enim accumsan lacinia. Donec condimentum, urna non molestie semper, ligula enim ornare nibh, quis laoreet eros quam eget ante. Maecenas pede nisl, elementum eu, ornare ac, malesuada at, erat. </p>
      </div>      
    </div>
  </div>
  <!-- end content -->
  <!-- start sidebar -->
  <div id="sidebar">
    <ul>      
      <li>
        <h2>Lorem Ipsum</h2>
        <ul>
          <li><a href="#">Ornare ac, malesuada</a></li>
          <li><a href="#">Eget nonummy</a></li>
          <li><a href="#">Velit semper nisi</a></li>
          <li><a href="#">Fusce dui fringilla</a></li>
          <li><a href="#">Eget tempor eget </a></li>
        </ul>
      </li>
      <li>
        <h2>Calendar</h2>        
      <ul>
        <li id="calendar">      
        <div id="calendar1">
          <table id="calendar2" summary="Calendar">
            <caption>
            January 2008
            </caption>
            <thead>
              <tr>
                <th abbr="Monday" scope="col" title="Monday">M</th>
                <th abbr="Tuesday" scope="col" title="Tuesday">T</th>
                <th abbr="Wednesday" scope="col" title="Wednesday">W</th>
                <th abbr="Thursday" scope="col" title="Thursday">T</th>
                <th abbr="Friday" scope="col" title="Friday">F</th>
                <th abbr="Saturday" scope="col" title="Saturday">S</th>
                <th abbr="Sunday" scope="col" title="Sunday">S</th>
              </tr>
            </thead>
            <tfoot>
              <tr>
                <td abbr="Des" colspan="3" id="prev"><a href="#">&laquo; Des</a></td>
                <td class="pad">&nbsp;</td>
                <td abbr="Feb" colspan="3" id="next" class="pad"><a href="#">Feb &raquo;</a></td>
              </tr>
            </tfoot>
            <tbody>
              <tr>
                <td colspan="2" class="pad">&nbsp;</td>
                <td>1</td>
                <td>2</td>
                <td>3</td>
                <td>4</td>
                <td>5</td>
              </tr>
              <tr>
                <td>6</td>
                <td>7</td>
                <td>8</td>
                <td>9</td>
                <td>10</td>
                <td>11</td>
                <td>12</td>
              </tr>
              <tr>
                <td>13</td>
                <td>14</td>
                <td>15</td>
                <td>16</td>
                <td>17</td>
                <td>18</td>
                <td>19</td>
              </tr>
              <tr>
                <td>20</td>
                <td id="now">21</td>
                <td>22</td>
                <td>23</td>
                <td>24</td>
                <td>25</td>
                <td>26</td>
              </tr>
              <tr>
                <td>27</td>
                <td>28</td>
                <td>29</td>
                <td>30</td>
                <td>31</td>
                <td class="pad" colspan="2">&nbsp;</td>
              </tr>
            </tbody>
          </table>
        </div>
      </li>
      </ul>
      </li>
      <li>
        <h2>Lorem Ipsum</h2>
        <ul>
          <li><a href="#">Fusce dui neque fringilla</a></li>
          <li><a href="#">Eget eget nonummy</a></li>
          <li><a href="#">Magna lacus  mauris</a></li>
          <li><a href="#">Velit semper nisi molestie</a></li>
          <li><a href="#">Eget tempor nonummy</a></li>
        </ul>
      </li>
    </ul>
  </div>
  <!-- end sidebar -->    <div style="clear: both"></div></div>
</div>
<!-- end page -->
<div id="footer">
  <p>Copyright &copy; 2008. <a href="#">Privacy Policy</a> | <a href="#">Terms of Use</a> | <a href="http://validator.w3.org/check/referer" title="This page validates as XHTML 1.0 Transitional"><abbr title="eXtensible HyperText Markup Language">XHTML</abbr></a> | <a href="http://jigsaw.w3.org/css-validator/check/referer" title="This page validates as CSS"><abbr title="Cascading Style Sheets">CSS</abbr></a></p> 
  <p>Design by <a href="http://www.metamorphozis.com/" title="Flash Website Templates">Flash Website Templates</a></p>
</div>
</body>
</html>
Related examples in the same category

1.	metamorph_artgallery
2.	metamorph_burninghouse
3.	metamorph_burningshore
4.	metamorph_dreamclouds
5.	metamorph_dreamingirl
6.	metamorph_ball
7.	metamorph_abstractred
8.	metamorph_bubles
9.	adornment
10.	airwaves
11.	metamorph_movie
12.	art-gallery
13.	artclass
14.	artdesign
15.	ArtDesign1
16.	ArtDesign2
17.	ArtDesign3
18.	ArtDesign4
19.	artist
20.	artistic
21.	studio-980
22.	studio
23.	Studio5
24.	studio_art