WaterColored Portfolio Coded, Free CSS Template With PSD to HTML Tutorial (UPDATED)

WaterColored Portfolio Coded, Free CSS Template With PSD to HTML Tutorial (UPDATED)
  • 29 June 2009
  • Tutorials, Web Design
  • This post was written exclusively for PV.M Garage by Piervincenzo Madeo
  • Comments (109)»

UPDATED: #down_container, .meta_info, .side_bottom, #sidebar, ol.menu_cont li in “style.css”.

This is the second part of WaterColored Web Portfolio tutorial. In case you missed the first part of this tutorial, read Create a Nice Web Portfolio Design with a Watercolored Background in Photoshop to learn how to make a web layout in PhotoShop. With this post we’ll learn how to realize a valid, standards compliant XHTML and CSS home-page from PSD template. So, now it’s time to write code!

You’re reading the second PSD-to-HTML tutorial of PV.M Garage and for this reason I’ll skip the explanation of some basic steps. You can find other information on how to code a PSD template in DesignSchool Coded, Free CSS Template With PSD to HTML Tutorial.

I suppose you might want to know what our design will look like once finished. Here you can see a preview image and a live demo.
Watercolored Web Portfolio CSS Template

Download Source
Download Source

The Structure

Create a general folder “watercolored_portfolio”, then insert “js” and “images”, and two new files “index.html” and “style.css”.
WaterColored Portfolio Template
See the final PhotoShop template, define and mark a clear structure that you will follow.
WaterColored Portfolio Template

Step 1 – Code the basic structure

Without fear write the markup (edit “index.html” in your text editor) for the basic structure. Don’t forget the document type declaration, the link type for the stylesheet and meta-tags for description and keywords.

<!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>WaterColored Portfolio | A free CSS Template | made in PV.M Garage</title>
<meta name="description" content="Watercolored is a free css template released under Creative Common License by PV.M Garage" />
<meta name="keywords" content="watercolored, web, design, xhtml, css, photoshop" />
<meta name="author" content="Piervincenzo Madeo" />
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="main_container" class="clear">

    <div id="left_container">

      <div id="featured">
      </div>

      <div id="down_container">
      </div>

    </div>

    <div id="sidebar">
    </div>

    <div id="footer">
    </div>   

</div>
</body>
</html>

In this web project we use a Strict DocType (and not Transitional) to improve our ability with (X)HTML code, and also because it is the best recommendation (at the moment, waiting for HTML5).
We use a main_container div that include left_container (logo, menu, featured and down_container), sidebar and footer.

Background

Step 2 – Prepare Background Images

Open your layered PSD template and select the image for the body background as shown. Copy selection and paste in a new PS document, save it for web (jpg in i”mages” folder).
WaterColored Portfolio Template

Now isolate the layers for the background of main_container. Copy and paste the image in a new document holding the transparency.
WaterColored Portfolio Template

Save the graphic for web at a high quality, png-24 with transparency selected.
WaterColored Portfolio Template

You have the images for a good background.

Step 3 – CSS StyleSheet and Background

Open “style.css” in your text editor, insert the YUI Reset CSS to remove and neutralize the inconsistent default styling of HTML elements, then write rules for the body and the main_container.

/*CSS Reset by Yahoo!*/
body,div,dl,dt,dd,ul,ol,
li,h1,h2,h3,h4,h5,h6,pre,
form,fieldset,input,textarea,p,
blockquote,th,td {
	margin:0;
	padding:0;
}
table {
	border-collapse:collapse;
	border-spacing:0;
}
fieldset,img {
	border:0;
}
address,caption,cite,code,dfn,em,strong,th,var {
	font-style:normal;
	font-weight:normal;
}
ol,ul {
	list-style:none;
}
caption,th {
	text-align:left;
}
h1,h2,h3,h4,h5,h6 {
	font-size:100%;
	font-weight:normal;
}
q:before,q:after {
	content:'';
}
abbr,acronym { border:0;
}

/* remember to define focus styles! */
:focus {
	outline: 0;
}

/*CSS Style for WaterColored Portfolio*/
body {
  background: #fff url("images/bck.jpg") repeat-x top; /*gradient background*/
  font-family: “Lucida Sans Unicode”, sans-serif;
  font-size: 14px;
  color: #516e75;
}

strong {
  font-weight: bold;
}

em {
  font-style: italic;
}

a {
  text-decoration: none;
}

h1{
  font-size: 25px;
  line-height: 30px;
}

h2 {
  color: #e7f1fa;
  font-size: 22px;
  line-height: 28px;
}

h3 {
  color: #c4dfe6;
  font-size: 14px;
}

#main_container {
  background: url("images/main_cont_bck.png") no-repeat center top; /*painted background*/
  margin: auto;
  width: 1000px;
}

.clear:after { /*clear-fix*/
  content: "";
  display: block;
  clear: both;
}

Note: we add the clear class to give a cross browser float clearing solution (the background of main_container is visible step-by-step with this fix ). We also write the rules for h1, h2, h3, a, strong and em.

Left Content

In this section we have already included divs featured and down container, but we have other elements: logo and menu.

Step 4 – Logo

From PSD template isolate the logo image, but in this case save two graphics to create a nice hover effect with css. In the following figure you can see how to save images (save for web, png-24, transparency selected).
WaterColored Portfolio Template

The markup is the following:

    <div id="left_container">

      <div id="logo">
        <a href="#" class="logo_link"></a>
      </div>

      <div id="featured">
      </div>

      <div id="down_container">
      </div>

    </div>

Now, through this css code, the logo with a simple hover effect is ready.

#logo {
  margin: 0px;
  padding: 0px;
}

.logo_link {
  display: block;
  background: url("images/logo.png") no-repeat top left;
  width: 691px;
  height: 131px;
}

.logo_link:hover {
  background: url("images/logo_hov.png") no-repeat top left;
  display: block;
  width: 691px;
  height: 131px;
}

Step 5 – Menu

Take a copy of the menu background and paste into a new document. Save it as usually.
WaterColored Portfolio Template

Below the markup for menu.

    <div id="left_container">

      <div id="logo">
        <a href="#" class="logo_link"></a>
      </div>

      <div id="menu">
        <ul>
          <li><a href="#">home</a></li>
          <li><a href="#">about</a></li>
          <li><a href="#">blog</a></li>
          <li><a href="#">services</a></li>
          <li><a href="#">projects</a></li>
        </ul>
      </div>

      <div id="featured">
      </div>

      <div id="down_container">
      </div>

    </div>

Relational rules in “style.css”.

#menu {
  background: url("images/menu_bck.png") no-repeat top left;
  margin: 35px 0 20px 165px;
  width: 553px;
  height: 50px;
}

#menu ul {
  padding: 8px 10px 0 48px;
  line-height: 30px;
  font-size: 25px;
}

#menu ul li {
  display: inline;
  padding-right: 18px;
}

#menu ul li a {
  color: #d8ebf7;
  text-decoration: none;
}

#menu ul li a:hover {
  color: #f2faff;
  text-decoration: none;
  border-bottom: 1px dotted #f2faff;
}

Step 6 – Featured

Prepare the indispensable images for featured container: main background, switch button and icons…
WaterColored Portfolio Template

A little preamble for markup. This featured box expect the use of JavaScript to scroll featured contents through the switch buttons (1, 2, 3, 4). There are four elements in our purposes, so we must write a correct XHTML code to prepare document for UI jQuery Tabs.

In the PSD template there is an image on right side and a list on left. Insert two floating divs in which to put an ordered list (left) and an image (right) to reproduce the original box.

Below you can see the complete markup for featured container.

    <div id="left_container">
      <div id="logo">
        <a href="#" class="logo_link"></a>
      </div>
      <div id="menu">
        <ul>
          <li><a href="#">home</a></li>
          <li><a href="#">about</a></li>
          <li><a href="#">blog</a></li>
          <li><a href="#">services</a></li>
          <li><a href="#">projects</a></li>
        </ul>
      </div>
      <div id="featured">

        <ul>
          <li><a href="#featured-1">1</a></li>
          <li><a href="#featured-2">2</a></li>
          <li><a href="#featured-3">3</a></li>
          <li><a href="#featured-4">4</a></li>
        </ul>

        <div id="featured-1" class="featured_content">
          <h1>PV.M Garage blogzine - www.pvmgarage.com</h1>
          <div class="feat_left">
          <ol>
            <li>PhotoShop and Logo Design</li>
            <li>Web Layout <strong>(X)HTML/CSS</strong></li>
            <li><strong>WordPress</strong> Theme</li>
            <li>Web Writing and <strong>Advertise</strong></li>
            <li>Search Engine Optimization</li>
            <li><strong>Google Adsense</strong> to Monetize</li>
          </ol>
          <ol class="menu_cont">
            <li><span class="ico1">2009.06</span></li>
            <li><span class="ico2"><a href="#">comments</a></span></li>
            <li><span class="ico3"><a href="#">Tweet!</a></span></li>
          </ol>
          </div>
          <div class="image_cont">
            <a href="http://www.pvmgarage.com"><img src="images/pvm.jpg" alt="pvm" /></a>
          </div>
        </div>

          <div id="featured-2" class="featured_content">
          <h1>Sport News Pvm - www.sportnewspvm.net</h1>
          <div class="feat_left">
          <ol>
            <li>PhotoShop and Logo Design</li>
            <li><strong>WordPress</strong> Theme</li>
            <li>Articles for <strong>On-Line Magazine</strong></li>
            <li>Search Engine Optimization</li>
            <li><strong>Google Adsense</strong> to Monetize</li>
          </ol>
          <ol class="menu_cont">
            <li><span class="ico1">2009.06</span></li>
            <li><span class="ico2"><a href="#">comments</a></span></li>
            <li><span class="ico3"><a href="#">Tweet!</a></span></li>
          </ol>
          </div>
          <div class="image_cont">
            <a href="http://www.pvmgarage.com"><img src="images/sport.jpg" alt="pvm" /></a>
          </div>
        </div>

          <div id="featured-3" class="featured_content">
          <h1>Jazz Musician - www.jazzmusician.com</h1>
          <div class="feat_left">
          <ol>
            <li>PhotoShop Web Layout</li>
            <li>Web Layout <strong>(X)HTML/CSS</strong></li>
            <li><strong>Joomla</strong> Theme</li>
            <li>Web Writing and <strong>Advertise</strong></li>
            <li>Search Engine Optimization</li>
            <li><strong>Google Adsense</strong> to Monetize</li>
          </ol>
          <ol class="menu_cont">
            <li><span class="ico1">2009.05</span></li>
            <li><span class="ico2"><a href="#">comments</a></span></li>
            <li><span class="ico3"><a href="#">Tweet!</a></span></li>
          </ol>
          </div>
          <div class="image_cont">
            <a href="http://www.pvmgarage.com"><img src="images/jazz.jpg" alt="pvm" /></a>
          </div>
        </div>

          <div id="featured-4" class="featured_content">
          <h1>La Terrazza - www.laterrazzabeb.com</h1>
          <div class="feat_left">
          <ol>
            <li>PhotoShop and Logo Design</li>
            <li>Web Layout <strong>(X)HTML/CSS</strong></li>
            <li><strong>Joomla</strong> Theme</li>
            <li>Web Writing and <strong>Advertise</strong></li>
            <li>Search Engine Optimization</li>
            <li><strong>Google Adsense</strong> to Monetize</li>
          </ol>
          <ol class="menu_cont">
            <li><span class="ico1">2009.05</span></li>
            <li><span class="ico2"><a href="#">comments</a></span></li>
            <li><span class="ico3"><a href="#">Tweet!</a></span></li>
          </ol>
          </div>
          <div class="image_cont">
            <a href="http://www.pvmgarage.com"><img src="images/terrazza.jpg" alt="pvm" /></a>
          </div>
        </div>

      </div>
      <div id="down_container">
      </div>
    </div>

After markup update the style.

#featured {
  background: url("images/featured_bck.png") no-repeat top left;
  margin: 50px 0 20px 0;
  width: 719px;
  height: 326px;
}

#featured h1 {
  background: url("images/icon1.png") no-repeat center left;
  padding-left: 50px;
  margin-bottom: 10px;
}

#featured ul {
  padding: 34px 0 0 20px;
}

#featured ul li {
  display: inline;
}

#featured ul li a {
  background: url("images/featured_switch_bck.png") no-repeat top left;
  padding: 5px 17px 10px 13px;
  margin-left: 2px;
  color: #536f77;
  font-weight: bold;
  text-decoration: none;
}

#featured ul li a:hover {
  background: url("images/featured_switch_bck_hov.png") no-repeat top left;
  padding: 5px 17px 10px 13px;
  margin-left: 2px;
  color: #516e75;
}

.featured_content {
  margin: 13px 0 0 15px;
}

.feat_left {
  float:left;
}

.featured_content ol {
  margin: 7px 10px 0 50px;
  width: 250px;
}

.featured_content ol li {
  padding: 5px 0 5px 20px;
  background: url("images/icon2.png") no-repeat center left;
}

