Skip to content

Instantly share code, notes, and snippets.

@outoftime

outoftime/README.md

Last active December 12, 2017 22:22
Show Gist options
  • Save outoftime/b015f378916760db44f884f88d7d345d to your computer and use it in GitHub Desktop.
Save outoftime/b015f378916760db44f884f88d7d345d to your computer and use it in GitHub Desktop.
Download ZIP
Exported from Popcode. Click to import: https://popcode.org/?gist=b015f378916760db44f884f88d7d345d
Raw
README.md

Borough Classifier

Using the first item as an example, add class attributes to the remaining list items. Each list item‘s class attribute should correspond to the borough it’s in.

Then, finish the CSS by giving each borough its own unique style.

Make sure the class attributes you add to your HTML match the class selectors in the CSS exactly!

Borough Reference

Bronx

  • Bronx Zoo
  • New York Botanical Garden
  • Yankee Stadium

Brooklyn

  • Brooklyn Botanical Garden
  • Brooklyn Museum of Art
  • DUMBO

Manhattan

  • MOMA
  • The Empire State Building
  • The Cloisters
  • Times Square

Queens

  • Citi Field
  • JFK Airport
  • MOMA

Staten Island

  • South Beach

If you're done early...

Highlight your favorite tourist attraction in each borough by adding a dotted border. Do this by using the same class for all the highlighted attractions. If you want an extra challenge add a background image to each highlighted attraction and adjust the color of the text so its legible.

Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>03.2 Classes: Dream Travel</title>
</head>
<body>
<h1>Places I'd love to visit on my trip to NEW YORK CITYYYYYY</h1>
<p class="manhattan">Times Square</p>
<p>Brooklyn Museum of Art</p>
<p>South Beach</p>
<p>Brooklyn Botanical Garden</p>
<p>Bronx Zoo</p>
<p>The Cloisters</p>
<p>Citi Field</p>
<p>The Empire State Building</p>
<p>DUMBO</p>
<p>Yankee Stadium</p>
<p>New York Botanical Garden</p>
<p>JFK Airport</p>
<p>MOMA</p>
</body>
</html>
Raw
popcode.json
{"hiddenUIComponents":["editor.javascript"]}
Raw
styles.css
.manhattan {
font-size: 2em;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment