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

Total
0
Shares

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.

[sourcecode language=”html”] <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>
[/sourcecode]

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.

[sourcecode language=”css”] .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;
}
[/sourcecode]

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.

[sourcecode language=”html”] <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>
[/sourcecode]

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.

[sourcecode language=”css”] .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′)";
}
[/sourcecode]

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.

[sourcecode language=”html”] <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>
[/sourcecode]

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.

[sourcecode language=”css”] .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;
}
[/sourcecode]

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.

[sourcecode language=”html”] <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>
[/sourcecode]

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.

[sourcecode language=”css”] .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;
}
[/sourcecode]

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.

Leave a Reply

Your email address will not be published. Required fields are marked *

You May Also Like

Amazing Fashion Illustrations

I suppose there is so much more to fashion illustrations that can inspire every designer. Like other designers and illustrators  fashion illustrators express themselves through their artwork. That`s why most…

Photo NewsLetter css/html free

Credits: psd template you can download on official site psdstyle.net This is free psd template and css/html version. It was made not only for photographers but also for freelancers, agencies…