.image_cont {
  float: left;
}

.image_cont img {
  border: 3px solid #90a1a8;
}

ol.menu_cont {
  padding: 0;
}

ol.menu_cont li {
  padding: 0;
  display: inline;
  background: transparent;
  font-size: 10px; /*updated*/
  color: #8cbbc5;
}

ol.menu_cont li a {
  border-bottom: 1px dotted #8cbbc5;
  color: #8cbbc5;
  text-decoration: none;
}

ol.menu_cont li a:hover {
  color: #516e75;
  border-bottom: 1px dotted #516e75;
}

span.ico1 {
  padding: 10px 0 10px 30px;
  background: url("images/icon3.png") no-repeat center left;
  line-height: 30px;
}

span.ico2 {
  padding: 10px 0 10px 34px;
  background: url("images/icon4.png") no-repeat center left;
  line-height: 30px;
}

span.ico3 {
  padding: 10px 0 10px 22px;
  background: url("images/icon5.png") no-repeat center left;
  line-height: 30px;
}

Step 7 – UI jQuery Tabs for Featured Container

Now test the power of jQuery.
Download the minified package of the framework from the official download page and download also the UI package (select UI Core, Tabs and Effects Core).

Copy the two files (“jquery-1.3.2.min.js” and “jquery-ui-1.7.2.custom.min.js”) in “js” folder. To use the power of jQuery in WaterColored Portfolio template call the library from the “index.html” with the following lines of code between head tags:

<head>
  [...]
    <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
		<script type="text/javascript" src="js/jquery-ui-1.7.2.custom.min.js"></script>
	[...]
</head>

Place this code in “index.html” (after <body>) to activate tabs:

	<script type="text/javascript">
	$(function() {
		$("#featured").tabs({ fx: { height: 'toggle', opacity: 'toggle' } }); });
	</script>

and this in css style file:

.ui-tabs .ui-tabs-hide { display: none !important; }

Done. It’s very simple. This is the power of jQuery Library!

Below the result (you can see the demo to test it).
WaterColored Portfolio Template

Step 8 – Down Container

The valid markup to create down container.

<div id="left_container">

      <div id="down_container">
        <div class="down_1">
          <h1>Great Design</h1>
          <a href="#"><img src="images/line25.jpg" alt="line25" /></a>
          <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue.</p>
        </div>
        <div class="down_2">
          <h1>Cicero</h1>
          <a href="#"><img src="images/cowboy.jpg" alt="line25" /></a>
          <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum.</p>
        </div>
      </div>
</div>

Update the style as shown.

#down_container {
  margin-top: 10px;
  min-height: 220px; /*updated*/
}

#down_container img {
  border: 2px solid #90a1a8;
  margin: 10px 0;
}

.down_1, .down_2 {
	display: inline;
	float: left;
	margin-left: 25px;
	margin-right: 0px;
	width: 300px;
}

.down_1 {
  border-right: 1px dotted #90a1a8;
  padding-right: 25px;
}

Sidebar

Step 9 – Code Sidebar

Export three images from PSD for sidebar design: first for content, second for bottom and the icon for post title. It’s clear that you need to insert new div for the bottom of sidebar.
WaterColored Portfolio Template

The valid markup for sidebar.

    <div id="sidebar">
      <div class="side_cont">
      <h2>Services</h2>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
      </div>
      <div class="side_cont">
      <h2>Recent Posts</h2>
      <h3><a href="#">Donec quam felis, ultricies nec, pellentesque eu.</a></h3>
      <span class="meta_info">posted by piervix - 12.08</span>
      <h3><a href="#">Donec quam felis, ultricies nec, pellentesque eu.</a></h3>
      <span class="meta_info">posted by piervix - 12.08</span>
      <h3><a href="#">Donec quam felis, ultricies nec, pellentesque eu.</a></h3>
      <span class="meta_info">posted by piervix - 12.08</span>
      <h3><a href="#">Donec quam felis, ultricies nec, pellentesque eu.</a></h3>
      <span class="meta_info">posted by piervix - 12.08</span>
      </div>
      <div class="side_cont">
      <h2>Working on...</h2>
      <p>Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. </p>
      <a href="#"><img src="images/designschool.jpg" alt="design" /></a>
      </div>
    </div>
    <div class="side_bottom">
    </div>

The style for sidebar.

