Skip to content

Instantly share code, notes, and snippets.

@outoftime
Created September 27, 2017 00:58
Show Gist options
  • Save outoftime/18739be630d30fb9112dce39f15d5ee1 to your computer and use it in GitHub Desktop.
Save outoftime/18739be630d30fb9112dce39f15d5ee1 to your computer and use it in GitHub Desktop.
Exported from Popcode.

Ransom Note

Can you decode the ransom note by changing the CSS, without changing the HTML?

If you finish early…

  • Can you change the ransom note so that it uses your favorite colors?
  • Without changing the HTML, can you make the ransom note appear more like a normal sentence?
<!DOCTYPE html>
<html>
<head>
<title>02.1 CSS Selectors Ransom Note </title>
</head>
<body>
<h1>Ransom Note</h1>
<ul>
<li>I may</li>
<li><h6>have</h6><h1>hid</h1><h4>den</h4><h3>the</h3>pri</li>
<li><h5>ze</h5><h2>un</h2>der</li>
<li><h2>neathe</h2><h3><h1>the</h1></h3><h4>tab</h4></li>
<li><h5>le</h5><h4>ne</h4><h6>ar</h6></li>
<li><h3>the</h3><h5>classroom</h5><h1>door</h1></li>
</ul>
</body>
</html>
li {
color: white;
}
h1{
color: white;
}
h2 {
color: white;
}
h3 {
color: red;
background-color: red;
}
h4 {
background-color: yellow;
color: yellow;
}
h5 {
color: white;
}
h6 {
color: blue;
background-color: blue;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment