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.
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.
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.
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?
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.
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.
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.
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;
}
Không có nhận xét nào:
Đăng nhận xét