My Blog is unique to me.: May 2012

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>

        <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> 

                <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> 

                <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> 

                <a href="#" class="more">More...</a>

            </div>

            <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>
                </div>

                <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>
                <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>

                <a href="http://www.twitter.com/nettuts">
                    <img src="img/twitter-follow.png" alt="Follow Us On Twitter!" />
                </a>
            </div>
        </div>
    </div>

</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;
}

My Blog is unique to me.

PSD To HTML Conversion

Labels