Skip to content

Instantly share code, notes, and snippets.

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

Subway Line Colors

Give all the subway lines the right color!

Look in the HTML—we have assigned a class corresponding to the subway line color for each individual line.

Start with the Seventh Avenue line, which has the class seventh-ave. Then see how many other lines you can get through!

You do not need to edit the HTML; you only need to add CSS.

Feel free to just use standard CSS colors like red, green, etc. But if you want to use the official subway line colors, you can find the hex codes on the MTA’s web site.

If you finish early…

If you're done early, give the subway lines an extra style boost and make them look like they do on the subway signs. Use this image as a guide: alt text

<!DOCTYPE html>
<html>
<head>
<title>New York Subway Lines</title>
</head>
<body>
<h1>New York Subway Lines</h1>
<ul>
<li class="seventh-ave">1</li>
<li class="seventh-ave">2</li>
<li class="seventh-ave">3</li>
<li class="lexington">4</li>
<li class="lexington">5</li>
<li class="lexington">6</li>
<li class="flushing">7</li>
<li class="eighth-ave">A</li>
<li class="sixth-ave">B</li>
<li class="eighth-ave">C</li>
<li class="sixth-ave">D</li>
<li class="eighth-ave">E</li>
<li class="sixth-ave">F</li>
<li class="crosstown">G</li>
<li class="archer-ave">J</li>
<li class="canarsie">L</li>
<li class="sixth-ave">M</li>
<li class="broadway">N</li>
<li class="broadway">Q</li>
<li class="broadway">R</li>
<li class="shuttle">S</li>
<li class="broadway">W</li>
<li class="archer-ave">Z</li>
</ul>
</body>
</html>
/****** DO NOT CHANGE THE STYLES BELOW THIS ******/
body {
font-family: Helvetica, Arial, sans-serif;
}
h1 {
text-align: center;
}
ul {
list-style-type: none;
margin: 0;
}
li {
margin: 0;
display: inline-block;
font-size: 3em;
padding: 0.25em;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment