add task solution #4728
add task solution #4728
Conversation
| /> | ||
| </a> | ||
| </div> | ||
| <div> |
There was a problem hiding this comment.
Please add empty lines between multiline sibling elements - here, in <ul> and in <head>.
src/index.html
Outdated
| </div> | ||
| <div> | ||
| <nav class="nav"> | ||
| <ul class="nav_list"> |
There was a problem hiding this comment.
In terms of BEM, nav is a block and list, item are elements. According to BEM syntax, block and element names should be separated with double underscore in the class name - and in your code they're separated with single underscore. Please correct that.
src/style.css
Outdated
| text-decoration: solid 2px black; | ||
| } | ||
|
|
||
| .nav__link:hover { |
There was a problem hiding this comment.
.nav__link is not used in your HTML, so this style can be removed
src/style.css
Outdated
| text-decoration: none; | ||
| color: #000; | ||
| display: inline-block; | ||
| height: 60px; |
There was a problem hiding this comment.
Both height and line-height are not needed here. With line-height you set the height of text to 60px, so if the parent item contains single line of text and has no vertical margins/paddings/borders, it will already be 60px high. So height is redundant here.
There was a problem hiding this comment.
For now, let's go with it, however, there are two issues, that are to be fixed in the next tasks:
- Make sure to submit only the files, related to the task. For instance
distfolder definitely should not be here - See my comment for BEM blocks below
Otherwise, the task looks good 👍
| } | ||
|
|
||
| .logo { | ||
| margin-left: 50px; |
There was a problem hiding this comment.
The block shouldn't influence its environment, meaning you shouldn't set the external geometry (margin) or positioning for the block.
One of the techniques to avoid such problem is using mixes
https://en.bem.info/methodology/css/#external-geometry-and-positioning
DEMO LINK
TEST REPORT LINK
Header height is set in 1 place (for the links)
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 ❗️