#sidebar {
  width: 240px;
  background: url("images/sidebar_bck.png") repeat-y center top;
  color: #c4dfe6;
  float: right; /*updated*/
  margin-right: 5px; /*updated*/
}

.side_bottom {
  background: url("images/side_bot.png") no-repeat bottom center;
  height: 85px;
  width: 240px;
  float: right; /*updated*/
  margin-right: 5px; /*updated*/
}

.side_cont {
  padding: 10px 10px 10px 25px;
}

.side_cont h2 {
  background: url("images/side_tit_bot.png") no-repeat bottom left;
}

.side_cont p {
  line-height: 14px;
  letter-spacing: 1px;
  margin-top: 5px;
}

.side_cont h3 {
  padding-left: 35px;
  margin-top: 20px;
  background: url("images/icon6.png") no-repeat top left;
}

.side_cont img {
  border: 2px solid #d6e7f1;
  margin: 10px 0;
}

.side_cont h3 a {
  color: #c4dfe6;
}

.side_cont h3 a:hover {
  border-bottom: 1px dotted #c4dfe6;
}

.meta_info {
  font-size: 10px; /*updated*/
  color: #293e43;
  padding: 0 35px 8px 35px;
  background: url("images/post_sep.png") no-repeat bottom center;
}

Footer and Validation

Step 10 – Code Footer

In this last step the “loop” is the same. First export image for background.
WaterColored Portfolio Template

XHTML markup.

    <div class="clear_sep"></div>
    <div id="footer">
    <p><strong>WATERCOLORED PORTFOLIO 2009</strong> - <em>Creative Common License.</em> It's a free tamplate for you!<br />
a PV.M GARAGE PRODUCTION - <a href="http://validator.w3.org/check?uri=referer">valid (X)HTML</a> and <a href="http://jigsaw.w3.org/css-validator/check/referer">valid CSS</a></p>
    </div>

CSS style.

.clear_sep {
	clear: both;
	display: block;
	overflow: hidden;
	visibility: hidden;
	width: 0;
	height: 0;
}

#footer {
  background: url("images/foot_bck.png") repeat-x top left;
  border: 1px solid #93a5a9;
  display: block;
  width: 992px;
  margin-bottom: 15px;
  height: 48px;
}

#footer p {
  font-size: 12px;
  color: #c4dfe6;
  text-align: center;
  padding: 10px;
}

#footer p a {
  color: #c4dfe6;
  text-decoration: none;
  border-bottom: 1px dotted #c4dfe6;
}

Step 11 – Validate and Test

Validate your code and test template in various browsers!
WaterColored Portfolio Template

WaterColored Portfolio Complete Tutorial

Author: Piervincenzo Madeo

From a little city in the South of Italy, a web designer, a coder, a blogger. This is Piervincenzo, just a guy who has a great love for creativity and enjoys making high-quality stuff and sharing good information about web design and development.

website design and development

