Coding an Attractive Portfolio Web Design using HTML5 and CSS3

AD

This is an excellent minimalist portfolio template for designers and photographers.

About a year ago we published a tutorial to create an attractive portfolio web template and a week later we published it’s PSD Download, but we never published its HTML CSS tutorial, that’s because we weren’t focusing much on web design in those days.

Last month one of our readers requested HTML5 CSS3 tutorial of this template. I told our reader that I will publish his requested tutorial by 24th Feb… Yes, I’m more than a month late!! but not really, it wasn’t my fault.

Our webmaster suddenly decided to get married (silly guy) and he is the only one who can include a “demo” in a tutorial. So my apologies everybody,  I had this tutorial ready a month ago, but when a man decides to get married and go to honeymoon, you can’t do anything about it.

Live Preview

Free Photoshop Template

Live Preview

Head Area Code

Notice the code carefully in this tutorial because we are using a little jQuery. Rest of the stuff is pretty obvious.

<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Portfolio | Designzzz</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="style.css" type="text/css" />
<script language="javascript" type="text/javascript" src="js/jquery.js"></script> <script language="javascript" type="text/javascript" src="js/jquery.easing.js"></script> <script language="javascript" type="text/javascript" src="js/script.js"></script> <script type="text/javascript">    $(document).ready( function(){     var buttons = { previous:$('#jslidernews2 .button-previous') ,    next:$('#jslidernews2 .button-next') };     $('#jslidernews2').lofJSidernews( { interval:5000,    easing:'easeInOutQuad',    duration:1200,    auto:true,    mainWidth:684,    mainHeight:300,    navigatorHeight		: 100,    navigatorWidth		: 310,    maxItemDisplay:3,    buttons:buttons } );     }); </script>  </head>

Body and Main Container

We are covering “Main Container” in the next steps.

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

CSS of this Area

@charset "utf-8";
 /* CSS Document */
*{
   margin:0;
   padding:0;
   }
body
   {
   background:#efeeee;
   font-family:Arial, Helvetica, sans-serif;
   }

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

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

<Header> Area HTML

Check the CSS code carefully in this step.

Free Design of Photoshop Template

<header>
<div id="logo">
<p>LOGO</p>
<p class="sub-logo">PORTFOLIO LAYOUT</p>
</div>
<div id="icons">
<div class="sub-icons">
<img src="images/rss.png" alt="" />
</div>
<div class="sub-icons">
<img src="images/twitter.png" alt="" />
</div>
<div class="sub-icons">
<img src="images/fb.png" alt="" />
</div>
</div>
<nav>
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">ABOUT</a></li>
<li><a href="#">PORTFOLIO</a></li>
<li><a href="#">GALLERY</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</nav>
</header>

CSS of this Area

header
 {
 width:960px;
 height:175px;
 margin:0 auto;
 }
 #logo
 {
 width:222px;
 float:left;
 overflow:hidden;
 font-size:60px;
 color:#797777;
 margin:7px 2px;
 float:left;
 }
 .sub-logo
 {
 font-size:20px;
 color:#797777;
 }
 #icons
 {
 height:70px;
 width:195px;
 float:right;
 }
 .sub-icons
 {
 width:60px;
 overflow:hidden;
 float:left;
 }
 nav
 {
 background:url(images/feature-bg.png) repeat-x;
 height:55px;
 width:952px;
 float:left; 

 }
 nav ul
 {
 margin:0;
 padding:0;
 }
 nav ul li
 {

 width:122px;
 height:24px;
 color:#ffffff;
 list-style:none;
 float:left;
 margin:0px 18px;
 padding:14px 15px;
 font-size:21px;
 }
 nav ul li a
 {
 color:#fff;
 text-decoration:none;

 }
 a
 {
 color:#fff;
 }
 nav ul li a:hover
 {
 background:#fff;
 color:#000;
 }

<Feature> Area HTML

Now comes the jQuery part. If you are a newbie, you are destined to fumble here… don’t care about it, keep trying and you will overcome the obstacle.

Easy Tutorial of Web Layout

<div id="feature">
<div id="jslidernews2" class="lof-slidecontent" style="width:945px; height:300px;">
<div class="preload"><div></div></div>
<!-- MAIN CONTENT -->
<div class="main-slider-content" style="width:684px; height:313px; background:#000;">
<ul class="sliders-wrap-inner">
<li>
<img src="images/feature-1.jpg" alt="" >
<div class="slider-description">
<h4>Some Dummy Text</h4>
<p>Some text</p>
</p>
</div>
</li>
<li>
<img src="images/feature-2.jpg" alt="" >
<div class="slider-description">
<h4>Some Dummy Text</h4>
<p>Some text</p>
</div>
</li>
<li>
<img src="images/feature-3.jpg" alt="" >
<div class="slider-description">
<h4>Some Dummy Text</h4>
<p>Some text</p>
</div>
</li>
<li>
<img src="images/feature-4.jpg" alt="" >
<div class="slider-description">
<h4>Some Dummy Text</h4>
<p>Some text</p>
</div>
</li>
</ul>
</div>
<!-- END MAIN CONTENT -->
<!-- NAVIGATOR -->
<div class="navigator-content">
<div>
<ul class="navigator-wrap-inner">
<li>
<div>
<h3> Some Text Here</h3>
<span>Some text Here</span>
</div>
</li>
<li>
<div>
<h3> Some Text Here</h3>
<span>Some text Here</span>
</div>
</li>
<li>
<div>
<h3> Some Text Here</h3>
<span>Some text Here</span>
</div>
</li>
<li>
<div>
<h3> Some Text Here</h3>
<span>Some text Here</span>
</div>
</li>
</ul>
</div>
</div>          <!----------------- END OF NAVIGATOR --------------------->
</div>
</div>

CSS of this Area

#feature
 {
 width:945px;
 height:320px;
 margin:0 auto;
 }
.lof-slidecontent
   {
   position:relative;
   overflow:hidden;
   border:#F4F4F4 solid 1px;
   }
   .lof-slidecontent .preload
   {
   height:100%;
   width:100%;
   position:absolute;
   top:0;
   left:0;
   z-index:100000;
   text-align:center;
   background:#FFF
   }
   .lof-slidecontent  .sliders-wrapper
   {
   position:relative;
   height:100%;
   width:900px;
   z-index:3px;
   overflow:hidden;
   }
   .lof-slidecontent  ul.sliders-wrap-inner
   {
   overflow:hidden;
   background:transparent;
   padding:0px;
   margin:0;
   position:absolute;
   overflow:hidden;
   }
   .lof-slidecontent  ul.sliders-wrap-inner li
   {
   overflow:hidden;
   padding:0px;
   margin:0px;
   float:left;
   position:relative;
   }
   .lof-slidecontent  .lof-opacity  li
   {
   position:absolute;
   top:0;
   left:0;
   float:inherit;
   }

.lof-slidecontent  .navigator-content
   {
   position:absolute;
   right:0;
   top:00px;
   z-index:9;
   height:300px;
   width:310px;
   overflow:hidden;
   color:#FFF
   }
   .lof-slidecontent  .navigator-wrapper
   {
   position:relative;
   z-index:10;
   height:180px;
   width:310px;
   overflow:hidden;
   color:#FFF;
   float:left
   }
   .lof-slidecontent  ul.navigator-wrap-inner
   {
   top:0;
   padding:0;
   margin:0;
   position:absolute;
   width:100%;
   }
   .lof-slidecontent  ul.navigator-wrap-inner li
   {
   cursor:hand;
   cursor:pointer;
   list-style:none;
   padding:0;
   margin-left:0px;
   overflow:hidden;
   float:left;
   display:block;
   text-align:center;
   }
.lof-slidecontent .slider-description
   {
   z-index:100px;
   position:absolute;
   bottom:18px;
   left:0px;
   width:630px;
   background:url(images/slider.png);
   height:43px;
   padding:10px;
   color:#FFF;
   }
   .lof-slidecontent .slider-description h4
   {
   font-size: 14px;
   margin: 2px 0;
   padding: 0;
   }

/* item navigator */
   .lof-slidecontent ul.navigator-wrap-inner  li.active
   {
   background:url(images/feature-bg.png);
   color:#FFF
   }
   .lof-slidecontent ul.navigator-wrap-inner  li >  div
   {
   background:url(images/feature-bg.png);
   color:#FFF;
   height:100%;
   position:relative;
   margin-left:3px;
   Padding:10px 15px;
   text-align:left
   }
.dummy1
   {
   color: #FFFFFF;
   font-size: 18px;
   height: 23px;
   line-height: 32px;
   padding: 12px 0;
   text-align: center;
   width: 200px;
   }
   .dummy
   {
   color: #FFFFFF;
   font-size: 13px;
   height: 13px;
   line-height: 10px;
   text-align: center;
   width: 167px;
   margin-bottom:5px;
   }

“Hire Me” Area HTML

This is just a banner. You can place an offer or some latest news or anything.

HTML5-CSS3

<div id="hire">
<div class="data">
<input id="search" type="text" name="s" value="GOT SOMETHING? HIRE ME!" />
</div>
<div class="text">
<p>Hire me Dummy Text! Hire me Dummy Text! Hire me Dummy Hire me Dummy Text! Hire me
 Dummy Text! Hire me DummyHire me Dummy Text! Hire me Dummy Text! Hire me Dummy </p>
</div>
</div>

CSS of this Area

#hire
 {
 background:url(images/hire-bg.png) repeat-x;
 width:928px;
 height:74px;
 margin:0 auto 22px;
 border-radius:10px;
 padding-left:13px;
 }
 .data
 {
 width:225px;
 height:74px;
 float:left;
 }
 #search
 {
 background: none repeat scroll 0 0 #FFFFFF;
 border-radius: 5px 5px 5px 5px;
 color: #000000;
 font-family: Arial,Helvetica,sans-serif;
 height: 44px;
 margin-top: 15px;
 padding-left: 5px;
 width: 202px;
 border:none;
 text-shadow: 0 1px 2px #000000;
 font-size:15px;
 float:left;
 }
 .text
 {
 width:690px;
 height:44px;
 padding:15px 6px;
 float:left;
 }
 .text p
 {
 font-size:16px;
 color:#c4c4c4;
 }

Gallery Area HTML

We could have placed a jQuery here as well, but I decided to keep simple.

Free Tutorial of Porfolio Layout

<div id="gallery">
<div class="project">
<p> TOP PROJECTS </p>
</div>
<div class="images">
<div class="thumb">
<div class="pic">
<img src="images/img-1.png" alt="" />
</div>
<div class="pic">
<img src="images/img-2.png" alt="" />
</div>
<div class="pic">
<img src="images/img-3.png" alt="" />
</div>
<div class="pic">
<img src="images/img-4.png" alt="" />
</div>
</div>
<div class="thumb">
<div class="pic">
<img src="images/img-4.png" alt="" />
</div>
<div class="pic">
<img src="images/img-3.png" alt="" />
</div>
<div class="pic">
<img src="images/img-2.png" alt="" />
</div>
<div class="pic">
<img src="images/img-1.png" alt="" />
</div>
</div>
</div>
<div class="testimonial">
<p> TESTIMONIALS </p>
<div class="comma">
</div>
<div class="tes-text">
<p>Hire me Dummy Text! Hire me Dummy Text! Hire me Dummy Hire me Dummy Text! Hire me
 Dummy Text! Hire me DummyHire me Dummy Text! Hire me Dummy Text! Hire me Dummy </p>
