- [x] Header height is set in 1 place (for the links) #5322
Conversation
- [x] Content is vertically centered (for any header height) - [x] CSS is used to show all letters in Uppercase (don't type them in HTML) - [x] Logo is an image wrapped with a link - [x] **CSS Variable** is used for a blue color - [x] Pseudo-element is used for a blue line below the active link - [x] Code follows all the [Code Style Rules ❗️](./checklist.md)
There was a problem hiding this comment.
Hey, you broke several code style rules. Please go through the checklist again and ensure all rules are applied: Checklist. Also, make sure to adhere to the requirements listed in the README.md. After applying all the fixes, try running the tests again. If the tests still don't pass, we will investigate the issue further.
src/index.html
Outdated
| <div id="1"></div> | ||
| <div id="2"></div> | ||
| <div id="3"></div> | ||
| <div id="4"></div> | ||
| <div id="5"></div> | ||
| <div id="6"></div> | ||
| <div id="7"></div> | ||
| <div id="8"></div> |
src/index.html
Outdated
| href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" | ||
| rel="stylesheet" | ||
| /> |
There was a problem hiding this comment.
You don't need to import all the weights. Import just those that are actually used.
src/index.html
Outdated
| <li><a href="#5">gadgets</a></li> | ||
| <li><a href="#6">tablets</a></li> | ||
| <li><a href="#7">photo</a></li> | ||
| <li><a href="#8">video</a></li> |
There was a problem hiding this comment.
Fix formatting
Add empty lines between multiline sibling blocks of HTML
src/index.html
Outdated
| <div class="imgContainer"> | ||
| <a href="#top"> | ||
| <img | ||
| class="img" |
There was a problem hiding this comment.
Class names represent the meaning of the content (not the styles or tag names)
good example
src/style.css
Outdated
| body { | ||
| margin: 0; | ||
| } | ||
|
|
||
| header { |
There was a problem hiding this comment.
Don't use tag names for styling (except html and body)
src/style.css
Outdated
| } | ||
|
|
||
| .imgContainer { | ||
| margin: 10px 0 10px 50px; |
There was a problem hiding this comment.
Be consistent with your vertical margins (Add only top or only bottom margin, but not both)
| text-decoration: underline 4px; | ||
| text-underline-offset: 1.2rem; |
There was a problem hiding this comment.
There is requirement for that underline in mockup: -Use the ::after and position it relative to a link with is-active class
src/style.css
Outdated
| li { | ||
| list-style: none; | ||
| height: 15px; | ||
| margin-left: 13px; |
There was a problem hiding this comment.
There should not be margins before the first and after the last list items
src/style.css
Outdated
|
|
||
| li { | ||
| list-style: none; | ||
| height: 15px; |
|
I am really struggling to pass the tests. The layout looks good in browser. But all tests are failed and its really hard to read them for me. |
There was a problem hiding this comment.
styles are not working on your demo.
tests are showing you the differences between what tests are expecting and how your layout looks. e.g in first test you can see that entire header should have margins on both sides but yours only has margin on the left. This happens because you're applying margin only to the logo not the header
Content is vertically centered (for any header height)
CSS is used to show all letters in Uppercase (don't type them in HTML)
Logo is an image wrapped with a link
CSS Variable is used for a blue color
Pseudo-element is used for a blue line below the active link
Code follows all the Code Style Rules ❗️
DEMO LINK
TEST REPORT LINK
Trochę nie wiem jak to zrobić lepiej, potrzebuję jakiś feedback :(