109 Comments

  1. Mahallo Media

    Thanks for the tutorial.

  2. Mika Steve

    Awesome template! Very nice tutorial… thanks to share great layout!

  3. Steve

    Excellent tutorial and design. Thanks

  4. Mitar

    WOW! Fantastic portfolio! gooooooooooood

  5. lawrence77

    Excellent tutorial as well as good outocome….

    Keep it up dude….

  6. Krop

    Hi. This is very nice. Can i give psd files too ? please

  7. Krop

    Fantastic. Thank you.

  8. ajax web styles

    yes all the design are very nice and have good colors

  9. Chris

    You make it look so simple. Great tutorial. I will be back for more. Keep up the great work, you layouts are beautiful.

  10. Andrew Jhonson

    Thanks for this great tutorial, this is really helpful. We have also collected a resource of 20 best PSD to XHTML/CSS tutorials. You can check the list at http://www.bestpsdtohtml.com/20-best-psd-to-xhtml-css-tutorials/

  11. Yekduse

    thanks…

  12. burak

    Where is the psd ?

  13. Alex

    Fantastic. Thank you.

  14. Hardy

    Great tutorial! Thanks for sharing.

  15. Dayanand

    Step wise CSS is good and it is helpful to the website professinal.

    Dayanand from e-profitbooster.com

    Our Services :

    • Website Designing
    • Web Development

  16. http://www.sitepoint.com/blogs/2008/08/25/is-it-time-to-ditch-ie6/

    Finding a web designer can be a total pain….I’ve spent 5 hours searching for a decent one and ended up here!

  17. Kristeen Hinderer

    hopefully this comment doesn’t appear multiple times (it appears to freeze once i try to post my comment.. not sure if it’s actually posting), but all I truly wanted to say was fantastic post and thanks for sharing.

  18. jrfhuxnc

    FY9b0v ialmghbpshxn, [url=http://bppyoatsbret.com/]bppyoatsbret[/url], [link=http://vtqgasqslaiy.com/]vtqgasqslaiy[/link], http://rszlmixzxrbo.com/

  19. yard sprinkler

    Thank you a lot for giving everyone an exceptionally terrific opportunity to check tips from this site. It can be so fantastic and also jam-packed with a lot of fun for me and my office fellow workers to search your blog the equivalent of 3 times in 7 days to learn the newest secrets you will have. Of course, we’re actually fascinated with your fantastic advice you serve. Selected 2 facts in this article are basically the simplest we’ve ever had.

  20. Nubia Balin

    Thanks for action the time to discuss this, I feel strongly around it and love learning many on this subject.My www around this poker double or nothing strategy If realistic, as You gain expertise, would you notice change your blog with much info? It is extremely useful for me.

  21. Free Articles

    In search for sites related to web hosting and comparison hosting plans, your site came up.

  22. Ezine Articles

    Hello. Great Job, I did not expect this on Friday. This is a great story. Thanks.

  23. Shoshana Sleppy

    I found this post on yahoo while searching for something completely different. So much for my free time today!

  24. lose 40 pounds in 30 days

    how to send you an email? let us get closer

  25. Natural Ways to Increase Fertility in Women

    there is something wrong here right now

  26. munawar

    Tahap 1 tidak dalam kenyataannya mengakibatkan penurunan berat badan yang signifikan dan pengurangan lemak perut, tetapi tujuan sebenarnya adalah untuk membantu meringankan hasrat Anda untuk karbohidrat buruk dan permen.Elektrolit natrium, kalium, magnesium, kalsium dan klorida, bikarbonat, fosfat, sulfat.Saran dari seorang ahli gizi olahraga berkualitas bermanfaat.

  27. scrapebox

    There are a lot of strange comments on here. People must be using SCRAPEBOXLIST.COM

  28. kartijo

    advisories terbaru lainnya menunjukkan bahwa latihan beban dapat diterima untuk orang sayangku pulih dari penyakit jantung. sayangku

  29. Nancie Phuong

    Nice blog here! Also your site loads up very fast! What web host are you using? Can I get your affiliate link to your host? I wish my site loaded up as fast as yours lol

  30. mobile applications development

    This is an EXCELLENT resource!!! great job!!! I cannot thank you enough for this great compilation. Thumbs up!

  31. Lexie Mykins

    Well, it’s good, but what about the other choices we have here? Would you mind making a further post about them as well? Regards!

  32. tips fishing

    hey there and thank you for your information ˇV Iˇ¦ve certainly picked up something new from right here. I did however expertise a few technical issues using this website, as I experienced to reload the web site a lot of times previous to I could get it to load properly. I had been wondering if your hosting is OK? Not that I’m complaining, but sluggish loading instances times will very frequently affect your placement in google and could damage your quality score if ads and marketing with Adwords. Anyway I am adding this RSS to my email and can look out for a lot more of your respective intriguing content. Ensure that you update this again soon..

  33. selin

    Nice review! Thanks for offering innovative topic here. I enjoyed reading article a lot. Thank you very much.

  34. Wholesale Dior Jewelry

    Because of reading your blog, I sure to write my own. I had not in any degree been interested in keeping a blog until I aphorism how beneficial yours was, then I was inspired!

  35. branding agency london

    Hey there, You’ve done an incredible job. I’ll definitely digg it and personally recommend to my friends. I am sure they will be benefited from this web site.

  36. chanel purses

    And not only are these classic Chanel handbags utterly fabulous-in both style and functionality-but they also has a story to tell. The history of the Chanel 2.55 flap purse is downright whimsical.chanel handbags

  37. camsex

    fotzen ficken

Trackbacks

Leave your comment

You must be logged in to post a comment.

-->

This website is proudly powered by WordPress, hosted by Suite48. Icons by WeFunction, KomodoMedia and DezinerFolio.
Contents and resources released under Creative Commons License.
Design and code by PVM Garage - Copyright © 2010 PV.M Garage Theme - All Rights Reserved.

HOME | ABOUT US | ADVERTISE | CONTACT US