Last active
August 29, 2015 13:56
-
-
Save jpetto/9117062 to your computer and use it in GitHub Desktop.
ASWM: HW - Jokes starter
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>Jokes...jokes</title> | |
| <link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.4.2/base-min.css"> | |
| <link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.4.2/buttons-min.css"> | |
| <style type="text/css"> | |
| html, body { | |
| background: #ccc; | |
| height: 100%; | |
| } | |
| .button-funny, | |
| .button-lame { | |
| color: white; | |
| border-radius: 4px; | |
| text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); | |
| } | |
| .button-funny { | |
| background: rgb(28, 184, 65); /* this is a green */ | |
| } | |
| .button-lame { | |
| background: rgb(223, 117, 20); /* this is an orange */ | |
| } | |
| .wrapper { | |
| width: 740px; | |
| margin: 20px auto; | |
| background: #333; | |
| color: #fff; | |
| border-radius: 6px; | |
| padding: 20px; | |
| } | |
| .vote-count { | |
| display: none; | |
| } | |
| .joke { | |
| padding: 20px; | |
| background: #672f9f; | |
| margin-bottom: 40px; | |
| } | |
| .joke-funny { | |
| background: rgb(28, 184, 65); | |
| } | |
| .joke-lame { | |
| background: rgb(223, 117, 20); | |
| } | |
| .setup, .punchline { | |
| margin-bottom: 40px; | |
| font-size: 18px; | |
| } | |
| .punchline { | |
| display: none; | |
| } | |
| .actions { | |
| padding: 0; | |
| display: none; | |
| } | |
| .actions:after { | |
| content: ''; | |
| display: table; | |
| clear: both; | |
| } | |
| .actions li { | |
| float: left; | |
| margin-right: 20px; | |
| list-style-type: none; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <main role="main" class="wrapper"> | |
| <section class="jokes"> | |
| <header> | |
| <h1>Jokes!</h1> | |
| <h2> | |
| Some funny<span class="vote-count" id="funny-joke-total"></span>, some | |
| lame<span class="vote-count" id="lame-joke-total"></span>. | |
| </h2> | |
| </header> | |
| <article class="joke"> | |
| <p class="setup">How many programmers does it take to change a light bulb?</p> | |
| <p class="punchline">None, that's a hardware problem.</p> | |
| <ul class="actions"> | |
| <li> | |
| <a href="" class="pure-button button-funny">Funny!</a> | |
| </li> | |
| <li> | |
| <a href="" class="pure-button button-lame">Lame!</a> | |
| </li> | |
| </ul> | |
| </article> | |
| <article class="joke"> | |
| <p class="setup">How do you tell an introverted programmer from an extroverted programmer?</p> | |
| <p class="punchline">An extroverted programmer looks at <em>your</em> shoes when she talks to you.</p> | |
| <ul class="actions"> | |
| <li> | |
| <a href="" class="pure-button button-funny">Funny!</a> | |
| </li> | |
| <li> | |
| <a href="" class="pure-button button-lame">Lame!</a> | |
| </li> | |
| </ul> | |
| </article> | |
| <article class="joke"> | |
| <p class="setup">Whats the object-oriented way to become wealthy?</p> | |
| <p class="punchline">Inheritance.</p> | |
| <ul class="actions"> | |
| <li> | |
| <a href="" class="pure-button button-funny">Funny!</a> | |
| </li> | |
| <li> | |
| <a href="" class="pure-button button-lame">Lame!</a> | |
| </li> | |
| </ul> | |
| </article> | |
| <article class="joke"> | |
| <p class="setup">How do you comfort a JavaScript bug?</p> | |
| <p class="punchline">You console it.</p> | |
| <ul class="actions"> | |
| <li> | |
| <a href="" class="pure-button button-funny">Funny!</a> | |
| </li> | |
| <li> | |
| <a href="" class="pure-button button-lame">Lame!</a> | |
| </li> | |
| </ul> | |
| </article> | |
| </section> | |
| </main> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment