Skip to content

Instantly share code, notes, and snippets.

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

Borough Classifier

Using the first two items as an example, add class attributes to the remaining list items.

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

If you finish early, add your own styles to the different boroughs.

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.

<!DOCTYPE html>
<html>
<head>
<title>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 class="brooklyn">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>
{"hiddenUIComponents":["editor.javascript"]}
.manhattan {
font-size: 2em;
}
.brooklyn {
font-family: Impact, sans-serif;
}
.queens {
color: orange;
}
.staten-island {
text-decoration: wavy underline;
}
.bronx {
letter-spacing: 1em;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment