How to Create a Portfolio Web Layout in HTML / CSS

On 24 Jul, 2012 By sanjay With 2 Comments

Converting PSD to HTML has been a challenge to every designer, you’re progress will depend on a couple of things, complexity of the layout, skills of the designer and how organize the PSD layers.

Today we will continue with our tutorial in which we will convert it to a working HTML / CSS. If you miss the PSD tutorial, you can check it out here.

You can download the PSD at the bottom of this tutorial!

Before we begin, we will download a couple of things:

League Gothic from fontsquirrel
Kaushan Script from fontsquirrel
Icons from here
Social Media Icons from iconarchive
Twitter Bird from iconarchive
Portfolio Layout PSD from here

abbe How to Create a Portfolio Web Layout in HTML / CSS

Here’s the Demo

Open your Photoshop and we will begin to cut the important images.

mac How to Create a Portfolio Web Layout in HTML / CSS

First we cropped the Mac Book Pro, and saved it as png.

bg How to Create a Portfolio Web Layout in HTML / CSS

Next is the background, grab the Crop Tool (C) and select a certain area on the content section. Noticed that I used Marquee Tool here, just to show you the screenshot.

Now that we have what we need, we will create our file structure. We will use a free generator for that so we can save some time, head over to instantblueprint.com.

instantblueprint.com How to Create a Portfolio Web Layout in HTML / CSS

Choose HTML5, and the rest are defaults.

folder How to Create a Portfolio Web Layout in HTML / CSS

If you open your folder from instantblueprint, you’ll have a folder structure like this. A helpful generator tool 🙂

Next, we will code the HTML first and CSS styling on last. Open your Code editor, mine is sublime text 2 open your index.html.

This is for the header code.

 &lt;div id="container"&gt;

            &lt;header role="banner"&gt;

                &lt;div id="inner-header"&gt;
                    &lt;div id="logo"&gt;Abbe&lt;/div&gt;

                    &lt;nav role="navigation"&gt;
                        &lt;div&gt;
                            &lt;ul id="menu-main"&gt;
                                &lt;li&gt;&lt;a href=""&gt;Home&lt;/a&gt;&lt;/li&gt;
                                &lt;li&gt;&lt;a href=""&gt;Portfolio&lt;/a&gt;&lt;/li&gt;
                                &lt;li&gt;&lt;a href=""&gt;Blog&lt;/a&gt;&lt;/li&gt;
                                &lt;li&gt;&lt;a href=""&gt;About&lt;/a&gt;
                                      &lt;ul&gt;
                                        &lt;li&gt;&lt;a href=""&gt;Contact&lt;/a&gt;&lt;/li&gt;
                                        &lt;/ul&gt;&lt;/li&gt;
                            &lt;/ul&gt;
                        &lt;/div&gt;
                &lt;/nav&gt;
                &lt;/div&gt; &lt;!-- end #inner-header --&gt;
            &lt;/header&gt; &lt;!-- end header --&gt;
            &lt;hr&gt;

<div>

<li><a href="">Portfolio</a></li>

<li><a href="">About</a>

<ul>

<li><a href="">Contact</a></li>

</ul></li>

</ul>

</div>

</nav>

</div>

</header>

<hr>

