Converting a PSD Travel Web Design into HTML5 CSS3

AD

A few of weeks ago we published a tutorial for creating travel agency web design and we also published its PSD Template Download.  Today we will convert the same design into a living HTML CSS Website.

This web design is for a travel agency that specializes in taking its customers to beaches and other sea-side destinations. For that I chose the color-scheme of Blue and I placed pictures of beaches lakes only. But you can easily edit this theme and give it a feel according to your needs.

PSD Web Template

This is the PSD file we have. If you have’t downloaded it yet, you can do it from here. 

Photoshop Tutorial of Travel Template

View Demo

Head Area Code

As usual, we are kicking off with <head> code. As you may have already noticed that I haven’t put anything extra, such as meta tags for SEO. Those things are optional, here we’ll only take a look on the main parts.

Do you remember a few tutorials ago I promised you that we’ll be switching to HTML5 soon. Today is the first part of that.  Notice how the head code starts. (if you

<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Traval Agency | Designzzz</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="style.css" type="text/css" />
</head>

Moving Forward to Body

<head> didn’t require much, so let’s come to the <body>.  The code of the <div> containing all the content is described below, here you can only see the code outside the main content of the page. Just carry on reading, you’ll understand 😉

<html>
<body>
<div id="main-container">
<!--all the codes carrying body content -->
</div>
</body>
</html>

CSS Body and Main Container

You did notice that in the previous step we named a div “main-container”. Here is are the CSS properties of body and container.

@charset "utf-8";
 /* CSS Document */
*{
   margin:0;
   padding:0;
   }
   body
   {
   background:url(image/bg.jpg) repeat scroll #000;
   font-family:"Comic Sans MS", cursive;
   font-size:12px;
   }
   article, aside, figure, footer, header, hgroup, menu, nav, section { display:block; }
   #main-container
   {
   width:1000px;
   margin:0 auto;
   }

Logo and Navigation Area

Again, since we are switching to HTML5, we won’t name a div “header”, instead we’ll use the code <header>. That’s HTML5. If you haven’t yet checked out HTML5 Series, you should. For navigation bar, we’ll use the code <nav>. These code works in the exact same manner as any div but you don’t have to use divs and add their classifications.

Tutorial of Photohsop

<header>
<div class="logo">
<img src="image/logo.png" alt="" />
</div>
<nav>
<ul>
<li><a href="#">Home </a>|</li>
<li><a href="#">About us </a> |</li>
<li><a href="#">Travel guide </a> |</li>
<li><a href="#">Contact us </a> |</li>
</ul>
<input id="search" type="text" name="s" value="Site Search..." />
</nav>
</header>

CSS of Logo and Navigation Area

Now see that codes of <header> and <nav> have made our lives easier.

header
 {
 height:200px;
 }
.logo
   {
   width:138px;
   float:left;
   overflow:hidden;
   }
nav
   {
   background:url(image/nav-bg.png) repeat scroll;
   overflow:hidden;
   width:645px;
   height:66px;
   float:right;
   margin:83px 0;
   border-radius:6px;

   }
nav ul
   {
   margin:0;
   padding:0;
   }
nav ul li
   {
   font-size:14px;
   padding:4px;
   color:#ffffff;
   list-style:none;
   float:left;
   margin:18px;
   }
nav ul li a
   {
   color:#ccc;
   text-decoration:none;
   }
nav ul li a:hover
   {
   color:#52add1;
   }
#search
   {
   background:#ffffff;
   width:153px;
   height:24px;
   margin-top:18px;
   font-family:Arial, Helvetica, sans-serif;
   color:#999;
   padding-left:10px;
   border-radius:5px;
   }

Featured Area HTML

We have a featured area in our template. This area can be a slideshow, album or anything. This kind of featured area is very important for corporate sites. Now we are using a new HTML5 code <section>.

Elegant Design of Travel Template

<div class="content">
<section>
<img src="image/pic-1.png" alt="" />
<h2>Australia</h2>
<p> It is a long established fact that a reader will be distracted by the readable content.
 </p>
<div class="button1">
<p class="detail"> Details </p>
</div>
</section>
<section class="block1">
<img src="image/pic-2.png" alt=""/>
<h2 class="heading2"> Singapore </h2>
<p> It is a long established fact that a reader will be distracted by the readable content.
 </p>
<div class="button2">
<p class="detail"> Details </p>
</div>
</section>
<section class="block2">
<img src="image/pic-3.png" alt=""/>
<h2 class="heading3"> Miami </h2>
<p> It is a long established fact that a reader will be distracted by the readable content.
 </p>
<div class="button3">
<p class="detail"> Details </p>
</div>
</section>
</div>

CSS of Freatured Area

And now the CSS.

.content
 {
 width:892px;
 height:300px;
 margin:32px auto;
 }
section
 {
 background:#e4f7fe;
 width:269px;
 height:286px;
 margin-right:20px;
 border-radius:6px;
 float:left;
 }
.button1
 {
 background:url(image/button-1.png) repeat-x #00F;
 width:67px;
 height:22px;
 float:right;
 margin:8px 0;
 }
h2
 {
 font-family:"Comic Sans MS", cursive;
 font-size:24px;
 color:#08476a;
 margin-left:7px;
 font-weight:normal;
 }
p
 {

 font-size:12px;
 margin-left:7px;
 }
.detail
 {
 font-family:"Comic Sans MS", cursive;
 color:#ffffff;
 font-size:12px;
 margin:1px 12px;
 }
.block1
 {
 background:#feffe0;
 width:269px;
 height:286px;
 margin-left:13px;
 border-radius:6px;
 float:left;
 }
.button2
 {
 background:url(image/button-2.png) repeat-x #00F;
 width:67px;
 height:22px;
 float:right;
 margin:8px 0;
 }
.heading2
 {
 color:#88a913;
 }
.block2
   {
   background:#f0fcea;
   width:269px;
   height:286px;
   border-radius:6px;
   margin-left:12px;
   }
.button3
   {
   background:url(image/button-3.png) repeat-x #00F;
   width:67px;
   height:21px;
   float:right;
   margin:8px 0;
   }
#form div span{
   font-size:12px;
   color:#fff;
   padding:5px;

   }
