Convert Business PSD template to HTML/CSS tutorial (part 2)

  • Share
  • Share

This is second part of our first tutorial how to convert corporate business psd template into alive HTML/CSS template. Today we are going to code up two last part of the template: content and footer section.

So let`s remember, what we should get in the end.corporatix

downloadview demo

1. Analysing Content Section. It is devided into 3 parts:Content section is devided into 3 parts

  1. Top section has highlight background, textarea and button
  2. First line of posts: white background, image and text align to center, each post has his section, between section is 20px indention, every post end up with read more button.
  3. Second line of posts is devided into 2 main sections, first one is for set of posts with  left-align image, and second one is for “about” section.

Let`s begin with coding top section. Instead of  “Content Section”  in index.html file you should put this piece of HTML code.

<div class="topContent">
			<a href="www.land-of-web.com"><img src="images/but1.png" align="right" alt="button"/></a>
		    <p>We can make your online business<br />easy & usable for all walks of people</p>
		</div>
 

As for styling. Edit your style.css file, add styles for topcontent class. It should have textarea width =600px, rest 360px is assigned to link button, then white background, fixed height and some styles for font.

.topContent
{
top: 0px;
position:relative;
width:960px;
height:145px;
background: url(../images/topContent.png) no-repeat;
padding-top:15px;
}
.topContent p
{
width:600px;
color:#132445;
text-align:left;
height:50px;
font-size:34px;
line-height: 37px;
padding-left:20px;
padding-top: 10px;
}
 

The result should be as the image below.The result with topcontent

2.  Code up 1st line of posts. First we add all necessary text and titles into index.html file. We shoul add code below right after

which complete top content section.

 
<div class="grid_4">
		    <div class="col1">
				<img src="images/img1.jpg" />
	            <h2>Business Heading</h2>
		        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam tincidunt mi id libero egestas ut interdum nibh cursus. </p>
		        <div class="readMore"><a href="#">Read More <b>></b></a></div>
		    </div>
		</div>
		<div class="grid_4">
		     <div class="col1">
				<img src="images/img2.jpg" />
	            <h2>Business Heading2</h2>
		        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam tincidunt mi id libero egestas ut interdum nibh cursus.  </p>
                <div class="readMore"><a href="#">Read More <b>></b></a></div>
		     </div>
		</div>
		<div class="grid_4">
		     <div class="col1">
				<img src="images/img3.jpg" />
	            <h2>Business Heading3</h2>
		        <p>Lorem ipsum dolor sit amet, <a href="#">consectetur</a> adipiscing elit. Aliquam tincidunt mi id libero egestas ut interdum nibh cursus. </p>
		         <div class="readMore"><a href="#">Read More <b>></b></a></div>
		     </div>
		</div>
		<div class="grid_4">
		     <div class="col1">
				<img src="images/img4.jpg" />
	            <h2>Business Heading4</h2>
		        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam tincidunt mi id libero egestas ut interdum nibh cursus. </p>
		        <div class="readMore"><a href="#">Read More <b>></b></a></div>
		     </div>
		</div>

You should notice that we already added text and images for the posts, all we need to do now is styled our post sections that`s why we need to modify  CSS to match it new position, background, read more button and gutter. We should consider next issues:

  • white background, fluid height, paddings and margins
  • text and image align to center, different styles for title  and paragraph
  • styling for paragraph: font size = 12px and font color = #485f8c
  • styling for titles: font size = 18px and font color=#132445 also it must be bold
  • special style for read more button, which has gradient background (from #fff to #c8c8c8), small shadow, and rounded corners
  • special style for ordinary links in the text

Here’s the CSS for styling posts content.

.col1
{
display:block;
width:220px;
background-color:#fff;
padding:10px 0;
margin:0 0 20px 0;
}
.col1 h2
{
color:#132445;
font-size:18px;
text-align:center;
line-height:20px;
font-weight:bold;
margin:0;
padding-bottom:5px;
}
.col1 p
{
color:#485f8c;
font-size:12px;
text-align:left;
padding:0px 5px 0px 15px;/*top right bottom left*/
}
.col1 img
{
width:90%;
padding:5px 10px 10px 10px;
}
.col1 a
{
text-align:center;
color:#2945c0;
text-decoration:none;
font: 12px/100% Arial, Helvetica, sans-serif;
}
.readMore a
{
border:1px solid #c6ccdc;
margin-left:13px;
padding:3px 10px;/*for visual bg*/
width:auto;
text-shadow: 0 1px 1px rgba(0,0,0,.3);/*========Text Shadow=========*/
/*---Rounded Corners---*/
-moz-border-radius: 9px;
border-radius: 9px;
/*Gradient BG*/
background: #dadfeb; /* for non-css3 browsers */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#c8c8c8'); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#c8c8c8)); /* for webkit browsers */
 background: -moz-linear-gradient(top,  #ffffff,  #c8c8c8); /* for firefox 3.6+ */
/*==========Small Shadow===========*/
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
box-shadow: 0 1px 2px rgba(0,0,0,.2);
/* For IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";
}
 

Now our layout should look like this.result with 1st line of posts

3. Coding and Styling 2d line of posts. As we did before, let`s modify index.html file and add extra code for 4 additional posts and text for “about” section.

<div class="grid_6">
	    <div class="grid_3">
		      <div class="col2">
		         <img src="images/img2_1.png" align="left" />
		         <h2>&nbsp Title Heading</h2>
		         <p>Lorem ipsum dolor sit amet, cons ectetur adipiscing elit. Aliqu am tincidunt mi id libero egestas ut interdum nibh cursus. </p>
		      </div>
		</div>
		<div class="grid_3">
		        <div class="col2">
		           <img src="images/img2_2.png" align="left" />
		           <h2>&nbsp Title Heading2</h2>
		            <p>Lorem ipsum dolor sit amet, cons ectetur adipiscing elit. Aliqu am tincidunt mi id libero egestas ut interdum nibh cursus. </p>
		        </div>
		</div>
		<div class="grid_3">
		      <div class="col2">
		         <img src="images/img2_3.png" align="left" />
		         <h2>&nbsp Title Heading</h2>
		         <p>Lorem ipsum dolor sit amet, cons ectetur adipiscing elit. Aliqu am tincidunt mi id libero egestas ut interdum nibh cursus. </p>
		      </div>
		</div>
		<div class="grid_3">
		        <div class="col2">
		           <img src="images/img2_4.png" align="left" />
		           <h2>&nbsp Title Heading2</h2>
		            <p>Lorem ipsum dolor sit amet, cons ectetur adipiscing elit. Aliqu am tincidunt mi id libero egestas ut interdum nibh cursus. </p>
		        </div>
		</div>
		</div>
		<!-- rightContainer-->
		<div class="prefix_6"> 
		<div class="grid_5">
		       <div class="col3">
		           <h2>About the company</h2>
		           <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam tincidunt mi id libero egestas ut interdum nibh cursus. Nulla erat orci, adipiscing vel molestie ac, vehicula in dui. Proin vel lorem in tellus placerat eleifend. Duis iaculis lorem a ipsum euismod vel ullamcorper arcu placerat. Aenean elementum tortor vel nisi bibendum bibendum. Aliquam fringilla feugiat ante in vestibulum. Sed non justo justo. Aenean et quam dolor. Vivamus aliquet gravida nunc, sed elementum elit blandit vel. Aliquam neque quam, dignissim ac mattis at, hendrerit nec elit. Cras commodo gravida placerat. 
                   </p>
				   <a href="#">Read More ></a>
		       </div>
		</div>
		</div>
 

Now we add CSS to style 2d line of posts. By looking on the psd  layout you should notice a few things:

  • first 4 posts should be put in left container, and about section in right container
  • Both containers should have transparent background, same font for text paragraph and title.
  • images and text should be left-align
  • each post in left container should have gutter

Based on these points we add new styles into style.css file.

 
.col2
{
display:block;
float:left;
width:220px;
padding:10px 10px;
margin:0;
}
.col2 h2,.col3 h2
{
color:#132445;
font-size:16px;
text-align:left;
line-height:20px;
font-weight:bold;
margin:0;
padding:10px 0 15px 0;
}
.col2 a,.col3 a
{
text-align:center;
color:#2945c0;
text-decoration:underline;
font: 12px/100% Arial, Helvetica, sans-serif;
font-weight:bold;
}
.col2 p
{
color:#485f8c;
font-size:12px;
text-align:left;
font-weight:bold;
padding:0px 5px 0px 5px;
}
.col2 img
{
border:none;
}
/*============col3 - for second line of posts=========================*/
.col3
{
display:block;
float:left;
width:440px;
padding:10px 10px;
margin:0;
}
.col3 p
{
color:#485f8c;
font-size:12px;
text-align:left;
font-weight:bold;
line-height:22px;
padding:0;
}

This is our result.result with 2d line of posts

4. Adding and Styling Footer Content. The last, but not least, footer content, finally. Ok, so, as you notice that the footer is very simple ,  it has 2 sections. Left one is for optional information and additional menu. Right one is for you social connections. Here’s the HTML for footer content.

 
<div class="grid_5">
		<div class="col4">
		           <p>
				   <a href="www.land-of-web.com">Home</a> <b>|</b>
				   <a href="www.land-of-web.com">Services</a> <b>|</b>
				   <a href="www.land-of-web.com">Portfolio</a> <b>|</b>
				   <a href="www.land-of-web.com">Testimonial</a> <b>|</b>
				   <a href="www.land-of-web.com">Blog</a> <b>|</b>
				   <a href="www.land-of-web.com">Contact Us</a>
				   <br />
				   2010 WebCorp LLC | Terms of service | Privacy policy
				   <br />
				   Icons courtesy iconfinder.com | Psd template graphicsfuel.com
				   <br />
				   Made by <a href="www.land-of-web.com">www.land-of-web.com</a>
				   <br />
				   </p>
		</div>
		</div>
		<div class="prefix_6">
		<div class="grid_4">
		<div class="connect">Connect with us:</div>
		</div>
		<div class="grid_4">
		<div class="social">
				   <a href="www.twitter.com/Nataly_Birch"><img src="images/twitter.png" /></a>
				   &nbsp
				   <a href="www.facebook.com/NatalyBirch"><img src="images/facebook.png" /></a>
				   &nbsp
				   <a href="www.in.com/Nataly_Birch"><img src="images/in.png" /></a>
				   &nbsp
				   <a href="www.rssfeed.com/land-of-web"><img src="images/email.png" /></a>
				   </div>
		</div>
		</div>

Notice that we used “grid_5” for the optional text and “grid_4” and “prefix_6” class for the social icons, now we need to style the footer so that the optional text and menu aligns to left and the icons to the right of the layout. Here’s the CSS for footer content.

.col4
{
display:block;
float:left;
width:440px;
padding:10px 10px;
margin:0;
}
.col4 p
{
color:#c0c9dd;
font-size:14px;
text-align:left;
font-weight:bold;
line-height:24px;
padding:0;
}
.col4 a
{
color:#fff;
font-size:14px;
font-weight:bold;
line-height:24px;
text-decoration:none;
}
.social
{
float:right;
padding-top:25px;
padding-right:40px;
}
.connect
{
float:right;
padding-top:30px;
font-size:14px;
font-weight:bold;
}
 

If you followed 2 parts of tutorial correctly then you should have a full working HTML/CSS layout, that looks exactly like this.full working HTML/CSS layout

If you think that you have a better technique to create something, please say it in the comments, don`t be shy, we appreciate your opinion.

About the author

Co-founder of land-of-web.

Leave a Comment