Convert in 6 steps vcard psd template into working css/html version (tutorial)

  • Share
  • Share

Vcard css/html FREE preview

view demodownloadYesterday, we gave away css/html version of paper vcard and today we made tutorial that will help you bring alive this psd template and may be become an useful example how to convert such psd templates into css/html templates.

Psd template you can download on the official site sixrevisions.com and css/html version you can download here.

1. Analize. So, our vcard consists of 3 main sections: header, content and footer. Content can be divided into 2 separate parts: sidebar and main section. And section includes grid7 and 2 grid3. (grid7 and grid3 is described in grid720.css file that is our base layout)analize

2. Preparation.

Create 2 files: index.html and style.css, also you`ll need one auxiliary style file called grid720.css, that you can find in download package. As well, we create /image/ folder, where we`ll be our required images.folder

Get ready all necessery images for /image/ folder.slicedImages

3. Simple base coding. Let`s create base layout and set essential styles for it.

Body has image background as well as header, content and footer section.

Header container has height 88px, content section is 337px height and footer takes rest 30px.

Width for all sections is the same and equal 100%.

index.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>Paper Vcard  from sixrevisions.com made alive by land-of-web.com</title>  
	<link type="text/css" href="style.css" rel="stylesheet" media="all" /> 
	<link type="text/css" href="grid720.css" rel="stylesheet" media="all" /> 
      
    </head>  
      
   <body>  
 <div class="header_cotainer container">
	            Header Section
	    </div>
		<!--Content-->
	    <div class="content_container container">
	            Content Section
	    </div>
		<!--Footer-->
	    <div class="footer_container container">
	            Footer Section
	    </div>
   </body>  
   </html>  
 

style.css

body {
color: #000;
font-size: 12px;
margin:auto 0;
background:url(images/bg.png) no-repeat top center;
}
	 
a {
color: #294f94;
}
	 
.header_cotainer {
width: 100%;
height: 88px;
display: block;
background: url(images/headerBG.png) no-repeat top center;
}
.content_container {
width: 100%;
height: 337px;
display: block;
background:url(images/contentBG.png) no-repeat top center;
}
	 
.footer_container {
width: 100%;
height:30px;
display: block;
background: url(images/footerBg.jpg) no-repeat top center;
overflow: hidden;
color: #bebebe;
}
 

4. Header section.

As for header section we use image background and special background for title. Font caption has 18px size and its color is #414040. As for slogan, its color is #b0b0b0 and size is 12px. Сonsidering all these facts we code index.html and style.css files.

index.html

<div class="header_cotainer container">
	            <div class="title"><h2>r.yahya</h2><h6>web and graphic designer</h6></div>
	    </div>
 

style.css

.title
{
display:block;
background: url(images/titleBG.png) no-repeat top center;
position:relative;
top:44px;
}
.title h2
{
color:#414040;
font-size:18px;
font-weight:bold;
text-transform:uppercase;
text-align:center;
position:relative;
}
.title h6
{
color:#b0b0b0;
font-size:12px;
font-weight:bold;
text-align:center;
position:relative;
bottom:25px;
}
 

5. Content section.

Content section consists of main part and sidebar.

Sidebar has image background and information with images. Color for title is white and for the rest text is #666.

Main section – grid7

As we can see grid7 has an avatar and paragraph text is grey (namely #b3b3b3),  font size is 12px and as for title size it`s 18px.

Main section – first grid3 has unordered html list, but instead of it we use simple text with images. So you can modify it as you wish.

Main section second grid3 is devoted to social connections, so we need twitter, facebook and flickr icons and some text.

index.html

