Scribd
Upload
30 views2 pages

A2-1 Instructions

This document provides instructions for Assignment 2-1, which focuses on applying CSS floats to generate multi-column page layouts. The tasks include: 1) Creating a new folder for the case study, 2) Updating the HTML markup on the home and plants pages, and 3) Adding CSS rules to float elements, clear floats, and generate multi-column layouts for the navigation, content sections, and footer.

Uploaded by

Balineni Venky
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
30 views2 pages

A2-1 Instructions

This document provides instructions for Assignment 2-1, which focuses on applying CSS floats to generate multi-column page layouts. The tasks include: 1) Creating a new folder for the case study, 2) Updating the HTML markup on the home and plants pages, and 3) Adding CSS rules to float elements, clear floats, and generate multi-column layouts for the navigation, content sections, and footer.

Uploaded by

Balineni Venky
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 2

Assignment.2-1 (Chapter.

6 Multi-column layout) instructions

This assignment is a continuation of the previous assignment with a focus on the application of CSS float
to generate multi-column layouts. The expected outputs for home and plants page are given blow:

Task.1 – create case study folder

1. Copy the entire case study folder “ggarden1.3” and name the copy as “ggarden2.1”

Task.2 - HTML

1. Use an unordered list to organize navigation links inside both the main <nav> and those quick
links in <footer>
2. On each page, add a header link that refers to the home page

<h1><a href=”index.html>heading text…</a><h1>

3. On each page, assign “class=item33” to each immediate child <div> of <footer>


4. On home page, replace <ul> inside <main> with a <div> that has an id = “muticol”, and change
each <li> element to a <section> element containing the following substructure:

<section class=”item25”>

<h3><span class=”icon”>icontext</span>subheading</h3>

</section>

Where “icontext” is a placeholder that should be replaced with the following Unicode icons in
order:

a. &#x265A;
b. &#x2619;
c. &#x1F324;
d. &#x2698;
5. On plants page, switch the source code order of <h3> and <img> inside of each <section> (inside
the <div> with id=“categories”)

CSS

1. Float <nav> to the left; then expand the width of <nav> band by increasing the left and right
padding of “nav a” to 40px while keeping the top and bottom padding to 10px; using the
selector “nav a:hover” to style an “hovered” link with text shadow value: “0px 0px 1px rgb(20,
70, 20)”;
2. Apply “overflow:hidden” to <main> to clear float due to <nav>; visualize the left border of
<main> with a consistent light color (e.g., rgb(158,194, 143));
3. Using the descendant selector “h1 a” to remove the default underline of header link text and
change the text color to “#eee”; then move the text shadow from <h1> to the “:hover” pseudo-
class of header link instead;
4. Configure “.item33” class to float to the left, and move all styles for the selector “footer > div” to
“.item33”; then clear float on both sides of the “#copyright”
5. Configure “.icon” class as “block” display, and set the font size to 3em and text color to
“rgb(35,102, 12)”
6. Configure “.item25” class to float to the left with a width of “25%”, and align text to “center”; to
clear float, apply “overflow:auto” on “#multicol”;
7. Float the selector “#catgories section” to left and set the “width” to “50%” to generate a two-
column layout locally;
8. For images inside “#categories”, double the size to “160px” in both width and height, and float
them to the left; then apply “overflow:auto” on “#categories section” to clear float. To align the
top of subheading (<h3>) text with the top of corresponding image, set “margin-top” of <h3>
inside “#categories” to “0”. As the size of images increases, It’s necessary to apply “object-
fit:cover” to those images to avoid observable distortion.
9. Lastly, set width of “wrapper” to “90%”.

You might also like