</div>
<div class="name">
<p>By: Dummy Name</p>
</div>
<div class="comma1">
</div>
</div>
</div>

CSS of this Area

#gallery
 {
 background:#FFF;
 width:945px;
 height:685px;
 border:2px solid #c4c4c4;
 border-radius:13px;
 margin:0 auto;
 margin-bottom:20px;
 }
 .project
 {
 width:945px;
 height:70px;
 }
 .project p
 {
 font-size:27px;
 color:#000;
 margin:25px 45px;
 }
 .images
 {

 height: 400px;
 padding: 20px 24px;
 width: 897px;
 }
 .thumb
 {
 height: 200px;
 margin-left: 6px;
 padding: 4px 15px;
 width: 880px;
 }
 .pic
 {
 float: left;
 height: 160px;
 margin: 0 22px;
 width: 168px;
 }
 .testimonial
 {
 width:945px;
 height:100px;
 }
 .testimonial p
 {
 color: #000000;
 font-size: 23px;
 height: 25px;
 margin: 4px 45px;
 width: 173px;
 }

 .comma
 {
 background:url(images/comma-1.png) no-repeat;
 height: 25px;
 margin-left: 120px;
 width: 25px;
 }
 .comma1
 {
 background:url(images/comma-2.png) no-repeat;
 float: right;
 height: 25px;
 margin-right: 80px;
 margin-top: 11px;
 width: 25px;
 }
 .tes-text
 {
 float:left;
 margin-left: 105px;
 height:47px;
 width: 740px;
 }
 .tes-text p
 {
 color: #a2a1a1;
 font-size: 17px;
 height: 52px;
 width: 742px;
 }
 .name
 {
 float: left;
 height: 30px;
 width: 840px;
 }
 .name p
 {
 color: #666666;
 float: right;
 font-size: 19px;
 height: 21px;
 margin-right: 5px;
 width: 156px;
 }

<Footer> Area HTML

Nothing too fancy here.

Portfolio-layout

<footer>
<div id="cprt">
<p> Copyright © 2011 - Designzzz.com </p>
</div>
<div id="nav">
<ul>
<li><a href="#">Home </a>-</li>
<li><a href="#">About</a>-</li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</footer>

CSS of this Area

footer
 {
 background:url(images/hire-bg.png) repeat-x;
 width:960px;
 margin:0 auto;
 height:70px;
 border-radius:8px 8px 0px 0px;
 }
 #cprt
 {
 height: 25px;
 padding: 22px 10px;
 width: 400px;
 float:left;
 }
 #cprt p
 {
 color:#666;
 font-size:17px;
 }
 #nav
 {
 float: right;
 height: 25px;
 padding: 22px 10px;
 width: 212px;
 }
 #nav ul
 {
 margin:0px;
 }
 #nav ul li
 {
 color: #666666;
 float: left;
 font-size: 18px;
 list-style: none outside none;
 padding: 0 6px;
 }
 #nav ul li a
 {
 color: #666666;
 text-decoration:none;
 }
 #nav ul li a:hover
 {
 color:#fff;
 }

Done

Free Photoshop Template

Live Preview

create free website wix below post

Further Related Readings

Comments
  1. July July 30, 2012 at 2:00 am

    I do consider all the concepts you have presented in your post. They are very convincing and will definitely work. Still, the posts are too quick for starters. May you please prolong them a little from subsequent time? Thanks for the post.

  2. roldhan August 21, 2012 at 11:16 am

    hi can i get the source code of that ? 🙂

    1. Tayyab August 21, 2012 at 1:15 pm

      This is the source code… I believe you are looking for PSD file Download. You can find the link for PSD and Photoshop tutorial in the description of this tutorial. Just check out the text in the beginning.

Comments are closed.

Copyrights © 2016 - Designzzz. All Rights Reserved