PriceCo CSS styling

Assignment 4 for CS 337

In this assignment, you will be provided with a single HTML file, as well as several image files, that will make up a bare-bones site for a retail company called PriceCo (like costco, but worse). For this assignment, you do not need to write a single line of HTML. In fact, you are not allowed to change any of the provided html! Your task will be two write three different CSS style / layout patterns for the website, that the user can choose to swap between. The first step is to download the zip file containing the starter html and image files, available here:

Starter HTML + Images

If you open up index.html before creating any CSS, it should look something like this:

Not very pretty! CSS to the rescue.

Your task is to implement three different layouts, in three different CSS files: styleA.css, styleB.css and styleC.css. For the purposes of this assignment, these three CSS files do not have to be in a style or css subdirectory. They can exist just within public_html. What each of these should look like is described in the sections below. Note that there are three buttons, already in the HTML, that when clicked on will switch between the three styles. You can use these buttons for testing, and they should also be included in the final submitted product.

Style A

The behavior of PriceCo with styling A is shown above. Your implementation should emulate the same behavior, as close as possible, though you may take some creative liberty with colors and fonts. Some key aspects of this layout:

• The size of the header, navigation bar, and main page content, all are in fixed position and scale with the screen resizing.
• The elements consume all of the available screen real-estate.
• Rather than the whole page scrolling, only the main page content view scrolls. The navigation bar and header should not scroll.
• The text in the content “wraps” to the size of the containing element.
• The PriceCo logo is aligned to the top-left of the page, and the company name / tagline is right-aligned.

Also notice that Style A, B, and C buttons in the bottom-right corner. The buttons are in a fixed position on the screen, and are partially transparent so that the content underneath is still visible. You should use CSS to style and position these buttons in this way for all three of the PriceCo layouts.

Style B

The behavior of PriceCo with styling C is shown above. Again, your implementation should emulate the same behavior, as close as possible, though you may take some creative liberty with colors and fonts. Some key aspects of this layout:

• The header and the navigation bar are both in the middle of the screen, and consume (roughly) one third of the screen width.
• The two groups of products (the tech items, and the outdoorsy items) are on either the left or right third of the screen.
• The products sections on the left and right are individually scrollable.
• The text nicely wraps within the product areas.
• All of the main elements (header, navigation bar, the two product zones) scale with the size of the screen, and maintain their proportional screen real-estate consumption.
• The navigation links are centered.
• The PriceCo shopping cart logo shows up to the left of the company name.

Style C

Finally, the behavior of PriceCo with styling C is shown above. Your implementation should emulate the same behavior, as close as possible, though you may take some creative liberty with colors and fonts. Some key aspects of this layout:

• The header and navigation zones have a fixed width and height (not relative to the window size).
• The header is in the top-left (using float)
• The navigation bar is in the top-right (also using float)
• The whole page should scroll, not just the product area.
• The product text should not be covered by the header and navigation zones. It should wrap nicely, as shown.

Other Rules

Make sure that you take a look at the style guide on the class site before turning in your project. Specifically, make sure that you validate the HTML, and include header comments. Otherwise you might lose points!

Due Date and Submission

To turn in the project, zip up the public_html directory, and submit via gradescope. Make sure that all of the html and image files are included in the zip. The project is due by 7pm on Wednesday February 1st 2023.