Last active
May 7, 2025 16:51
-
-
Save matthieua/38b34db8ec9855ba7fd062fcf33d0c75 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" /> | |
| <title>SheCodes</title> | |
| <style> | |
| body { | |
| font-family: Cerebri Sans, Helvetica, Arial, sans-serif; | |
| } | |
| h1 { | |
| text-align: center; | |
| font-size: 34px; | |
| line-height: 48px; | |
| margin: 60px 0 0; | |
| font-weight: 900; | |
| color: #272044; | |
| } | |
| h2 { | |
| text-align: center; | |
| font-weight: 900; | |
| font-size: 34px; | |
| line-height: 48px; | |
| margin: 0; | |
| color: #8064e9; | |
| padding: 0 0 24px; | |
| } | |
| p { | |
| text-align: center; | |
| font-size: 18px; | |
| line-height: 28px; | |
| font-family: PT Mono, monospace; | |
| } | |
| button { | |
| border-radius: 25px; | |
| border: 1px solid #8064e9; | |
| background: #8064e9; | |
| color: #fff; | |
| font-size: 16px; | |
| display: block; | |
| margin: 0 auto; | |
| line-height: 22px; | |
| padding: 16px 24px; | |
| text-decoration: none; | |
| transition: all 200ms ease; | |
| box-shadow: rgba(37, 39, 89, 0.08) 0px 8px 8px 0; | |
| } | |
| button:hover { | |
| cursor: pointer; | |
| background: #5e41a7; | |
| } | |
| .limited-spots { | |
| font-weight: bold; | |
| } | |
| .button-container { | |
| margin: 60px 0; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <header> | |
| <h1> | |
| 👩💻 SheCodes is a Coding Workshop for Women | |
| </h1> | |
| <h2> | |
| Access a new career in Technology | |
| </h2> | |
| </header> | |
| <section> | |
| <p> | |
| SheCodes teaches coding, design and management skills to women | |
| <br /> | |
| <span class="limited-spots"> | |
| Limited number of spots available! | |
| </span> | |
| </p> | |
| </section> | |
| <footer> | |
| <div class="button-container"> | |
| <button> | |
| Join now | |
| </button> | |
| </div> | |
| </footer> | |
| </body> | |
| </html> |
oh my🤣 i just added the element didn't expect that we are to add classes to them not to change the styling, but now i'm getting better at it, here i come div, span, section, header and footer🤣😍👩💻
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
i was confused but now after the soIution video i see what we have to do