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="#">» 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> </p>
<p> </p>
<p> </p>
<p> </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 & <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