Create Portfolio Website With CSS/jQuery

Vikas Ghodke In Tutorials

March 16th | 47 Comments

Create portfolio website with css/jquery

Since last some weeks i have started learning jQuery, and today i thought why not give a tutorial on jquery and css. So i come up with this amazing tutorial (amazing for me atleast), which uses only pure CSS and jQuery to design a whole portfolio website, no photoshop or any other design software required. Here we go…

CHECK OUT DEMO

Step 1 : HTML Documentation

First of all we need to document our html page, so we need on container which holds all other div elements likes header, slider, content and footer.

Create Portfolio website with css jquery
<div id="wrapper">
<div id="header">
<div id="logo">
<h1>AcrisDesign</h1>
</div>
<div id="nav">
      <!-- Navigation --></div>
</div>
<div id="slider">
  <!-- slider --></div>
<div id="content">
  <!-- Content below slider --></div>
</div>

Step 2 : Header

There are two elements in header 1.) Logo and 2.) Navigation. Below is the HTML code for Header.

<div id="header">
<div id="logo">
<h1>AcrisDesign</h1>
</div>
<div id="nav">
<ul>
      <!-- List the navigation items with class vtip coz we are going to customize the look of title -->
	<li><a class="vtip" title="Welcome Home" href="#">Home</a></li>
	<li><a class="vtip" title="Want to know about us ?" href="#">About Us</a></li>
	<li><a class="vtip" title="Check out our previous Work" href="#">Portfolio</a></li>
	<li><a class="vtip" title="Have a question? Then ask us." href="#">Contact Us</a></li>
</ul>
</div>
</div>

Now we need to style our Logo and Navigation. Below is the CSS code for Styling header.

#wrapper {
	width:960px;
	margin-left:auto;
	margin-right:auto;
	overflow:hidden;
}
#header {
	margin-top:30px;
	margin-bottom:30px;
	width:960px;
	overflow:hidden;
}
#logo {
	width:460px;
	float:left;
	margin-left:20px;
}
#logo h1 {
	font-size:42px;
	font-family:Georgia, "Times New Roman", Times, serif;
	color:#353c47;
	text-shadow: 0px 2px 1px #7d7c7c;
}
#nav {
	margin-right:20px;
	float:right;
	font-size: 15px;
	position: relative;
}
 
#nav ul {
	background-color:#fafafa;
	border: 1px solid #a9a9a9;
	/* Rounder Corner */
	-moz-border-radius: 7px;
       -webkit-border-radius: 7px;
	-khtml-border-radius: 7px;
	height: 55px;
	padding: 0;
}
 
#nav ul li {
	display: inline;
	float: left;
	height: 16px;
	margin: 9px 10px 0 10px;
	padding: 10px 16px;
}
 
#nav ul li a {
	color:#243953;
	text-decoration:none;
	outline:none;
}
#nav ul li:hover {
	background: #F90;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	-khtml-border-radius: 6px;
}

Now here we are going to have a cutomized attribute, so you need to first download vertigo project : Vtip from there site. And after downloading VTIP lets link vtip.js to our main html document. Before that you need to link jquery script, there are two ways to do this one go to jquery official site and download the file or you can directly link it from google. Check out below code.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js" type="text/javascript"><!--mce:0--></script>
<script src="vtip.js" type="text/javascript"><!--mce:1--></script>

Step 3 : Slider

Now slider portion, we have to follow 3 steps to get slider working 1. HTML 2. Styling with CSS 3. Use of jquery for slider to work.

Step 4 : Slider (HTML)

<div id="slider">
<div class="inslider">
    <!-- Imageholder will hold images -->
<div class="imageholder">
<div class="imgslider">
        <img src="img1.jpg" alt="" />
        <img src="img2.jpg" alt="" />
        <img src="img3.jpg" alt="" />
        <img src="img4.jpg" alt="" /></div>
</div>
<!-- Navigation for image slider -->
<div class="imagenav">
      <a rel="1" href="#">1</a>
       <a rel="2" href="#">2</a>
       <a rel="3" href="#">3</a>
       <a rel="4" href="#">4</a></div>
</div>
</div>

Step 5: Slider (CSS)

#slider {
	background-color:#fafafa;
	position:relative;
	padding:20px;
	overflow:hidden;
	border: 1px solid #a9a9a9;
	-moz-border-radius: 7px;
    -webkit-border-radius: 7px;
	-khtml-border-radius: 7px;
}
.inslider {
	float: left;
	position: relative;
}
.inslider a {
	text-decoration:none;
}
.imageholder {
	border: 1px solid #a9a9a9;
	height:300px;
	width: 920px;
	overflow: hidden;
	position: relative;
}
.imgslider {
	position: absolute;
	top: 0; left: 0;
}
.imgslider img {
	float: left;
}
.imagenav {
	position: absolute;
	bottom: 10px; right: 10px;
	 height:30px;
	z-index: 100;
	text-align: center;
	line-height: 30px;
	border: 1px solid #a6c9e2;
	background-color: #fff;
	border: 1px solid #a6c9e2;
	-moz-border-radius: 5px;
	-khtml-border-radius: 5px;
	-webkit-border-radius: 5px;
}
.imagenav a {
	padding: 5px;
	text-decoration: none;
	color: #333;
}
.imagenav a.active {
	font-weight: bold;
	background: #F90;
	-moz-border-radius: 5px;
	-khtml-border-radius: 5px;
	-webkit-border-radius: 5px;
}

Step 6 : Slider (jQuery)

First of all create a new js file and link it in html document.

<script src="slider.js" type="text/javascript"><!--mce:2--></script>

Now here are the code which you need to follow to run slider properly. We have explained every line of code below.

$(document).ready(function() {
//Activate First Link
$(".imagenav a:first").addClass("active");
//width of a single image
var imgwidth = $(".imageholder").width();
//Total number of images
var totalimg = $(".imgslider img").size();
//Total width of all images
var allimgwidth = imgwidth * totalimg;
//Imgslider to new size which we got in above step
$(".imgslider").css({'width' : allimgwidth});
//Now right a new function for slide and slide navigation
rotate = function(){
//Number of times we need to slide
var slideid = $active.attr("rel") - 1;
//Set the distance which image needs to slide
var slidedistance = slideid * imgwidth;
//Remove active class
$(".imagenav a").removeClass('active');
//Add Active Class
$active.addClass('active');
//Slider Animation
$(".imgslider").animate({
        left: -slidedistance
    }, 500 );
}; 
 
//Set Time for Rotation of slide
rotation = function(){
play = setInterval(function(){
//Next slide nav
$active = $('.imagenav a.active').next();
if ( $active.length === 0) {
//Move to first slide nav
$active = $('.imagenav a:first');
}
rotate();
//Timer speed 5 sec
}, 5000);
};
//Run rotation fuction
rotation();
$(".imagenav a").click(function() {
$active = $(this);
clearInterval(play);
rotate();
rotation();
return false;
});
});

Step 7 : Content Box

Now this is simple just follow the HTML and CSS for the content BOX

<div id="content">
<div id="box1">
<div id="inbox1">
<h2>Our Services</h2>
Since last two months there are plenty of well written photoshop tutorials has been posted on various blogs so we selected some of our personal favourite tutorials.</div>
</div>
<div id="box2">
<div id="inbox2">
<h2>Our Services</h2>
Since last two months there are plenty of well written photoshop tutorials has been posted on various blogs so we selected some of our personal favourite tutorials.</div>
</div>
<div id="box3">
<div id="inbox3">
<h2>Our Services</h2>
Since last two months there are plenty of well written photoshop tutorials has been posted on various blogs so we selected some of our personal favourite tutorials.</div>
</div>
</div>

#content {
	margin-top:20px;
	width:960px;
	margin-left:auto;
	margin-right:auto;
	background-color:#fafafa;
	border: 1px solid #a9a9a9;
	-moz-border-radius: 7px;
    -webkit-border-radius: 7px;
	-khtml-border-radius: 7px;
	overflow:hidden;
}
#content h2 {
	padding-bottom:3px;
	font-size:16px;
	font-family:Verdana, Geneva, sans-serif;
	color:#F90;
	border-bottom: 1px solid #CCC;
}
#content p {
	padding:5px;
	color: #243953;
	font-size:14px;
	line-height: 18px;
}
#box1 {
	width:320px;
	float:left;
}
#inbox1 {
	padding:20px;
}
#box2 {
	width:320px;
	float:left;
}
#inbox2 {
	padding:20px;
}
#box3 {
	width:320px;
	float:left;
}
#inbox3 {
	padding:20px;
}

Step 8 : Footer

<div id="footer">
 
©2010 | AcrisDesign. All Rights Reserved</div>

#footer {
	width:960px;
	height:40px;
	margin-left:auto;
	margin-right:auto;
	margin-top:20px;
	margin-bottom:20px;
	background-color:#fafafa;
	border: 1px solid #a9a9a9;
	-moz-border-radius: 7px;
    -webkit-border-radius: 7px;
	-khtml-border-radius: 7px;
	overflow:hidden;
	color: #243953;
}

DEMO

Navigation and Slider has been inspired from.

Create A Floating Navigation Using HTML, CSS and jQuery

Automatic Image Slider w/ CSS & jQuery
The 642-655 preparation guide by actualtests include all the tips and tricks that one must has to learn to successfully pass 642-661 exam. We assure you that invaluable 642-681 practice questions and answers will certainly help you to prepare and improve hands on knowledge in simple and easy way.

Author : Vikas Ghodke

Vikas ghodke, 21 Male from india, now working as freelance web designer. You can follow him on twitter @acrisdesign

47 Responses to “Create Portfolio Website With CSS/jQuery”

Burton HNynes says:

March 16, 2010 at 8:34 pm

I Really like this post! Keep up the good work! Professional Online Modeling Portfolios – http://www.helixfire.com
uberVU - social comments says:

March 17, 2010 at 2:01 am

Social comments and analytics for this post…

This post was mentioned on Identica by webentdecker: Create Portfolio Website With #CSS/jQuery | AcrisDesign http://allto.de/3v…
Seraph says:

March 17, 2010 at 3:57 am

nice tutorial Vikas. and thanks for the link it’s nice to see my tut was useful
Ahmed Bolica says:

March 17, 2010 at 7:03 am

really amazing
Hian Battiston says:

March 17, 2010 at 7:09 am

Nice tutorial, thanks!
Russell Bishop says:

March 17, 2010 at 7:14 am

“which uses only pure CSS and jQuery to design a whole portfolio website, no photoshop or any other design software required”

You really should have tried using photoshop. I don’t think anyone ever should have a “portfolio” that looks anything like that.
Vikas Ghodke says:

March 17, 2010 at 7:19 am

@ Russell Bishop

Lol yeah i m totally agree with your point. But this article teaches you some jquery and Css tricks, to achieve some cool effect. Yeah i knw we are in creative world no one wants a simple looking portfolio, but the main moto behind this tutorial is just to show some nice techniques of css and jquery. Anyways thank you for your response.

@ Hian Battistion, Ahmed Bolica, Seraph

Thank You guyz for your comment.
Richie says:

March 17, 2010 at 7:57 am

Cool Stuff, Vikas. Your articles really mean business
Jonah Generalao says:

March 17, 2010 at 10:11 am

Your site is one of my best blogs I’ve ever seen so far and man , I tell ya , I’ve seen a lot of great informational blogs. I’m glad that i found such great news here. Keep up the good work dude.
Benjamin Rama says:

March 17, 2010 at 11:04 am

good stuff – you realy know your stuff with code thx
Jenna Molby says:

March 17, 2010 at 12:40 pm

Great tutorial!!
free stuff says:

March 17, 2010 at 1:18 pm

Thanks from sweden for this post
Create Portfolio Website With CSS/jQuery | AcrisDesign | PhotoshopDaily.info says:

March 17, 2010 at 1:32 pm

[...] Go here to read the rest: Create Portfolio Website With CSS/jQuery | AcrisDesign [...]
CSS Brigit | says:

March 17, 2010 at 1:58 pm

…

Amazing tutorial which uses only pure CSS and jQuery to design a whole portfolio website….
Mihai O. says:

March 17, 2010 at 7:43 pm

Great tut!
Create Portfolio Website With CSS/jQuery | AcrisDesign | Photoshop Blog says:

March 17, 2010 at 8:57 pm

[...] Read more: Create Portfolio Website With CSS/jQuery | AcrisDesign [...]
Create Portfolio Website With CSS/jQuery | AcrisDesign « Tutorials4web.in Blogs says:

March 17, 2010 at 10:14 pm

[...] View original post here: Create Portfolio Website With CSS/jQuery | AcrisDesign [...]
Create Portfolio Website With CSS/jQuery | AcrisDesign » KHMER855.COM says:

March 18, 2010 at 12:12 am

[...] The rest is here: Create Portfolio Website With CSS/jQuery | AcrisDesign [...]
網站製作學習誌 » [Web] 連結分享 says:

March 18, 2010 at 5:15 am

[...] Create Portfolio Website With CSS/jQuery [...]
Create Portfolio Website With CSS/jQuery | AcrisDesign » WB Tips says:

March 18, 2010 at 6:33 am

[...] Go here to read the rest: Create Portfolio Website With CSS/jQuery | AcrisDesign [...]
links for 2010-03-18 | Blogmunk says:

March 18, 2010 at 7:08 am

[...] Create Portfolio Website With CSS/jQuery | AcrisDesign (tags: tutorial webdesign jquery css) [...]
can anyone explain to me the signs/symptoms of rheumatoid arthritis? | Treating Arthritis says:

March 18, 2010 at 8:23 am

[...] M&#1072k&#1077 Portfolio Website W&#1110t&#1211 CSS/jQuery | AcrisDesign [...]
Create Portfolio Website With CSS/jQuery | AcrisDesign | pitchrplnt.com says:

March 19, 2010 at 10:53 am

[...] Go here to see the original: Create Portfolio Website With CSS/jQuery | AcrisDesign [...]
85+ Fresh Articles to Inspire and help Designers and Developers | tripwire magazine says:

