Two Column Layout Vertical Menu Tutorial
Complete Feature Article
Section 2 Lesson 1

Download the mountain_feature.jpg file and place into the assets/graphics.

mountain_feature.jpg

Download

Insert lines 31-35 into the index.html file in your practice folder, then save.

This begins updating the content for the feature article.

You can reuse the gallery-cell class for other content later.

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

Completed Step 2

Insert lines 96 -103 in the site.css file in your practice folder, then save.

The gallery-cell class selector contains the float:left property. This allows block elements to appear to the right of element’s using the gallery-cell class. The

element in this case will now appear to the right.

The remaining styling is for the box model.

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

Completed Step 3

Insert lines 104 -110 in the site.css file in your practice folder, then save.

The gallery-cell class is expecting a div , h3 and another div element in that order.

The CSS pseudo selector div:first-child provides a means to select the first div element. For the gallery-cell class the first div element contains the graphic thumb nail image. Here you are centering that image.

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

Completed Step 4