-
-
Save matthieua/38b34db8ec9855ba7fd062fcf33d0c75 to your computer and use it in GitHub Desktop.
| <!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> |
here is what I added, seeing that most of you are confused. Any suggestion is welcomed. And happy coding !!
``
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: 60px 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;
}
.header {
text-align: center;
}
.important {
text-align: center;
}
.specs {
text-align: center;
font-family: PT Mono, monospace;
font-size: 18px;
line-height: 28px;
}
.ending {
text-align: center;
font-family: PT Mono, monospace;
font-size: 18px;
line-height: 28px;
}
</style>
👩💻 SheCodes is a Coding Workshop for Women
Access a new career in Technology
SheCodes teaches coding, design and management skills to women
I'm a little confused as well
I totally missed how we should do it... At least with the solution video I get a better understanding
Same here!
Same
eyy i definitely got this challenge wrong.
l was so lost
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
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
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🤣😍👩💻
Same here!