.heading3
   {
   color:#f1b930;
   }

HTML of Order Area

Order area, that’s the part where clients focus the most. Make sure you put your effort in to it.

Template Tutorial of Photoshop

<div class="content">
<div class="block4">
<div class="box">
<p class="flight"> Flight </p>
<p class="car"> Car </p>
<p class="Hotel"> Hotel </p>
</div>
<div id="caption">
<p class="top2">From <br />To</p>
<br />
<p>Depart</p> <br />
<p>Return</p>
</div>
<div id="form">
<div><input type="text" name="from" id="from" class="textfield" /></div>
<div><input type="text" name="from" id="to" class="textfield" /></div>
<div class="departi"><input type="text" name="from" id="depart" class="textfield1" />
<input type="text" name="from" id="depart1" class="textfield1" />
<input type="text" name="from" id="depart2" class="textfield1" />
</div>
<div class="returni"><input type="text" name="from" id="return" class="textfield1" />
<input type="text" name="from" id="return1" class="textfield1" />
<input type="text" name="from" id="return2" class="textfield1" /></div>
</div>
<div class="heading8">
<p> Multiple Destinations </p>
</div>

 <input type="button" name="search" class="search1" value="Search" />

</div>

CSS of Order Area

.block4
 {
 background:url(image/nav-bg.png) repeat scroll;
 width:243px;
 height:254px;
 border-radius:6px;
 padding:21px;
 float:left;
  }
.box
 {
 width:242px;
 height:26px;
 float:left;
 margin-left:5px;
 }
.box p
 {
 font-family:arial;
 color:#ffffff;
 text-align:center;
line-height:22px;
 }
.heading4
 {
 font-family:"Arial", Helvetica, sans-serif;
 color:#ffffff;
 margin:2px;
 text-align:center;
 }
.flight
 {
 background:#05709a;
 width:53px;
 height:22px;
 float:left;
 margin:0 33px;
 border-radius:3px;
 }
.car
 {
 background:#06579c;
 width:53px;
 height:22px;
 margin:-22px 102px;
 float:left;
 border-radius:3px;
 }
.Hotel
   {
   background:#0084f5;
   width:53px;
   height:22px;
   margin:0px 171px;
   border-radius:3px;
   }
#caption, #form
   {
   margin-top:20px;
   }
#caption
   {
   width:20%;
   float:left;
   }
#caption p
   {
   color:#fff;
   }
.top2
   {
   line-height:32px;
   }
#form
	{
   width:80%;
   float:left;
   }
#form div
   {
   width:100%;
   margin-bottom:5px;
   }
.departi, .returni
   {
   width:100% !important;
   }
.departi input, .returni input
   {
   margin:5px 10px;
   }

.textfield
   {
   background: #ffffff;
   border-radius: 5px;
   height: 19px;
   padding: 0 15px;
   width: 146px;
   margin:4px;
   }
#box1
   {
   width:200px;
   height:55px;
   margin:-46px 0px;
   }
.textfield1
   {
   background: #ffffff;
   height: 19px;
   padding: 0 5px;
   width: 27px;
   float:left;
   }
#search1
   {
   background:url(image/search-bg.png) repeat-x;
   width:78px;
   height:25px;
   float:right;
   margin:0px;
   border-radius:3px;
   border:none;
   }
.heading8
   {
   color:#fff;
   font-size:12px;
   float:left;
   margin:14px 56px;

   }
.heading5
   {
   color:#FFF;
   font-family:Arial, Helvetica, sans-serif;
   text-align:center;
   margin:4px;
   }

Content Area HTML

When I was designing this site, I couldn’t figure out what content should I put, so I just placed names of a few countries. (why did I put Pakistan on top, I answered that in the PSD tutorial of this template).

Travel Template

<div id="countries">
<ul>
<li class="color">Pakistan</li>
<li class="color">Australia</li>
<li class="color">England</li>
<li class="color">Japan</li>
</ul>
<ul>
<li class="color2">Pakistan</li>
<li class="color2">Australia</li>
<li class="color2">England</li>
<li class="color2">Japan</li>
</ul>
<ul>
<li class="color3">Pakistan</li>
<li class="color3">Australia</li>
<li class="color3">England</li>
<li class="color3">Japan</li>
</ul>
<ul>
<li class="color4">Pakistan</li>
<li class="color4">Australia</li>
<li class="color4">England</li>
<li class="color4">japan</li>
</ul>
</div>

CSS of Content Area

#countries
 {

 height:195px;
 width:580px;
 float:left; 

 }
#countries ul
 {
 margin:0;
 padding:0;
 float:left;
 width:13%;
 margin:10px 34px;
 }
#countries ul li
 {
 font-family:"Comic Sans MS", cursive;
 font-size:14px;
 list-style:none;
 padding:10px;
 margin:0px 19px;
 }
.color
 {
 color:#3db4ee;
 }
.color2
 {
 color:#c3df56;
 }
.color3
 {
 color:#d3aa45;
 }
.color4
 {
 color:#acaeae;
 }

HTML of Gallery Area

Again, I didn’t do anything fancy but a flash file could look breath taking here.

Template Tutorial of Photoshop

<div id="gallery">
<div class="image">
  <img src="image/img-1.png" alt="text" />
  <img src="image/img-2.png" alt="text" />
  <img src="image/img-3.png" alt="text" />
  <img src="image/img-4.png" alt="text" />
</div>
</div>

CSS of that Area

#gallery
 {
 background:#000000;
 width:550px;
 height:89px;
 margin:2px 22px;
 border-radius:5px;
 border:1px #fff solid;
 float:left;
 }
.image
 {
 float:left;
 }
.image img
{ float:left
}

HTML of Footer Area

Now we go down under. If you ask me and Tayyab, after header, this is the most important part of a website. I’ve asked Tayyab to write a detailed article just on The Footer.

Photoshop Tutorial of Travel Template

<div id="footer">
<div class="flogo">
<img src="image/footer-logo.png" alt="" />
</div>
<div id="fnav">
<ul>
<li><a href="#">Home </a> |</li>
<li><a href="#">About us </a> |</li>
<li><a href="#">Travel guide </a> |</li>
<li><a href="#">Contact us </a> |</li>
</ul>
</div>
<div class="contact">
<p class="text"> Call Now </p>
<p class="text1">0900-78601</p>
</div>
<div class="icons">
<a href="#"><img src="image/twitter.png" alt="" /></a>
<a href="#"><img src="image/facebook.png" alt="" /></a>
</div>
</div>

CSS of Footer Area

#footer
 {
 background:#000000;
 width:1000px;
 height:90px;
 border-radius:7px;

 }
.flogo
 {
 margin:0px 50px;
 width:44px;
 float:left;
 }
#fnav
 {
  margin:-7px 0;
 }
#fnav ul
 {
 margin:12px;
 padding:0;
 width:461px;
 float:left;
 }
#fnav ul li
 {
 font-family:"Comic Sans MS", cursive;
 font-size:14px;
 padding:4px;
 color:#ffffff;
 list-style:none;
 float:left;
 margin:18px;
 float:left;
 color:#ffffff;
 }
#fnav ul li a
 {
 color:#ccc;
 text-decoration:none;
 }
#fnav ul li a:hover
 {
 color:#52add1;
 }
.contact
 {
 background:url(image/contact-bg.png);
 width:176px;
 height:41px;
 margin:25px 8px;
 float:left;
 border-radius:5px;
 }
.text
 {
 color:#ffffff;
 }
.text1
 {
 color:#ffffff;
 text-align:center;
 font-size:14px;
 }
.icons
 {
 float:right;
 margin:22px 40px;
 }
View Demo

create free website wix below post

Further Related Readings

Comments
  1. dave December 4, 2011 at 12:04 pm

    it’s not html5 standard,

    1. Tayyab December 5, 2011 at 10:58 am

      no its, not, Jawad is just getting our readers used to of new HTML5 codes, it’ll take a while before we make the complete shift.

  2. asad January 14, 2012 at 1:47 am

    Hi,
    Thanks Your Nice Article.I Like It.

    Thanks

  3. junnur January 19, 2012 at 12:29 pm

    Thank you for your nice Information. I like it very much.
    Thanks

    1. Jawad January 24, 2012 at 2:41 am

      Thank you for the comment @Junnur.
      Did you check the latest Easily Coding a Jeweler’s Website to HTML5 CSS3 from PSD

  4. dinozzaver January 20, 2012 at 4:16 am

    Is that really comic sans font used? you must be kidding!

Comments are closed.

Copyrights © 2016 - Designzzz. All Rights Reserved