Clicky

Coding the Bootstrap Portfolio using Twitter Bootstrap, HTML5 and CSS3

Coding the Bootstrap Portfolio using Twitter Bootstrap, HTML5 and CSS3

In the first part of this tutorial we designed the website in Photoshop. Now we are going to code it using Twitter Bootstrap, a great web design tool that helps speed up the development process of a website. In this tutorial I will show you how to slice images for the web in Photoshop, how use the Bootstrap 960 grid to structure the layout and how to set up Bootstrap Togglable Tabs to make the portfolio area functional. We will also cover some new CSS3 properties, such as transition and rotate. Let’s get started.

Check out the demo to see the website in action.

Resources

These are the resources that we will use to create the website:

You will also need a code editor to write the code for the website. I recently started using Sublime Text and I am very happy with it so far. You can get it for any operating system and the community developed many plugins that extend its functionality.

Part 1 – Slicing the images

Step 1: Setting up the folder structure

Before we begin slicing the images, create a new folder for the website. Then add 3 sub-folders: “css”, “images” and “js”.

Step 2: Slicing the logo

Open the Photoshop document of the website design and look for the “logo” group. Right-click on it and select “Duplicate Group”. From the pop-up window set the destination document to “New”. Photoshop will open a new document with transparent background and the “logo” group you duplicated.

Now we need to crop the logo to its exact dimensions. We could use the Crop Tool to achieve this. However, Photoshop has a function called “Trim” that will automatically crop the image for us. Go to Image > Trim, make sure that “Transparent Pixels” is selected and click OK.

To save the image go to File > Save for Web & Devices, select the PNG-24 format and save the image as “logo.png” in the “images” folder of your website.

 

Use the technique I described above to slice the following images:

  • the top testimonial image (without the white border; we will create it using CSS);
  • the portfolio images (hide all the styles before saving the images; we will create the stroke and the outer glow effects in CSS); I saved all the portfolio images in a new folder called “portfolio” inside the “images” folder;
  • the “about” photo (again, save this image without the borders).

Here are the brief steps of the technique we used to slice the logo:

  1. Right-click on the layer/group you want to slice and select “Duplicate Layer”;
  2. From the pop-up window set the destination document to “New” and click OK;
  3. Crop the image by going to Image > Trim;
  4. Save your image by going to File > Save for Web & Devices.

Step 3: Slicing the main background

To slice the background images we will use a slightly different technique, which I will demonstrate on the main background. Select the Rectangular Marquee Tool (M), hold down the Shift key and create a square selection over the gray textured background of the testimonial area.

To copy the image without selecting the background layer that we are copying from, we will use the Copy Merged function. Go to Edit > Copy Merged or use the shortcut Ctrl/Cmd + Shift + C. By using this function, Photoshop will temporarily pretend that all the layers are merged together and it will copy the selected area.

Open a new document in Photoshop (Ctrl/Cmd + N) and paste the image (Ctrl/Cmd + V).

Note: when you copy an image to the clipboard and open a new document, Photoshop will use the dimensions of that image for the width and height of the new document.

Go to File > Save for Web & Devices and save your image as JPEG.

Step 4: Slicing all the other background images

Use the technique I demonstrated in the previous step to slice the following images:

  • the header background (including the dark bar at the top);
  • the blue background of the portfolio area (this will be our secondary background image);
  • the copyright area background;

Here is a brief description of the slicing technique from the previous step:

  1. Use the Rectangular Marquee Tool (M) to create a selection of the area you want to save;
  2. Go to Edit > Copy Merged (Ctrl/Cmd + Shift + N);
  3. Create a new document and paste the selected area (Ctrl/Cmd + V);
  4. Save your image by going to File > Save for Web & Devices.

Below you can see a screenshot of all my images.

Part 2 – HTML markup

Now that we saved all the images we need, it’s time to write the markup for our website.

Step 5: Setting up the HTML document

Open your favorite code editor (I use Sublime Text) and create a new HTML file. Save it as “index.html” in the root of your website folder. Then copy and paste in the basic HTML5 document structure.

1
2
3
4
5
6
7
8
9
<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap Folio</title>
</head>
<body>
 
</body>
</html>
<!DOCTYPE html>
<html>
<head>
	<title>Bootstrap Folio</title>
</head>
<body>

</body>
</html>

Step 6: Header markup

Let’s start writing the HTML markup for the header. Create a new div with the ID “header”. We will use this div to add the background image in CSS.

Create a new div with the class “container”. The Bootstrap stylesheet that we will use includes the styles for the “container” class which sets the width of the content to 940px and centers it.

Add an H1 tag with the ID “logo”. Then place an anchor tag inside it with the name of your website. Later we will replace the text with the logo image using CSS. However, we still need to write the website name inside the <h1> tag so robots can read it.

Next, create an unordered list with the class “navigation” and 4 list items, one for each navigation item. Then place an anchor tag inside each list tag with the name of your navigation items. Also, add the class “active” to the first list item. We will use CSS to add a border beneath this element.

Notice that I added a comment before the “header” div to indicate the beginning of this area and also a comment for each closing div. This helps to keep the code organized and easy to read for humans.

1
2
3
4
5
6
7
8
9
10
11
12
<!-- HEADER -->
<div id="header">
    <div class="container">
        <h1 id="logo"><a href="index.html">Bootstrap Folio</a></h1>
        <ul class="navigation">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#">Portfolio</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Contact</a></li>
        </ul><!--end navigation-->
    </div><!-- end container -->
</div><!--end header-->
<!-- HEADER -->
<div id="header">
	<div class="container">
		<h1 id="logo"><a href="index.html">Bootstrap Folio</a></h1>
		<ul class="navigation">
			<li class="active"><a href="#">Home</a></li>
			<li><a href="#">Portfolio</a></li>
			<li><a href="#">About</a></li>
			<li><a href="#">Contact</a></li>
		</ul><!--end navigation-->
	</div><!-- end container -->
</div><!--end header-->

Step 7: Top testimonial

The “top testimonial” area has two columns: one for the photo and the other one for the actual testimonial. To structure the columns we are going to use Bootstrap, which is based on the 12 columns 960 grid system that we used to design the website in Photoshop.

We will add the Bootstrap CSS file in the third part of this tutorial. However, we need to use the naming conventions of Bootstrap for the HTML markup to ensure that the CSS will work properly.

The Bootstrap HTML structure for columns is the following:

1
2
3
4
<div class="row">
  <div class="span2">...</div>
  <div class="span10">...</div>
</div>
<div class="row">
  <div class="span2">...</div>
  <div class="span10">...</div>
</div>

The “span2″ class represents 2 columns and the “span10″ class represents 10 columns. Very simple, isn’t it? One note to keep in mind: the total number of columns that are inside a “row” div should always be 12 (the number of columns of the 960 grid).

Now let’s add the top testimonial. Create a new div with the ID “top-testimonial” and the class”container”.

Note: If you’re wondering why we added the “container” class to the same div as the “top-testimonial” ID (not inside the it, like we did for the header section), it is because the testimonial area will use the body background (which stretches across the entire page), unlike the header area which will have a different background that needs to stretch across the entire width of the browser. If we added the “container” class to the same div as the “header” ID, the background would be cut off by the width of the “container”. If this does not make any sense at the moment, don’t worry, you will understand when we get to the CSS part.

Create a div with the class “row”. Then create two more divs for the columns: one with the class “span2″ for the image and the other one with the class “span10″ for the testimonial.

1
2
3
4
5
6
7
8
9
<!--TOP TESTIMONIAL-->
<div id="top-testimonial" class="container">
    <div class="row">
        <div class="span2">
        </div>
        <div class="span10">
        </div><!--end span10-->
    </div><!--end row-->
</div><!-- end top-testimonial -->
<!--TOP TESTIMONIAL-->
<div id="top-testimonial" class="container">
	<div class="row">
		<div class="span2">
		</div>
		<div class="span10">
		</div><!--end span10-->
	</div><!--end row-->
</div><!-- end top-testimonial -->

Add an image tag inside the “span2″ class with the source to your testimonial photo. Don’t forget to add the “alt” attribute to describe the image for the visually impaired persons who browse the web using a screen reader.

Also, add the class “content-box” next to the “span2″ class. We will use this class to style the background of the photo and the testimonial.

1
2
3
<div class="span2 content-box">
    <img class="testimonial-photo" src="images/testimonial-photo.png" alt="Client photo" />
</div>
<div class="span2 content-box">
	<img class="testimonial-photo" src="images/testimonial-photo.png" alt="Client photo" />
</div>

Add a new div with the classes “testimonial” and “content-box” inside the “span10″ div. Then add a paragraph of text for the testimonial content.

Create a new div with the class “testimonial-info” with a paragraph and an anchor tag inside it for the client’s name and website. We will use this div to float the text to the right.

Create a new anchor tag for the “More testimonials” button outside the “testimonial” div with the classes “button” and “small”. The class “button” will hold the color and font information and the class “small” will hold the font size and padding information for the button. This way we can create classes for different button sizes (e.g. small, large, x-large), but use the same “button” class for each one.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div id="top-testimonial" class="container">
    <div class="row">
        <div class="span2 content-box">
            <img class="testimonial-photo" src="images/testimonial-photo.png" alt="Client photo" />
        </div>
        <div class="span10">
            <div class="testimonial content-box">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque risus ante, mollis et suscipit ultricies, ultricies vel justo. Duis varius erat nibh, in imperdiet nibh.</p>
                <div class="testimonial-info">
                    <p>Client Name</p>
                    <a href="#">www.webmaster-deals.com</a>
                </div><!--end testimonialInfo-->
            </div><!--end testimonial-->
            <a href="#" class="button small">More Testimonials</a>
        </div><!--end span10-->
    </div><!--end row-->
</div><!-- end top-testimonial -->
<div id="top-testimonial" class="container">
	<div class="row">
		<div class="span2 content-box">
			<img class="testimonial-photo" src="images/testimonial-photo.png" alt="Client photo" />
		</div>
		<div class="span10">
			<div class="testimonial content-box">
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque risus ante, mollis et suscipit ultricies, ultricies vel justo. Duis varius erat nibh, in imperdiet nibh.</p>
				<div class="testimonial-info">
					<p>Client Name</p>
					<a href="#">www.webmaster-deals.com</a>
				</div><!--end testimonialInfo-->
			</div><!--end testimonial-->
			<a href="#" class="button small">More Testimonials</a>
		</div><!--end span10-->
	</div><!--end row-->
</div><!-- end top-testimonial -->

Step 8: Portfolio navigation

Write the basic HTML structure for the portfolio area. Let’s go over what each of these tags will be used for:

  • “portfolio” ID: this div will hold the background image;
  • “container” class will hold the content in the center;
  • “portfolio-box” class: we will add the portfolio thumbnails in this div;
  • “tab-content” class: will hold the details for each project; this class is necessary for the Bootstrap Tab script which we will use later to make the portfolio area functional (when you click on a thumbnail, the content beneath will be updated to present more information on the selected project).
1
2
3
4
5
6
7
8
9
10
11
12
<div id="portfolio">
    <div class="container">
        <!-- PORTFOLIO IMAGES -->
        <div class="portfolio-box">
 
            <!-- SINGLE PROJECT DETAILS -->
            <div class="tab-content">
 
            </div><!-- end tab-content -->
        </div><!-- end portfolio-box -->
    </div><!--end container-->
</div><!--end portfolio-->
<div id="portfolio">
	<div class="container">
		<!-- PORTFOLIO IMAGES -->
		<div class="portfolio-box">

			<!-- SINGLE PROJECT DETAILS -->
			<div class="tab-content">

			</div><!-- end tab-content -->
		</div><!-- end portfolio-box -->
	</div><!--end container-->
</div><!--end portfolio-->

Add the headline for the portfolio area inside the “container” div.

Now we need to add the portfolio navigation. Create a new unordered list with the class “navigation”. Add a few list tags, each one with an anchor tag nested inside it. Then add the class “active” to the first list item. We will use CSS to add a bottom border for this navigation item.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<div id="portfolio">
    <div class="container">
        <h2>Portfolio</h2>
        <ul class="navigation">
            <li class="active"><a href=#>All</a></li>
            <li><a href=#>Web Design</a></li>
            <li><a href=#>Logo Design</a></li>
            <li><a href=#>CMS</a></li>
        </ul><!-- end portfolio-nav -->
 
        <!-- PORTFOLIO IMAGES -->
        <div class="portfolio-box">
 
            <!-- SINGLE PROJECT DETAILS -->
            <div class="tab-content">
 
            </div><!-- end tab-content -->
        </div><!-- end portfolio-box -->
    </div><!--end container-->
</div><!--end portfolio-->
<div id="portfolio">
	<div class="container">
		<h2>Portfolio</h2>
		<ul class="navigation">
			<li class="active"><a href=#>All</a></li>
			<li><a href=#>Web Design</a></li>
			<li><a href=#>Logo Design</a></li>
			<li><a href=#>CMS</a></li>
		</ul><!-- end portfolio-nav -->

		<!-- PORTFOLIO IMAGES -->
		<div class="portfolio-box">

			<!-- SINGLE PROJECT DETAILS -->
			<div class="tab-content">

			</div><!-- end tab-content -->
		</div><!-- end portfolio-box -->
	</div><!--end container-->
</div><!--end portfolio-->

Step 9: Portfolio thumbnails

Now we will add the thumbnails for the portfolio items. Create a new unordered list with the class “row” inside the “portfolio-box” div. Add 8 list tags, each one with an anchor tag inside. Then place each of your portfolio images in <img> tags inside the anchor tags. Add the class “row3″ to each list item. Then add a second class “active” to the first list item. This will be the default selected project when the website loads.

In the previous step I mentioned that we would use the portfolio thumbnails to activate the detailed content of each project. We are going to do so using the Bootstrap Tab script. In order for the script to work (which we will add later) we need to add the “data-toggle” attribute with the value set to “pill” to each anchor tag.

Now we need to link the anchor tags with the content divs that they will activate. To do so, we are using the href attribute with the values #project1, #project2, etc. When we will add the content for each portfolio thumbnail, we will apply these IDs to the content divs.

Note: The Bootstrap Tab script supports two types of tabs: pills (what we’re using) and tabs (to use the tabs, simply replace the value “pill” of the “data-toggle” attribute with “tab”). The function of these two values is the same. The only difference is in the styling (pills are displayed as buttons and tabs are displayed as, well… tabs). We are going to overwrite the Bootstrap styling for the pills because we want to use images, not buttons.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<div id="portfolio">
    <div class="container">
 
        ...
 
        <!-- PORTFOLIO IMAGES -->
        <div class="portfolio-box">
            <ul class="row">
                <li class="active span3">
                    <a href="#project1" data-toggle="pill"><img src="images/portfolio/project1.jpg" alt="Portfolio Image" /></a>
                </li>
                <li class="span3">
                    <a href="#project2" data-toggle="pill"><img src="images/portfolio/project2.jpg" alt="Portfolio Image" /></a>
                </li>
                <li class="span3">
                    <a href="#project3" data-toggle="pill"><img src="images/portfolio/project3.jpg" alt="Portfolio Image" /></a>
                </li>
                <li class="span3">
                    <a href="#project4" data-toggle="pill"><img src="images/portfolio/project4.jpg" alt="Portfolio Image" /></a>
                </li>
                <li class="span3">
                    <a href="#project5" data-toggle="pill"><img src="images/portfolio/project5.jpg" alt="Portfolio Image" /></a>
                </li>
                <li class="span3">
                    <a href="#project6" data-toggle="pill"><img src="images/portfolio/project6.jpg" alt="Portfolio Image" /></a>
                </li>
                <li class="span3">
                    <a href="#project7" data-toggle="pill"><img src="images/portfolio/project7.jpg" alt="Portfolio Image" /></a>
                </li>
                <li class="span3">
                    <a href="#project8" data-toggle="pill"><img src="images/portfolio/project8.jpg" alt="Portfolio Image" /></a>
                </li>
            </ul>
            <!-- SINGLE PROJECT DETAILS -->
            <div class="tab-content">
 
            </div><!-- end tab-content -->
        </div><!-- end portfolio-box -->
    </div><!--end container-->
</div><!--end portfolio-->
<div id="portfolio">
	<div class="container">

		...

		<!-- PORTFOLIO IMAGES -->
		<div class="portfolio-box">
            <ul class="row">
                <li class="active span3">
                    <a href="#project1" data-toggle="pill"><img src="images/portfolio/project1.jpg" alt="Portfolio Image" /></a>
                </li>
                <li class="span3">
                    <a href="#project2" data-toggle="pill"><img src="images/portfolio/project2.jpg" alt="Portfolio Image" /></a>
                </li>
                <li class="span3">
                    <a href="#project3" data-toggle="pill"><img src="images/portfolio/project3.jpg" alt="Portfolio Image" /></a>
                </li>
                <li class="span3">
                    <a href="#project4" data-toggle="pill"><img src="images/portfolio/project4.jpg" alt="Portfolio Image" /></a>
                </li>
                <li class="span3">
                    <a href="#project5" data-toggle="pill"><img src="images/portfolio/project5.jpg" alt="Portfolio Image" /></a>
                </li>
                <li class="span3">
                    <a href="#project6" data-toggle="pill"><img src="images/portfolio/project6.jpg" alt="Portfolio Image" /></a>
                </li>
                <li class="span3">
                    <a href="#project7" data-toggle="pill"><img src="images/portfolio/project7.jpg" alt="Portfolio Image" /></a>
                </li>
                <li class="span3">
                    <a href="#project8" data-toggle="pill"><img src="images/portfolio/project8.jpg" alt="Portfolio Image" /></a>
                </li>
            </ul>
			<!-- SINGLE PROJECT DETAILS -->
			<div class="tab-content">

			</div><!-- end tab-content -->
		</div><!-- end portfolio-box -->
	</div><!--end container-->
</div><!--end portfolio-->

Step 10: Project details

In the previous step we added 8 portfolio thumbnails. This means that we need 8 new divs with the detailed content for each portfolio thumbnail.

Create a new div inside the “tab-content” div with the classes “tab-pane fade” and the ID “project1″. The “fade” class will add a fade effect when switching from one portfolio item to another using the Bootstrap Transitions script. The ID is the link between the trigger (thumbnail) and the content. We have to use the classes I mentioned, otherwise the Bootstrap scripts will not work.

Create two columns inside the “tab-pane” div: one with the class “span5″ and the other one with the class “span7″.

Add a headline, a couple paragraphs of text and an anchor tag with the classes “large button” inside the left column (span5). Then place a larger image of the portfolio item inside the right column.

Duplicate the entire “tab-pane” div 7 times. Make sure you update the “#project1″ ID for each div and also the content and the image. Below I placed only 3 divs as example to avoid repeating too much code in the tutorial.

For the first “tab-pane” div we need to add two more classes: “active” and “in” (again, these are the naming conventions that Bootstrap uses). This will ensure that the first content div will be active and visible when the website loads.

That is all we need to do for now. When we add the Bootstrap scripts later, the portfolio area will work as expected.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
<div id="portfolio">
    <div class="container">
        ...
        <!-- PORTFOLIO IMAGES -->
        <div class="portfolio-box">
            <ul class="container">
            ...
            </ul>
            <!-- SINGLE PROJECT DETAILS -->
            <div class="tab-content">
                <div class="tab-pane active fade in" id="project1">
                    <div class="row">
                        <div class="span5">
                            <h3>Projects Touch App</h3>
                            <p>Projects Touch is an iOS application that helps freelancers manage their projects. I created the user interface for the application and a short video to demonstrate its interactivity.</p>
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent blandit vulputate arcu a pharetra. Nullam eget erat purus. Duis magna dolor, rhoncus mollis ut, lacinia eu nisi. Ut facilisis dictum diam.</p>
                            <a href="#" class="large button">Visit Website</a>
                        </div><!-- end span5 -->
                        <div class="span7">
                            <img src="images/portfolio/project1-large.png" alt="Projects Touch App UI" />
                        </div><!-- end span7 -->
                    </div><!-- end row -->
                </div><!-- end project -->
 
                <div class="tab-pane fade" id="project2">
                    <div class="row">
                        <div class="span5">
                            <h3>Leather Textured Web Design</h3>
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas rutrum tellus mi. Etiam ut nunc sed leo mattis feugiat eu sed dolor. Maecenas nec ullamcorper turpis. Mauris pretium porttitor risus ornare. <p>
                            <p>Morbi purus turpis, porttitor et convallis sit amet, tristique at eros. Ut a nunc et eros posuere aliquet nec vitae lacus. Nulla et lectus non elit consequat imperdiet. Ut fringilla sodales nisl ac eleifend. Morbi mattis porta nisi at hendrerit.</p>
                            <a href="#" class="large button">Visit Website</a>
                        </div><!-- end span5 -->
                        <div class="span7">
                            <img src="images/portfolio/project2-large.png" alt="Leather Textured Web Design" />
                        </div><!-- end span7 -->
                    </div><!-- end row -->
                </div><!-- end project -->
 
                <div class="tab-pane fade" id="project3">
                    <div class="row">
                        <div class="span5">
                            <h3>Projects Touch App Timer</h3>
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas rutrum tellus mi. Etiam ut nunc sed leo mattis feugiat eu sed dolor. Maecenas nec ullamcorper turpis. Mauris pretium porttitor risus ornare. <p>
                            <p>Morbi purus turpis, porttitor et convallis sit amet, tristique at eros. Ut a nunc et eros posuere aliquet nec vitae lacus. Nulla et lectus non elit consequat imperdiet. Ut fringilla sodales nisl ac eleifend. Morbi mattis porta nisi at hendrerit.</p>
                            <a href="#" class="large button">Visit Website</a>
                        </div><!-- end span5 -->
                        <div class="span7">
                            <img src="images/portfolio/project3-large.png" alt="Projects Touch App UI" />
                        </div><!-- end span7 -->
                    </div><!-- end row -->
                </div><!-- end project -->
 
                ...
 
            </div><!-- end tab-content -->
        </div><!-- end portfolio-box -->
    </div><!--end container-->
</div><!--end portfolio-->
<div id="portfolio">
	<div class="container">
		...
		<!-- PORTFOLIO IMAGES -->
		<div class="portfolio-box">
			<ul class="container">
			...
			</ul>
			<!-- SINGLE PROJECT DETAILS -->
			<div class="tab-content">
				<div class="tab-pane active fade in" id="project1">
                    <div class="row">
                        <div class="span5">
                            <h3>Projects Touch App</h3>
                            <p>Projects Touch is an iOS application that helps freelancers manage their projects. I created the user interface for the application and a short video to demonstrate its interactivity.</p>
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent blandit vulputate arcu a pharetra. Nullam eget erat purus. Duis magna dolor, rhoncus mollis ut, lacinia eu nisi. Ut facilisis dictum diam.</p>
                            <a href="#" class="large button">Visit Website</a>
                        </div><!-- end span5 -->
                        <div class="span7">
                            <img src="images/portfolio/project1-large.png" alt="Projects Touch App UI" />
                        </div><!-- end span7 -->
                    </div><!-- end row -->
                </div><!-- end project -->

                <div class="tab-pane fade" id="project2">
                    <div class="row">
                        <div class="span5">
                            <h3>Leather Textured Web Design</h3>
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas rutrum tellus mi. Etiam ut nunc sed leo mattis feugiat eu sed dolor. Maecenas nec ullamcorper turpis. Mauris pretium porttitor risus ornare. <p>
                            <p>Morbi purus turpis, porttitor et convallis sit amet, tristique at eros. Ut a nunc et eros posuere aliquet nec vitae lacus. Nulla et lectus non elit consequat imperdiet. Ut fringilla sodales nisl ac eleifend. Morbi mattis porta nisi at hendrerit.</p>
                            <a href="#" class="large button">Visit Website</a>
                        </div><!-- end span5 -->
                        <div class="span7">
                            <img src="images/portfolio/project2-large.png" alt="Leather Textured Web Design" />
                        </div><!-- end span7 -->
                    </div><!-- end row -->
                </div><!-- end project -->

                <div class="tab-pane fade" id="project3">
                    <div class="row">
                        <div class="span5">
                            <h3>Projects Touch App Timer</h3>
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas rutrum tellus mi. Etiam ut nunc sed leo mattis feugiat eu sed dolor. Maecenas nec ullamcorper turpis. Mauris pretium porttitor risus ornare. <p>
                            <p>Morbi purus turpis, porttitor et convallis sit amet, tristique at eros. Ut a nunc et eros posuere aliquet nec vitae lacus. Nulla et lectus non elit consequat imperdiet. Ut fringilla sodales nisl ac eleifend. Morbi mattis porta nisi at hendrerit.</p>
                            <a href="#" class="large button">Visit Website</a>
                        </div><!-- end span5 -->
                        <div class="span7">
                            <img src="images/portfolio/project3-large.png" alt="Projects Touch App UI" />
                        </div><!-- end span7 -->
                    </div><!-- end row -->
                </div><!-- end project -->

				...

			</div><!-- end tab-content -->
		</div><!-- end portfolio-box -->
	</div><!--end container-->
</div><!--end portfolio-->

Step 11: About & Testimonials

Add the basic HTML structure for the “about” and “testimonials” columns. I already explained what all these classes represent, so I will not go over them again.

1
2
3
4
5
6
7
8
9
<div id="about" class="container">
    <div class="row">
        <div class="span4">
        </div><!-- end span4 -->
 
        <div class="span8">
        </div><!-- end span8 -->
    </div><!-- end row -->
</div><!-- end about -->
<div id="about" class="container">
	<div class="row">
		<div class="span4">
		</div><!-- end span4 -->

		<div class="span8">
		</div><!-- end span8 -->
	</div><!-- end row -->
</div><!-- end about -->

Add the headline for the “About” area inside the “span4″ class.

Create a new div with the classes “content-box” and “rotate”. Inside this div create a new one with the classes “content-box” and “about-image”. Then add the image for the about area. We added all these divs and classes in order to create the stacked photos effect from the design using only CSS3. I will explain this in detail when we get to writing the CSS.

Add a paragraph of text with the content for the “about” area. We will wrap this paragraph around the image using CSS.

1
2
3
4
5
6
7
8
9
<div class="span4">
    <h2>About</h2>
    <div class="content-box rotate">
        <div class="content-box about-image">
            <img src="images/about-photo.jpg" alt="About photo" />
        </div>
    </div>
    <p>Hello. My name is Ionut Ciursa. I am a freelance web designer currently living and studying in Coventry, United Kingdom. Pulvinar congue elit, male suada consequat lorem dignissim id. Vestibulum lacinia facilisis massa, vitae blandit odio sollicitudin ac. Curabitur sit amet tortor dolor dictum.</p>
</div><!-- end span4 -->
<div class="span4">
	<h2>About</h2>
	<div class="content-box rotate">
		<div class="content-box about-image">
			<img src="images/about-photo.jpg" alt="About photo" />
		</div>
	</div>
	<p>Hello. My name is Ionut Ciursa. I am a freelance web designer currently living and studying in Coventry, United Kingdom. Pulvinar congue elit, male suada consequat lorem dignissim id. Vestibulum lacinia facilisis massa, vitae blandit odio sollicitudin ac. Curabitur sit amet tortor dolor dictum.</p>
</div><!-- end span4 -->

Add the headline for the “testimonials” area inside the “span8″ div. Create a new div with the classes “testimonial” and “content-box”. Then add the same tags that you used for the top testimonial (one paragraph of text, a div with the class “testimonial-info”, one more paragraph for the client’s name and an anchor tag for their website).

Create one more testimonial by duplicating the “testimonial” div.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div class="span8">
    <h2>Testimonials</h2>
    <div class="testimonial content-box">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque risus ante, mollis et suscipit ultricies, ultricies vel justo. Duis varius erat nibh, in imperdiet nibh.</p>
            <div class="testimonial-info">
                <p>Client Name</p>
                <a href="#">www.webmaster-deals.com</a>
            </div><!--end testimonial-info-->
    </div><!--end testimonial-->
    <div class="testimonial content-box">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque risus ante, mollis et suscipit ultricies, ultricies vel justo. Duis varius erat nibh, in imperdiet nibh.</p>
            <div class="testimonial-info">
                <p>Client Name</p>
                <a href="#">www.webmaster-deals.com</a>
            </div><!--end testimonial-info-->
    </div><!--end testimonial-->
</div><!-- end span8 -->
<div class="span8">
	<h2>Testimonials</h2>
	<div class="testimonial content-box">
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque risus ante, mollis et suscipit ultricies, ultricies vel justo. Duis varius erat nibh, in imperdiet nibh.</p>
			<div class="testimonial-info">
				<p>Client Name</p>
				<a href="#">www.webmaster-deals.com</a>
			</div><!--end testimonial-info-->
	</div><!--end testimonial-->
	<div class="testimonial content-box">
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque risus ante, mollis et suscipit ultricies, ultricies vel justo. Duis varius erat nibh, in imperdiet nibh.</p>
			<div class="testimonial-info">
				<p>Client Name</p>
				<a href="#">www.webmaster-deals.com</a>
			</div><!--end testimonial-info-->
	</div><!--end testimonial-->
</div><!-- end span8 -->

Step 12: Footer

Write the HTML markup for the footer columns. Again, we placed the “container” div inside the “footer” div because the “footer” div will hold the background, which needs to stretch across the entire width, and the “container” div will hold the content in the center.

1
2
3
4
5
6
7
8
9
10
11
12
<!-- FOOTER -->
<div id="footer">
    <div class="container">
        <div class="row">
            <div class="span5" id="twitter-feed">
            </div><!--end span5-->
 
            <div class="span7" id="contact">
            </div><!--end span7-->
        </div><!-- end row -->
    </div><!--end container-->
</div><!--end footer-->
<!-- FOOTER -->
<div id="footer">
	<div class="container">
		<div class="row">
			<div class="span5" id="twitter-feed">
			</div><!--end span5-->

			<div class="span7" id="contact">
			</div><!--end span7-->
		</div><!-- end row -->
	</div><!--end container-->
</div><!--end footer-->

Add the ID “twitter-feed” to the same div that the “span5″ class is applied to. This will help us target and style only the elements that are inside this div.

Add the headline for the Twitter feed area and an anchor tag with the text “Follow me &raquo;” (note: “&raquo;” is the HTML code for the right double angle quotes; you can find all the HTML characters and symbols on the ascii.cl website).

Create a new div with the class “tweets” and place three paragraphs of text inside it.

1
2
3
4
5
6
7
8
9
<div class="span5" id="twitter-feed">
    <h2>Twitter Feed</h2>
    <a href="http://twitter.com/ionutciursa">Follow me &raquo;</a>
    <div class="tweets">
        <p>Photoshop CS6 is amazing. Now I can create dashed lines and change the color of multiple shape layers at the same time. Huge time savers.</p>
        <p>Photoshop CS6 Beta is available for free download. Get your copy from Adobe Labs.</p>
        <p>Wunderkit, a beautiful new productivity tool is about to launch. Visit their landing page. It is just gorgeous.</p>
    </div><!--end tweets-->
</div><!--end span5-->
<div class="span5" id="twitter-feed">
	<h2>Twitter Feed</h2>
	<a href="http://twitter.com/ionutciursa">Follow me &raquo;</a>
	<div class="tweets">
	    <p>Photoshop CS6 is amazing. Now I can create dashed lines and change the color of multiple shape layers at the same time. Huge time savers.</p>
		<p>Photoshop CS6 Beta is available for free download. Get your copy from Adobe Labs.</p>
		<p>Wunderkit, a beautiful new productivity tool is about to launch. Visit their landing page. It is just gorgeous.</p>
	</div><!--end tweets-->
</div><!--end span5-->

Add the ID “contact” to the div with the class “span7″. Then add the headline for the contact area.

Create a new <form> tag with the method set to “post”. Add two <input> tags with the class “content-box”, the type “text”, and the name and placeholder attributes. The placeholder attribute is new in HTML5 and it saves us the trouble of creating the same effect using JavaScript, like we used to.

Add a <textarea> tag with the class “content-box”, the name “message” and a placeholder attribute. The <textarea> tag is not self-closing (like the <input> tags), so we need to add </textarea> in order to close it.

Now we will add the submit button for the form. Create a new <input> tag with the type set to “submit” and a name. Then add a “value” attribute to this tag. Whatever string you pass to the “value” attribute will be displayed on the submit button.

1
2
3
4
5
6
7
8
9
<div class="span7" id="contact">
    <h2>Contact</h2>
    <form method="post" action="#">
      <input class="content-box" type="text" name="name" placeholder="Name" />
      <input class="content-box" type="text" name="email" placeholder="Email" />
      <textarea class="content-box" name="message" placeholder="Message"></textarea>
      <input type="submit" name="send" value="Send" />
    </form>
</div><!--end span7-->
<div class="span7" id="contact">
	<h2>Contact</h2>
	<form method="post" action="#">
	  <input class="content-box" type="text" name="name" placeholder="Name" />
      <input class="content-box" type="text" name="email" placeholder="Email" />
      <textarea class="content-box" name="message" placeholder="Message"></textarea>
      <input type="submit" name="send" value="Send" />
	</form>
</div><!--end span7-->

Step 13: Copyright area

The copyright area is rather simple, containing only one paragraph of text. Create a new div with the ID “copyright”. We will apply a background image to this div. Create another div with the class “container” and add a paragraph of text inside it.

Note: the “&copy;” HTML code represents the copyright character.

1
2
3
4
5
6
<!-- COPYRIGHT -->
<div id="copyright">
    <div class="container">
      <p>Copyright &copy; Webmaster Deals 2012.</p>
    </div><!--end container-->
</div><!-- end copyright -->
<!-- COPYRIGHT -->
<div id="copyright">
	<div class="container">
	  <p>Copyright &copy; Webmaster Deals 2012.</p>
	</div><!--end container-->
</div><!-- end copyright -->

Step 14: Validation

Before we move any further, we need to make sure that the markup validates as HTML5.

Copy the entire HTML code, go to the W3C Validator website, click on the “Validate by Direct Input” tab, paste in your markup and click Check. If it does not validate, check the errors and correct them in your code.

Part 3 – Adding the stylesheets and scripts

Step 15: Download and create the required files

Go to the Twitter Bootstrap website and download the latest version of Bootstrap. Unzip the file and copy the “bootstrap.min.css” file from the “css” folder into the same folder of your website.

Now go to the JavaScript Plugins page of Bootstrap and download the “Togglable tabs” and “Transitions” plugins. Save these files into your “js” folder.

Next, you need to download the latest version of jQuery in order for the Bootstrap plugins to work.

Open a new document in your code editor and save it as “style.css” inside your CSS folder.

Now that you have all the files you need, in the next step we will link them to the HTML document.

Step 16: Linking the stylesheets and scripts to the HTML file

Place the following lines of code in the <head> of your document. Let’s examine what these lines do:

  • the first two links are for the Bootstrap stylesheet and the CSS file you created in the previous step; notice that we don’t need to add the attribute type=”text/css” to the <link> tag anymore because we are using the HTML5 doctype;
  • the third link tag is for the Lato webfont from Google, which we used to design the website in Photoshop; I chose the font weights 400 and 700 because these are the only ones we need;
  • the first <script> tag links to the jQuery file hosted by Google; it is a common practice nowadays and it is done for performance reasons; if you are interested to find out more about this, you can read a more comprehensive article.
  • the second <script> tag links to the local jQuery file;
  • the last two <script> tags link to the Bootstrap scripts you downloaded in the previous step.
1
2
3
4
5
6
7
8
9
10
<!--Stylesheets and Google Fonts-->
<link rel="stylesheet" href="css/bootstrap.min.css" />
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic" />
 
<!--jQuery and Bootstrap scripts-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js" type="text/javascript"></script>
<script src="js/jquery-1.7.2.js" type="text/javascript"></script>
<script src="js/bootstrap-tab.js"></script>
<script src="js/bootstrap-transition.js"></script>
<!--Stylesheets and Google Fonts-->
<link rel="stylesheet" href="css/bootstrap.min.css" />
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic" />

<!--jQuery and Bootstrap scripts-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js" type="text/javascript"></script>
<script src="js/jquery-1.7.2.js" type="text/javascript"></script>
<script src="js/bootstrap-tab.js"></script>
<script src="js/bootstrap-transition.js"></script>

The position of these <link> and <script> tags does matter. For example, we will need to overwrite some of the Bootstrap styling, like the color of the links and by placing our stylesheet after the Bootstrap stylesheet we take advantage of the CSS order of specification (i.e. when two rules have the same weight/importance the last one will be applied). Also, the Bootstrap scripts will work only with jQuery, which means it has to be placed and loaded before the JavaScript files.

Open the website in your browser and take a look at how it looks like. It is not very impressive, but we already have all the columns properly aligned because we used the Bootstrap classes to define the structure of the layout. And we had to write no CSS styles to achieve this.

Also, there should be only one visible content area for the portfolio, which changes if you click on other thumbnails from above. If it doesn’t, make sure that all the files are in place and all the links point to the correct file.

Note: when something doesn’t work on your website, use the Google Chrome Inspect feature to examine the issues (or find a similar tool if you’re using a different browser). First, you should check the Console to see if the browser could not load a file. If that’s the case, make sure the file is in the right folder and the HTML link includes the correct path. If you have no errors in the Console, the next tab you should check is Elements. Inspect the areas of your website that are not working properly and see how the CSS is applied to those areas. By using the Google Chrome Inspect feature you will not only debug much faster than looking at the source code in your code editor, but you will also understand better how your CSS rules are applied to the website elements.

Part 4 – CSS

Here comes the fun part: styling the website in CSS. I’m sure this is the part most of you enjoy as well. However, it is important to not overlook the HTML foundation. When you are developing a website, give equal importance to both the HTML and the CSS.

Open your “style.css” file and let’s get started.

Step 17: Box Sizing

CSS calculates the total width of a box by adding the border and the padding of the box to its width. Example:

1
2
3
4
5
.box {
    width: 200px;
    padding: 10px;
    border: 1px solid black;
}
.box {
	width: 200px;
	padding: 10px;
	border: 1px solid black;
}

The total width of the “box” class above will be 222px (200px of the width + 10px left padding + 10px right padding + 1px left border + 1px right border). This box sizing model is called “content-box” and CSS applies it by default.

In CSS3 we have the option of setting the box sizing to “border-box”. What this means is that the padding and the border will be applied inside the box. In the example above the total width of the “box” class would be 200px, if we changed box sizing to “border-box”.

So, how do we change the box sizing? Simply by using the “box-sizing” property with the vendor selectors for Mozilla and Webkit browsers (Chrome and Safari). Copy the following rule into your CSS document. The asterisk that we used as selector is called universal selector and it applies the specified styles too all the elements.

1
2
3
4
5
* {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    }
* {
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	}

Step18: General Styles

Add the following CSS properties to the body selector. The background property has a color (which I picked from Photoshop using the Eyedropper Tool) and an image. This ensures that at least the color will be displayed if the browser can’t access the background image or if the user turned off the images in their browser.

Next, we set the main font of the website, which is Lato with a fallback on Helvetica, then Arial and then whatever sans-serif typeface the user’s browser has as default. This means that if the browser can’t access the first font, it will try using the next one and so on.

Then we set up the main text color, which is the color of the headlines and the paragraphs.

1
2
3
4
5
body {
    background: #e3e7e9 url('../images/main-bg.jpg');
    font-family: 'Lato', Helvetica, Arial, sans-serif;
    color: #4e5559;
}
body {
	background: #e3e7e9 url('../images/main-bg.jpg');
	font-family: 'Lato', Helvetica, Arial, sans-serif;
	color: #4e5559;
}

Now let’s add some basic styles for the headlines. First, group all the heading tags into one rule by separating them with commas and set the same font-family and color that you used for the body. Then
select each heading and set its size. The main headlines for each section are <h2> tags and we want them to be displayed in uppercase letters. To achieve this we will use the text-transform property.

1
2
3
4
5
6
7
8
9
10
11
h1, h2, h3, h4, h5, h6 {
    font-family: 'Lato', Helvetica, Arial, sans-serif;
    color: #4e5559;
}
 
h1 {font-size: 32px;}
h2 {font-size: 28px; text-transform: uppercase;}
h3 {font-size: 24px;}
h4 {font-size: 20px;}
h5 {font-size: 18px;}
h6 {font-size: 16px;}
h1, h2, h3, h4, h5, h6 {
	font-family: 'Lato', Helvetica, Arial, sans-serif;
	color: #4e5559;
}

h1 {font-size: 32px;}
h2 {font-size: 28px; text-transform: uppercase;}
h3 {font-size: 24px;}
h4 {font-size: 20px;}
h5 {font-size: 18px;}
h6 {font-size: 16px;}

Select the paragraph tag and set the font-family, the font-size and the line-height. Then apply a white text shadow with the opacity 90%.

In the text shadow property the first value is the horizontal offset, the second value is the vertical offset and the third is the blur radius (by setting the last value to 0 we get a sharp shadow). For the color I used rgba (red, green, blue, alpha) because I wanted to set an opacity to the shadow. You can also input only a RGB color or a HEX value.

Select the anchor tags and set their color and the font size to 16px. Then use the hover selector to set the hover color for the anchor tags.

1
2
3
4
5
6
7
8
9
10
11
12
p {
    font-family: 'Lato', Helvetica, Arial, sans-serif;
    font-size: 16px;
    line-height: 1.5em;
    text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.9);
}
 
a {
    color: #27a3c4;
    font-size: 16px;
}
a:hover {color: #2492af;}
p {
	font-family: 'Lato', Helvetica, Arial, sans-serif;
	font-size: 16px;
	line-height: 1.5em;
	text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.9);
}

a {
	color: #27a3c4;
	font-size: 16px;
}
a:hover {color: #2492af;}

Step 19: Styling the content-box class

When we wrote the HTML we used the “content-box” class for the testimonials and the input fields of the contact form.

We will use the testimonial background from the Photoshop design as reference for building the same background in CSS3. First, we will create a linear top-to-bottom gradient. Select the Eyedropper Tool (I) and pick the top color and bottom color from the testimonial background. To create the CSS3 gradient I used an application called Gradient which I recommend to you if you are on a Mac.

If you’re using a different OS, or you don’t want to purchase the application, there is a free online app called Gradient Generator which you can use to achieve the CSS3 gradient. Simply create the linear gradient using the colors you picked from Photoshop and then copy the code given. Go back to your code editor, select the “content-box” class and paste in the code for the gradient.

Next, we need to create the rounded corners using the border-radius property and the vendor selectors for Webkit and Mozilla. Whenever I need to create rounded corners in CSS3, I open the border-radius.com website, input the radius value in the upper left corner and copy the code into my CSS file.

Now add a 1px solid border to the “content-box” class using the color #c9cbd1.

The testimonial background from the Photoshop design has a white Bevel & Emboss effect at the top and also a drop shadow effect. To create these in CSS we are going to use the box-shadow property. In the code below I separated the two shadows with commas.

First, we have an inset shadow for the Bevel & Emboss effect. For this inset I inputted three values:

  • horizontal offset
  • vertical offset
  • color

Add a comma after the inset shadow and define the drop shadow effect using four values:

  • horizontal offset
  • vertical offset
  • blur radius
  • color (I used rgba in order to set the alpha transparency of the shadow)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.content-box {
    background-color: #f9fafa;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#f9fafa), to(#f0f1f3));
    background-image: -webkit-linear-gradient(top, #f9fafa, #f0f1f3);
    background-image: -moz-linear-gradient(top, #f9fafa, #f0f1f3);
    background-image: -o-linear-gradient(top, #f9fafa, #f0f1f3);
    background-image: -ms-linear-gradient(top, #f9fafa, #f0f1f3);
    background-image: linear-gradient(top, #f9fafa, #f0f1f3);
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#f9fafa', EndColorStr='#f0f1f3')
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
 
    border: 1px solid #c9cbd1;
    -moz-box-shadow:    inset 0 1px #fff, 0 4px 6px rgba(13, 28, 36, 0.08);
    -webkit-box-shadow: inset 0 1px #fff, 0 4px 6px rgba(13, 28, 36, 0.08);
    box-shadow:         inset 0 1px #fff, 0 4px 6px rgba(13, 28, 36, 0.08);
}
.content-box {
	background-color: #f9fafa;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#f9fafa), to(#f0f1f3));
	background-image: -webkit-linear-gradient(top, #f9fafa, #f0f1f3);
	background-image: -moz-linear-gradient(top, #f9fafa, #f0f1f3);
	background-image: -o-linear-gradient(top, #f9fafa, #f0f1f3);
	background-image: -ms-linear-gradient(top, #f9fafa, #f0f1f3);
	background-image: linear-gradient(top, #f9fafa, #f0f1f3);
	filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#f9fafa', EndColorStr='#f0f1f3')
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;

	border: 1px solid #c9cbd1;
	-moz-box-shadow: 	inset 0 1px #fff, 0 4px 6px rgba(13, 28, 36, 0.08);
	-webkit-box-shadow: inset 0 1px #fff, 0 4px 6px rgba(13, 28, 36, 0.08);
	box-shadow: 		inset 0 1px #fff, 0 4px 6px rgba(13, 28, 36, 0.08);
}

Step 20: Creating the buttons

In HTML we added the class “button” for the testimonials button (with the second class “small”) and for the “Visit website” button (with the second class “large”). Now let’s style these classes in CSS using the following properties:

  • display: set this property to inline-block; what this means is that the button will be placed as an inline element, but it will behave as a block element;
  • border: add a 1px solid border for the button;
  • text-transform: set the text to uppercase letters;
  • font-weight: set the font weight to 700;
  • color: set the text color of the button;
  • text-shadow: add a white sharp shadow to the text;
  • cursor: set it to pointer;

Next, we have the border-radius property, the box-shadow (with two types of shadows separated by comma) and the background gradient (which is the same as the gradient of the “content-box” class).

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
.button {
    display: inline-block;
    border: 1px solid #c9cbd1;
    text-transform: uppercase;
    font-weight: bold;
    color: #717b80;
    text-shadow: 1px 1px 0 #fff;
    cursor: pointer;
 
    -webkit-border-radius:  5px;
    -moz-border-radius:     5px;
    border-radius:          5px;
    -moz-box-shadow:    inset 0 1px 0 #fff, 0 2px 5px 0 rgba(13, 28, 36, 0.1);
    -webkit-box-shadow: inset 0 1px 0 #fff, 0 2px 5px 0 rgba(13, 28, 36, 0.1);
    box-shadow:         inset 0 1px 0 #fff, 0 2px 5px 0 rgba(13, 28, 36, 0.1);
 
    background: #f6f7f8;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#f9fafa), to(#f0f1f3));
    background-image: -webkit-linear-gradient(top, #f9fafa, #f0f1f3);
    background-image: -moz-linear-gradient(top, #f9fafa, #f0f1f3);
    background-image: -o-linear-gradient(top, #f9fafa, #f0f1f3);
    background-image: -ms-linear-gradient(top, #f9fafa, #f0f1f3);
    background-image: linear-gradient(top, #f9fafa, #f0f1f3);
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#f9fafa', EndColorStr='#f0f1f3');
}
.button {
	display: inline-block;
	border: 1px solid #c9cbd1;
	text-transform: uppercase;
	font-weight: bold;
	color: #717b80;
	text-shadow: 1px 1px 0 #fff;
	cursor: pointer;

	-webkit-border-radius: 	5px;
	-moz-border-radius: 	5px;
	border-radius: 			5px;
	-moz-box-shadow: 	inset 0 1px 0 #fff, 0 2px 5px 0 rgba(13, 28, 36, 0.1);
	-webkit-box-shadow: inset 0 1px 0 #fff, 0 2px 5px 0 rgba(13, 28, 36, 0.1);
	box-shadow: 		inset 0 1px 0 #fff, 0 2px 5px 0 rgba(13, 28, 36, 0.1);

	background: #f6f7f8;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#f9fafa), to(#f0f1f3));
	background-image: -webkit-linear-gradient(top, #f9fafa, #f0f1f3);
	background-image: -moz-linear-gradient(top, #f9fafa, #f0f1f3);
	background-image: -o-linear-gradient(top, #f9fafa, #f0f1f3);
	background-image: -ms-linear-gradient(top, #f9fafa, #f0f1f3);
	background-image: linear-gradient(top, #f9fafa, #f0f1f3);
	filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#f9fafa', EndColorStr='#f0f1f3');
}

Now we will add the styles for the hover and active states of the button. You should be familiar with the CSS2 properties below, as they are self-explanatory. Let’s analyze the CSS3 transition. This property is currently supported by Wekbit browsers (Chrome and Safari), Mozilla and Opera, so we need to add the vendor prefixes. Both the hover and the active states of the button have two transitions separated by comma. Let’s see what these values represent:

  • first value: we specify which properties we want to transition; in our case we want the background and the text color to have a subtle fade effect; notice that we defined the new values for these properties above;
  • the second value represent the transition-duration;
  • the third value represents the transition-timing-value; “ease” means that the transition effect starts slowly, continues fast and then ends slowly;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
.button:hover {
    background: #fff;
    color: #5aacd5;
    text-decoration: none;
    transition:         background .3s ease, color .3s ease;
    -moz-transition:    background .3s ease, color .3s ease;
    -o-transition:      background .3s ease, color .3s ease;
    -webkit-transition: background .3s ease, color .3s ease;
}
 
.button:active {
    background: #f6f7f8;
    -webkit-box-shadow: inset 0 1px 3px #d7d9df;
    -moz-box-shadow:    inset 0 1px 3px #d7d9df;
    box-shadow:         inset 0 1px 3px #d7d9df;
    border: 1px solid #bec0c5;
    color: #4b96bc;
    transition:         background .1s ease, color .1s ease;
    -moz-transition:    background .1s ease, color .1s ease;
    -o-transition:      background .1s ease, color .1s ease;
    -webkit-transition: background .1s ease, color .1s ease;
}
.button:hover {
	background: #fff;
	color: #5aacd5;
	text-decoration: none;
	transition: 		background .3s ease, color .3s ease;
	-moz-transition: 	background .3s ease, color .3s ease;
	-o-transition: 		background .3s ease, color .3s ease;
	-webkit-transition: background .3s ease, color .3s ease;
}

.button:active {
	background: #f6f7f8;
	-webkit-box-shadow: inset 0 1px 3px #d7d9df;
	-moz-box-shadow: 	inset 0 1px 3px #d7d9df;
	box-shadow: 		inset 0 1px 3px #d7d9df;
	border: 1px solid #bec0c5;
	color: #4b96bc;
	transition: 		background .1s ease, color .1s ease;
	-moz-transition: 	background .1s ease, color .1s ease;
	-o-transition: 		background .1s ease, color .1s ease;
	-webkit-transition: background .1s ease, color .1s ease;
}

If you take a look at the website now you will notice that the buttons have the same size as the text they contain. We want to add some padding to them and we will target the “small” and “large” classes we used in HTML. Also, for the small button set the font-size to 12px.

1
2
3
4
5
6
7
8
9
.large {
    padding: 10px 14px; 
 
}
 
.small {
    padding: 6px 14px;
    font-size: 12px;
}
.large {
	padding: 10px 14px;	

}

.small {
	padding: 6px 14px;
	font-size: 12px;
}

Note on the padding values: when setting the padding or margin in CSS you can input 1, 2, 3 or 4 values.

  • 1 value means that the same padding will be applied for top, right, left and bottom;
  • 2 values (what we used for the button padding): the first one represents the top and bottom padding/margin; the second one represents the left and right padding/margin;
  • 3 values: the first one is the top padding/margin, the second one represents the right and left padding/margin and the third one represents the bottom padding/margin;
  • 4 values: set the padding/margin for top, right, bottom and left (in this exact order);

Your website should look similar to the screenshot below.

Step 21: Styling the header

Now that we added some general styles for the website, let’s start styling each section, from the header to the footer.

Add the following styles to the “header” ID. Since the “container” div is inside the “header” div, the background image that we applied can stretch across the entire width of the browser.

We know that the header has a fixed height, so we can specify it in CSS. For other blocks of the design (e.g. the testimonials container) we can’t use a fixed height because it depends on how much content the block contains.

If you take a look at the Photoshop design you will notice that the website sections are separated by two thin lines: one which is dark blue and the other one which is almost white. We will add these separators using the border-bottom and border-top properties in CSS. For example, the header needs to have a 1px bottom border with the dark blue color of the separator. The top testimonial area will have a 1px top border with the bright color of the separator. This way we will achieve the 2px separator by using only CSS.

1
2
3
4
5
6
7
8
9
10
/********************
HEADER
- Logo
- Navigation
********************/
#header {
    background-image: url("../images/header-bg.jpg");
    height: 150px;
    border-bottom: 1px solid #428ca1;
}
/********************
HEADER
- Logo
- Navigation
********************/
#header {
	background-image: url("../images/header-bg.jpg");
	height: 150px;
	border-bottom: 1px solid #428ca1;
}

Step 22: Styling the logo

We will replace the text of the <h1> tag with the logo image we saved in the first part of this tutorial. Select the anchor tag inside the “logo” ID and add the following styles.

First, we float the logo to the left and set its width and height, which must match the dimensions of your logo image. Next, set the background image and add a top margin of 50px. Indent the text to move it out of the way, so we have only the logo image visible.

1
2
3
4
5
6
7
8
#logo a {
    float: left;
    width: 380px;
    height: 67px;
    background-image: url("../images/logo.png");
    margin-top: 50px;
    text-indent: -9999px;
}
#logo a {
	float: left;
	width: 380px;
	height: 67px;
	background-image: url("../images/logo.png");
	margin-top: 50px;
	text-indent: -9999px;
}

Step 23: Styling the navigation

We used the “navigation” class for both the header and the portfolio navigation bars. For now we will focus on making the header navigation look good and then we will make some small adjustments the portfolio navigation.

Select the “navigation” class, float it to the right, set the list-style to none in order to eliminate the bullet points and add a top margin.

Note: I came up with the 78px margin-top value after I finished styling the entire navigation. I wanted the bottom line of the active item to be aligned with the logo, just like we designed it in Photoshop. I set the initial value for the navigation’s top margin to 50px, I grabbed a screenshot of the website, pasted it in Photoshop and measured the remaining distance between the bottom line of the active item and the bottom edge of the logo (which was 28px). Then I added this value to the initial 50px margin.

Now select the list items from the “navigation” class, float them to the left and add a right margin of 50px. I also set the line-height to 1em.

1
2
3
4
5
6
7
8
9
10
11
.navigation {
    float: right;
    list-style: none;
    margin-top: 78px;
}
 
    .navigation li {
        float: left;
        margin-right: 50px;
        line-height: 1em;
    }
.navigation {
	float: right;
	list-style: none;
	margin-top: 78px;
}

	.navigation li {
		float: left;
		margin-right: 50px;
		line-height: 1em;
	}

The navigation is currently not aligned to the right edge of the container because the last list item has a right margin of 50px. We will use a pseudo class to select the last list item and reset the margin to zero:

1
2
3
ul.navigation li:last-child {
    margin-right: 0;
}
ul.navigation li:last-child {
    margin-right: 0;
}

Select the anchor tags inside the navigation list items and add the styles below.

1
2
3
4
5
6
7
.navigation li a {
    color: #f5f7f8;
    font-size: 15px;
    text-transform: uppercase;
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.3); /* black shadow with the opacity 30% */
    line-height: 1em;
}
.navigation li a {
    color: #f5f7f8;
    font-size: 15px;
    text-transform: uppercase;
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.3); /* black shadow with the opacity 30% */
    line-height: 1em;
}

When you hover over a navigation item, the browser will underline it. We don’t want that, so we will set the text-decoration to none for the hover state.

1
2
3
.navigation li a:hover {
    text-decoration: none;
}
.navigation li a:hover {
    text-decoration: none;
}

Now we will add the styles for the active navigation item. Paste in your CSS file the following rules. In the Photoshop design the active navigation item has a 2px light bottom border and then a 1px dark bottom border. To achieve this double border effect, we are going to place the 2px border on the list item with the class “active” and the 1px border on the anchor tag inside the list item. Add a distance between the text and the border by using the padding-bottom property.

1
2
3
4
5
6
7
8
9
.navigation li.active {
    border-bottom: 2px solid #deeef2;
    padding-bottom: 9px;
}
 
.navigation li.active a {
    border-bottom: 1px solid #428ca1;
    padding-bottom: 9px;
}
.navigation li.active {
    border-bottom: 2px solid #deeef2;
    padding-bottom: 9px;
}

.navigation li.active a {
    border-bottom: 1px solid #428ca1;
    padding-bottom: 9px;
}

Step 24: Styling the top testimonial area

Set the top and bottom borders for the testimonials area using the bright color of the separator. Then add a 40px top and bottom padding.

1
2
3
4
5
6
7
8
/********************
TOP TESTIMONIAL
********************/
#top-testimonial {
    border-top: 1px solid #f2f4f5;
    border-bottom: 1px solid #f2f4f5;
    padding: 40px 0;
}
/********************
TOP TESTIMONIAL
********************/
#top-testimonial {
	border-top: 1px solid #f2f4f5;
	border-bottom: 1px solid #f2f4f5;
	padding: 40px 0;
}

Final note on the “container” class: When we wrote the markup for the website, we placed the “container” class to the same div as the “top-testimonial” ID (unlike the header, where we placed the “container” div inside the “header” div). That is because the top testimonial area has the background of the body, which already stretches across the entire website, so the container class does not cut the background (like it would do on the header div if we were to add the “container” class to the same div as the “header” class). Feel free to change the markup and see how the position of the “container” class affects the background image of the header.

Select the “testimonial-photo” class and set its padding to 5px to place the image in the center of the background container.

1
2
3
 .testimonial-photo {
    padding: 5px;
}
 .testimonial-photo {
	padding: 5px;
}

Select the “testimonial” class and set the vertical padding to 16px and the horizontal padding to 20px. Then add a bottom margin to push down the “more testimonials” button by 20px.

1
2
3
4
.testimonial {
    padding: 16px 20px;
    margin-bottom: 20px;
}
.testimonial {
	padding: 16px 20px;
	margin-bottom: 20px;
}

If you take a look at the HTML code, we have two paragraphs inside the “testimonial” div: one for the actual testimonial and one for the client name (which is inside the “testimonial-info” class). To select the first paragraph we will use the CSS child selector “>”. This means that only the paragraph that is the children of the “testimonial” class will be affected. Set the font style of this paragraph to italic, the font size to 20px and the color to #677075.

1
2
3
4
5
.testimonial > p {
    font-style: italic;
    font-size: 20px;
    color: #677075;
}
.testimonial > p {
	font-style: italic;
	font-size: 20px;
	color: #677075;
}

Select the “testimonial-info” class and align the text to the right, set the font weight to 700 and the color to #677075.

Then select the paragraph and the anchor tag inside the “testimonial-info” class and set their font-size to 17px and the bottom margin to 0.

Note: to apply the same styles to multiple selectors, separate them with commas.

1
2
3
4
5
6
7
8
9
10
11
.testimonial-info {
    text-align: right;
    font-weight: 700;
    color: #677075;
}
 
    .testimonial-info p,
    .testimonial-info a {
        font-size: 17px;
        margin-bottom: 0;
    }
.testimonial-info {
	text-align: right;
	font-weight: 700;
	color: #677075;
}

	.testimonial-info p,
	.testimonial-info a {
		font-size: 17px;
		margin-bottom: 0;
	}

Select the “button” class from the “top testimonial” ID and float it to the right.

1
2
3
#top-testimonial .button {
    float: right;
}
#top-testimonial .button {
    float: right;
}

Step 25: Styling the portfolio headline and navigation

Let’s add the background image for the portfolio area, the top and bottom borders and some padding. Copy and paste the following lines of code into your CSS file.

1
2
3
4
5
6
7
8
9
/********************
PORTFOLIO
********************/
#portfolio {
    padding: 20px 0 50px 0;
    background: #80bcca url("../images/secondary-bg.jpg");
    border-top: 1px solid #428ca1;
    border-bottom: 1px solid #428ca1;
}
/********************
PORTFOLIO
********************/
#portfolio {
	padding: 20px 0 50px 0;
	background: #80bcca url("../images/secondary-bg.jpg");
	border-top: 1px solid #428ca1;
	border-bottom: 1px solid #428ca1;
}

Select the level 2 heading from the “portfolio” div, set its color, add a black shadow with the opacity 30%, add a bottom margin of 12px and float it to the left.

1
2
3
4
5
6
#portfolio h2 {
    color: #f5f7f8;
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.3);
    margin-bottom: 12px;
    float: left;
}
#portfolio h2 {
    color: #f5f7f8;
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.3);
    margin-bottom: 12px;
    float: left;
}

We used the “navigation” class for both the header navigation and the portfolio one. Now we will overwrite some of the styles for the portfolio navigation. First, select the “navigation” class from the “portfolio” div and set the top margin to 10px.

1
2
3
#portfolio .navigation {
    margin-top: 10px;
}
#portfolio .navigation {
    margin-top: 10px;
}

We want the portfolio navigation items to be displayed in lowercase letters. Select the anchor tags inside the “navigation” class list items and set the “text-transform” to none.

1
2
3
#portfolio .navigation li a {
    text-transform: none;
}
#portfolio .navigation li a {
    text-transform: none;
}

The gap between the active navigation item and the bottom border is too large. Select the active list item and the anchor tag inside it and set their bottom padding to 5px.

1
2
3
4
#portfolio .navigation li.active,
#portfolio .navigation li.active a {
    padding-bottom: 5px;
}
#portfolio .navigation li.active,
#portfolio .navigation li.active a {
    padding-bottom: 5px;
}

Step 26: Styling the portfolio container

Select the “portfolio-box” class and add the main background image to it. Then add a 1px solid border to the container. Set the padding to 30px and the width to 1002px.

Why 1002px you ask? The portfolio thumbnails have a width of 220px with three gaps of 20px between them (which adds up to 940px; anything less than this value and the images will not float correctly). The “portfolio-box” class has a 1px border and 30px padding, which are applied inside the box (because of the border-box model that we are using). Therefore, to keep the images in a 940px container, we have to add the padding and the border to the box width.

1
2
3
4
5
6
.portfolio-box {
    background: #e3e7e9 url('../images/main-bg.jpg');
    border: 1px solid #428ca1;
    padding: 30px;
    width: 1002px; /* +2px to compensate for the border */
}
.portfolio-box {
	background: #e3e7e9 url('../images/main-bg.jpg');
	border: 1px solid #428ca1;
	padding: 30px;
	width: 1002px; /* +2px to compensate for the border */
}

Now if you take a look at the design, you will notice that there are several issues with the portfolio container. First of all, it is displayed underneath the headline and the navigation and we don’t want that. Second of all, the portfolio items are not displayed correctly. Also, the “portfolio-box” class is not centered. We will solve the first two issues using a single line of CSS, which is “overflow: hidden;”. If you refresh the page you will notice that the portfolio container displays correctly now.

What happened, you ask? Well, the “portfolio-box” div includes elements that are floated (all the span3 columns). In situations like these, where a parent contains floated children, the height of the container is not calculated correctly. That is why we added a fixed width to the header. However, we cannot do the same for this area because the content can change and the container has to adapt to it. So, we used the overflow property.

1
2
3
4
5
6
7
.portfolio-box {
    background: #e3e7e9 url('../images/main-bg.jpg');
    border: 1px solid #428ca1;
    padding: 30px;
    width: 1002px; /* +2px to compensate for the border */
    overflow: hidden;
}
.portfolio-box {
	background: #e3e7e9 url('../images/main-bg.jpg');
	border: 1px solid #428ca1;
	padding: 30px;
	width: 1002px; /* +2px to compensate for the border */
	overflow: hidden;
}

To finish styling the portfolio container set the left margin to -31px and add rounded corners using the border-radius property.

Why did we set the left margin to -31px, you ask? It is because the portfolio container has 30px padding and 1px border, which add up to 62px (left and right padding and border). The container is currently aligned at the left edge of the website, which means that all the extra 62px are added to the right. Therefore, we need to add a negative 31px margin to the left in order to center the box.

1
2
3
4
5
6
7
8
9
10
11
.portfolio-box {
    background: #e3e7e9 url('../images/main-bg.jpg');
    border: 1px solid #428ca1;
    padding: 30px;
    width: 1002px; /* +2px to compensate for the border */
    overflow: hidden;
    margin-left: -31px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}
.portfolio-box {
	background: #e3e7e9 url('../images/main-bg.jpg');
	border: 1px solid #428ca1;
	padding: 30px;
	width: 1002px; /* +2px to compensate for the border */
	overflow: hidden;
	margin-left: -31px;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
}

Step 27: Styling the portfolio thumbnails

First, let’s get rid of those ugly bullet points in front of the images. Select the unordered list from the “portfolio-box” div and set the list-style to none.

Then select the list items and add a 1px solid border to them using the color #e8ebef. Add a black shadow with the blur radius set to 5px and the opacity to 30%. Then set the bottom margin of the list items to 20px.

1
2
3
4
5
6
7
8
9
10
11
.portfolio-box ul {
    list-style: none;
}
 
    .portfolio-box ul li {
        border: 1px solid #e8ebef;
        -moz-box-shadow:    0 0 5px 0 rgba(0, 0, 0, 0.3);
        -webkit-box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.3);
        box-shadow:         0 0 5px 0 rgba(0, 0, 0, 0.3);
        margin-bottom: 20px;
    }
.portfolio-box ul {
    list-style: none;
}

    .portfolio-box ul li {
        border: 1px solid #e8ebef;
        -moz-box-shadow:    0 0 5px 0 rgba(0, 0, 0, 0.3);
        -webkit-box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.3);
        box-shadow:         0 0 5px 0 rgba(0, 0, 0, 0.3);
        margin-bottom: 20px;
    }

Now we will style the active item to indicate which portfolio thumbnail is selected. Add a blue 1px border to the list item with the “active” class and eliminate the box-shadow by setting all values to zero. Check the website in your browser and click on different portfolio items. The ones you click on should have the blue border and no shadow.

1
2
3
4
5
6
.portfolio-box ul li.active {
    border: 1px solid #56c3dc;
    -moz-box-shadow:    0 0 0 0 rgba(0, 0, 0, 0);
    -webkit-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
    box-shadow:         0 0 0 0 rgba(0, 0, 0, 0);
}
.portfolio-box ul li.active {
    border: 1px solid #56c3dc;
    -moz-box-shadow:    0 0 0 0 rgba(0, 0, 0, 0);
    -webkit-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
    box-shadow:         0 0 0 0 rgba(0, 0, 0, 0);
}

Select the level 3 heading from the “portfolio” ID and set its bottom margin to 12px to push down the paragraphs of text.

1
#portfolio h3 {margin-bottom: 12px;}
#portfolio h3 {margin-bottom: 12px;}

Step 28: Styling the “About & Testimonials” area

Select the “about” ID and add the following styles to it.

1
2
3
4
5
6
7
8
/********************
ABOUT & TESTIMONIALS
********************/
#about {
    padding: 30px 0;
    border-top: 1px solid #f2f4f5;
    border-bottom: 1px solid #f2f4f5;
}
/********************
ABOUT & TESTIMONIALS
********************/
#about {
	padding: 30px 0;
	border-top: 1px solid #f2f4f5;
	border-bottom: 1px solid #f2f4f5;
}

Select the level 2 headings inside the “about” ID and add a bottom margin of 12px.

1
#about h2 {margin-bottom: 12px;}
#about h2 {margin-bottom: 12px;}

Now we will work on creating the stacked photos effect for the about image. The HTML hierarchy for the image is:

  • a div with the classes “content-box” and “rotate”
  • a div with the classes “content-box” and “about-image”
  • the actual image

Select the “rotate” class and add the following styles. The first 4 styles don’t need any explanations, so we’ll focus only on the transform property.

All browsers support the 2D transforms, but only Safari and Chrome (Webkit) support the 3D transform at the moment. We are going to use the “rotate” value, which is 2D.

First, we rotate the following class by -6 degrees, which will rotate all its children.

1
2
3
4
5
6
7
8
9
10
11
.rotate {
    display: inline-block;
    padding: 0;
    float: left;
    margin: 0 20px 10px 0;
    transform:          rotate(-6deg);
    -ms-transform:      rotate(-6deg);
    -moz-transform:     rotate(-6deg);
    -webkit-transform:  rotate(-6deg);
    -o-transform:       rotate(-6deg);
}
.rotate {
	display: inline-block;
	padding: 0;
	float: left;
	margin: 0 20px 10px 0;
	transform:			rotate(-6deg);
	-ms-transform:		rotate(-6deg);
	-moz-transform:		rotate(-6deg);
	-webkit-transform:	rotate(-6deg);
	-o-transform:		rotate(-6deg);
}

Now select the “about-image” class and rotate it by 6 degrees. This will compensate for the -6 degrees value of the main “rotate” class.

1
2
3
4
5
6
7
.about-image {
    transform:          rotate(6deg);
    -ms-transform:      rotate(6deg);
    -moz-transform:     rotate(6deg);
    -webkit-transform:  rotate(6deg);
    -o-transform:       rotate(6deg);
}
.about-image {
	transform:			rotate(6deg);
	-ms-transform:		rotate(6deg);
	-moz-transform:		rotate(6deg);
	-webkit-transform:	rotate(6deg);
	-o-transform:		rotate(6deg);
}

To display the “content-box” border of the image, add the following styles.

1
2
3
4
.about-image img {
    padding: 5px;
    max-width: none;
}
.about-image img {
	padding: 5px;
	max-width: none;
}

Now let’s add a hover effect. We want the bottom photo frame (the “rotate” class) to have a rotate value of 0 degrees on mouse hover. Add the following styles to the “rotate” class.

1
2
3
4
5
6
7
.rotate:hover {
    transform:          rotate(0deg);
    -ms-transform:      rotate(0deg);
    -moz-transform:     rotate(0deg);
    -webkit-transform:  rotate(0deg);
    -o-transform:       rotate(0deg);
}
.rotate:hover {
	transform:			rotate(0deg);
	-ms-transform:		rotate(0deg);
	-moz-transform:		rotate(0deg);
	-webkit-transform:	rotate(0deg);
	-o-transform:		rotate(0deg);
}

If you test the hover effect, you will notice that the image rotates as well, which is how it is supposed to work. However, we don’t want the image to rotate, so we will add the following styles to it.

1
2
3
4
5
6
7
.rotate:hover .about-image {
    transform:          rotate(0deg);
    -ms-transform:      rotate(0deg);
    -moz-transform:     rotate(0deg);
    -webkit-transform:  rotate(0deg);
    -o-transform:       rotate(0deg);
}
.rotate:hover .about-image {
	transform:			rotate(0deg);
	-ms-transform:		rotate(0deg);
	-moz-transform:		rotate(0deg);
	-webkit-transform:	rotate(0deg);
	-o-transform:		rotate(0deg);
}

Now we will set a new font size for the testimonials text. Select the “testimonial” class from the “about” ID and add the styles below.

1
2
3
4
5
6
7
8
#about .testimonial p {
    font-size: 16px;
}
 
#about .testimonial-info p,
#about .testimonial-info a {
    font-size: 15px;
}
#about .testimonial p {
	font-size: 16px;
}

#about .testimonial-info p,
#about .testimonial-info a {
	font-size: 15px;
}

Step 29: Styling the footer

Select the “footer” ID and add the following styles to it.

1
2
3
4
5
6
7
8
9
10
/********************
FOOTER
********************/
#footer {
    padding: 30px 0 40px 0;
    background: #80bcca url('../images/secondary-bg.jpg');
    color: #f5f7f8;
    border-top: 1px solid #428ca1;
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.3);
}
/********************
FOOTER
********************/
#footer {
	padding: 30px 0 40px 0;
	background: #80bcca url('../images/secondary-bg.jpg');
	color: #f5f7f8;
	border-top: 1px solid #428ca1;
	text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.3);
}

Select the level 2 headings inside the “footer” div and add a bottom margin of 12px.

1
#footer h2 {margin-bottom: 12px;}
#footer h2 {margin-bottom: 12px;}

Select the heading of the “twitter-feed” div and set its color to #f5f7f8 and float it to the left.

1
2
3
4
#twitter-feed h2 {
    color: #f5f7f8;
    float: left;
}
#twitter-feed h2 {
	color: #f5f7f8;
	float: left;
}

Float the anchor tag inside the “twitter-feed” div (the “follow me” link) to the right, set its color and add a line-height of 2.2em.

1
2
3
4
5
#twitter-feed a {
    color: #f5f7f8;
    float: right;
    line-height: 2.2em;
}
#twitter-feed a {
	color: #f5f7f8;
	float: right;
	line-height: 2.2em;
}

Select the paragraphs inside the “tweets” class and add the styles below. Notice that we used the “border-top” property to create the dashed line separator between the tweets. By using the “clear:both;” property we are telling CSS to not allow any floated elements to the left or the right side. If we don’t set this property, the first tweet will float next to the level 2 heading of this area.

1
2
3
4
5
6
7
.tweets p {
    clear: both;
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.3);
    padding: 8px 0 10px 0;
    border-top: 1px dashed #afd5de;
    font-style: italic;
}
.tweets p {
	clear: both;
	text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.3);
	padding: 8px 0 10px 0;
	border-top: 1px dashed #afd5de;
	font-style: italic;
}

Step 30: Styling the contact form

Select the “contact” ID and add the following styles to it to create a container with the gray background, just like we did for the portfolio box.

1
2
3
4
5
6
7
8
9
10
#contact {
    background: #e9edf0 url('../images/main-bg.jpg');
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    padding: 20px 30px;
    overflow: hidden;
    border: 1px solid #428ca1;
    text-shadow: 1px 1px 0 #fff;
}
#contact {
	background: #e9edf0 url('../images/main-bg.jpg');
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	padding: 20px 30px;
	overflow: hidden;
	border: 1px solid #428ca1;
	text-shadow: 1px 1px 0 #fff;
}

Now we will style the placeholder attributes. Wekbit browsers use the “::-webkit-input-placeholder” selector and Mozilla uses “:-moz-placeholder”. Add the following rules to your CSS file to style the placeholder text.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
    font-family: 'Lato', Helvetica, Arial, sans-serif;
    font-size: 15px;
    font-weight: 400;
    font-style: italic;
    color: #717b80;
}
 
input:-moz-placeholder,
textarea:-moz-placeholder {
    font-family: 'Lato', Helvetica, Arial, sans-serif;
    font-size: 15px;
    font-weight: 400;
    font-style: italic;
    color: #717b80;
}
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
	font-family: 'Lato', Helvetica, Arial, sans-serif;
	font-size: 15px;
	font-weight: 400;
	font-style: italic;
	color: #717b80;
}

input:-moz-placeholder,
textarea:-moz-placeholder {
	font-family: 'Lato', Helvetica, Arial, sans-serif;
	font-size: 15px;
	font-weight: 400;
	font-style: italic;
	color: #717b80;
}

Now let’s style the input and the textarea tags by setting the width, the padding and the font information.

1
2
3
4
5
6
7
8
9
10
11
input,
textarea {
    width: 480px;
    padding: 18px 12px;
    margin-bottom: 10px;
    font-family: 'Lato', Helvetica, Arial, sans-serif;
    font-size: 15px;
    font-weight: 400;
    font-style: normal;
    color: #565d60;
}
input,
textarea {
	width: 480px;
	padding: 18px 12px;
	margin-bottom: 10px;
	font-family: 'Lato', Helvetica, Arial, sans-serif;
	font-size: 15px;
	font-weight: 400;
	font-style: normal;
	color: #565d60;
}

For the textarea tag set the minimum height to 140px and the maximum width to 480px. Also, set the top and bottom padding to 10px and the left and right padding to 12px.

1
2
3
4
5
textarea {
    min-height: 140px;
    max-width: 480px;
    padding: 10px 12px;
}
textarea {
	min-height: 140px;
	max-width: 480px;
	padding: 10px 12px;
}

Now we will style the submit button. You should be familiar with all the properties below as we covered them when we created the “button” class.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
input[type=submit] {
    color: #f5f7f8;
    display: block;
    border: 1px solid #218fae;
    text-transform: uppercase;
    font-weight: 400;
    text-shadow: 1px 1px 0 #3f9cb8;
    cursor: pointer;
    width: 100px;
    float: right;
    padding: 8px 14px;
 
    -webkit-border-radius:  5px;
    -moz-border-radius:     5px;
    border-radius:          5px;
    -moz-box-shadow:    inset 0 1px 0 #80d3e8, 0 2px 5px 0 rgba(13, 28, 36, 0.1);
    -webkit-box-shadow: inset 0 1px 0 #80d3e8, 0 2px 5px 0 rgba(13, 28, 36, 0.1);
    box-shadow:         inset 0 1px 0 #80d3e8, 0 2px 5px 0 rgba(13, 28, 36, 0.1);
 
    background-color: #56bfdd;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#56bfdd), to(#45b3d5));
    background-image: -webkit-linear-gradient(top, #56bfdd, #45b3d5);
    background-image: -moz-linear-gradient(top, #56bfdd, #45b3d5);
    background-image: -o-linear-gradient(top, #56bfdd, #45b3d5);
    background-image: -ms-linear-gradient(top, #56bfdd, #45b3d5);
    background-image: linear-gradient(top, #56bfdd, #45b3d5);
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#56bfdd', EndColorStr='#45b3d5');
}
input[type=submit] {
	color: #f5f7f8;
	display: block;
	border: 1px solid #218fae;
	text-transform: uppercase;
	font-weight: 400;
	text-shadow: 1px 1px 0 #3f9cb8;
	cursor: pointer;
	width: 100px;
	float: right;
	padding: 8px 14px;

	-webkit-border-radius: 	5px;
	-moz-border-radius: 	5px;
	border-radius: 			5px;
	-moz-box-shadow: 	inset 0 1px 0 #80d3e8, 0 2px 5px 0 rgba(13, 28, 36, 0.1);
	-webkit-box-shadow: inset 0 1px 0 #80d3e8, 0 2px 5px 0 rgba(13, 28, 36, 0.1);
	box-shadow: 		inset 0 1px 0 #80d3e8, 0 2px 5px 0 rgba(13, 28, 36, 0.1);

	background-color: #56bfdd;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#56bfdd), to(#45b3d5));
	background-image: -webkit-linear-gradient(top, #56bfdd, #45b3d5);
	background-image: -moz-linear-gradient(top, #56bfdd, #45b3d5);
	background-image: -o-linear-gradient(top, #56bfdd, #45b3d5);
	background-image: -ms-linear-gradient(top, #56bfdd, #45b3d5);
	background-image: linear-gradient(top, #56bfdd, #45b3d5);
	filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#56bfdd', EndColorStr='#45b3d5');
}

Step 31: Styling the copyright area

Select the “copyright” ID and add the following styles.

1
2
3
4
5
6
7
8
9
/********************
COPYRIGHT
********************/
#copyright {
    background: #81baca url('../images/copyright-bg.jpg') repeat-x;
    overflow: hidden;
    height: 60px;
    color: #cbe2ea;
}
/********************
COPYRIGHT
********************/
#copyright {
	background: #81baca url('../images/copyright-bg.jpg') repeat-x;
	overflow: hidden;
	height: 60px;
	color: #cbe2ea;
}

Now we will style the paragraph inside the “copyright” div. Select it and add the following styles. By setting the line-height to 60px, which is the height of the “copyright” div, the text will be vertically aligned.

1
2
3
4
5
6
#copyright p {
    text-align: center;
    line-height: 60px;
    font-size: 15px;
    text-shadow: 1px 1px 0 #264f5d;
}
#copyright p {
    text-align: center;
    line-height: 60px;
    font-size: 15px;
    text-shadow: 1px 1px 0 #264f5d;
}

Final result

That’s it! We finished creating our portfolio website using Bootstrap. Check out the demo to see the live version of the website. I hope you enjoyed this tutorial and you learned some new web design techniques. If you have any questions or issues, post them in the comments section below and I will get back to you.

5 Responses

  1. Maxim

    Thank you very very much! ))

  2. Nishant

    hello gr8 tutorial.. thanks for this useful tutorial.
    tell me where to download javascript files.. Now go to the JavaScript Plugins page of Bootstrap and download the “Togglable tabs” and “Transitions” plugins.
    where to download dear.. twitter not providing download link to download .js

  3. thx for this great tutorial!

    Why u did not made it Responsive?

    Thx

  4. Hello, one easy question, what plugin are you using for copy and paste the code in colour and numbered??

    Thx

  5. Thanks this help my a lot with my first setps into this

Leave a Comment

What's on your mind? Fill out the form below to let us know.