Convert Portfolio psd template into working CSS/HTML template

Total
0
Shares

Yesterday we give away another css/html template, that was made not without help of psd template that you can download on official site graphicsfuel.com.

Today we are going to explain you how we made it and how to use it properly.

So, let`s remember what we have.Business Portfolio CSS/HTML preview

view demodownload

Let`s get started.

1.Preparation, analyzing and getting necessery stuff.

First of all we need all images, that are used here.used images

Our template is divided into 4 complete parts: header section, slider section, content section and footer section. As for main background, there is no any special images or patterns, there is only one color – #e2a89a. Body section has unusual border, therefore we use new css3 technique – border-image.

Secondly, we should prepare our main folder. We create index.html and style.css files. As far as styling is concerned, we should have folder called styles. I can`t but mention that we used 960gs grid system for guidelines creation. So there will be 5 files: main style.css file, 3 subsidiary files 960.css, reset.css, text.css and special css file for slider section named stylesSlider.css. All css files you can get in download package.

This is how look like our styles folder now.styles folder


We need to start by creating a simple HTML layout, where  we added links for the CSS files and script files.

index.html

[html] <!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>Business Portfolio, psd template from graphicsfuel.com made alive by land-of-web.com</title>
<link ENGINE="text/css" href="styles/style.css" rel="stylesheet" media="all" />
<link type="text/css" href="styles/text.css" rel="stylesheet" media="all" />
<link type="text/css" href="styles/960.css" rel="stylesheet" media="all" />
<link type="text/css" href="styles/style.css" rel="stylesheet" media="all" />
<link type="text/css" href="styles/stylesSlider.css" rel="stylesheet" media="all" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
</body>  
 </html>
[/html]

All CSS should be added in style.css file

style.css

[css] .body
{
color: #000;
background: #e2a89a;
font-size: 12px;
width:960px;
margin:auto;
padding:auto;
}

a {
text-decoration:none;
}
[/css]

2. Header Section Coding.

  1. Logo block is left-aligned, has 80px height and background color #e2a89a
  2. Menu block is right-aligned, selected menu items should have arrow image on the top.

HTML Code for header section

index.html

[html] <div>
<div>
<div>
<a href="#nogo"><img src="images/logo.png" alt="Business Portfolio" border="none" /></a>
</div>
<div>
<ul id="menu">
<li><a href="">Home</a></li>  
<li><a href="">About</a></li>
<li><a href="">Portfolio</a></li>
<li><a href="">Services</a></li>
<li><a href="">Contact Us</a></li>
</ul>
</div>
</div>
</div>
[/html]

style.css

[css] .header_cotainer {
margin-top:40px;
width: 100%;
height: 80px;
display: block;
background: #e2a89a;
}
.menu
{
float:right;
position:relative;
}
ul#menu {  
padding:0px;
position:relative;
float:right;
}
ul#menu li {
display:inline;  
margin-left:15px;
}
ul#menu li a {
text-decoration:none;
color:#1e1615;
font-family:Verdana, Arial, Helvetica, sans-serif;  
font-size:10px;
font-weight:bold;
text-transform:uppercase;
padding:4px;
}
ul#menu li a.active, ul#menu li a:hover {
color:#1e1615;
background:url(../images/liselected.png) center top no-repeat;
padding-top:20px;
}
[/css]

3. Content Section Coding.

As you can see in this layout content section has 3 sub sections: section for plain text,  “Our Works” section, “About” section. All these sub sections have:

  • white background
  • top border image

2 first sub sections have 3 columns layout

Coding first section

index.html

[html] <div>
<div>
<h3>Web Design & Code</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis hendrerit sem in eros luctus vel venenatis lorem tristique. Etiam vel sollicitudin odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<a href="nogo">-> SEE MORE</a></p>
<h3>Wordpress Design & Code</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis hendrerit sem in eros luctus vel venenatis lorem tristique. Etiam vel sollicitudin odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<a href="nogo">-> SEE MORE</a></p>
<h3>Website Marketing</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis hendrerit sem in eros luctus vel venenatis lorem tristique. Etiam vel sollicitudin odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<a href="nogo">-> SEE MORE</a></p>
</div>
[/html]

style.css

[css] .content_container {
width: 930px;
height:650px;
display: block;
background-color:#fff;
border-width: 0px 16px 16px 16px;
-moz-border-image:url(../images/bigBorder.png) 100 16 16 16 repeat;
-webkit-border-image: url(../images/bigBorder.png) 100 16 16 16 repeat;
-o-border-image: url(../images/bigBorder.png) 100 16 16 16 repeat;
border-image: url(../images/bigBorder.png) 100 16 16 16 repeat;
}
.firstRow
{
width:900px;
height: 170px;
display: block;
position:relative;
top:20px;
left:15px;
/*Special Border*/
border-width: 8px 0px 0px;
-moz-border-image: url(../images/borderTop.png) 8 0 0 34 repeat;
-webkit-border-image: url(../images/borderTop.png) 8 0 0 34 repeat;
-o-border-image: url(../images/borderTop.png) 8 0 0 34 repeat;
border-image: url(../images/borderTop.png) 8 0 0 34 repeat;
font-size:12px;
text-align:left;
padding-top:30px;
}
.multicolumn
{
-moz-column-count: 3;
-moz-column-gap: 20px;
-webkit-column-count: 3;
-webkit-column-gap: 20px;
column-count: 3;
column-gap: 20px;
}
.multicolumn a
{
color:#444;
font-weight:bold;
line-height:20px;
}
.firstRow h3
{
font-size:16px;
font-weight:bold;
}
.firstRow a
{
color:#000;
text-transform:uppercase;
font-weight:bold;
line-height:30px;
}
[/css]

Coding second section, as you notice they are almost similar.

index.html

[html] <div>
<h3>See Our Works</h3> <h5><a href="nogo">->see all works</a></h5>
<div>
<p><img src="images/img1.jpg" alt="Portfolio – Work1" align="center" />
<h4><a href="nogo">-> Cafe & restaurant website PSD template</a></h4>
<img src="images/img2.jpg" alt="Portfolio – Work2" align="center" />
<h4><a href="nogo">-> Website gallery PSD template</a></h4>
<img src="images/img3.jpg" alt="Portfolio – Work3" align="center" />
<h4><a href="nogo">-> PSD ecommerce website template</a></h4>
</p>
</div>
</div>
[/html]

style.css

[css] .secondRow
{
width:900px;
height:280px;
display: block;
position:relative;
left:15px;
/*Special Border*/
border-width: 8px 0px 0px;
-moz-border-image: url(../images/borderTop.png) 8 0 0 34 repeat;
-webkit-border-image: url(../images/borderTop.png) 8 0 0 34 repeat;
-o-border-image: url(../images/borderTop.png) 8 0 0 34 repeat;
border-image: url(../images/borderTop.png) 8 0 0 34 repeat;
font-size:12px;
text-align:left;
color:#666;
padding-top:10px;
}
.secondRow a
{
color:#000;
}
.secondRow h3
{
text-align:left;
font-size:16px;
font-weight:bold;
color:#666;
line-height:2px;
}
.secondRow h4
{
font-size:12px;
font-weight:bold;
color:#000;
line-height:10px;
text-align:left;
}
.secondRow h5
{
text-align:right;
font-size:10px;
font-weight:bold;
color:#000;
text-transform:uppercase;
line-height:2px;
}
[/css]

“About” Section

index.html

[html] <div>
<img src="images/about.png" alt="About Me Section" align="left" />
<p>Quisque sit amet dui elit, non placerat justo. Ut tincidunt, arcu vel faucibus facilisis, justo urna gravida risus, in tristique leo nisi eu massa. Nam sit amet tempor arcu. Praesent eget nisl vel elit tristique lacinia.
<a href="nogo">-> READ MORE</a></p>
</div>
</div>
[/html]

style.css

[css] .about
{
width:900px;
height:60px;
display: block;
position:relative;
left:30px;
padding-top:10px;
/*Special Border*/
border-width: 8px 0px 0px;
-moz-border-image: url(../images/borderTop.png) 8 0 0 34 repeat;
-webkit-border-image: url(../images/borderTop.png) 8 0 0 34 repeat;
-o-border-image: url(../images/borderTop.png) 8 0 0 34 repeat;
border-image: url(../images/borderTop.png) 8 0 0 34 repeat;
}
.about p
{
font-size:14px;
text-align:left;
color:#666;
padding-left:10px;
}
.about a
{
color:#000;
font-size:12px;
}
.about img
{
border:10px solid #fff;
}
[/css]

4. Footer Section Coding.

Footer is divided into 2 parts. Left for optional menu and copyright info and right section is for social icons.

Left part

index.html

[html] <div>
<div><p><a href="nogo">HOME</a> | <a href="nogo">ABOUT </a>| <a href="nogo">PORTFOLIO</a> | <a href="nogo">SERVICES </a>|<a href="nogo"> CONTACT US</a>
Copyright 2010-2011 Business Portfolio </p></div>
[/html]

style.css

[css] .footer_container {
width: 960px;
display: block;
background: #e2a89a;
overflow: hidden;
color: #000;
margin-bottom:20px;
}
.footer_container p
{
color:#3c2d29;
font-size:14px;
font-weight:bold;
margin-left:30px;
}
.footer_container a
{
text-decoration:none;
color:#3c2d29;
}
[/css]

Section for social icons

index.html

[html] <div>
<p>FOLLOW US<br />
<a href="nogo"><img src="images/twitter.png" alt="Twitter" /></a>
&nbsp
<a href="nogo"><img src="images/facebook.png" alt="Facebook" /></a>
&nbsp
<a href="nogo"><img src="images/in.png" alt="In" /></a>
&nbsp
<a href="nogo"><img src="images/mail.png" alt="Mail Me" /></a>
&nbsp</p>
</div>
</div>
</div>
</body>
</html>
[/html]

style.css

[css] .social
{
float:right;
right:0;
position:relative;
width:200px;
}
.social p
{
font-size:12px;
line-height:10px;
}
.social img
{border:6px solid #e2a89a;}
.social a
{text-decoration:none;}
[/css]

5. Slider. I shan`t tell how create slider since you can read about this on the official site. I just tell you how you should use it.

We change a little bit style file since we don`t need styles for body container and our slider section is a bit different from the original one. Here’s the HTML code  for the slider section.

index.html

[html] <div>
<div>
<div id="mosaic-slideshow">
<div></div>
<div></div>
</div>
</div>
</div>
[/html]

style.css

[css] .slider_container
{
width: 930px;
height: 440px;
display: block;
background-color:#fff;
border-width: 16px 16px 0px 16px;
-moz-border-image:url(../images/bigBorder.png) 16 16 100 16 repeat;
-webkit-border-image: url(../images/bigBorder.png) 16 16 100 16 repeat;
-o-border-image: url(../images/bigBorder.png) 16 16 100 16 repeat;
border-image: url(../images/bigBorder.png) 16 16 100 16 repeat;
}
.sliderBG
{
width:900px;
height: 420px;
display: block;
background-color:#473e32;
position:relative;
top:20px;
left:15px;
}
[/css]

This code you should put into  stylesSlider.css .

[css] <p>#mosaic-slideshow{
/* The slideshow container div */
height:360px;
margin:0 auto;
position:relative;
width:900px;
}
.mosaic-slide{
/* This class is shared between all the slides */
left:55px;
position:absolute;
top:25px;
}
.tile{
/* The individual tiles */
height:60px;
width:60px;
float:left;
}
.arrow{
/* The prev/next arrows */
width:35px;
height:70px;
background: url(../SliderImages/arrows.png) no-repeat;
position:absolute;
cursor:pointer;
top:50%;
margin-top:-35px;
}
.arrow.left{
left:15px;
background-position:center top;
}
.arrow.left:hover{
background-position:center -70px;
}
.arrow.right{
right:15px;
background-position:center -140px;
}
.arrow.right:hover{
background-position:center -210px;
}
.clear{
/* This class clears the floats */
clear:both;
}
[/css]

In order to add images or change size you should edit parametres in script.js file that are shown below.script.js file

1 comment
Leave a Reply

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

You May Also Like

Free CSS buttons (part 2)

Why should You create again something, that’s already out there? Today we are going to enlarge your collection of free web stuff. We believe this small collection will become marvelous…

Inspiration Findings #8

Our weekly list of findings includes amazing truly inspirational stuff such as type-based artworks, illustrations, marvelous projects, web and application interface designs. 1. Remembo app by Igor Garybaldi 2. Web…