Two Column Layout Vertical Menu Tutorial
Complete the Gallery
Section 2 Lesson 2

Two Column Layout Vertical Menu Tutorial
Complete the Gallery
Section 2 Lesson 2

 

In this lesson the adventure gallery content is added. You create a grid where each row contains cells for each adventure. Each row has three cells.

Step 1: Download the gallery images.

Download the the mountain graphic files and place into the assets/graphics.

mountain_01.jpg

mountain_01.jpg

Download

mountain_02.jpg

mountain_02.jpg

Download

mountain_03.jpg

mountain_03.jpg

Download

mountain_04.jpg

mountain_04.jpg

Download

mountain_05.jpg

mountain_05.jpg

Download

mountain_06.jpg

mountain_06.jpg

Download

Step 2: Add content for the gallery.

Replace line 42 with lines 42-80 in the index.html file in your practice folder, then save.

This adds content for the feature gallery. A CSS gallery-row class selector is added as a container to handle layout of multiple gallery-cell classes.

There are no changes in the site.css file from the last lesson.

Completed Step 2

Live Screenshot Web Browser for Step 2

Step 3: Style gallery rows.

Insert lines 99 – 102 in the site.css file in your practice folder, then save.

This adds the styling for the gallery-row class selector.

There are no changes in the index.html file from the last step.

Completed Step 3

Live Screenshot Web Browser for Step 3