Skip to content

Instantly share code, notes, and snippets.

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

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 some of the trains.

First, assign the appropriate class to the rest of the list items. For instance, you should assign the seventh-ave (red) line to the 2 train.

Then write CSS to give each line (class) the appropriate color.

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>2</li>
<li>3</li>
<li class="lexington">4</li>
<li>5</li>
<li>6</li>
<li class="flushing">7</li>
<li class="eighth-ave">A</li>
<li class="sixth-ave">B</li>
<li>C</li>
<li>D</li>
<li>E</li>
<li>F</li>
<li class="crosstown">G</li>
<li class="archer-ave">J</li>
<li class="canarsie">L</li>
<li>M</li>
<li class="broadway">N</li>
<li>Q</li>
<li>R</li>
<li class="shuttle">S</li>
<li>W</li>
<li>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