Create Portfolio Website With CSS/jQuery

Posted by Vikas Ghodke on March 16th in Tutorials.

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 suited for any shared hosting, 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;
}

Do you want to clear the HP2-Z21 exam successfully in the first attempt? How to achieve this? Exams King has released the most up-to-date practice questions for HP2-H18 and HP2-B71 Exams, which are useful and valuable for you to prepare the exam well.
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
We offer up to date testking 642-655 practice questions with self paced test engine to help you pass 642-661 exam. You can complete your certifications with 642-681 exam product, 70-642 braindumps and 640-864 dumps.

Vikas Ghodke

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

93 Comments

jitendra vyas

Portfolio sites should be visible if js is disabled. which is not with this demo.
Ultrasound Technician

I surely will be trying code given you , can i see demo , how it will looks after following your instructions .
Daily File

The put up is actually the freshest on this treasured topic. I concur with your conclusions and can eagerly look forward to your future updates. Saying thanks is not going to just be sufficient, for the great lucidity in your writing.
Dental Technician

Thanks mate nice info, will be useful me , and i am following you in twitter for important updates
Portfolio CSS Tutorials and Free WordPress Themes

[...] Themes, that should definitely be added to your bookmarks.Portfolio CSS Tutorials and Source CodesCreate Portfolio Website With CSS/jQueryDemo | DownloadBuild a Sleek Portfolio Site from ScratchDemo | DownloadWaterColored Portfolio Coded, [...]
Brett Widmann

Great collection of code. This is just what I needed. Thanks for sharing.
Créer un Site Portfolio avec avec CSS / jQuery | CodesScripts.fr

[...] Après la lecture de la vidéo, vous trouverez le « Portfolio » prêt à l’emploi, à télécharger. En revanche, je pense qu’il n’est pas inutile d’étudier les sources, notamment celles du CSS, et celles du JavaScript « jQuery », en vous rendant sur le tutoriel réalisé par son auteur. [...]
60个有用的jQuery教程

[...] Create Portfolio Website With CSS/jQuery [...]
2010年60有用的jQuery教程 | ued二区

[...] Create Portfolio Website With CSS/jQuery [...]
remote backup

thank you for the good info, you need to post more often though! lol
35个学习jQuery必备教程 « CHENCHUNLIN博客

[...] 5.Create Portfolio Website With CSS/JQuery [...]
25 jquery教程 | ued二区

[...] Create Portfolio Website with CSS/jQuery [...]
Medical Assistant

great collection of codes,very useful for me for designing my own website theme .thanks for sharing
regards
Carlo

Thanks for this wonderful info. I’ve been searching for instructions on making a portfolio website using css. Thanks for sharing!
New to Web Design

Thanks for the selection of codes- you’ve given a variety of instructions to creating a portfoio website using css. Thanks again
live betting

Awesome work
assistant medical

cheers for the demo and the code provided will give it ago.and will leave my comments once i get it up and running.
30+ Best JQuery Tutorials | Best Wordpress Host

[...] View Tutorial [...]
GI

Great tutorial, great ideas. Keep it up!
best weed killer

Great blog! Is your theme custom made or did you download it from somewhere? A theme like yours with a few simple adjustements would really make my blog shine. Please let me know where you got your design. Bless you
webmaster forum

Nice work Vikas and do like the pattern of your post. I am not a web designer but i have created a portfolio with your code…Great Work!!!
Perth Website Designers

It’s a shame you don’t have a donate button! I’d certainly donate to this fantastic blog! I suppose for now i’ll settle for book-marking and adding your RSS feed to my Google account. I look forward to brand new updates and will share this site with my Facebook group. Chat soon!
Melissa

Great info you’ve got here! It really helps me out as my resources for web designing. Keep up the Good Work!
SEO Consultants

I’m really enjoying the theme/design of your blog. Do you ever run into any web browser compatibility problems? A small number of my blog visitors have complained about my blog not operating correctly in Explorer but looks great in Safari. Do you have any suggestions to help fix this issue?
60 Useful JQuery Tutorials From 2010 | AcrisDesign

[...] with jQueryAnimated Landscape Using CSS and jQueryJquery Tutorial : Toggle Effect on Hover/ClickCreate Portfolio Website With CSS/jQueryCreate animated vertical Menu Using JqueryA Fresh Bottom Slide Out Menu with jQuerySliding Panel [...]
Jquery Lessons Collections | Gembrot Image Wallpaper Texture Design and SEO Service

[...] Create Portfolio Website With CSS/jQuery [...]
22 Articles and Tutorials for Getting Started with jQuery | SEO FOR WEBSITES

[...] Create Portfolio Website With CSS/jQuery [...]
Jarod Online

Thanks for the tutorial; and for a little more jQuery effort, I added this code:

$(‘#slider .inslider’).hover(function() {
clearInterval(play);
}, function() {
rotation();
});

If you mouse over the .inslider container, it makes the slider pause; but if you mouse off the .inslider container, the slider continues to rotate.
perth web design

Awesome, thanks for sharing your codes. I really appreciate it and I learned a lot also
Alan Cliffe

Thanks for posting, I’ve found lots of useful bits and pieces I Need
Omar Bob

Thanks,

Nice to know about
Phlebotomy courses

I will implement this code on my new websites.
Lets see how it looks after adding up this code.
phlebotomy

Thanks for this tutorial! This will definitely help!!!
interview coaching

Sites we Like……

[...] Every once in a while we choose blogs that we read. Listed below are the latest sites that we choose [...]……
Bali Villas

Thanks for this article post. We can somehow try these codes and apply in our website.
Secrets Of Successful Traders

Sites we Like……

[...] Every once in a while we choose blogs that we read. Listed below are the latest sites that we choose [...]……
diving with whale sharks

CSS and javascript are 2 of the factors of a beautiful website design. This is really nice advice!
plots in Hosur

thanks for sharing your codes
plots in Hosur

website is very useful in any business
Seksilelut

Awesome website…

[...]the time to read or visit the content or sites we have linked to below the[...]……
Commission Autopilot

Visitor recommendations…

[...]one of our visitors recently recommended the following website[...]……
cell phone cases for iphone 4

Appreciating the hard work you put into your site and detailed information you provide Its nice to come across a blog every once in a while that isnt
Life Insurance

jQuery is a very powerful method. This is a very useful tutorial, I love doing CSS. This will help me alot.