Showbiz Portal Design – PSD to HTML5 and CSS3

AD

This is basically a magazine/portal/blog design for a lifestyle or showbiz related website. We published its tutorial a couple weeks ago with the title Create a Dark Web Design and then we also published its downloadable PSD file.

Today I’m converting the same PSD Web Design into HTML and CSS. We’ll carry on with our “Mission HTML5” where we are enabling you to switch from HTML4 to HTML5, but this time, we are not just getting on with HTML5 but also CSS3. So let’s begin!

Main Layout

This is the PSD file we’ll be converting into code. And let me remind you that I used dummy text, I just copied a few lines from  How to Stay Prepared for Tomorrow. I don’t like Lorem Ipsum.

HTML-CSS-LAyout

Live Preview

<Head> Area Code

This is the routine stuff, I have just suggestion, read the code carefully, don’t just copy-paste it in your development tool. Scrutinize it, only then you’ll be able to understand the new techniques properly.

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

Moving Forward To Body

As usual, we’ll use a div and call it main-container and place all our data in that. Many designers use this technique.

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

CSS for <Body> and div “main-container”

Now, the styling part comes.

@charset "utf-8";
 /* CSS Document */
*{
   margin:0;
   padding:0;
   }
body
   {
   background:url(images/bg.jpg) repeat-x scroll #333;
   }

   article, aside, figure, footer, header, hgroup, menu, nav, section { display:block; }

   #main-container
   {
   width:1000px;
   overflow:hidden;
   margin:0 auto;
   }

Header

I kept the header minimal and low in height, that’s because this site will be regularly updated and the latest stories should be the most prominent thing on the homepage.

Photoshop-free-tutorial-of-wordpress-layout

Logo, Navigation and Search bar HTML

<header>
<div class="logo">
<img src="images/logo.png" alt="" />
</div>
<nav>
<ul>
<li><a href="#">Home </a></li>
<li><a href="#">Movies </a></li>
<li><a href="#">Tv Shows </a></li>
<li><a href="#">Gallery </a></li>
<li><a href="#">Music </a></li>
</ul>
<input id="search" type="text" name="s" value="Site Search..." />
</nav>
</header>

CSS

header
 {
 overflow:hidden;
}
   .logo
   {
   width:175px;
   float:left;
   overflow:hidden;
   }

   nav
   {
   overflow:hidden;
   width:777px;
   height:66px;
   float:right;
   margin:20px 0;

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

Featured Area

This is the featured area, you can use a little jQuery or flash here and make it a lot more dynamic than I did, but that’s optional.

Entertainment-Layout-Tutorial

HTML

<div class="Layout">
<div class="featured">
<div class="block">
<p class="heading"> Taylor Swift </p>
<p class="heading1"> Next Album is very </p>
<p class="heading2"> Different </p>
<article>
<p class="description">There are many variations of passages of Lorem Ipsum available,
 but the majority have suffered alteration in some form.</p>
</article>
</div>
<div class="shape">
<img src="images/image1.png" alt="" />
</div>
<div class="image">
<img src="images/image.png" alt="" />
</div>
</div>

CSS

.Layout
 {
 background:#eae9e9;
 width:970px;
 overflow:hidden;
 margin:-24px auto;
 border-radius:6px;
 padding:7px 15px;
 }
 .featured
 {
 background:#1b1e1d;
 width:970px;
 height:355px;
 border-radius:5px;
 }
 .block
 {
 width:365px;
 height:262px;
 padding:45px 0;
 float:left;
 }
 .heading
 {
 color:#ffffff;
 font-family:Arial, Helvetica, sans-serif;
 font-size:25px;
 width:200px;
 margin:14px 16px;
 text-align:center;
 }
 .heading1
 {
 color:#c4c4c4;
 font-family:Arial, Helvetica, sans-serif;
 font-size:25px;
 width:280px;
 margin:8px 30px;
 text-align:center;
 }
 .heading2
 {
 color:#ffffff;
 font-family:Arial, Helvetica, sans-serif;
 font-size:25px;
 width:280px;
 margin:15px 0px;
 text-align:center;
 padding-left:85px;
 }

 article
 {
 background:#2d2f2e;
 width:307px;
 height:55px;
 margin:38px 20px;
 padding:14px;
 border-radius:7px;
 }
 .description
 {
 color:#ffffff;
 font-family:Arial, Helvetica, sans-serif;
 font-size:14px;
 }
 .shape
 {
 width:25px;
 height:240px;
 float:left;
 margin:57px 40px;
 }
 .image
 {
 width:485px;
 overflow:hidden;
 float:left;
 padding:42px 0;
 }

Post Area

This is the content area, I was thinking this should have been two columned, what do you think?

Coding tutorial

HTML

<div id="content">
<div class="post">
<section>
<div class="post-image">
<img src="images/image2.png" alt="" />
</div>
<h2>How to Stay Prepared for Tomorrow</h2>
<p class="area">
 The advancement of technology is coming about at light speed. I still remember that I learned using a
 PC on monochrome (black and white) monitors, and even my teacher didn't know to use a mouse. We used
 DOS as the operating system 1MB floppy drive was the only way for data transfer, nobody knew about anything
 called internet. It sounds like I'm talking about an era centuries ago, yet I'm not even in my 30s'!!
 We used DOS as the operating system 1MB floppy drive was the only way for data transfer..
 </p>
<div class="readmore">
<p><a href="#">Read more</a></p>
</div>
</section>
</div>

CSS

#content
 {

 width:585px;
 overflow:hidden;
 padding:25px 0;
 float:left;
 }
section
   {
   background:#ffffff;
   width:562px;
   height:290px;
   border-radius:5px;
   padding:10px;
   border:#c4c4c4 1px solid;
   margin-bottom:30px;
 }
.post-image
   {
   width:196px;
   height:245px;
   padding:10px 9px;
   float:left;
   }
h2
   {
   font-family:Arial, Helvetica, sans-serif;
   font-size:19px;
   width:345px;
   overflow:hidden;
   float:left;
   text-shadow: 0 2px 1px #C4C4C4;
   padding:7px 0;
   text-align:center;
   }
.area
   {
   width:345px;
   font-family:Arial, Helvetica, sans-serif;
   font-size:14px;
   overflow:hidden;
   float:left;
   text-align:justify;
   padding:20px 0;
   }
.readmore
   {
   background:#3b3b3b;
   width:115px;
   height:40px;
   border-radius:17px;
   float:right;
   border:2px solid #2e2e2e;
   }
.readmore p
   {
   font-family:Arial, Helvetica, sans-serif;
   color:#f7f7f7;
   font-size:20px;
   text-align:center;
   padding:5px 0;
   }
.readmore a
   {
   color:#ffffff;
   text-decoration:none;
   }

Sidebar

Sidebar is a vital. If you want visitor to spend time on your site, you should.. no, you Must design your sidebar very intelligently.

Tutorial of web development

HTML

<aside>
<div class="sidebar">
<section class="sidebar-box">
<h3>Latest</h3>
<h3>Popular</h3>
<h3>E-News</h3>
</section>
<section class="side-post">
<div class="side-image">
<img src="images/image4.png" alt="" />
</div>
<p class="side-area">
 These are the best Photoshop tutorials that emerged on the internet during November 2011.
 </p>
<p class="side-readmore"><a href="#">Read more...</a></p>
</section>
</div>
</aside>

CSS

#content1
 {

 width:385px;
 overflow:hidden;
 padding:25px 0;
 float:left;
 }
.sidebar
 {
 background:#ffffff;
 width:370px;
 overflow:hidden;
 margin-left:12px;
 border-radius:5px;
 border:#c4c4c4 1px solid;
 margin-bottom:30px;
 }
 .sidebar1
 {
 background:#ffffff;
 width:370px;
 height:334px;
 margin-left:12px;
 border-radius:5px;
 border:#c4c4c4 1px solid;
 margin-bottom:30px;
 }
 .sidebar-box
 {
 background:#3b3b3b;
 border-radius: 20px 0 20px 0;
 height: 20px;
 margin: 10px 29px;
 width: 288px;
 }
 h3
 {
 width:56px;
 height:20px;
 font-family:Arial;
 font-weight:normal;
 font-size:16px;
 float:left;
 padding:0 18px;
 color:#ffffff;
 text-align:center;
 }
 .side-post
 {

 width:327px;
 height:75px;
 margin:15px 9px;
 }
 .side-image
 {
 width:75px;
 height:60px;
 float:left;
 }
 .side-area
 {
 float: left;
 font-family: Arial,Helvetica,sans-serif;
 font-size: 13px;
 overflow: hidden;
 padding: 2px 9px;
 text-align: justify;
 width: 232px;
 }
 .side-readmore
 {
 font-family:Arial, Helvetica, sans-serif;
 font-size:14px;
 font-weight:normal;
 color:#000000;
 float:right;
 width:88px;
 overflow:hidden;
 }
 .side-readmore a
 {
 color:#000000;
 text-decoration:none;
 }

Featured Area #2

I didn’t know what to call this area so I just called in Featured area no. 2. I think such a slider in the end of the page can be very handy.

Tutorial-Photoshop-Layout-Design

HTML

<div id="thumb-block">
<div class="thumb-heading">
<p class="heading3"> Movies </p>
<p class="heading3"> TV Shows </p>
<p class="heading3"> Music </p>
</div>
<div class="thumb-image">
<div class="thumb">
<a href="#"><img src="images/image5.png" alt="" /></a>
</div>
</div>
</div>

CSS

#thumb-block
 {

 width:1000px;
 overflow:hidden;
 padding:10px 0;
 }
 .thumb
 {

 width:280px;
 overflow:hidden;
 margin:0px 20px;
 float:left;
 }
 .thumb-heading
 {
 width:970px;
 overflow:hidden;
 float:left;
 padding:0 15px;
 }
 .heading3
 {
 color:#c4c4c4;
 font-family:Arial, Helvetica, sans-serif;
 font-size:29px;
 width:250px;
 margin:30px 32px;
 text-align:center;
 height:29px;
 float:left;
 }
 .thumb-image
 {
 width:960px;
 overflow:hidden;
 float:left;
 padding-left:26px;
 }

Footer

Footer adds a lot of interactivity, I always focus on footer a lot. By the way, did you check the  new footer on Designzzz? If no, scroll down.

Free-Tutorial-of-Web-Layout

HTML

<div class="footer-bg">
<div class="box">
<ul>
<li><a href="#">Designers Dare</a></li>
<li><a href="#">Designzzz</a></li>
<li><a href="#">Carunch</a></li>
<li><a href="#">imagzzz</a></li>
<li><a href="#">Gaglol</a></li>
</ul>
<div class="line">
</div>
</div>
<div class="box">
<ul>
<li><a href="#">Movies</a></li>
<li><a href="#">Music</a></li>
<li><a href="#">Tv Shows</a></li>
<li><a href="#">Events</a></li>
<li><a href="#">Trailors</a></li>
</ul>
<div class="line">
</div>
</div>
<div class="box">
<p class="advertise">The advancement of technology is coming about at light speed. I still remember that I
 learned using a PC on monochrome (black and white) monitors, and even my teacher didn't know
 to use a mouse.
 </p>
<div class="line">
</div>
</div>
<div class="box">
<div id="captions">
<p>Name</p>
<input type="text" name="uname" id="name" value="" class="textfield" />
<p>Email</p>
<input type="text" name="email" id="email" value="" class="textfield" />
<p>Message</p>
<textarea name="message" id="message" cols="18" rows="3"></textarea>
<input type="submit" name="submit" value="Submit" class="submit" />
</div>
<div class="line">
</div>
</div>
<div class="box">
<p class="icons">
<img src="images/fb.png" alt="" />
<img src="images/rt.png" alt="" />
<img src="images/rss.png" alt="" />
</p>
</div>
</div>
<div class="copyright">
<p>Copyrighted by designzzz © 2011</p>
</div>
</div>

CSS

#footer
 {

 width:1000px;
 overflow:hidden;
 padding:10px 0px;
 }
 .tags
 {
 background:#000000;
 width:1000px;
 height:46px;
 border-radius:10px 10px 0 0;
 }
 .tag-text
 {
 float:left;
 width:175px;
 overflow:hidden;
 font-family:Arial, Helvetica, sans-serif;
 font-size:19px;
 color:#ffffff;
 text-align:center;
 margin:11px 5px;
 }
 .footer-bg
 {
 background:#1f1e1e;
 width:1000px;
 overflow:hidden;
 }
 .box
 {

 width:185px;
 height:260px;
 margin:0 6px;
 float:left;
 }
 .box ul
 {
 list-style:none;
 padding:6px 0;
 float:left;
 }
 .box ul li
 {
 font-family:Arial, Helvetica, sans-serif;
 font-size:14px;
 margin: 19px 36px;
 width:110px;
 border-bottom:#000000 1px solid;
 color:#ffffff;
 }
 .box ul li a
 {
 color:#ffffff;
 text-decoration:none;
 }
 .line
 {
 background:#000000;
 width:3px;
 height:235px;
 float:left;
 margin:20px 0;

 }
 .advertise
 {
 font-family:Arial, Helvetica, sans-serif;
 font-size:14px;
 color:#ffffff;
 width:150px;
 height:185px;
 text-align:justify;
 margin:26px 16px;
 float:left;
 }
 #captions
 {
 width:182px;
 height:100px;
 float:left;
 margin:20px 0;
 line-height:26px;
 }
 #captions p
 {
 font-family:Arial, Helvetica, sans-serif;
 font-size:12px;
 color:#ffffff;
 width:182px;
 height:20px;
 }
 #form
 {
 width:132px;
 height:80px;
 float:left;
 margin:26px 0;
 }
 .textfield
 {
 background:#ffffff;
 width:162px;
 height:18px;
 margin:2px 0;
 border-radius:6px;
 }
 textarea
 {
 background:#ffffff;
 width:162px;
 height:75px;
 border-radius:6px;
 }
 .submit
 {
 background:#000000;
 width:65px;
 height:26px;
 margin:8px 15px;
 float:right;
 border-radius:8px;
 color:#999;
 }
 .icons
 {
 margin:43px 30px;
 width:65px;
 height:65px;
 }
 .copyright
 {
 background:#000000;
 width:1000px;
 height:46px;
 border-radius:0px 0px 10px 10px;
 color:#ffffff;
 text-align:center;
 }
 .copyright p
 {
 font-family:Arial, Helvetica, sans-serif;
 font-size:12px;
 color:#ffffff;
 text-align:center;
 height:20px;
 width:1000px;
 padding:15px 0;
 }

create free website wix below post

Further Related Readings

Comments
  1. Rajesh March 27, 2012 at 10:13 am

    hi jawad it was so nice come to on this site. Writing clean effective code is just as important as a great design! you specialize in writing web standard html5 & css3 that is semantic, valid and search engine optimized. great one man keep it up always i do not have much word to so ////////////// only appreciate. ‘ nice work ‘.

    1. Jawad March 29, 2012 at 5:03 pm

      Thanks for noticing all that 🙂

      Well Rajesh, I have to be honest here. This is a team effort, in writing our editor Tayyab does much of the work and webmaster Ayaz Malik sometimes gives finishing touches to the code.
      It is our team effort which takes our tutorials to a level above our competitors.

Comments are closed.

Copyrights © 2016 - Designzzz. All Rights Reserved