Yesterday, 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)
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.
Get ready all necessery images for /image/ folder.
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
[sourcecode language="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>
[/sourcecode]
style.css
[sourcecode language="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;
}
[/sourcecode]
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
[sourcecode language="html"]
<div class="header_cotainer container">
<div class="title"><h2>r.yahya</h2><h6>web and graphic designer</h6></div>
</div>
[/sourcecode]
style.css
[sourcecode language="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;
}
[/sourcecode]
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
[sourcecode language="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>
[/sourcecode]
style.css
[sourcecode language="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;
}
[/sourcecode]
6. Footer section.
Footer section has only credits. Font color is #a6a7a4 and font size is 12px.
index.html
[sourcecode language="html"]
<div class="footer_container container">
<p>Copyright 2011 iBrandStudio.com | made alive by <a href="https://www.land-of-web.com">land-of-web.com</a></p>
</div>
[/sourcecode]
style.css
[sourcecode language="css"]
.footer_container p
{
color:#a6a7a4;
font-size:12px;
font-weight:bold;
text-align:center;
}
.footer_container a
{text-decoration:none;}
[/sourcecode]
I hope you find it useful. And as usual, fell free to leave a comment and tell us your opinion.
1 comment
thanks,
would love to see more instructions for noobies.