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> |
This particular solution code partially goes against the initial instruction which is to add these elements without affecting the CSS already coded. As in we shouldn't have to touch CSS at all. The replacing the around "Limited number of spots available!" requires bold styling to be added which is not what was asked. A smidge of a confusing solution.
I almost had it, though I put and
in different places and I thought we were not supposed to change the CSS code section, that's what got me.
I almost got the same outcome I think the paragraph moved a bit.
I almost got the same outcome I think the paragraph moved a bit.
l got confused too
This was not clear
i was confused but now after the soIution video i see what we have to do
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
So I just used div, span, section, header and footer without adding classes and hence I didn't make any changes at the CSS part- I just gave my div a class and thats it. I used these elements to my original code and even though I added these html elements to my code nothing really changed : this is what I used
👩💻 SheCodes is a Coding Workshop for Women
Access a new career in Technology
Shecodes teaches coding, designs and management skills to women
Limited number of spots available!
Join Now