greynpink : Grey « Templates « HTML / CSS

greynpink
   

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta name="description" content="description of page" />
    <meta name="keywords" content="keywords of site" />
    <meta name="author" content="name of author - Manjeet Singh Sawhney   www.manjeetss.com" />
<style type='text/css'>
/*   This website template was created by myself Manjeet Singh Sawhney (http://www.manjeetss.com)
  You are free to copy, distribute and adapt any of the work under the following condition:
  You must attribute the work by keeping the "Designed by Manjeet Singh Sawhney" link in the footer.
  If you wish, you can remove the footer link by paying a small fee of only $5. For this please drop me an e-mail to manjeetss@gmail.com with your details and I will then send you my PayPal account details. Thanks.  
*/

body 
{ 
  padding: 0; 
  margin: 0; 
  font-size: 12px; 
  font-family: arial; 
  background: #CDCDCD; 
  color: #777; 
}

a:link, a:active, a:visited 
{ 
  text-decoration: none; 
  color: #FF2B8F;
}

a:hover
{
  text-decoration: underline;
}

#main
{ 
  width: 730px; 
  padding: 25px 15px; 
  background: #FFF; 
  margin-left: auto; 
  margin-right: auto; 
}

#header 
{ 
  height: 60px;
}

#header #right 
{ 
  float: right; 
  text-align: right; 
  width: 300px; 
}

.companyname 
{  
  font-size: 20px;
  float: left;
}

#banner 
{ 
  background: url("greynpink-images/header.jpg") 100% 0 no-repeat; 
  height: 200px; 
  background-color: #CDCDCD;
}

#banner h1 
{ 
  color: #FFF; 
  padding: 40px 0 0 25px; 
  line-height: 120%;
}

#maincontent 
{ 
  clear: both; 
  margin: 15px 0;   
}

div.content
{ 
  padding: 2px 20px 12px; 
}

div.content:hover
{
  background-color: #DDD;
}

p 
{  
  margin-bottom: 5px; 
  line-height: 200%;
}

ul 
{ 
  margin-bottom: -30px; 
  padding : 0; 
  list-style : none; 
}

h1
{
  font-size: 200%;
  color: #FF2B8F;  
}

h2 
{ 
  font-size: 170%; 
  color: #FF2B8F;  
}

h3
{
  font-size: 140%;
  color: #FF2B8F;
}

#navbar 
{  
  background-color: #CDCDCD; 
  height: 30px; 
  margin-bottom: 1px;
}

#navbar li
{    
  padding: 8px 14px 2px 14px;
  border-right: 1px solid #FFF;
  float: left; 
  font-weight: bold;
  height: 20px;
}

#navbar li.active
{ 
  background-color: #FF2B8F;
}

#navbar li:hover
{
  background-color: #FF2B8F;
}

#navbar a:link, #navbar a:active, #navbar a:visited
{ 
  color: #FFF; 
  text-decoration: none;  
  padding: 8px 14px 2px 14px;
}

#footer
{   
  border-top: 1px solid #CDCDCD;
  height: 15px;      
  padding: 15px 25px 25px;    
  font-size: 11px; 
  text-align: center;
}

#footer p 
{  
  clear: both; 
  color: #777; 
  font-size: 11px; 
  padding-top: 5px;
}

#footer  #bottomnavbar a
{
  padding-left: 15px;
}


</style>


    <title>Grey 'n' Pink - www.manjeetss.com - Manjeet Singh Sawhney</title>
  </head>  
  <body>
    <div id="main">
      <div id="header">
        <div class="companyname">Your Company Name - Grey 'n' Pink</div>        
        <div id="right">
          Telephone: +44 (9)999 9999999
          <br />
          E-mail: <a href="mailto:youremail@manjeetss.com">notregistered@manjeetss.com</a>
        </div>
      </div>
      <div id="navbar">
        <ul>
          <li class="active"><a href="index.html">Home</a></li>
          <li><a href="http://www.manjeetss.com/websitetemplates.html">Website Templates</a></li>
          <li><a href="http://www.manjeetss.com/knowledgebase.html">Knowledge Base</a></li>
          <li><a href="http://www.manjeetss.com/fitnessnutrition.html">Fitness &amp; Nutrition</a></li>
          <li><a href="http://www.manjeetss.com/cvadvice.html">CV Advice</a></li>
        </ul>
      </div>
      <div id="banner">
        <h1>Some catchy words in this <br /> area to get the visitor's <br />attention!  ;-)</h1>
      </div>
      <div id="maincontent">
        <div class="content">
          <h1>Heading H1</h1>
          <p>This is another one of my free website templates which I am offering for anyone to use and adapt. Please take a minute to read the important note below regarding the usage of this template.</p>
          <p>If you need a customised template design according to your requirements then please let me know by dropping me an e-mail to <a href="mailto:manjeetss@gmail.com">manjeetss@gmail.com</a>.</p>          
          <p>You are free to copy, distribute and adapt any of the work under the condition that you must attribute the work by keeping the "Designed by Manjeet Singh Sawhney" link in the footer.</p>
          <p>If you wish, you can remove the footer link by paying a small fee of only $5. For this please drop me an e-mail to <a href="mailto:manjeetss@gmail.com">manjeetss@gmail.com</a> with your details and I will then send you my PayPal account details. Thanks.</p>                  
        </div>
        <div class="content">
          <h2>Heading H2</h2>
          <p>My homepage offers a variety of information including <a href="http://www.manjeetss.com/websitetemplates.html">free website templates</a>, <a href="http://www.manjeetss.com/knowledgebase.html">knowledge articles</a>, <a href="http://www.manjeetss.com/cvadvice.html">lots of CV-related advice</a> and more.</p>                    
          <p>Last but not least, if you need some help with creating a website, SEO, PPC campaign management, keyword research and analysis, programming or databases then please feel free to get in touch by <a href="mailto:manjeetss@gmail.com">e-mail</a>.</p>            
        </div>
        <div class="content">
          <h3>Heading H3</h3>
          <p>Aliquam dolor. Nunc egestas ipsum et odio.Nulla facilisi. In hac habitasse platea dictumst. Aliquam nec dolor. Morbi eleifend fermentum orci.Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
          <p>Aliquam dolor. Nunc egestas ipsum et odio.Nulla facilisi. In hac habitasse platea dictumst. Aliquam nec dolor. Morbi eleifend fermentum orci.Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
        </div>
      </div>
      <div id="footer">
        <div id="bottomnavbar">
          <a href="index.html">Home</a>
          <a href="http://www.manjeetss.com/websitetemplates.html">Website Templates</a>
          <a href="http://www.manjeetss.com/knowledgebase.html">Knowledge Base</a>
          <a href="http://www.manjeetss.com/fitnessnutrition.html">Fitness &amp; Nutrition</a>
          <a href="http://www.manjeetss.com/cvadvice.html">CV Advice</a>
        </div>
        <p>
          <!--   
            This website template was created by myself Manjeet Singh Sawhney (http://www.manjeetss.com)
            You are free to copy, distribute and adapt any of the work under the following condition:
            You must attribute the work by keeping the "Designed by Manjeet Singh Sawhney" link in the footer.
            If you wish, you can remove the footer link by paying a small fee of only $5. For this please drop 
            me an e-mail to manjeetss@gmail.com with your details and I will then send you my PayPal account details. 
            Thanks.  
          -->          
          Copyright &copy; 2011 Your Site - Designed by <a href="http://www.manjeetss.com">Manjeet Singh Sawhney</a>
        </p>
      </div>
    </div>
  </body>
</html>
Related examples in the same category

1.	Grey color template
2.	metamorph_greys
3.	metamorph_greytree
4.	metamorph_greyzone
5.	metamorph_greypattern_lt
6.	fain-gray
7.	Grey 2
8.	greyange
9.	Greyflower
10.	greyhat
11.	greymatter
12.	greyworld
13.	GrayTint
14.	shadesofgrey
15.	light-gray