Created
April 8, 2020 18:40
-
-
Save mattdelacdev/ed441a0bb986e2cf673ee9a408cf6717 to your computer and use it in GitHub Desktop.
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 lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| <meta http-equiv="X-UA-Compatible" content="ie=edge" /> | |
| <title>SheCodes</title> | |
| <style> | |
| body { | |
| font-family: Cerebri Sans, Helvetica, Arial, sans-serif; | |
| } | |
| section { | |
| margin: 120px 0; | |
| } | |
| h1, | |
| h2 { | |
| font-weight: 900; | |
| font-size: 34px; | |
| line-height: 48px; | |
| margin: 0; | |
| } | |
| h1 { | |
| color: #272044; | |
| text-align: center; | |
| } | |
| h2 { | |
| text-align: center; | |
| color: #885df1; | |
| padding: 0 0 24px; | |
| } | |
| p { | |
| font-size: 18px; | |
| line-height: 28px; | |
| font-family: PT Mono, monospace; | |
| text-align: center; | |
| } | |
| button { | |
| border-radius: 25px; | |
| margin: 0 auto; | |
| display: block; | |
| background-color: #fff; | |
| border: 1px solid #885df1; | |
| color: #885df1; | |
| font-size: 16px; | |
| line-height: 22px; | |
| padding: 16px 24px; | |
| text-decoration: none; | |
| transition: all 200ms ease; | |
| } | |
| button:hover { | |
| color: #fff; | |
| background: #885df1; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <section> | |
| <h1> | |
| 👩💻 SheCodes is a Coding Workshop for Women | |
| </h1> | |
| <h2> | |
| Access a new career in Technology | |
| </h2> | |
| <p> | |
| She Codes teaches coding, design and management skills to women | |
| <br /> | |
| <strong> | |
| Limited amount of spots! | |
| </strong> | |
| </p> | |
| <br /> | |
| <button> | |
| Apply Now | |
| </button> | |
| </section> | |
| <script> | |
| function updateHeading(newHeading) { | |
| let heading = document.querySelector("h1"); | |
| heading.innerHTML = newHeading; | |
| } | |
| function canApply() { | |
| let age = prompt("How old are you?"); | |
| return age >= 18; | |
| } | |
| function apply() { | |
| let firstName = prompt("What is your first name?"); | |
| if (canApply()) { | |
| updateHeading(`Hi ${firstName}! Welcome to SheCodes 👩💻`); | |
| } else { | |
| updateHeading(`Sorry ${firstName}, you can't apply to SheCodes.`); | |
| } | |
| } | |
| let applyButton = document.querySelector("button"); | |
| applyButton.addEventListener("click", apply); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
I have the same question before removing let t didn't change the headline. can you explain why this happened?