Color_Pencils : Color « Templates « HTML / CSS






Color_Pencils

   

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Color Pencils</title>
<meta name="description" content="here goes your description" />
<meta name="keywords" content="web, designing, with, standard, xhtml, css" />
<meta name="author" content="Roshan Ravi" />
<!--Designed - Roshan
website - www.ramblingsoul.com
email - c.pixels@gmail.com
-->
<style type='text/css'>
/*
-----------------------------------------------
Author:   Roshan Ravi
URL : www.ramblingsoul.com
Email: c.pixels@gmail.com
----------------------------------------------- */
body {
  background-color: #FFFFFF;
  background-image: url(pagebg-2.png);
  background-repeat: repeat-x;
  margin: 0px;
  padding: 0px;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 12px;
  color: #000000;
}
.main .header {
  background-repeat: no-repeat;
  background-position: right top;
  height: 88px;
  margin-right: 6px;
  vertical-align: bottom;
  background-image: url(header2.png);
}
a:link {
  color: #3399CC;
  text-decoration: none;
}
a:visited {
  color: #3399CC;
  text-decoration: none;
}
a:hover {
  color: #FF9900;
  text-decoration: none;
}
a:active {
  color: #3399CC;
  text-decoration: none;
}
.footer {
  background-color: #A3A3A3;
  background-image: url(footerbg.png);
  background-repeat: repeat-x;
  padding-bottom: 15px;
  height: 165px;
}
.footer .footerinner {
  margin-top: 25px;
  margin-right: 8%;
  margin-left: 8%;
  padding-top: 25px;
}
#bottom .footerinner .fromgallery {
  width: 33%;
  float: left;
}
#bottom .footerinner .fromportfolio {
  width: 32%;
  margin-right: 8px;
  margin-left: 8px;
  float: left;
}


.main {
  margin-right: 8%;
  margin-left: 8%;
}
#bottom .footerinner .misc {
  width: 32%;
  float: left;
}

.main .tophead {
  height: 31px;
}
.main .tophead .logo {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 21px;
  text-transform: uppercase;
  display: block;
  color: #FFFFFF;
  height: 22px;
  margin-top: 3px;
  margin-bottom: 0px;
}
.main .tophead .logo span {
  text-transform: capitalize;
  color: #B0B0B0;
  font-weight: normal;
  font-size: 18px;
}
.main .tophead .logo a {
  color: #3399CC;
  text-decoration: none;
}

.main .belowheader {
  height: 36px;
  margin-top: 0px;
}
.main .header h1 {
  font-size: 18px;
  color: #000000;
  font-weight: bold;
  font-family: "Century Gothic", Arial;
  vertical-align: bottom;
  display: block;
  margin-top: 150px;
}

    #menu {
  float:left;
  width:100%;
  font-size:93%;
  line-height:normal;
  margin-top: 6px;
      }
    #menu ul {
  margin:0;
  list-style:none;
  padding-top: 7px;
  padding-right: 10px;
  padding-bottom: 0;
  padding-left: 0px;
      }
.main .contents {
  background-color: #FFFFFF;
  border-top-width: 10px;
  border-top-style: solid;
  border-top-color: #FFFFFF;
  margin-bottom: 20px;
}
.main .contents .right {
  float: right;
  width: 250px;
  margin-right: 5px;
  padding-top: 55px;
}
.main .contents .left {
  margin-right: 260px;
  background-color: #FFFFFF;
  padding-top: 10px;
  padding-right: 15px;
  text-align: justify;
  line-height: 18px;
}
.main .contents .left h2 {
  font-family: "Century Gothic", Arial;
  font-size: 22px;
  font-weight: normal;
  line-height: 28px;
  color: #3399CC;
  padding-top: 5px;
  padding-right: 5px;
  padding-bottom: 5px;
  margin-top: 5px;
  margin-right: 5px;
  margin-bottom: 5px;
}
.main .header .headertext {
  font-size: 14px;
  font-weight: normal;
  font-family: Georgia, "Times New Roman", Times, serif;
  color: #FFFFFF;
  width: 60%;
  padding-top: 10px;
  line-height: 16px;
}

.main .contents .left p {
  line-height: 18px;
  color: #333333;
}
.main .contents .right .inprogress {
  font-size: 14px;
  font-weight: bold;
  color: #3399CC;
  padding-top: 2px;
  padding-right: 3px;
  padding-bottom: 3px;
  padding-left: 8px;
  font-family: Arial, Helvetica, sans-serif;
  background-color: #F7EBD7;
  border-top-width: 1px;
  border-top-style: solid;
  border-top-color: #DAD0BE;
}
.main .contents .right .inportfolio {
  margin-top: 5px;
  margin-bottom: 3px;
}
.main .contents .right .inportfolio img {
  margin-left: 8px;
  border: 3px solid #FFFFFF;
}




    #menu li {
      display:inline;
      margin:0;
      padding:0;
      }
    #menu a {
  float:left;
  background:url("tableftB.gif") no-repeat left top;
  margin:0;
  padding:0 0 0 4px;
  text-decoration:none;
      }
    #menu a span {
  float:left;
  display:block;
  background:url("tabrightB.gif") no-repeat right top;
  padding:5px 15px 4px 6px;
  color:#666666;
  text-decoration: none;
      }

    #menu a span {float:none;}
    #menu a:hover span {
      color:#000;
      }
    #menu a:hover {
      background-position:0% -42px;
      }
    #menu a:hover span {
      background-position:100% -42px;
      }
#menu a:active {

      background-position:0% -42px;
}
#menu a:active span {

      color:#000;
}
#menu a:active span {

      background-position:100% -42px;
}
#menu .active {


      background-position:0% -42px;
}
#menu .active span {


      color:#000;
}
#menu .active span {


      background-position:100% -42px;
}
.main .headernormal {

  background-repeat: no-repeat;
  background-position: right top;
  height: 202px;
  margin-right: 6px;
  vertical-align: bottom;
}
.main .contents .right .rightbox {
  background-image: url(rightbox2.png);
  background-repeat: repeat-y;
  background-position: center;
  margin-bottom: 15px;
}
.main .contents .right .rightbox .rightboxhead {
  background-image: url(rightbox-1.png);
  background-repeat: no-repeat;
  height: 39px;
  width: 242px;
  margin-right: auto;
  margin-left: auto;
  padding-top: 5px;
}
.main .contents .right .rightbox .rightboxbottom {
  background-image: url(rightbox3.png);
  height: 23px;
  width: 242px;
  margin-right: auto;
  margin-left: auto;
  background-repeat: no-repeat;
  background-position: center;
}
.main .contents .right .rightbox .rightboxcontent {
  width: 230px;
  margin-right: auto;
  margin-left: auto;
  line-height: 18px;
  font-size: 12px;
  font-style: italic;
  text-align: left;
}
.main .contents .right .rightbox .rightboxcontent img {
  float: left;
  margin-right: 5px;
  border: 2px solid #EADECB;
  margin-left: 5px;
}
.posted {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 10px;
  text-decoration: none;
  background-color: #F9EDD8;
  margin-bottom: 15px;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: #DFCCB0;
  margin-top: 15px;
  padding-right: 5px;
  padding-left: 5px;
}

.main .contents .right .rightbox .rightboxcontent ul {
  font-style: normal;
  text-decoration: none;
  list-style-image: none;
  list-style-type: none;
  display: block;
  margin: 5px;
  padding: 2px;
}
.main .contents .right .rightbox .rightboxcontent li {
  display: block;
  margin-bottom: 5px;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: #DED0B8;
  margin-top: 0px;
  margin-right: 0px;
  margin-left: 0px;
}

.main .contents .right .rightbox .rightboxhead h2 {
  font-size: 14px;
  color: #0099CC;
  display: block;
  margin-top: 10px;
  margin-right: 10px;
  margin-left: 10px;
  text-transform: uppercase;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: #F6F0E8;
  font-family: "Century Gothic", Arial;
}
.main .contents .right .rightbox .rightboxcontent a {
  text-decoration: none;
  color: #0099CC;
}
.main .header2 {

  background-repeat: no-repeat;
  background-position: right top;
  height: 202px;
  margin-right: 6px;
  background-image: url(headerimage.png);
  vertical-align: bottom;
}
.main .header2 .headertext {

  font-size: 14px;
  font-weight: normal;
  font-family: Georgia, "Times New Roman", Times, serif;
  color: #FFFFFF;
  width: 60%;
  padding-top: 25px;
  line-height: 18px;
}
.main .header2 .headertext h2 {

  font-size: 24px;
  font-family: "Century Gothic", Arial;
  font-weight: bold;
  padding: 0px;
  line-height: 25px;
  margin-top: 0px;
  margin-right: 0px;
  margin-bottom: 10px;
  margin-left: 0px;
  color: #F8F4EE;
  border-bottom-width: 1px;
  border-bottom-style: dashed;
  border-bottom-color: #F8F4EE;
}
.main .header2 .headertext h1 {
  font-family: "Century Gothic", Arial;
  color: #FFFFFF;
  font-size: 24px;
  border-bottom-width: 1px;
  border-bottom-style: dashed;
  border-bottom-color: #FFFFFF;
  display: block;
  padding-bottom: 3px;
  margin-bottom: 10px;
}

.footerinner h3 {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  color: #ffffff;
  text-decoration: none;
  display: block;
  padding-top: 2px;
  padding-right: 5px;
  padding-bottom: 2px;
  padding-left: 5px;
  margin: 0px;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: #666666;
}
.footerbottom {
  background-color: #666666;
  height: 45px;
  padding-top: 5px;
  padding-right: 10px;
  padding-bottom: 5px;
  padding-left: 10px;
  border-top-width: 2px;
  border-top-style: solid;
  border-top-color: #000000;
  vertical-align: middle;
  color: #CCCCCC;
}
.footerbottom .footerright .textbutton {
  color: #FFCC66;
  background-color: #999999;
  display: block;
  padding: 2px;
  border: 1px solid #333333;
  width: 90px;
  text-align: center;
  float: right;
}

.footerbottom .footerleft {
  width: 45%;
  margin-right: 35px;
  float: left;
  margin-top: 10px;
}
.footerbottom .footerright {
  width: 45%;
  margin-left: 50%;
  margin-top: 10px;
  text-align: right;
}

#bottom .footerinner a:hover {
  color: #000000;
  border-bottom-width: 1px;
  border-bottom-style: dotted;
  border-bottom-color: #FFFF99;
  display: block;
  padding-left: 3px;
  background-color: #E7D9C3;
  margin-top: 2px;
}
.main .contents .right .rightbox .rightboxcontent a:link {

  text-decoration: none;
  color: #0099CC;
}
.main .contents .right .rightbox .rightboxcontent a:hover {

  text-decoration: none;
  color: #0099CC;
}
.main .contents .right .rightbox .rightboxcontent a:active {


  text-decoration: none;
  color: #0099CC;
}
.footerbottom a {
  color: #FFFFFF;
}
.main .contents .left input {
  color: #000000;
  background-color: #FCEED6;
  border: 1px solid #666666;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
  padding: 3px;
  font-weight: bold;
  width: 350px;
}
.main .contents .left textarea {
  background-color: #FCEED6;
  border: 1px solid #666666;
  font-size: 16px;
  color: #000000;
  padding: 3px;
  width: 350px;
  font-weight: bold;
}
#top .contents .left #contactbox {
  background-color: #FFFAF0;
  padding: 5px;
  border: 1px solid #DED0B8;
}
#top .contents .left #contactbox form {
  padding: 0px;
  margin-top: 0px;
  margin-right: auto;
  margin-bottom: 0px;
  margin-left: auto;
  width: 370px;
}

.main .contents .left .submitbutton {
  background-color: #FF9966;
  background-image: url(menu02.png);
  background-repeat: no-repeat;
  display: block;
  height: 24px;
  width: 102px;
  border: 1px solid #666666;
  font-size: 12px;
  padding: 0px;
  font-family: Verdana, Arial, Helvetica, sans-serif;
}
.main .contents .left #error {
  background-image: url(smiley-error.png);
  background-repeat: no-repeat;
  background-position: 5px center;
  padding-left: 60px;
}
.main .contents .left #ok {
  background-image: url(smiley-success.png);
  background-repeat: no-repeat;
  background-position: 5px center;
  padding-left: 60px;
}
.footerbottom a {
  color: #FFFFFF;
}
.footerbottom a:visited {

  color: #FFFFFF;
}
.footerbottom a:hover {


  color: #FFFF66;
}
.footerbottom a:active {


  color: #FFFFFF;
}
#top .contents .right .rightbox .rightboxcontent #feeds {
  padding: 5px;
}
#top .contents .right .rightbox .rightboxcontent #feeds img {
  border-top-style: none;
  border-right-style: none;
  border-bottom-style: none;
  border-left-style: none;
}
#top .contents .right .rightbox .rightboxcontent #feeds a {
  color: #0099CC;
  background-image: url(feed-icon.png);
  background-repeat: no-repeat;
  display: block;
  padding-left: 20px;
  background-position: left center;
}

blockquote {
  background-color: #FFF8EA;
  margin-top: 10px;
  margin-right: 20px;
  margin-bottom: 10px;
  margin-left: 20px;
  padding: 10px;
  border: 1px solid #F1E3CB;
  color: #0099CC;
  font-weight: normal;
  text-decoration: none;
  font-family: Georgia, "Times New Roman", Times, serif;
  font-style: italic;
}
#top .contents .left img {
  float: left;
  margin-right: 10px;
  margin-bottom: 5px;
}
.main .tophead .logo a:active,visited {
  color: #3399CC;
  text-decoration: none;
}
.main .tophead .logo a:hover {
  color: #FFFFFF;
  text-decoration: none;
}
</style>


</head>

<body>
<div class="main">
<div class="tophead">
<h1 title="Pencils and Pens of a Rambling Soul" class="logo"><a href="#">Pencils and Pens</a><span> I can't think of a  name</span></h1> 
</div>
<div class="header">
<div class="headertext">This was my previous website and was showcased in CSS Bloom few months ago.  I have altered the design a bit, but not entirely. </div>
</div>
<div class="belowheader"><div id="menu">
  <ul>
    <li><a href="#" class="active" title="Home"><span>HOME</span></a></li>
    <li><a href="#" title="About this website and me"><span>ABOUT</span></a></li>
    <li><a href="#" title="Some stuff for you to download"><span>GOODIES</span></a></li>
    <li><a href="#" title="Here is my Portfolio"><span>PORTFOLIO</span></a></li>
    <li><a href="#" title="Rambles and rants - just another blog"><span>BLOG</span></a></li>
    <li><a href="#" title="Photo Gallery"><span>PHOTO GALLERY</span></a></li>
  <li><a href="#" title="Want to hire me ?"><span>CONTACT ME</span></a></li>
  </ul>
</div></div>
<div class="contents">
<div class="right">
<div class="rightbox">
<div class="rightboxhead">
<h2>About the Author</h2>
</div>
<div class="rightboxcontent">Morbi dignissim mattis mi. Sed molestie  iaculis purus. Donec gravida scelerisque nunc. Aenean ac nulla. Proin  egestas orci non mauris. <a href="#">&raquo; Read More </a></div>
<div class="rightboxbottom"></div>
</div>
<div class="rightbox">
<div class="rightboxhead">
<h2>Quick Links </h2>
</div>
<div class="rightboxcontent">
  <ul>
    <li><a href="#">Nulla Laoreet</a></li>
    <li><a href="#">Faucibus ante</a></li>
    <li><a href="#">Quisque tupis</a></li>
    <li><a href="#">justo</a></li>
    <li><a href="#">runtrum</a></li>
    <li><a href="#">tincidunt</a></li>
    <li><a href="#">consequat    </a></li>
  </ul>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
</div>
<div class="rightboxbottom"></div>
</div>
<div class="rightbox">
<div class="rightboxhead">
<h2>Meta </h2>
</div>
<div class="rightboxcontent">
  <ul>
    <li><a href="#">XHTML</a> 1.0 &amp; <a href="#">CSS 2.0 </a></li>
    <li><a href="#">Powered By </a></li>
  </ul>
</div>
<div class="rightboxbottom"></div>
</div>
</div>
<div class="left"><h2>Welcome</h2>

<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec viverra  mauris nec metus. Nullam non eros at neque pharetra euismod. Cras  fermentum, ipsum elementum dapibus sodales, urna sapien varius massa,  at bibendum dolor erat at diam. Morbi dignissim mattis mi. Sed molestie  iaculis purus. Donec gravida scelerisque nunc. Aenean ac nulla. Proin  egestas orci non mauris. Curabitur varius fringilla metus. Nulla  nonummy bibendum enim. Fusce nibh. Cras viverra. </p>

<h2>What do I do ? </h2>
    <p>Nulla laoreet faucibus ante. Quisque turpis justo, rutrum in,  tincidunt id, consequat ut, pede. Nam et velit quis augue faucibus  ullamcorper. Etiam velit. Fusce dui neque, feugiat vitae, tincidunt ut,  sollicitudin eget, sapien. Nullam commodo. Maecenas metus. </p>
<blockquote>Nunc  condimentum vestibulum nisi. Vestibulum nisi. Fusce auctor. Aliquam  tristique. Curabitur eget arcu. Class aptent taciti sociosqu ad litora  torquent per conubia nostra, per inceptos hymenaeos. Pellentesque  habitant morbi tristique senectus et netus et malesuada fames ac turpis  egestas. Praesent rhoncus dapibus risus. Proin ut felis. Donec dui  eros, ornare vel, fringilla in, aliquam ac, lectus. Etiam vestibulum  feugiat dolor.</blockquote>
    <p>Maecenas a risus sit amet libero suscipit dignissim. Cum sociis  natoque penatibus et magnis dis parturient montes, nascetur ridiculus  mus. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.  Pellentesque blandit, augue eget porttitor aliquet, quam sapien  tincidunt est, ut dapibus nisi arcu varius felis. Vestibulum enim nibh,  varius sit amet, lobortis eget, porta vel, sapien. Curabitur vel nisi.  Vestibulum ligula tortor, suscipit consectetuer, pellentesque et,  fermentum a, nunc. Etiam facilisis arcu non lectus. Sed lacinia, nisi  ut rhoncus imperdiet, diam nisl volutpat urna, a gravida justo velit a  massa. Fusce eleifend fermentum dolor. Phasellus nunc dolor, pretium  commodo, dapibus vel, cursus in, nulla. Proin bibendum ante vel ipsum  laoreet congue. Cras malesuada elit non metus cursus auctor. Vestibulum  ac quam. Nam interdum, orci a luctus consequat, neque est tristique  libero, in tempus odio tortor eget dolor. In hac habitasse platea  dictumst. Etiam suscipit massa a metus. </p>
    <p>Proin porta nibh vel turpis consequat bibendum. In nibh sem, rhoncus  sed, sagittis ac, bibendum vel, justo. Aenean pulvinar. Aliquam erat  volutpat. Sed imperdiet est id velit. Proin dictum. Lorem ipsum dolor  sit amet, consectetuer adipiscing elit. Phasellus bibendum pulvinar  libero. Pellentesque ullamcorper lorem eu orci. Suspendisse tempor eros  eu neque. Fusce nisi diam, bibendum sit amet, tincidunt ac, tincidunt  sit amet, augue. Donec sapien. Pellentesque habitant morbi tristique  senectus et netus et malesuada fames ac turpis egestas. Suspendisse  eget enim. Nam tristique, justo a fermentum laoreet, neque dui iaculis  orci, eget molestie sem nunc a tortor. Lorem ipsum dolor sit amet,  consectetuer adipiscing elit. Nam quis ipsum faucibus ligula ornare  venenatis. </p>
    <p>Donec vehicula placerat eros. Nulla nec velit dapibus dui posuere  condimentum. Donec massa elit, luctus eget, interdum vel, lobortis  quis, ipsum. Morbi vitae ligula. Donec sed lorem lacinia leo egestas  euismod. Class aptent taciti sociosqu ad litora torquent per conubia  nostra, per inceptos hymenaeos. Duis cursus. Integer rhoncus. Quisque  condimentum dolor sit amet lectus porttitor faucibus. In at mi a diam  tempus varius. </p>
</div>
</div>
</div>
<div class="footer">
<div class="footerinner">
 Here goes your footer Text</div>

</div>
<div class="footerbottom">
<div class="footerleft">Copyright Information </div>
<div class="footerright"><a href="#">Back to Top</a></div>
</div>
</body>
</html>

   
    
    
  








Related examples in the same category

1.metamorph_colorful
2.metamorph_colorwaves
3.metamorph_colourswirls
4.metamorph_contrast
5.colorimetry
6.colors_one
7.colorvoid-website-template
8.colorvoid
9.colourise1-0
10.colourworld
11.monoblock
12.monochrome
13.monotone
14.tricolor
15.i-love-colour-1
16.Light color tempalte
17.Light color template