Create Portfolio Website With CSS/jQuery

Posted by 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, 25 Male from india, now working as freelance web designer. You can follow him on twitter @acrisdesign

93 Comments

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

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

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

  4. Thanks mate nice info, will be useful me , and i am following you in twitter for important updates

  5. [...] 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, [...]

  6. Great collection of code. This is just what I needed. Thanks for sharing.

  7. [...] 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. [...]

  8. [...] Create Portfolio Website With CSS/jQuery [...]

  9. [...] Create Portfolio Website With CSS/jQuery [...]

  10. thank you for the good info, you need to post more often though! lol

  11. [...] 5.Create Portfolio Website With CSS/JQuery [...]

  12. [...] Create Portfolio Website with CSS/jQuery [...]

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

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

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

  16. Awesome work :)

  17. cheers for the demo and the code provided will give it ago.and will leave my comments once i get it up and running.


  18. GI

    Great tutorial, great ideas. Keep it up!

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

  20. 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!!!

  21. 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!

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

  23. 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?

  24. [...] 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 [...]

  25. [...] Create Portfolio Website With CSS/jQuery [...]

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

  27. Awesome, thanks for sharing your codes. I really appreciate it and I learned a lot also :)

  28. Thanks for posting, I’ve found lots of useful bits and pieces I Need

  29. Thanks,

    Nice to know about

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

  31. Thanks for this tutorial! This will definitely help!!!

  32. Sites we Like……

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

  33. Thanks for this article post. We can somehow try these codes and apply in our website.

  34. Sites we Like……

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

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

  36. thanks for sharing your codes

  37. website is very useful in any business

  38. Awesome website…

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

  39. Visitor recommendations…

    [...]one of our visitors recently recommended the following website[...]……

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

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

Leave a Reply

Comment moderation is enabled. Your comment may take some time to appear.