PSD To HTML Conversion

This PSD to Html conversion I have recently learned from nettuts . http://net.tutsplus.com/

The HTML Code used was : -

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>
  <head>
    <title>JW</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" type="text/css" href="style.css" />
  </head>
 
  <body>

    <div id="wrap">
        <div id="header">
            <h1><a href="#">JW</a></h1>
           
            <ul>
                <li id="home"><a href="#">home</a></li>
                <li id="about"><a href="#">about</a></li>
                <li id="contact"><a href="#">contact</a></li>
                <li id="search">
                    <img src="img/searchIcon.png" alt="Search for something!" />
                    <input type="text" name="s" id="s" value="search" />
                </li>
                <li id="rss"><a href="#"><img src="img/rss.png" /></a></li>                                       
            </ul>
           
            <p id="slogan">another rarely updated blog</p>
        </div><!-- end header -->
       
        <div id="main">
            <div id="primary">
           
                <div class="post-item">
                    <img src="img/postImages/one.jpg" alt="post image" />
                    <h2>My First Posting</h2>
                    <p class="meta">4/1/09 in Inspiration</p>
                    <p>
                        Lorem ipsum dolor sit amet, sit diam ut sed jus consequat nunc incassum fatua,
                        sed genitus, virtus, saepius pagus. Autem bene ingenium aptent aliquam inhibeo,
                        accumsan nonummy proprius pneum reprobo letalis vindico duis elit.
                    </p>
                </div> <!-- end post-item -->
               
                <div class="post-item">
                    <img src="img/postImages/two.jpg" alt="post image" />
                    <h2>My First Posting</h2>
                    <p class="meta">4/1/09 in Inspiration</p>
                    <p>
                        Lorem ipsum dolor sit amet, sit diam ut sed jus consequat nunc incassum fatua,
                        sed genitus, virtus, saepius pagus. Autem bene ingenium aptent aliquam inhibeo,
                        accumsan nonummy proprius pneum reprobo letalis vindico duis elit.
                    </p>
                </div> <!-- end post-item -->
               
                <div class="post-item">
                    <img src="img/postImages/three.jpg" alt="post image" />
                    <h2>My First Posting</h2>
                    <p class="meta">4/1/09 in Inspiration</p>
                    <p>
                        Lorem ipsum dolor sit amet, sit diam ut sed jus consequat nunc incassum fatua,
                        sed genitus, virtus, saepius pagus. Autem bene ingenium aptent aliquam inhibeo,
                        accumsan nonummy proprius pneum reprobo letalis vindico duis elit.
                    </p>
                </div> <!-- end post-item -->       
               
                <a href="#" class="more">More...</a>                       
               
            </div><!-- end primary -->
           
            <div id="secondary">
                <div class="secondaryBox" id="photos">
                    <h3>Flickr Photos</h3>
                    <img class="featuredImage" src="img/treePhoto.jpg" alt="Tree Photo" />
                    <p>A picture of a tree.</p>
                   
                    <div class="prevNext">
                        <a href="#"><img src="img/right-arrow.png" alt="More" /></a>
                        <a href="#"><img src="img/left-arrow.png" alt="Less" /></a>                       
                    </div><!-- end prevNext -->
                </div><!--end secondaryBox -->
               
                <div class="secondaryBox">
                    <h3>Popular Entries</h3>
                    <ul id="popPosts">
                        <li><a href="#">Some Post Entry Will Go Here</a></li>
                        <li><a href="#">Some Post Entry Will Go Here</a></li>
                        <li><a href="#">Some Post Entry Will Go Here</a></li>
                        <li><a href="#">Some Post Entry Will Go Here</a></li>
                        <li><a href="#">Some Post Entry Will Go Here</a></li>
                        <li><a href="#">Some Post Entry Will Go Here</a></li>
                        <li><a href="#">Some Post Entry Will Go Here</a></li>                                                    </ul>               
                </div><!-- end secondaryBox -->
                <div class="secondaryBox" id="recentEntries">
                    <h3>Recent Entries</h3>
                    <ul>
                        <li><a href="#">Some Post Entry Will Go Here</a></li>
                        <li><a href="#">Some Post Entry Will Go Here</a></li>
                        <li><a href="#">Some Post Entry Will Go Here</a></li>
                        <li><a href="#">Some Post Entry Will Go Here</a></li>
                        <li><a href="#">Some Post Entry Will Go Here</a></li>
                        <li><a href="#">Some Post Entry Will Go Here</a></li>
                        <li><a href="#">Some Post Entry Will Go Here</a></li>                                                    </ul>
                </div><!-- end secondaryBox -->
               
                <a href="http://www.twitter.com/nettuts">
                    <img src="img/twitter-follow.png" alt="Follow Us On Twitter!" />
                </a>
            </div><!-- end secondary -->
        </div><!-- end main -->
    </div><!-- end wrap -->
   
  </body>
</html>




The CSS code used was : -




/* Reset */

html, body, div, span, object, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, address, code, img,
small, strong, dl, dt, dd, ol, ul, li,
fieldset, form, label {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}
body {
    line-height: 1.5;
        font-family: helvetica, arial, sans-serif;
}
ol, ul {
    list-style: none;
}

/* End Reset */

h2 {
 font-size: 27px;
}

p {
 font-size: 14px;
}

a {
 text-decoration: none;
 color: #4e4e4e;
 font-size: 14px;
}

a:hover {
 text-decoration: underline;
}

input {
 background: #696969;
 border: 1px solid #c3c3c3;
 color: #cbcbcb;
 padding: 3px;
}

input:focus, input:hover {
 background: #ededed;
 color: #4e4e4e;
}


/* Main Styles */

body {
 background: #f2f2f2 url(img/bg.jpg) repeat-x;
}

#wrap {
 width: 960px;
 margin: auto;
}

#header h1 {
 background: url(img/logo.png) no-repeat;
 width: 169px;
 height: 71px;
 text-indent: -9999px;
 float: left;
}

#header h1 a {
 width: 169px;
 height: 71px;
 display: block;
}

/* Navigation */

#header ul {
 overflow: hidden;
 padding-left: 83px;
}

#header ul li {
 float: left;
 padding-left: 40px;
 margin-right: 40px;
 margin-top: 20px;
}

#header ul li a {
 color: #cbcbcb;
 font-size: 16px;
 position: relative;
 top: -7px;
 left: 3px;
}

#header ul li a:hover {
 text-decoration: none;
 color: white;
}

#header ul li#home {
 background: url(img/nav/home.png) no-repeat;
 width: 31px;
 height: 34px;
}

#header ul li#about {
 background: url(img/nav/camera.png) no-repeat;
 width: 37px;
 height: 36px;
}

#header ul li#contact {
 background: url(img/nav/contact.png) no-repeat;
 width: 35px;
 height: 31px;
}

/* Search Box */

#header li#search {
 margin-top: 13px;
 margin-left: 60px;
 margin-right: 0;
}

#header li#search img {
 margin-right: 10px;
 margin-left: 10px;
}

#header li#search input {
 position: relative;
 top: -32px;
}

#header li#rss {
 float: right;
 margin: 0; padding: 0;
}

li#rss img {
 width: 30px;
 padding-right: 1px;
 margin-top: 13px;
}

#header p#slogan {
 font-size: 2em;
 margin: 21px 0 31px 0;
 float: right;
 background: url(img/slogan.png) no-repeat;
 width: 544px;
 height: 38px;
 text-indent: -9999px;
 border-right: 1px solid white;
 padding-right: 50px;
}

/* Main Content */

#main {
 clear: both;
 overflow: hidden;
}

#main #primary {
 float: left;
 width: 630px;
}

#main #secondary {
 float: right;
 width: 300px;
}

#main #primary .post-item {
 background: #ededed;
 margin-bottom: 28px;
 border: 1px solid white;
 overflow: hidden;
 padding-right: 40px;
}

.post-item img {
 float: left;
 padding: 30px 20px 30px 30px;
}

.post-item h2 {
 padding-top: 30px;
}

.post-item p.meta {
 background: #9c2323;
 color: white;
 font-size: 11px;
 font-style: normal;
 padding: 4px;
 margin-left: 250px;
 margin-bottom: 14px;
 width: 100px;
 min-width: 100px;
 text-align: center;
 border-bottom: 1px solid white;
}

.post-item p {
 color: #7e7e7e;
 font-style: italic;
}

/* Next and Previous Buttons */

.more {
 background: url(img/nextPrevButton.jpg) no-repeat;
 padding: 8px;
 color: white;
 font-size: 12px;
 font-style: italic;
 float: right;
 border: 1px solid white;
 border-right: none;
 border-left: none;
}


/* Secondary/Sidebar */

.secondaryBox {
 background: #ededed;
 border: 1px solid white;
 margin-bottom: 28px;
 padding: 0 4%;
 overflow: hidden;
}

.secondaryBox h3 {
 background: #9c2323;
 color: white;
 margin: 4% 0;
 font-size: 12px;
 font-weight: normal;
 padding: 3px 0 2px 8px;
}

#photos img {
 border: none;
}

#photos img.featuredImage {
 border: 1px solid white;
 margin: 0; padding: 0;
 width: 100%;
}

#photos p {
 float: left;
 color: #737373;
}

#photos .prevNext {
 float: right;
}

#recentEntries ul li,
ul#popPosts li {
 padding: 3px 0 3px 0;
 border-bottom: 1px solid #bbbbbb;
 border-top: 1px solid white;
}

#recentEntries ul li:first-child,
#popPosts li:first-child {
 border-top: none;
}

#recentEntries ul li:last-child,
#popPosts li:last-child {
 border-bottom: none;
}

#recentEntries ul li a {
 font-size: 12px;
}
   
Posted by

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)