|
|
<!DOCTYPE html PAKITALENT "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.facebook.com/donjee/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" /> |
|
|
<link href="style.css" rel="stylesheet" type="text/css" /> |
|
|
<script src="js/column.js" type="text/javascript"></script> |
|
|
<title>welcome::CHARCOAL::</title> |
|
|
</head> |
|
|
<body> |
|
|
<!--MAIN PANNEL STARTS --> |
|
|
<div id="main_pannel"> |
|
|
<!--LEFT-PANNEL STARTS --> |
|
|
<div id="left_pannel"> |
|
|
<!--HEADER STARTS --> |
|
|
<div id="header_bg"> |
|
|
<!--LOGO-BG STARTS --> |
|
|
<div class="logo_bg"> |
|
|
<div class="logo_divider"> |
|
|
<h5>Logo Design<span>$150</span></h5> |
|
|
<p class="content">Lorem ipsum dolor sit amet consectetur adipiscing elit. Pellentesque ligula erat mattis.Fusce arcu erat |
|
|
feugiat vel ultrices non vehicula quis lorem.</p> |
|
|
<p class="more"><a href="#" title="more">more</a></p> |
|
|
</div> |
|
|
<br class="spacer" /> |
|
|
</div> |
|
|
<!--LOGO-BG ENDS --> |
|
|
<!--WEB-DESIGN STARTS --> |
|
|
<div class="webdesign_bg"> |
|
|
<div class="webdesign_divider"> |
|
|
<h5>Web Design<span>$350</span></h5> |
|
|
<p class="content">Mauris bibendum porttitor ipsum. Quisque enim nibh tristique et dignissim non aliquam vitae purus. |
|
|
Pellentesque eleifend, lacus et cursus gravida, nisi magna pulvinar. </p> |
|
|
<p class="more"><a href="#" title="more">more</a></p> |
|
|
</div> |
|
|
<br class="spacer" /> |
|
|
</div> |
|
|
<!--WEB-DESIGN ENDS --> |
|
|
<!--ILLUSTRATION STARTS --> |
|
|
<div class="illustration_bg"> |
|
|
<div class="illustration_divider"> |
|
|
<h5>Illustration<span>$250</span></h5> |
|
|
<p class="content">Mauris bibendum porttitor ipsum. Quisque enim nibh tristique et dignissim non aliquam vitae purus.</p> |
|
|
<p class="more"><a href="#" title="more">more</a></p> |
|
|
</div> |
|
|
<br class="spacer" /> |
|
|
</div> |
|
|
<!--ILLUSTRATION ENDS --> |
|
|
<!--ILLUSTRATION STARTS --> |
|
|
<div class="illustration01_bg"> |
|
|
<div class="illustration01_divider"> |
|
|
<h5>Illustration<span>$150</span></h5> |
|
|
<p class="content">Pellentesque eleifend, lacus et cursus gravida, nisi magna pulvinar. Aliquam vel nunc. Etiam libero. |
|
|
Phasellus magna. Etiam lacinia. Maecenas pretium vehicula odio. Proin tortor.</p> |
|
|
<p class="more"><a href="#" title="more">more</a></p> |
|
|
</div> |
|
|
<br class="spacer" /> |
|
|
</div> |
|
|
<!--ILLUSTRATION ENDS --> |
|
|
<br class="spacer" /> |
|
|
</div> |
|
|
<!--HEADER ENDS--> |
|
|
<br class="spacer" /> |
|
|
<!--BODY-LEFT STARTS--> |
|
|
<div id="body_left"> |
|
|
<h1>ultimate visualization</h1> |
|
|
<h4>Venenatis diam libero luctus |
|
|
neconisly gravida vel pharetra quis.</h4> |
|
|
<!--BODY-BOTTOM STARTS--> |
|
|
<div id="body_bttm"> |
|
|
<!--BANNER STARTS --> |
|
|
<div class="banner"> |
|
|
<h4>digital portfolio</h4> |
|
|
<p class="more">19th Febuary 09</p> |
|
|
<h5>Suspe isse quis velit eget dui mollis vestibulum usce adipiscing dui quis porta s Aenean id justo.</h5> |
|
|
<br class="spacer" /> |
|
|
</div> |
|
|
<!--BANNER ENDS --> |
|
|
<!--BOTTOM-LEFT STARTS--> |
|
|
<div id="bttm_left"> |
|
|
<h2>Request for a free quote</h2> |
|
|
<form action="" method="post"> |
|
|
<input type="text" value="name" /> |
|
|
<input type="text" class="textbox" value="email" /> |
|
|
<br class="spacer" /> |
|
|
<textarea name="" cols="" rows="" >your message here:</textarea> |
|
|
<label>All fields are mandatory</label> |
|
|
<input name="" type="image" src="images/bttn_submit.gif" class="bttn_submit" title="submit" /> |
|
|
<br class="spacer" /> |
|
|
</form> |
|
|
<h4 class="green_text">Mauris viverra ullamcorper augue. Suspendisse euismod dignissim sed nibh. Duis nec felis nec |
|
|
justo fermentum suscipit. </h4> |
|
|
<p class="date_bg"><span>02</span>FEB</p> |
|
|
<p class="content_date">Maecenas eros. Donec ornare condimentum sapien. Nunc metus sapien imperdiet sit amet |
|
|
ornare in, mattis vitae magna.</p> |
|
|
<ul> |
|
|
<li class="comment"><a href="#" title="comments">Comments</a></li> |
|
|
<li class="post"><a href="#" title="posts">Posts</a></li> |
|
|
<li class="testmonial"><a href="#" title="testimonials">Testimonials</a></li> |
|
|
<li></li> |
|
|
<li></li> |
|
|
</ul> |
|
|
<br class="spacer" /> |
|
|
<p>Nunc leo elit ullamcorper quis, placerat sit amet interdum ut, mauris. Vestibulum sem. Fusce sed adipiscing dui |
|
|
quis porta suscipit ligula.</p> |
|
|
<br class="spacer" /> |
|
|
</div> |
|
|
<!--BOTTOM-LEFT ENDS--> |
|
|
<br class="spacer" /> |
|
|
</div> |
|
|
<!--BODY-BOTTOM ENDS--> |
|
|
<br class="spacer" /> |
|
|
</div> |
|
|
<!--BODY-LEFT ENDS--> |
|
|
<!--FOOTER-BOTTOM STARTS--> |
|
|
<div id="footer-main"> |
|
|
<ul> |
|
|
<li class="active">welcome</li> |
|
|
<li>|</li> |
|
|
<li><a href="#" title="service that we provide">services that we provide</a></li> |
|
|
<li>|</li> |
|
|
<li><a href="works.html" title="works of charcoal">works of charcoal</a></li> |
|
|
<li>|</li> |
|
|
<li><a href="#" title="get in touch">get in touch</a></li> |
|
|
</ul> |
|
|
<br class="spacer" /> |
|
|
<p>© Copyright Information Goes Here. All Rights Reserved. |
|
|
<span> Design by : <a href="http://www.templatekingdom.com/tkp/2689/" title="Template-Kingdom" target="_blank">Template-Kingdom</a></span></p> |
|
|
<br class="spacer" /> |
|
|
</div> |
|
|
<!--FOOTER-BOTTOM ENDS--> |
|
|
<br class="spacer" /> |
|
|
</div> |
|
|
<!--LEFT-PANNEL ENDS --> |
|
|
<!--SHDW-PANNEL STARTS --> |
|
|
<div id="shdw_pannel"> |
|
|
<br class="spacer" /> |
|
|
</div> |
|
|
<!--SHDW-PANNEL ENDS --> |
|
|
<!--RIGHT-PANNEL STARTS --> |
|
|
<div id="right_pannel"> |
|
|
<a href="#index.html"><img src="images/logo.gif" width="164" height="122" alt="logo" title="logo" border="0" class="logo" /></a> |
|
|
<ul class="navigation"> |
|
|
<li class="yellow"><span class="main"><span class="left"><a href="#" title="welcome">Welcome</a></span></span></li> |
|
|
<li class="red"><span class="main"><span class="left"><a href="#" title="services that we">services that we provide</a></span></span></li> |
|
|
<li class="green"><span class="main"><span class="left"><a href="works.html" title="works of charcoal">works of charcoal</a></span></span></li> |
|
|
<li class="brown"><span class="main"><span class="left"><a href="#" title="get in touch">get in touch</a></span></span></li> |
|
|
</ul> |
|
|
<div id="portfoilio_bg"> |
|
|
<h2>Portfolio</h2> |
|
|
<p class="port_cont">Donec felis eros, placerat sit amet faucibus id condimentum at quam feugiat dolor sed.</p> |
|
|
<h5>01. Duis sodales mauris lectus</h5> |
|
|
<img src="images/port_01.jpg" width="188" height="83" alt="port_01" title="port_01" border="0" /> |
|
|
<p>Suspendisse in sapien id velit bibendum venenatis. Mauris viverra ullamcorper.</p> |
|
|
<p class="more"><a href="#" title="more">more</a></p> |
|
|
<h5>02. Suspendisse quis velit eget</h5> |
|
|
<img src="images/port_02.jpg" width="188" height="83" alt="port_02" title="port_02" border="0" /> |
|
|
<p>Aliquam ut orci eget orci laoreet viverra. Integer sed sapien id risus varius consequat.</p> |
|
|
<p class="more"><a href="#" title="more">more</a></p> |
|
|
<h5>03. Suspendisse quis velit eget</h5> |
|
|
<img src="images/port_03.jpg" width="188" height="83" alt="port_03" title="port_03" border="0" /> |
|
|
<p>Aliquam ut orci eget orci laoreet viverra. Integer sed sapien id risus varius consequat.</p> |
|
|
<p class="more"><a href="#" title="more">more</a></p> |
|
|
<br class="spacer" /> |
|
|
</div> |
|
|
<br class="spacer" /> |
|
|
</div> |
|
|
<!--RIGHT-PANNEL ENDS --> |
|
|
<br class="spacer" /> |
|
|
</div> |
|
|
<!--MAIN PANNEL ENDS --> |
|
|
</body> |
|
|
</html> |