<div class="content_container container">
	            <div class="grid7">
				<div class="main">
				<h3>Hello</h3>
				<img src="images/avatar.png" alt="Avatar"  align="left"/>
				<p>
				Mauris vulputate metus eu nisl. Praesent placerat.
				Mauris vitae erat id ante viverra sodales.
				Proin tincidunt porta velit. Praesen tplacerat. 
				Mauris vitae erat id ante viverra sodales.
				Prointin cid unt porta velit.
               </p></div>
			   <div class="grid3 first"><h2>Services</h2>
			   <div class="li">
			   <img src="images/liImg.png" alt="LI img"  align="left"/>
			   <p><a href="nogo">Web Design (PSD)</a></p>
			   <img src="images/liImg.png" alt="LI img"  align="left"/>
			   <p><a href="nogo">print design</a></p>
			   <img src="images/liImg.png" alt="LI img"  align="left"/>
			   <p><a href="nogo">Logo design</a></p>
			   <img src="images/liImg.png" alt="LI img"  align="left"/>
			   <p><a href="nogo">CSS</a></p>
			   </div>
			   </div>
			   <div class="grid3"><h2>Network</h2>
			   <a href="twitter.com/Your_username"><img src="images/twitter.png" alt="Twitter"  align="left"/></a>
			   <p>TWITTER <br />twitter.com/yourname</p>
			   <a href="facebook.com/Your_username"><img src="images/facebook.png" alt="Facebook"  align="left"/></a>
			   <p>FACEBOOK <br />facebook.com/yourname</p>
			   <a href="flickr.com/Your_username"><img src="images/flickr.png" alt="Flickr"  align="left"/></a>
			   <p>TWITTER <br />flickr.com/yourname</p></div>
			   </div>
				<div class="grid5">
				<div class="grid2">
				<img src="images/home.png" alt="Home"  align="left"/><a href="gotoContacts">Address:</a>
			   <p>
			   Street/Road name no.00, <br />
               Address line 2, <br />
               City Name 88456, <br />
               Indonesia</p>
			   
			   <img src="images/web.png" alt="Web"  align="left"/><a href="gotoprofile">Website:</a>
			   <p>
			   yahya12.deviantart.com<br />
               ibrandstudio.com
                </p>
				
				<img src="images/email.png" alt="Email"  align="left" /><a href="gotoContacts">e-mail:</a>
			   <p>
			   rochmanu@gmail.com
                </p>
			   </div>
				</div>
	    </div>
 

style.css

.main
{
display:block;
width:410px;
height:130px;
float:left;
background: url(images/line.png) no-repeat bottom center;
}
.main img
{
border:5px solid transparent;
}
.main h3
{
color:#414040;
font-size:18px;
font-weight:bold;
text-align:left;
line-height:1px;
}
.main p
{
color:#b3b3b3;
font-size:12px;
font-weight:bold;
text-align:left;
line-height:16px;
}

.grid3 h2
{
color:#414040;
font-size:18px;
font-weight:bold;
text-align:left;
line-height:1px;
}
.grid3 p
{
color:#666;
font-size:12px;
font-weight:bold;
text-align:left;
padding-top:5px;
}
.grid3 a
{ text-decoration:none;}
.grid3 img
{border:none;}
.li p
{
color:#959494;
font-size:16px;
font-weight:bold;
text-align:left;
padding-left:30px;
line-height:18px;
padding-top:0px;
}
.li img
{
border:2px solid transparent;
}
.li a
{
text-decoration:none;
color:#959494;
}
.grid5
{
width:250px;
height:315px;
background: url(images/sidebarBG.png) no-repeat top center;
}
.grid2
{
display:block;
position:relative;
padding-top:40px;
}
.grid2 a
{
color:#fff;
font-size:16px;
font-weight:bold;
text-align:left;
line-height:22px;
text-decoration:none;
}
.grid2 p
{
color:#666;
font-size:12px;
font-weight:bold;
text-align:left;
line-height:16px;
text-align:left;
}
.grid2 img
{
border:2px solid transparent;
}
 

6. Footer section.

Footer section has only credits. Font color is #a6a7a4 and font size is 12px.

index.html

<div class="footer_container container">
	           <p>Copyright 2011 iBrandStudio.com | made alive by <a href="http://www.land-of-web.com">land-of-web.com</a></p>
	    </div>
 

style.css

.footer_container p
{
color:#a6a7a4;
font-size:12px;
font-weight:bold;
text-align:center;
}
.footer_container a
{text-decoration:none;}
 

I hope you find it useful. And as usual, fell free to leave a comment and tell us your opinion.

About the author

Co-founder of land-of-web.

3 Comments

  1. 9ale7 says:

    thanks,
    would love to see more instructions for noobies.

    Reply
  2. Mohameed says:

    thanx, and good job :)

    Reply
  3. The procedure is more complex and takes longer if you want to do the transfer
    to a precious metal IRA while you still work for that employer.
    Gold continues to be among the best investments to take advantage of.
    That means Ricks five thousand dollars will
    be nine thousand ninety dollars when it pays out.

    Reply

Leave a Comment