Contect Section

 &lt;div id="content"&gt;

                &lt;div&gt;
                    &lt;div&gt;&lt;!-- intro --&gt;
                    &lt;h2&gt;&lt;span&gt;Successful&lt;/span&gt; and &lt;span&gt;Compelling&lt;/span&gt; Design is what we are after&lt;/h2&gt; &lt;p&gt;and your website should do to!&lt;/p&gt;
                    &lt;a href=""&gt;Get a Free Qoute&lt;/a&gt;
                    &lt;/div&gt;&lt;!-- intro --&gt;
                    &lt;div&gt;&lt;img src="images/macbook.png" width="480" height="300"&gt;&lt;/div&gt;
                &lt;/div&gt; &lt;!-- end #main --&gt; 

    &lt;/div&gt; &lt;!-- end #content --&gt;

     &lt;/div&gt; &lt;!-- end #container --&gt;

      &lt;div&gt;&lt;!-- bg --&gt;
              &lt;div&gt;
                &lt;div&gt;
                    &lt;img src="images/Elegantly-designed.png"&gt;
                    &lt;h3&gt;Eye Candy Designs&lt;/h3&gt;
                    &lt;p&gt;Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.&lt;/p&gt;
                &lt;/div&gt;    
                &lt;div&gt;
                    &lt;img src="images/make.png"&gt;
                    &lt;h3&gt;Browser Compatible&lt;/h3&gt;
                    &lt;p&gt;Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.&lt;/p&gt;
                &lt;/div&gt;
                &lt;div&gt;
                    &lt;img src="images/Attendance.png"&gt;
                    &lt;h3&gt;User Friendly&lt;/h3&gt;
                    &lt;p&gt;Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.&lt;/p&gt;
                &lt;/div&gt;
              &lt;/div&gt; &lt;!-- end #main --&gt;

              &lt;div&gt;
                &lt;div&gt;
                    &lt;h3&gt;&lt;span&gt;Latest Projects&lt;/span&gt;&lt;/h3&gt;
                        &lt;div&gt;
                            &lt;img src="images/sleek-navigation.png"&gt;
                            &lt;h4&gt;&lt;a href=""&gt;Sleek Navigation&lt;/a&gt;&lt;/h4&gt;
                            &lt;h5&gt;&lt;em&gt;Tutorials&lt;/em&gt;&lt;/h5&gt;
                        &lt;/div&gt;    
                        &lt;div&gt;
                            &lt;img src="images/dvd-cover.png"&gt;
                            &lt;h4&gt;&lt;a href=""&gt;DVD Cover&lt;/a&gt;&lt;/h4&gt;
                            &lt;h5&gt;&lt;em&gt;Tutorials&lt;/em&gt;&lt;/h5&gt;
                        &lt;/div&gt;
                        &lt;div&gt;
                            &lt;img src="images/form.png"&gt;
                           &lt;h4&gt;&lt;a href=""&gt;Registration form UI&lt;/a&gt;&lt;/h4&gt;
                            &lt;h5&gt;&lt;em&gt;Tutorials&lt;/em&gt;&lt;/h5&gt;
                        &lt;/div&gt;
                &lt;/div&gt;

            &lt;div&gt;
                &lt;h3&gt;&lt;span&gt;Latest Work&lt;/span&gt;&lt;/h3&gt;
                    &lt;div&gt;
                        &lt;img src="images/mini-browser.png"&gt;
                        &lt;h4&gt;&lt;a href=""&gt;Mini-Browser Frame in Photoshop&lt;/a&gt;&lt;/h4&gt;
                        &lt;p&gt;orem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.&lt;/p&gt;
                    &lt;/div&gt;    
                    &lt;div&gt;
                        &lt;img src="images/iphone-icon.png"&gt;
                        &lt;h4&gt;&lt;a href=""&gt;Iphone Icon App Tutorial&lt;/a&gt;&lt;/h4&gt;
                          &lt;p&gt;orem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.&lt;/p&gt;
                    &lt;/div&gt;
                    &lt;div&gt;
                        &lt;img src="images/landingpage.png"&gt;
                       &lt;h4&gt;&lt;a href=""&gt;Landing Page with Timer in HTML5&lt;/a&gt;&lt;/h4&gt;
                          &lt;p&gt;orem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.&lt;/p&gt;
                    &lt;/div&gt;
            &lt;/div&gt;
              &lt;/div&gt; &lt;!-- end #main --&gt;

     &lt;/div&gt;  &lt;!-- bg --&gt;

<div>

<h2><span>Successful</span> and <span>Compelling</span> Design is what we are after</h2> <p>and your website should do to!</p>

<a href="">Get a Free Qoute</a>

</div>

</div>

</div>

</div>

<div>

<h3>Eye Candy Designs</h3>

<p>Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>

</div>

<div>

<h3>Browser Compatible</h3>

<p>Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>

</div>

<div>

<h3>User Friendly</h3>

<p>Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>

</div>

</div>

<div>

<h3><span>Latest Projects</span></h3>

<div>

<h4><a href="">Sleek Navigation</a></h4>

<h5><em>Tutorials</em></h5>

</div>

<div>

<h4><a href="">DVD Cover</a></h4>

<h5><em>Tutorials</em></h5>

</div>

<div>

<h4><a href="">Registration form UI</a></h4>

<h5><em>Tutorials</em></h5>

</div>

<div>

<h3><span>Latest Work</span></h3>

<div>

<h4><a href="">Mini-Browser Frame in Photoshop</a></h4>

<p>orem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>

</div>

<div>

<h4><a href="">Iphone Icon App Tutorial</a></h4>

<p>orem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>

</div>

<div>

<h4><a href="">Landing Page with Timer in HTML5</a></h4>

<p>orem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>

</div>

</div>

</div>

Footer Section

 &lt;footer role="contentinfo"&gt;
                &lt;div id="inner-footer"&gt;

                    &lt;div&gt;&lt;!-- right --&gt;
                    &lt;p&gt;&lt;b&gt;Abbe&lt;/b&gt; &lt;em&gt;is a free template for you who wants to get things done right.&lt;/em&gt; &lt;/p&gt;
                   &lt;p&gt;Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.&lt;/p&gt;
                    &lt;/div&gt;&lt;!-- right --&gt;

                    &lt;div&gt;&lt;!-- right --&gt;
                   &lt;p&gt;&lt;b&gt;Tweets&lt;/b&gt;&lt;/p&gt;
                           &lt;ul&gt;
                               &lt;li&gt;Lorem ipsum dolor sit amet, consectetuer &lt;a href=""&gt;#adipiscin&lt;/a&gt;&lt;/li&gt;
                               &lt;li&gt;Lorem ipsum dolor sit amet, consectetuer &lt;a href=""&gt;#adipiscin&lt;/a&gt;&lt;/li&gt;
                               &lt;li&gt;Lorem ipsum dolor sit amet, consectetuer adipiscin&lt;/li&gt;
                           &lt;/ul&gt;
                    &lt;/div&gt;&lt;!-- right --&gt;

                    &lt;div&gt;&lt;!-- right --&gt;
                    &lt;p&gt;&lt;b&gt;Social Connect!&lt;/b&gt;&lt;/p&gt;
                   &lt;ul&gt;
                       &lt;li&gt;&lt;a href=""&gt;&lt;img src="images/facebook.png"&gt;&lt;/a&gt;&lt;/li&gt;
                       &lt;li&gt;&lt;a href=""&gt;&lt;img src="images/twitter.png"&gt;&lt;/a&gt;&lt;/li&gt;
                       &lt;li&gt;&lt;a href=""&gt;&lt;img src="images/linkedin.png"&gt;&lt;/a&gt;&lt;/li&gt;
                       &lt;li&gt;&lt;a href=""&gt;&lt;img src="images/flikr.png"&gt;&lt;/a&gt;&lt;/li&gt;
                       &lt;li&gt;&lt;a href=""&gt;&lt;img src="images/mail.png"&gt;&lt;/a&gt;&lt;/li&gt;
                   &lt;/ul&gt;
                    &lt;/div&gt;&lt;!-- right --&gt;

                &lt;/div&gt; &lt;!-- end #inner-footer --&gt;
            &lt;/footer&gt; &lt;!-- end footer --&gt;

<p><b>Abbe</b> <em>is a free template for you who wants to get things done right.</em> </p>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>

</div>

<p><b>Tweets</b></p>

<ul>

<li>Lorem ipsum dolor sit amet, consectetuer <a href="">#adipiscin</a></li>

<li>Lorem ipsum dolor sit amet, consectetuer adipiscin</li>

</ul>

</div>

<p><b>Social Connect!</b></p>

<ul>

</ul>

</div>

</div>

</footer>

CSS

 /******************************************************************
GENERAL LAYOUT STYLES
******************************************************************/

body { background:#FFF; color:#777;font:12px Georgia, "Times New Roman", Times, serif;line-height:1.4em; border-top:5px solid #FF6000; }

/******************************************************************
GRID STYLES
******************************************************************/

/* 960 Grid System (http://960.gs/ ) */

#container, .wrap { 
    width: 940px;
    margin: 0 auto;
    padding: 0 10px;
    overflow:hidden;
}

    /* layout options ( all have margins right &amp; left of 2.1276596%) */
    .col60  { width: 6.3829787%; } /* width 60px  / grid_1  */
    .col140 { width: 14.893617%; } /* width 140px / grid_2  */
    .col220 { width: 23.404255%; } /* width 220px / grid_3  */
    .col300 { width: 31.914894%; } /* width 300px / grid_4  */
    .col380 { width: 40.425532%; } /* width 380px / grid_5  */
    .col480 { width: 48.936170%;  } /* width 480px / grid_6  */
    .col540 { width: 57.446809%; } /* width 540px / grid_7  */
    .col620 { width: 65.957447%; } /* width 620px / grid_8  */
    .col700 { width: 74.468085%; } /* width 700px / grid_9  */
    .col780 { width: 82.978723%; } /* width 780px / grid_10 */
    .col860 { width: 91.489362%; } /* width 860px / grid_11 */
    .col940 { width: 100.0%;     } /* width 940px / grid_12 */

    /* layout &amp; column defaults */
    .col60, .col140, .col220, .col300, .col380, .col480, .col540, .col620, .col700, .col780, .col860, .col940 { 
        display: inline; 
        float: left; 
        position: relative;
        margin-left: 1.0638298%;   /* 10px */ 
        margin-right: 1.0638298%;  /* 10px */
    }

    /* default styles &amp; fixes */
    .first { margin-left: 0; } /* fixes alignment */
    .last { margin-right: 0; } /* fixes alignment */

/******************************************************************
COMMON &amp; REUSABLE STYLES
******************************************************************/

/* floats */
.left { float: left; }
.right { float: right; }

@font-face {
    font-family: 'KaushanScriptRegular';
    src: url('fonts/KaushanScript-Regular-webfont.eot');
    src: url('fonts/KaushanScript-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/KaushanScript-Regular-webfont.woff') format('woff'),
         url('fonts/KaushanScript-Regular-webfont.ttf') format('truetype'),
         url('fonts/KaushanScript-Regular-webfont.svg#KaushanScriptRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'LeagueGothicRegular';
     src: url('fonts/League_Gothic-webfont.eot');
    src: url('fonts/League_Gothic-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/League_Gothic-webfont.woff') format('woff'),
         url('fonts/League_Gothic-webfont.ttf') format('truetype'),
         url('fonts/League_Gothic-webfont.svg#LeagueGothicRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}
/******************************************************************
LINK STYLES
******************************************************************/

a, a:visited { color: #333; text-shadow:0 1px #fff;text-decoration:none; }
a:hover, a:focus { color: #F37D01; text-decoration:none; }
a:active {} /* on click */
a:link { -webkit-tap-highlight-color : rgba(0,0,0,0); /* this highlights <a href="https://sanjaykhemlani.com/links/">links</a> on Iphones / iPads */ }

/******************************************************************
TEXT SELECTION STYLES
******************************************************************/

/* Highlighted Text */
::selection { 
    background: #333; 
    color:#fff; 
    text-shadow : none; 
}

/* Firefox */
::-moz-selection { 
    background: #333; 
    color:#fff; 
    text-shadow : none; 
}
/******************************************************************
HEADLINES &amp; TITLES
******************************************************************/

h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5 {  font-family:Georgia, "Times New Roman", Times, serif;color:#333;}
h1 a, .h1 a, h2 a, .h2 a, h3 a, .h3 a, h4 a, .h4 a, h5 a, .h5 a { text-decoration: none; }
h1, .h1 { font-size: 2.5em; line-height: 1.333em; }
h2, .h2 { font-size: 2.5em; line-height: 1.4em; margin-bottom: 0.375em; }
h3, .h3 { font-size: 1.3em;margin-bottom: 0.375em;  }
h4, .h4 { font-size: 1.1em; font-weight: 700;margin-bottom: 0.375em; }
h5, .h5 { font-size: 0.846em; line-height: 2.09em; color:#999;font-weight:normal; }
p{line-height:1.4em;margin-bottom:5px;}

/******************************************************************
HEADER SYTLES
******************************************************************/

header[role=banner] {overflow:hidden;}
    #logo { margin: 1.1em 0 9px;font-family: 'KaushanScriptRegular',Helvetica Nue, Arial, Helvetica, sans-serif;font-size:40px;text-shadow:0 6px 2px #ccc;color:#333; }

/******************************************************************
NAVIGATION STYLES
(Main Navigation)
******************************************************************/
nav[role=navigation] {float:right; margin-top:30px;font-family: 'LeagueGothicRegular',Helvetica Nue, Arial, Helvetica, sans-serif;;font-size:22px;}

    nav[role=navigation] .menu {
        margin:5px 0 0 10px;
    }
    nav[role=navigation] .menu ul { 
    }
        nav[role=navigation] .menu ul li {
            display:inline;float:left;
        }
            nav[role=navigation] .menu ul li a { 
                color: #333;
                padding: 5px;
                margin-right:10px;
                text-decoration: none;
                float:left;
                text-shadow:0 0;
            }
                nav[role=navigation] .menu ul li a:hover { 
                    color: #FF6000;                     
                }

                nav[role=navigation] .menu ul li:first-child a {}
                nav[role=navigation] .menu ul li:last-child a {}

        nav[role=navigation] .menu ul li.current-menu-item a, 
        nav[role=navigation] .menu ul li.current_page_item a,
        nav[role=navigation] .menu ul li.current-page-ancestor a {}

        /* sub menus */
        nav[role=navigation] .menu ul li ul, nav[role=navigation] .menu ul li ul li ul { 
            position: absolute; 
            padding-left:10px;
            left: -9999em; 
            top:65px;
            z-index: 9999; 
            border:1px solid #ccc;
            width:200px;
            background: #fff; /* Old browsers */
        }
            nav[role=navigation] .menu ul li ul li ul { 
                margin-left: 200px; 
                top: auto; 
                margin-top: 30px; 

            }
            nav[role=navigation] .menu ul li ul li:hover ul, nav[role=navigation] .menu ul li:hover ul { 
                left: auto; 

            }
            nav[role=navigation] .menu ul li ul li a { 
                width: 160px; 
                color:#333;
                border-bottom:1px solid #ccc;
                border-top:1px solid #fff;
            }

            nav[role=navigation] .menu ul li ul li a {}
                nav[role=navigation] .menu ul li ul li a:hover {color:#FF6000;}
            nav[role=navigation] .menu ul li ul li:last-child a {border-bottom:0;}

                nav[role=navigation] .menu ul li ul li ul.sub-menu { }
                    nav[role=navigation] .menu ul li ul li:hover ul.sub-menu { }

/******************************************************************
FOOTER STYLES
******************************************************************/

footer[role=contentinfo] { padding: 1.1em 0 3.3em; margin-top: 2.2em;  }

    /* footer menu */
    footer[role=contentinfo] nav { float: left; margin: 1em 0; }
    .footer-links {}
        .footer-links ul { margin-top: 0; }
            .footer-links ul li { list-style-type: none; float: left; font-size: 0.9em; }
                .footer-links ul li a { margin-right: 10px; text-decoration: underline; }
                    .footer-links ul li:last-child a { margin-right: 0; }
            .footer-links ul li a:hover, .nav ul li.current-menu-item a, .nav ul li.current_page_item a {}
            .footer-links ul li ul.sub-menu { display: none; } /* you shouldn't have that many links in the footer anyway so it's set to display none ;P */

    .attribution { margin: 1em 0; float: right; color:#333; font-size: 0.9em; }

    .none{display:none;}
    #inner-footer{width:940px;margin:0 auto;}

/******************************************************************
SLIDE STYLES
******************************************************************/
.intro, .mac{margin-top:20px;}
.intro h2{font:34px Georgia, "Times New Roman", Times, serif;font-style:italic;margin-top:30px;}
.intro span{color:#FF6000;}
.intro p{font-size:26px;margin-left:20px;}
.intro-button{background:url(../images/result.png) no-repeat;
    float:left;
    height:60px;
    width:255px;
    text-indent:-9999px;
    border:0;
    margin: 15px 19px 0 80px;
    cursor:pointer;
    }
.intro-button:hover{background-position: 0px -71px;transition: all 1s ease-in-out;}
/******************************************************************
PORTFOLIO STYLES
******************************************************************/
.bg{background:url(../images/bg.png) repeat;margin-top:30px;padding:10px;}
.content-main{width:940px;margin:30px auto 30px auto;background:#fff;-moz-box-shadow:0 0 4px #999;-webkit-box-shadow:0 0 4px #999;box-shadow:0 0 4px #999;padding:10px;overflow:hidden;}
.content-main-text{text-align:center;}
h3.heading {
    background: url("../images/dot.png") repeat-x scroll center center transparent;
    font-size: 18px;
    font-weight: normal;
    margin: 0 0 25px;
    text-align: left;
}
h3.heading span {
    background: none repeat scroll 0 0 #FFFFFF;
    padding: 0 20px;
}
.content-main-work{border-bottom:1px solid #ccc;text-align:center;}
.content-main-work:hover{border-bottom:1px solid #D0ECFF;}
/******************************************************************
BLOG POST STYLES
******************************************************************/
.main-content{overflow:hidden;margin-bottom:30px;}
.border-bottom{border-bottom:1px solid #ccc;padding-bottom:5px;}
/******************************************************************
TWEETS STYLES
******************************************************************/
.tweets li{    list-style-type:none;padding:0 0 10px 35px;background: url(../images/ZkxaLL.png) left no-repeat; vertical-align:middle;}
.social li{list-style-type:none;display:inline;margin-right:20px;}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

258

/******************************************************************

GENERAL LAYOUT STYLES

******************************************************************/

body { background:#FFF; color:#777;font:12px Georgia, "Times New Roman", Times, serif;line-height:1.4em; border-top:5px solid #FF6000; }

/******************************************************************

GRID STYLES

******************************************************************/

/* 960 Grid System (http://960.gs/ ) */

#container, .wrap {

width: 940px;

margin: 0 auto;

padding: 0 10px;

overflow:hidden;

}

/* layout options ( all have margins right & left of 2.1276596%) */

.col60 { width: 6.3829787%; } /* width 60px / grid_1 */

.col140 { width: 14.893617%; } /* width 140px / grid_2 */

.col220 { width: 23.404255%; } /* width 220px / grid_3 */

.col300 { width: 31.914894%; } /* width 300px / grid_4 */

.col380 { width: 40.425532%; } /* width 380px / grid_5 */

.col480 { width: 48.936170%; } /* width 480px / grid_6 */

.col540 { width: 57.446809%; } /* width 540px / grid_7 */

.col620 { width: 65.957447%; } /* width 620px / grid_8 */

.col700 { width: 74.468085%; } /* width 700px / grid_9 */

.col780 { width: 82.978723%; } /* width 780px / grid_10 */

.col860 { width: 91.489362%; } /* width 860px / grid_11 */

.col940 { width: 100.0%; } /* width 940px / grid_12 */

/* layout & column defaults */

.col60, .col140, .col220, .col300, .col380, .col480, .col540, .col620, .col700, .col780, .col860, .col940 {

display: inline;

float: left;

position: relative;

margin-left: 1.0638298%; /* 10px */

margin-right: 1.0638298%; /* 10px */

}

/* default styles & fixes */

.first { margin-left: 0; } /* fixes alignment */

.last { margin-right: 0; } /* fixes alignment */

/******************************************************************

COMMON & REUSABLE STYLES

******************************************************************/

/* floats */

.left { float: left; }

.right { float: right; }

@font-face {

font-family: 'KaushanScriptRegular';

src: url('fonts/KaushanScript-Regular-webfont.eot');

src: url('fonts/KaushanScript-Regular-webfont.eot?#iefix') format('embedded-opentype'),

url('fonts/KaushanScript-Regular-webfont.woff') format('woff'),

url('fonts/KaushanScript-Regular-webfont.ttf') format('truetype'),

url('fonts/KaushanScript-Regular-webfont.svg#KaushanScriptRegular') format('svg');

font-weight: normal;

font-style: normal;

}

@font-face {

font-family: 'LeagueGothicRegular';

src: url('fonts/League_Gothic-webfont.eot');

src: url('fonts/League_Gothic-webfont.eot?#iefix') format('embedded-opentype'),

url('fonts/League_Gothic-webfont.woff') format('woff'),

url('fonts/League_Gothic-webfont.ttf') format('truetype'),

url('fonts/League_Gothic-webfont.svg#LeagueGothicRegular') format('svg');

font-weight: normal;

font-style: normal;

}

/******************************************************************

LINK STYLES

******************************************************************/

a, a:visited { color: #333; text-shadow:0 1px #fff;text-decoration:none; }

a:hover, a:focus { color: #F37D01; text-decoration:none; }

a:active {} /* on click */

a:link { -webkit-tap-highlight-color : rgba(0,0,0,0); /* this highlights links on Iphones / iPads */ }

/******************************************************************

TEXT SELECTION STYLES

******************************************************************/

/* Highlighted Text */

::selection {

background: #333;

color:#fff;

text-shadow : none;

}

/* Firefox */

::-moz-selection {

background: #333;

color:#fff;

text-shadow : none;

}

/******************************************************************

HEADLINES & TITLES

******************************************************************/

h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5 { font-family:Georgia, "Times New Roman", Times, serif;color:#333;}

h1 a, .h1 a, h2 a, .h2 a, h3 a, .h3 a, h4 a, .h4 a, h5 a, .h5 a { text-decoration: none; }

h1, .h1 { font-size: 2.5em; line-height: 1.333em; }

h2, .h2 { font-size: 2.5em; line-height: 1.4em; margin-bottom: 0.375em; }

h3, .h3 { font-size: 1.3em;margin-bottom: 0.375em; }

h4, .h4 { font-size: 1.1em; font-weight: 700;margin-bottom: 0.375em; }

h5, .h5 { font-size: 0.846em; line-height: 2.09em; color:#999;font-weight:normal; }

p{line-height:1.4em;margin-bottom:5px;}

/******************************************************************

HEADER SYTLES

******************************************************************/

header[role=banner] {overflow:hidden;}

#logo { margin: 1.1em 0 9px;font-family: 'KaushanScriptRegular',Helvetica Nue, Arial, Helvetica, sans-serif;font-size:40px;text-shadow:0 6px 2px #ccc;color:#333; }

/******************************************************************

NAVIGATION STYLES

(Main Navigation)

******************************************************************/

nav[role=navigation] {float:right; margin-top:30px;font-family: 'LeagueGothicRegular',Helvetica Nue, Arial, Helvetica, sans-serif;;font-size:22px;}

nav[role=navigation] .menu {

margin:5px 0 0 10px;

}

nav[role=navigation] .menu ul {

}

nav[role=navigation] .menu ul li {

display:inline;float:left;

}

nav[role=navigation] .menu ul li a {

color: #333;

padding: 5px;

margin-right:10px;

text-decoration: none;

float:left;

text-shadow:0 0;

}

nav[role=navigation] .menu ul li a:hover {

color: #FF6000;

}

nav[role=navigation] .menu ul li:first-child a {}

nav[role=navigation] .menu ul li:last-child a {}

nav[role=navigation] .menu ul li.current-menu-item a,

nav[role=navigation] .menu ul li.current_page_item a,

nav[role=navigation] .menu ul li.current-page-ancestor a {}

/* sub menus */

nav[role=navigation] .menu ul li ul, nav[role=navigation] .menu ul li ul li ul {

position: absolute;

padding-left:10px;

left: -9999em;

top:65px;

z-index: 9999;

border:1px solid #ccc;

width:200px;

background: #fff; /* Old browsers */

}

nav[role=navigation] .menu ul li ul li ul {

margin-left: 200px;

top: auto;

margin-top: 30px;

}

nav[role=navigation] .menu ul li ul li:hover ul, nav[role=navigation] .menu ul li:hover ul {

left: auto;

}

nav[role=navigation] .menu ul li ul li a {

width: 160px;

color:#333;

border-bottom:1px solid #ccc;

border-top:1px solid #fff;

}

nav[role=navigation] .menu ul li ul li a {}

nav[role=navigation] .menu ul li ul li a:hover {color:#FF6000;}

nav[role=navigation] .menu ul li ul li:last-child a {border-bottom:0;}

nav[role=navigation] .menu ul li ul li ul.sub-menu { }

nav[role=navigation] .menu ul li ul li:hover ul.sub-menu { }

/******************************************************************

FOOTER STYLES

******************************************************************/

footer[role=contentinfo] { padding: 1.1em 0 3.3em; margin-top: 2.2em; }

/* footer menu */

footer[role=contentinfo] nav { float: left; margin: 1em 0; }

.footer-links {}

.footer-links ul { margin-top: 0; }

.footer-links ul li { list-style-type: none; float: left; font-size: 0.9em; }

.footer-links ul li a { margin-right: 10px; text-decoration: underline; }

.footer-links ul li:last-child a { margin-right: 0; }

.footer-links ul li a:hover, .nav ul li.current-menu-item a, .nav ul li.current_page_item a {}

.footer-links ul li ul.sub-menu { display: none; } /* you shouldn't have that many links in the footer anyway so it's set to display none ;P */

.attribution { margin: 1em 0; float: right; color:#333; font-size: 0.9em; }

.none{display:none;}

#inner-footer{width:940px;margin:0 auto;}

/******************************************************************

SLIDE STYLES

******************************************************************/

.intro, .mac{margin-top:20px;}

.intro h2{font:34px Georgia, "Times New Roman", Times, serif;font-style:italic;margin-top:30px;}

.intro span{color:#FF6000;}

.intro p{font-size:26px;margin-left:20px;}

.intro-button{background:url(../images/result.png) no-repeat;

float:left;

height:60px;

width:255px;

text-indent:-9999px;

border:0;

margin: 15px 19px 0 80px;

cursor:pointer;

}

.intro-button:hover{background-position: 0px -71px;transition: all 1s ease-in-out;}

/******************************************************************

PORTFOLIO STYLES

******************************************************************/

.bg{background:url(../images/bg.png) repeat;margin-top:30px;padding:10px;}

.content-main{width:940px;margin:30px auto 30px auto;background:#fff;-moz-box-shadow:0 0 4px #999;-webkit-box-shadow:0 0 4px #999;box-shadow:0 0 4px #999;padding:10px;overflow:hidden;}

.content-main-text{text-align:center;}

h3.heading {

background: url("../images/dot.png") repeat-x scroll center center transparent;

font-size: 18px;

font-weight: normal;

margin: 0 0 25px;

text-align: left;

}

h3.heading span {

background: none repeat scroll 0 0 #FFFFFF;

padding: 0 20px;

}

.content-main-work{border-bottom:1px solid #ccc;text-align:center;}

.content-main-work:hover{border-bottom:1px solid #D0ECFF;}

/******************************************************************

BLOG POST STYLES

******************************************************************/

.main-content{overflow:hidden;margin-bottom:30px;}

.border-bottom{border-bottom:1px solid #ccc;padding-bottom:5px;}

/******************************************************************

TWEETS STYLES

******************************************************************/

.tweets li{ list-style-type:none;padding:0 0 10px 35px;background: url(../images/ZkxaLL.png) left no-repeat; vertical-align:middle;}

.social li{list-style-type:none;display:inline;margin-right:20px;}

The Secret of the CSS is the 960 Grid System, if you notice some of our class is called col380, col480, col940. This is really a helpful class and can save you a lot of time, I discover this by using Bones Theme when creating wordpress themes. I hope you’ll include this on your CSS too 🙂

One more thing before we call wrap this, we need to check if we pass the W3C validator.

validator How to Create a Portfolio Web Layout in HTML / CSS

We pass! We have a warning, but it’s minor 🙂

Hope you guys learned something new about this conversion, next part is using Bones Theme to convert this into full pledge WordPress Theme. So stick around and we will cover how to create a wordpress theme on the next part.

Clean, Modern, Professional Website

How to Create a Portfolio Web Layout in HTML / CSS

This is for the header code.

Contect Section

Footer Section

CSS

2 Responses to “How to Create a Portfolio Web Layout in HTML / CSS”

Recent Posts

Howdy!

Categories

Tweets

Pin It on Pinterest

Clean, Modern, Professional Website

This is for the header code.

Contect Section

Footer Section

CSS

Related Articles

How to Create a Minimalist Coming Soon Page in Photoshop

How to Create Your Own UI Planner in Photoshop

Collection of CSS3 Generators and Tools

2 Responses to “How to Create a Portfolio Web Layout in HTML / CSS”

Like what you see? Subscribe!

Recent Posts

Pin It on Pinterest

Like what you see?
Subscribe!