March 19, 2010 at 1:24 pm

[...] Create Portfolio Website With CSS/jQuery [...]
Create Portfolio Website With CSS/jQuery » DesignYelp – yelp and design says:

March 19, 2010 at 2:02 pm

[...] http://acrisdesign.com/2010/03/create-portfolio-website-with-cssjquery/ Tagsadvertising are art Below bunch campaign Chrome CMS code com community company computer contest day Digital distro doubt Flash form framework Free Friedman Google group impasto introduction landscape magazine message marketplace noisy painting Photoshop Print reader SmashingMagazine software success tablet Twitter Ubuntu Vitaly watercolor Web work Galaus.com © 2010 [...]
Souvik says:

March 21, 2010 at 11:12 am

Vikas my bro…

Really after a long time saw a good tutorial…
I am definitely sure it will gonna help many people with myself…

Thanx for engaging my eyes in that tutorial …

BTW Happy Engagement in advance
This Weeks Twitter Design News Roundup N.29 · rogdykker says:

March 23, 2010 at 4:52 am

[...] Design Tutorial:Create Portfolio Website With CSS/jQuery ( via acrisdesign.com [...]
The 60+ Best of the Design Web Links, Winter 2010 - Flash Web Design and Design Photography | DesignOra says:

March 23, 2010 at 5:14 am

[...] Create Portfolio Website With CSS/jQuery [...]
DynamicDesign says:

March 23, 2010 at 5:19 am

This is very neat and detailed. Expect more from you!
This Weeks Twitter Design News Roundup N.29 | Web Development News says:

March 23, 2010 at 11:04 am

[...] Design Tutorial:Create Portfolio Website With CSS/jQuery ( via acrisdesign.com [...]
This Weeks Twitter Design News Roundup N.29 | Yooxe says:

March 23, 2010 at 11:38 am

[...] Design Tutorial:Create Portfolio Website With CSS/jQuery ( via acrisdesign.com [...]
This Weeks Twitter Design News Roundup N.29 | DesignerLinks | Home to Web design news, jQuery Tutorials, CSS tutorials, Web Designing tutorials, JavaScript tutorials and more! says:

March 23, 2010 at 5:07 pm

[...] Design Tutorial:Create Portfolio Website With CSS/jQuery ( via acrisdesign.com [...]
25 Flash Website Galleries for Inspiration » DesignYelp – yelp and design says:

March 26, 2010 at 9:44 am

[...] Flash Website Galleries for Inspiration As i said earlier in our previous article Create Portfolio website in CSS/jQuery that i am learning jQuery since last some weeks. There are lots of tutorials over internet about [...]
pharmacy tech says:

March 29, 2010 at 12:32 pm

nice post. thanks.
Palmer Bohart says:

April 1, 2010 at 4:11 am

Hey very nice blog!! Man .. Beautiful .. Amazing .. I will bookmark your blog and take the feeds also…
25 Best Posts of the Design Community-March 2010 | says:

April 2, 2010 at 2:14 am

[...] 2.Create Portfolio Website With CSS/jQuery [...]
online education says:

April 2, 2010 at 11:31 pm

I was just browsing around the web while doing some homework and discovered your site, good stuff you have here thanks for the info.
11 Fresh Portfolio Design Tutorials says:

April 4, 2010 at 6:45 pm

[...] 5.Create Portfolio Website With CSS/jQuery [...]
zubyr sota says:

April 5, 2010 at 2:43 am

amezing…..
Kari Yacovone says:

April 12, 2010 at 4:08 am

Good blog, many amusing points. I think three of days ago, I have discovered a similar article.
jesus cross says:

April 21, 2010 at 11:24 pm

I loveyour post. I’ll keepon reading your post regulary.
yogeshs says:

May 17, 2010 at 12:22 am

Not working in IE.
35 jQuery Tutorials You Must Know | AcrisDesign says:

May 17, 2010 at 8:51 am

[...] Create Portfolio Website With CSS/jQuery [...]
これだけは知っておきたいjQueyチュートリアル35選 | しぶりび通信 says:

May 19, 2010 at 2:41 am

[...] 5.Create Portfolio Website With CSS/jQuery [...]
Top 30+ jQuery Tutorials You Might Not Know says:

May 26, 2010 at 9:53 pm

[...] Create Portfolio Website With CSS/jQuery [...]
jQuery: 35 tutoriales | Diseño web, accesibilidad, usabilidad, posicionamiento y optimización web says:

June 16, 2010 at 11:16 am

[...] Crear un portfolio con CSS/jQuery [...]
Hormigon says:

July 6, 2010 at 2:52 am

Thank you very much, I´ve been looking for something like this.

Hormigon