noxxaz / css-mockup-bees

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Matching Mockups #001: Busy Bees

Table

In this activity, you'll be creating a simple 3-column table. You should aim to make your version look as identical as possible to the provided version. Matching the given mockups with absolute 100% accuracy is not expected, however, you should prioritize the objectives listed below.

Basic Objectives

  • Create a table with multiple rows and columns.
    • The top header row should list the name of each column, and should be a different color from the other rows.
    • Every 2nd row should have a slightly darker background color. Use a CSS pseudo-class to achieve this.
    • The bottom row of the table should have a slightly thicker border bottom. Use a CSS pseudo-class to achieve this.
    • When the user hovers over a row, its background color should change.

Fonts Used

The following fonts are available via Google Fonts:

  • Arvo - used for headers
  • Lato - used for the rest of the page content

About


Languages

Language:HTML 67.6%Language:CSS 32.4%