Create An eCommerce Site Inspired By Groupon With JQuery Slider (Part 2)

Create An eCommerce Site Inspired By Groupon With JQuery Slider (Part 2)
  • 6 April 2011
  • Tutorials
  • This post was written exclusively for PV.M Garage by Mohammad Jeprie
  • Comments (7)»

In this tutorial, we will code the PSD eCommerce site from the first tutorial. We will learn some neat web design techniques, from simple background replacement with CSS to slide form using jQuery. This design is my collaboration with an Indonesian web designer and developer, Aris FM.

Setting Up Files

First thing to do is set up the files and folders. Create a new folder in your PC and name it kupon. Inside folder kupon, create slider.html, index.html, style.css, and another folder named images. We also need jQuery library for the sliding animation, we can get it from jQuery.com or Google Libraries API. Simply download it to our template directory. Below, you can see current file structure.

Create an eCommerce Site Inspired with JQuery Slider Inspired from Groupon (Part 2)

Step 1 – Create Basic HTML Markup

In this tutorial we’ll use HTML5 for our markup. Open slider.html in your favorite code editor. Add these codes:

<!DOCTYPE html>
<html lang="en">
<head>
 <title>Kupon | this is awesome</title>

</head>
<body id="slider">

</body>
</html>

Inside the <head> tag we need to add this 2 lines of code to reference our main stylesheet and jquery library.

<link href="style.css" media="screen" rel="stylesheet" type="text/css">
<script src="jquery.min.js" type="text/javascript"></script>

Because we use HTML5 markup, we need to add an IE hack to enable HTML5 elements on IE 8 or below. We’ll use Modernizr script from http://www.modernizr.com/ to accommodate IE. We also need unitpngfix.js from to fix PNG transparency in IE 6. Grab unitpngfix.js from Unit Interactive. Download both files to template directory. Below is our current file structure.

Create an eCommerce Site Inspired with JQuery Slider Inspired from Groupon (Part 2)

Add this code before </head> tag.

<!--[if IE]>
 <script src="modernizr-1.7.min.js"></script>

<![endif]-->
<!--[if lt IE 7]>
 <script type="text/javascript" src="unitpngfix.js"></script>
<![endif]-->

Step 2 – Creating Basic Structure

Before we begin, we need to understand the structure of HTML/CSS template from PSD mockup. The slider template is very simple, it consists only header and form. The form is then divided into 2 elements, form_1 and form_2. Below is our basic structure:

<div id="wrapper">

 <header id="slide">
 </header>
 <form action="index.html" id="register" method="post">
 <section class="form form_1">
 </section><!--End form 1-->
 <section class="form form_2 formhide">

 </section>
 </form>
</div>

As you can see, we’re holding all main sections of the template within #wrapper container. This will help centered the layout easily.

Step 3 – Background

Now we need to slice out the background from the PSD mockup. Open kupon sliding.psd in photoshop and hide all layers except the group layer background. Select the crop tool and create this selection:

Create an eCommerce Site Inspired with JQuery Slider Inspired from Groupon (Part 2)

Hit Alt + Shift + Ctrl + S or click File > Save for Web and Devices. Save it as JPEG, and name it bg_slider.jpg.

Now open style.css and add this code :

body#slider{
 background:url(images/bg_slider.jpg) no-repeat 350px 0 #be58d5;
 border-top:10px solid #0b0b0b;
 font:13px/1.5 helvetica, sans-serif;
 margin:0;
 overflow:hidden;
}

Here we’re attaching the background image to the <body> of the HTML document and adjust its position 350px from the x-axis. We have also created a 10px line at the top. If you open slider.html in the web browser, you should see something like this:

Create an eCommerce Site Inspired with JQuery Slider Inspired from Groupon (Part 2)

Step 4 – Logo

Let’s slice up the logo. Make sure you haven’t close photoshop. Create a 167px and 375px selection like this with crop tool:

Create an eCommerce Site Inspired with JQuery Slider Inspired from Groupon (Part 2)

After that, hide all layers except the group layer logo and hit Alt + Shift + Ctrl + S or click File > Save for Web and Devices. Save as PNG-24 and name it header.png.

Create an eCommerce Site Inspired with JQuery Slider Inspired from Groupon (Part 2)

Now we get back to our HTML/CSS. We’ll use an <h1> tag and <a> tag inside <h1> to make the logo clickable. Place these elements inside <header> element. Let’s write this code:

<h1 id="logo">
 <a href="#">Kupon</a>
</h1>

Make sure the code is placed between <header id=”slide”> and </header>.

Add styles to the logo, we will turn our <h1> element to a block element and float it to the right. We’ll use a method called CSS Background Image Replacement to change <h1> text into an image. We’ll also style the <header> element with -10px margin-top to put it in front of the top background border. Here is the code:

#slider header{margin-top:-10px;}
#logo{
 background: url(images/header.png) no-repeat;
 float:right;
 height: 167px;
 width: 375px;
 margin:0;
}
#logo a{
 height:100%;
 width:100%;
 display:block;
 text-indent:-9999px;
}

Here’s what we have now:

Create an eCommerce Site Inspired with JQuery Slider Inspired from Groupon (Part 2)

Step 5 – Site Description

Return to Photoshop again. Create a selection around the site description text using crop tool. After that, make sure you hide all layers except the site description text layer

Create an eCommerce Site Inspired with JQuery Slider Inspired from Groupon (Part 2)

Save file for the web as PNG-24 file and name it desc.png.

Back to HTML/CSS. Add following code below the </h1> tag and above the </header> tag.

<img alt="this is the site description" class="description" src="images/desc.png" />

Now let’s adding style. The site description will have 60px margin from top and bottom.

.description{
 margin:60px 0;
}

Create an eCommerce Site Inspired with JQuery Slider Inspired from Groupon (Part 2)

Step 6 – First Form

Next, we will create main part of the content, the form. Let’s return to Photoshop again. Hide form_2 layer group then make selection using crop tool like this:

Create an eCommerce Site Inspired with JQuery Slider Inspired from Groupon (Part 2)

Then hide all layers except step_number layer group inside form_1 layer group. Hit Alt + Shift + Ctrl + S or click File > Save for Web and Devices. Save it as PNG-24, and name it step_1.png.

Now let’s create the continue button. Create a selection like image below using crop tool.

Create an eCommerce Site Inspired with JQuery Slider Inspired from Groupon (Part 2)

Hide all layers except continue layer group. Save it for the web as PNG-24 and name it continue_button.png.

Create an eCommerce Site Inspired with JQuery Slider Inspired from Groupon (Part 2)

Return to HTML/CSS. The first form will be placed inside <section class=”form form_1″>. As you can see, this element consist of 2 classes, form and form_1. The form class is used as global styles of all form, and form_1 is used to style the first form. Inside <section> tag, create a div called form_container.

<div class="form_container">
</div>

Now let’s add some styles. We will add 10px rounded corner and box shadow outside the form. Add this code to style.css:

.form{
 border-radius:10px;
 -moz-border-radius:10px;
 -webkit-border-radius:10px;
 box-shadow:3px 3px 5px #000;
 -moz-box-shadow:3px 3px 5px #000;
 -webkit-box-shadow:3px 3px 5px #000;
 background:#fff;
 position:relative;
 top:20px;
 left:10%;
 width:470px;
 margin:0;
 padding:10px;
}
.form_container{padding:10px}

Now we’ll create the step number into our form. Add a div called step inside the form_container div, then inside div step add the number image.

<div class="step">
<img alt="Step 1 of 2" src="images/step_1.png"/>
</div>

The step number is floated on left side of the form. To do that, write this code into style.css:

.step{float:left}

Then create a <fieldset> below the step div. Inside the <fieldset> we’ll add an <h2> tag and <select> tag. Then we’ll place some <option> inside <select>.

<fieldset>
<h2>Confirm your city :</h2>
<select id="select_location" name="Location">
<option value="jakarta">Jakarta</option>
<option value="kuala-lumpur">Kuala Lumpur</option>
<option value="miami">Miami</option>

<option value="singapore">Singapore</option>
<option value="bangkok">Bangkok</option>
<option value="shanghai">Shanghai</option>
</select>
</fieldset>

Add these styles:

fieldset{
 border:none;
 margin:0;
 padding:0 0 20px 20px;
 }
 fieldset h2{
 font:40px/700 Georgia,Serif;
 color:#8d8a8a;
 line-height:1;
 margin:10px 0 20px;
 }
 select,input{
 border:1px solid #adadad;
 font-size:14px;
 width:290px;
 margin:0;
 padding:8px;
 }

Now, we’ll create button for the first form. Add a div called button below </fieldset>. Inside button div, add an <a> tag called button_1.

<div class="button">
 <a class="button_1" href="#" id="step_one" onclick="; return false;">Continue</a>
 </div>

Let’s add styles for the button.

.button{
 background:#e1cde2;
 border-radius:10px;
 -moz-border-radius:10px;
 -webkit-border-radius:10px;
 height:60px;
 line-height:60px;
 position:relative;
 padding:5px;
 }
 .button_1{
 background:url("images/continue_button.png") no-repeat;
 float:right;
 height:57px;
 width:172px;
 margin-top:3px;
 text-indent:-9999px;
 }

Here’s our first form:

Create an eCommerce Site Inspired with JQuery Slider Inspired from Groupon (Part 2)

Step 7 – Second Form

We’re done with the first form. Now let’s create our second form. Move to PSD file again. Show form_2 layer group and hide form_1 layer group. Create a selection with crop tool as shown below.

Create an eCommerce Site Inspired with JQuery Slider Inspired from Groupon (Part 2)

Then hide all layers except step_number layer group. Save it for the web as PNG-24 and name it step_2.png. Now slice up the continue button for the second step. Create selection using crop tool as seen below.

Create an eCommerce Site Inspired with JQuery Slider Inspired from Groupon (Part 2)

After done cropping, hide all layers except continue layer group inside form_2 layer group. Click File > Save for Web and Device, save it as PNG-24 and name it see_button.png.

Return to our HTML markup. Actually, the second form have same markup with first form. We just need to modify some elements from first from. So, just copy all the code between <section class=”form form_1″> and </section><!–End form 1–> and paste inside <section class=”form form_2 formhide”>.

Now we have 2 same form in our slider page. Let’s modify the second form. First, replace the <img> tag inside <div class=”step”> with this one:

<img alt="Step 2 of 2" src="images/step_2.png"/>

Then replace all the code inside <fieldset> tag with this:

<h2>Enter your email :</h2>
<div class="email_field">
 <label for="subscription_email_address">&nbsp;</label>

 <input value="" id="subscription_email_address" name="subscription[email_address]" size="30" title="Please enter a valid email address." type="text">
</div>
<p>Don't worry, your email is safe with us.</p>

After that, replace all the code inside <div class=”button”> with this:

<input id="subscription_submit" name="commit" value="See what's happening" type="submit">

Now we’ll style our second form. This form also have same style with the first form. We just need to add some additional codes for the button and form position.

.button_2{
 background:url("images/see_button.png") no-repeat;
 border:none;
 float:right;
 height:56px;
 width:261px;
 margin-top:3px;
 text-indent:-9999px;
}
.formhide{left:119%;opacity:.3;}
.form_2{top:-216px}
.form_2 p{
 font:12px georgia,serif;
 color:#adadad;
}

It’s time to play jQuery! We’ll create a simple jQuery slider animation. So, here’s the concept. When user hit the continue button, the first form will slide to the left then the second form will slide from the right. Add this code just before </head> tag.

<script type="text/javascript">
$("document").ready(function() {
 $('.button_1').click(function(){
 $(".form_1").animate({"left": "-70%","opacity":0.3},1500);
 $(".form_2").animate({"left": "10%","opacity":1},1500);
 });
});
</script>

Open your slide.html in web browser. You should see the slider in action. Here’s our complete markup for slider.html.

<!DOCTYPE html> <html lang="en">
<head>
<title>Kupon | this is awesome</title>
<link href="style.css" media="screen" rel="stylesheet" type="text/css">
<script src="jquery.min.js" type="text/javascript"></script>

	<!--[if IE]>
	<script src="modernizr-1.7.min.js"></script>
<![endif]-->
 <!--[if lt IE 7]>
	<script type="text/javascript" src="unitpngfix.js"></script>
<![endif]-->

<script type="text/javascript">
	$("document").ready(function() {
		$('.button_1').click(function(){
		$(".form_1").animate({"left": "-70%","opacity":0.3},1500);
		$(".form_2").animate({"left": "10%","opacity":1},1500);
		 });
	});
</script>
</head> 

<body id="slider">
 <div id="wrapper">
 <header>
	<h1 id="logo">

	<a href="#">Kupon</a>
	</h1>
	<img alt="this is the site description" class="description" src="images/desc.png" />
 </header>
 <form action="index.html" id="register" method="post">

	<section class="form form_1">
		<div class="form_container">
			<div class="step">
				<img alt="Step 1 of 2" src="images/step_1.png"/>
		 	</div>
			<fieldset>

				<h2>Confirm your city :</h2>
				<select id="select_location" name="Location">
					<option value="jakarta">Jakarta</option>
					<option value="kuala-lumpur">Kuala Lumpur</option>

					<option value="miami">Miami</option>
					<option value="singapore">Singapore</option>
					<option value="bangkok">Bangkok</option>
					<option value="shanghai">Shanghai</option>

				</select>
			</fieldset>
			<div class="button">
				<a class="button_1" href="#" id="step_one" onclick="; return false;">Continue</a>
			</div>

		</div>
 	</section> 

 	<section class="form form_2 formhide">
		<div class="form_container">
			<div class="step">
				<img alt="Step 2 of 2" src="images/step_2.png"/>

			</div>
			<fieldset>
				<h2>Enter your email :</h2>
				<div class="email_field">
					<label class="hide" for="subscription_email_address">&nbsp;</label>

					<input value="" id="subscription_email_address" name="subscription[email_address]" size="30" title="Please enter a valid email address." type="text">
				</div>
				<p>Don't worry, your email is safe with us.</p>
			</fieldset>
			<div class="button">

				<input class="button_2" id="subscription_submit" name="commit" value="See what's happening" type="submit">
			</div>
		</div>
	</section>
 </form> 

</body>

</html>

Step 8 – Create Basic Structure for Landing Page

Now, we’ll create the landing page. Open index.html in your favorite code editor, then copy code from slider.html until the </head> tag.

<!DOCTYPE html>
<html lang="en">

<head>
 <title>Kupon | this is awesome</title>
 <link href="style.css" media="screen" rel="stylesheet" type="text/css">
 <script src="jquery.min.js" type="text/javascript"></script>
 <!--[if IE]>

 <script src="modernizr-1.7.min.js"></script>
 <![endif]-->
 <!--[if lt IE 7]>
 <script type="text/javascript" src="unitpngfix.js"></script>
 <![endif]-->

 <script type="text/javascript">
 $("document").ready(function() {
 $('.button_1').click(function(){
 $(".form_1").animate({"left": "-70%","opacity":0.3},1500);
 $(".form_2").animate({"left": "10%","opacity":1},1500);
 });
 });
 </script>
</head>

Then add below code after </head> tag. This is will be our page layout.

<nav>
</nav>

<div id="wrapper">
<header>
</header>
<article id="featured">
</article>
<section id="sidebar">
</section>
<article id="information">
</article>

</div>

<footer>
</footer>

</body>
</html>

Step 9 – Background

Open kupon single.psd in photoshop, hide all layers except background layer group. Create selection with crop tool like this:

Create an eCommerce Site Inspired with JQuery Slider Inspired from Groupon (Part 2)

Hit Alt + Shift + Ctrl + S or click File > Save for Web and Devices. Save it as JPEG, and name it bg_single.jpg.

Add following style in style.css.

body#single{
 background:url(images/bg_single.jpg) no-repeat 280px 0 #be58d5;
 color:#444;
 font:13px/1.5 helvetica, sans-serif;
 margin:0;
}

Step 10 – Navigation Menu

As you can see on the PSD mockup, the navigation menu has a gradient background. So, we need to slice the navigation background. Return to photoshop, create a 1 x 66px selection with crop tool. Save image for web as PNG-24 and name it nav_bg.png.

Create an eCommerce Site Inspired with JQuery Slider Inspired from Groupon (Part 2)

Now, let’s create the markup. Add this following code inside <nav> tag.

<ul>
<li><a class="current_item" href="#">featured deals</a></li>
<li><a href="#">all deals</a></li>

<li><a href="#">how it works</a></li>
</ul>

Next step is styling the navigation menu, add this style to style.css.

nav{
 background:url(images/nav_bg.png) transparent;
 border-bottom:2px solid #adadad;
 font-size:20px;
 height:66px;
 line-height:66px;
 width:100%;
}
nav ul{
 list-style:none;
 width:960px;
 margin:0 auto;
 padding:0;
}
nav li{
 float:left;
 margin:0;
 padding:0;
}
nav a{
 color:#f0f0f0;
 display:block;
 text-decoration:none;
 padding:0 10px;
}
nav a:hover,.current_item{
 background:#333;
}

Here’s what we have now.

Create an eCommerce Site Inspired with JQuery Slider Inspired from Groupon (Part 2)

Step 11 – Logo area

Actually, the logo size and css style is exactly same with slider.html logo. We just need to modify the logo position. So, copy this following code from slider.html and paste them inside <header> tag.

<h1 id="logo">
 <a href="#">Kupon</a>
</h1>

Adjust its position in style.css.

#single header{margin-top:-68px}

Create an eCommerce Site Inspired with JQuery Slider Inspired from Groupon (Part 2)

Step 12 – Featured Content

Our next step is creating the featured content area. The featured content is placed inside <article id=”featured”> tag. Add this following code inside <article id=”featured”>.

<h2>The ultimate al-in-one. Turbocharged. Start from $1,199.00.</h2>

Then add CSS style in style.css.

#featured,#information{
 border-radius:10px;
 -moz-border-radius:10px;
 -webkit-border-radius:10px;
 box-shadow:3px 3px 5px #000;
 -moz-box-shadow:3px 3px 5px #000;
 -webkit-box-shadow:3px 3px 5px #000;
 background:#fff;
 float:left;
 margin:20px 10px 20px 0;
}
#featured{
 padding:10px;
 width:690px;
}
#single h2{
 font:700 24px georgia,serif;
 margin:15px 0;
}
#deals{
 background:#fbc5ff;
 font:700 17px/1.5 georgia,serif;
 float:left;
 padding:10px;
 width:185px;
}

Now, we’ll create the sidebar for featured content. Return to PSD file again, we’ll slice up the buy ribbon. Create a selection with crop tool like this:

Create an eCommerce Site Inspired with JQuery Slider Inspired from Groupon (Part 2)

Hide all layers except ribbon layer group. Also hide button layer group inside ribbon layer group.

Create an eCommerce Site Inspired with JQuery Slider Inspired from Groupon (Part 2)

Save image for web as PNG-24 and name it ribbon.png.

Then, slice up the call-to-action buy button. Create a selection like this using crop tool.

Create an eCommerce Site Inspired with JQuery Slider Inspired from Groupon (Part 2)

Hide all layers except “button” layer group then save image for web as PNG-24 and name it buy_button.png.

Next, add the buy ribbon to the HTML document. Place this code inside <div id=”deals”>.

<div id="deals">
<span class="buy_ribbon">
<p>$1,000</p>
<a href="#"><img alt="buy" src="images/buy_button.png"/></a>
</span>
<div class="disc_info">
<span class="disc_info_left">Price</span><span class="disc_info_right">$1,199</span>

<span class="disc_info_left">Disc.</span><span class="disc_info_right">15%</span>
<span class="disc_info_left">You save</span><span class="disc_info_right">$199</span>
</div>
<a href="#">Recommend it<br/> to a friend!</a>

</div>

Add this style.

.buy_ribbon{
 background:url(images/ribbon.png) transparent;
 display:block;
 height:89px;
 width:244px;
 left:-49px;
 margin:10px 0;
 position:relative;
}
.buy_ribbon p{
 color:#fff;
 margin:0;
 padding:25px 20px;
 text-shadow:1px 1px 0 #000;
}
.buy_ribbon img{
 float:right;
 margin:-64px 20px 0 0;
}
.disc_info{
 float:left;
 margin:10px 0 20px;
}
.disc_info_left{
 float:left;
 width:120px;
}
.disc_info_right{
 float:right;
 width:60px;
}
#deals a{
 display:block;
 margin-bottom:10px;
 text-align:center;
 text-decoration:underline;
}

Create an eCommerce Site Inspired with JQuery Slider Inspired from Groupon (Part 2)

We’re done with the sidebar. Now, let’s create our main content. First, slice up the featured image. In Photoshop, create selection using crop tool like picture below. Save image for web as JPEG and name it featured_pic.jpg.

Create an eCommerce Site Inspired with JQuery Slider Inspired from Groupon (Part 2)

Add the code below after </div> #deals.

<img class="featured_pic" alt="featured picture" src="images/featured_pic.jpg"/>
<div class="featured_left">
<h3>Big, beautiful displays</h3>
<p>Today's iMac has come a long way from the first 15-inch iMac. Take one look and you'll see just how far. A 21.5-inch or 27-inch display with edge-to-edge glass covers nearly the entire front of the enclosure.</p>
</div>
<div class="featured_right">
<h3>Highlights</h3>

<ul>
<li>21.5-inch: 3.06GHz</li>
<li>1920-by-1080 resolution</li>
<li>4GB (two 2GB) memory</li>
<li>ATI Radeon HD 4670 with 256MB</li>

</ul>
</div>

The CSS styling for the code above looks like this.

.featured_pic{
 border-radius:5px;
 -moz-border-radius:5px;
 -webkit-border-radius:5px;
 border:5px solid #444;
 margin-left:15px;
}
.featured_left{
 float:left;
 margin:20px 20px 0 220px;
 width:225px;
}
.featured_right{
 float:right;
 margin:20px 0 0 0;
 width:225px;
}
#featured h3{
 font-size:18px;
 margin:0 0 20px;
}
#featured ul{
 list-style:disc;
 margin:0 0 0 15px;
 padding:0;
}
#featured li{
 padding-bottom:5px;
}

We’re done with featured content. Below is our current result.

Create an eCommerce Site Inspired with JQuery Slider Inspired from Groupon (Part 2)

Step 13 – Sidebar Area

Put the code below inside <section id=”sidebar”>.

<h4>Other Deals</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas mi nulla, convallis eget malesuada a, accumsan id nunc.</p>
<p>Sed ut eros sit amet justo accumsan elementum sed et odio. Pellentesque pharetra mauris non lacus pharetra pretium. Donec vel mauris</p>

<p>Cras ultrices imperdiet commodo. Curabitur vehicula, sem vel malesuada suscipit, nunc massa lobortis libero, at eleifend justo nisl sit amet sem.</p>
<p>Duis viverra lobortis ante ac aliquet. Nunc sapien enim, aliquet sit amet pellentesque at, pharetra et purus.</p>
<p>Nunc quis velit lorem. Aenean interdum urna ultricies enim sollicitudin interdum. Sed feugiat tellus quis erat convallis et suscipit nulla sollicitudin.</p>

Then add this CSS styles.

#sidebar{
 border-radius:10px;
 -moz-border-radius:10px;
 -webkit-border-radius:10px;
 box-shadow:3px 3px 5px #000;
 -moz-box-shadow:3px 3px 5px #000;
 -webkit-box-shadow:3px 3px 5px #000;
 background:#fff;
 float:right;
 margin:20px 0;
 width:240px;
}
#sidebar h4{
 border-radius:10px 10px 0 0;
 -moz-border-radius:10px 10px 0 0;
 -webkit-border-radius:10px 10px 0 0;
 background:#fbc5ff;
 font:700 16px georgia,serif;
 margin:0 0 10px;
 padding:10px;
}
#sidebar p{
 padding:10px;
 margin:0 0 10px;
}

We’re done with the sidebar.

Create an eCommerce Site Inspired with JQuery Slider Inspired from Groupon (Part 2)

Step 14 – Information Content Section

In this section we’ll put our product information. This section also have a sidebar. First, slice up the discussion button. In photoshop, create selection like picture below.

Create an eCommerce Site Inspired with JQuery Slider Inspired from Groupon (Part 2)

Then hide all layers except button layer group. Save image for the web as PNG-24 and name it discuss_button.png.

Create an eCommerce Site Inspired with JQuery Slider Inspired from Groupon (Part 2)

After that, put this code inside <article id=”information”> in the HTML document.

<div class="text">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus venenatis magna ut sem condimentum pretium. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean auctor quam nec ipsum vulputate cursus. Nulla molestie odio eget nunc porttitor at rhoncus felis bibendum. Pellentesque vestibulum ornare nisl non ullamcorper. Duis auctor nunc eget est fermentum viverra. Quisque quis massa nisi, nec placerat diam. Nam et nibh odio. Curabitur vel libero quis leo tincidunt hendrerit. Nam lectus mauris, tristique non tempus id, luctus non felis. Cras volutpat pharetra risus.</p>
<p>Praesent semper risus congue est egestas tempus. Etiam sem felis, egestas a vulputate non, pellentesque sit amet lectus. Cras quis tellus nunc, vitae facilisis ligula. Sed mauris mi, ullamcorper auctor pharetra id, feugiat at nibh. Curabitur at ipsum sem. Aenean nisl dui, semper non congue eu, ultricies sed lacus. Vivamus fermentum congue dui, at tempor ante euismod quis. Donec ante enim, pellentesque eu tincidunt vel, porttitor sed neque. Nulla imperdiet condimentum hendrerit. Mauris porta rhoncus venenatis. Suspendisse enim lacus, accumsan eget rutrum vel, accumsan ut magna. Nam eu mi quis nisl pharetra porttitor ac vel justo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla vitae iaculis massa. Nulla mattis nisi mi. Mauris nec accumsan erat.</p>
<p>Curabitur magna orci, lacinia quis bibendum eu, sagittis in nulla. Vivamus suscipit, tortor non suscipit dignissim, neque massa suscipit ligula, posuere semper lectus lacus ullamcorper nibh. Cras rutrum dictum orci vel gravida. Integer eu gravida diam. Quisque convallis convallis arcu et ullamcorper. Donec sodales commodo scelerisque. Vivamus nisl risus, laoreet sed varius in, gravida eget quam. Quisque sollicitudin quam et neque euismod non sodales tortor molestie. Morbi placerat iaculis feugiat. Duis rutrum risus ultrices turpis gravida fermentum. Etiam libero odio, molestie quis elementum non, interdum et quam. Nam sed diam libero. Sed gravida, magna nec feugiat scelerisque, orci justo eleifend orci, et venenatis nisl eros vitae quam.</p>

<a href="#"><img class="discuss" alt="Join the Discussion" src="images/discuss_button.png"/></a>
</div>

Style it like this:

#information{
 width:710px;
}
.text{
 float:left;
 padding:10px;
 width:460px;
}
.text p{
 margin:0 0 10px;
}
.text img.discuss{
 float:right;
 margin-top:10px;
}

Here’s our current layout.

Create an eCommerce Site Inspired with JQuery Slider Inspired from Groupon (Part 2)

Next step is creating the information sidebar. First, slice up the sidebar images and quote image in photoshop. Create selection using crop tool like this to create sidebar images.

Create an eCommerce Site Inspired with JQuery Slider Inspired from Groupon (Part 2)

Save image as JPEG and give it name brand_pic.jpg. Then slice up the quote image.

Create an eCommerce Site Inspired with JQuery Slider Inspired from Groupon (Part 2)

Hide all layer except quote text layer. Save as PNG-24 and name it quotes.png.

Now add this code after </div> #text

<div class="info_sidebar">

<h3>Apple Inc.</h3>
<a class="info_link" href="#">Website</a>
<a class="info_link" href="#">Facebook</a>
<img alt="brand logo" src="images/brand_pic.jpg"/>
<p><strong>Cupertino</strong><br/>1 Infinite Loop<br/>Cupertino, CA 95014<br/>408-996-101</p>

<blockquote>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus venenatis magna ut sem condimentum pretium.</blockquote>
<blockquote>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean auctor quam nec ipsum vulputate cursus.</blockquote>
</div>

Add CSS styles.

.info_sidebar{
 border-radius:0 10px 10px 0;
 -moz-border-radius:0 10px 10px 0;
 -webkit-border-radius:0 10px 10px 0;
 background:#fbc5ff;
 float:right;
 padding:10px;
 width:210px;
}
#information h3{
 font-size:18px;
 margin:0 0 20px;
}
.info_link{
 float:left;
 margin:0 30px 20px 0;
}
.info_sidebar p{
 border-bottom:1px solid #760996;
 margin:30px 0;
 padding-bottom:30px;
}
blockquote{
 background:url(images/quotes.png)no-repeat left top transparent;
 font-size:13px;
 font-style:italic;
 margin:0 0 30px;
 padding:0 0 0 30px;
}

And here’s what we have now.

Create an eCommerce Site Inspired with JQuery Slider Inspired from Groupon (Part 2)

Step 15 – Footer Area

This is our last step, create the footer area. Our footer will divided into 4 columns. Add the code below inside <footer> tag.

<div id="footer_wrapper">

<section class="footer_column">
<h5>Company</h5>

<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Careers</a></li>

<li><a href="#">Our Location</a></li>
<li><a href="#">Privacy Policy</a></li>
</ul>
</section>

<section class="footer_column">
<h5>Learn More</h5>
<ul>
<li><a href="#">Ask a Question</a></li>
<li><a href="#">Read our official blog</a></li>

<li><a href="#">Developer / API</a></li>
<li><a href="#">Suggest a feature</a></li>
</ul>
</section>

<section class="footer_column">
<h5>Follow us on:</h5>
<ul>
<li><a href="#">Twitter</a></li>
<li><a href="#">Facebook</a></li>

<li><a href="#">Flickr</a></li>
<li><a href="#">RSS Feed</a></li>
<li><a href="#">Email</a></li>

</ul>
</section>

<section class="colophon">
<h5>About Us</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In non sapien id nisl gravida hendrerit. Morbi imperdiet risus et felis placerat blandit. Vivamus mollis urna mollis lectus aliquet eu pellentesque diam molestie. Nunc ut mi quis augue posuere iaculis lobortis ac felis.</p>
</section>

</div>

And here’s our footer styles.

footer{
 background:#000;
 border-top:2px solid #adadad;
 color:#ccc;
 float:left;
 margin:30px 0 0;
 padding:0 0 30px;
 width:100%;
}
footer p{margin:0 0 10px;}
footer a{color:#ccc;}
footer a:hover,footer a:focus,footer a:active{text-decoration:underline;}
footer h5{
 font-size:14px;
 margin:0 0 15px;
}
footer ul{
 list-style:none;
 margin:0;
 padding:0;
}
footer li{
 margin:0;
 padding:0;
}
#footer_wrapper{
 margin:20px auto 0;
 width:960px;

}
.footer_column{
 float:left;
 margin:0 20px 0 0;
 width:160px;
}
.colophon{
 float:right;
 width:410px;
}

Create an eCommerce Site Inspired with JQuery Slider Inspired from Groupon (Part 2)

Final Result

Below is our final result.



Source File and Live Demo

Download Complete Source File

Live Demo

Author: Mohammad Jeprie

Mohammad Jeprie is a writer from Indonesia. He loves to share his design skill by writing tutorial in various blog. When he is not too busy, he shares free design resources in PSDfreemium. Don't forget to say hi to him in Twitter.

website design and development

7 Comments

  1. Adrian

    Thanks for tutorials, nice concept and explanation.

  2. Paz

    Hi, Live Demo page doesn’t work :-)

  3. ABC

    This is one of the most indepth tutorials I have seen. Thank you.

  4. tom

    this post is so cool..

  5. Brian

    Great web design tutorial. You can really tell you put allot of work into this. Thank You.

  6. tjahyo

    bagus banget bang tutornya.bang, kalo untuk format vidio gimana bank scripnya abd tutorialnya.

  7. jack3d blue raspberry

    Super news it is really. I have been seeking for this content.

Trackbacks

Leave your comment

You must be logged in to post a comment.

-->

This website is proudly powered by WordPress, hosted by Suite48. Icons by WeFunction, KomodoMedia and DezinerFolio.
Contents and resources released under Creative Commons License.
Design and code by PVM Garage - Copyright © 2010 PV.M Garage Theme - All Rights Reserved.

HOME | ABOUT US | ADVERTISE | CONTACT US