Develop #4535
Develop #4535
Conversation
src/index.html
Outdated
| <link rel="preconnect" href="https://fonts.gstatic.com" | ||
| crossorigin = "anonymous"> |
There was a problem hiding this comment.
Fix code style everywhere
| <link rel="preconnect" href="https://fonts.gstatic.com" | |
| crossorigin = "anonymous"> | |
| <link | |
| rel="preconnect" | |
| href="https://fonts.gstatic.com" | |
| crossorigin="anonymous" | |
| > |
src/index.html
Outdated
| <a class="header__logo" href="#" | ||
| aria-label="Home"> |
There was a problem hiding this comment.
| <a class="header__logo" href="#" | |
| aria-label="Home"> | |
| <a | |
| class="header__logo" | |
| href="#" | |
| aria-label="Home" | |
| > |
src/index.html
Outdated
| </a> | ||
| <nav class="header__nav"> | ||
| <ul class="header__list"> | ||
| <li class="nav__item"><a href="#" class="nav__link is-active">Apple</a></li> |
There was a problem hiding this comment.
Need to fix code style everywhere and add the blank line between the links
| <li class="nav__item"><a href="#" class="nav__link is-active">Apple</a></li> | |
| <li class="nav__item"> | |
| <a href="#" class="nav__link is-active">Apple</a> | |
| </li> | |
src/index.html
Outdated
| <a href="#" class="nav__link" | ||
| data-qa="hover">Laptops & computers</a> |
There was a problem hiding this comment.
| <a href="#" class="nav__link" | |
| data-qa="hover">Laptops & computers</a> | |
| <a | |
| href="#" | |
| class="nav__link" | |
| data-qa="hover" | |
| > | |
| Laptops & computers | |
| </a> |
src/style.css
Outdated
| display: flex; | ||
| justify-content: space-between; | ||
| align-items: center; | ||
| background-color: #fff; |
There was a problem hiding this comment.
Default color
| background-color: #fff; |
There was a problem hiding this comment.
напишіть що конкретно треба або пояснення
There was a problem hiding this comment.
мається на увазі що це і так дефолтний колір, то це правило тут не потрібне, просто видали його
src/style.css
Outdated
| padding: 0 50px; | ||
| } | ||
|
|
||
| .header img { |
There was a problem hiding this comment.
Use the classes selector for image
There was a problem hiding this comment.
як??????????? поясніть. Я учусь
There was a problem hiding this comment.
додай атрибут клас для цієї картинки і використовуй його замість img
src/style.css
Outdated
| color: var(--main-color); | ||
| } | ||
|
|
||
| .nav__link.is-active::after { |
There was a problem hiding this comment.
| .nav__link.is-active::after { | |
| .is-active::after { |
src/style.css
Outdated
| display: flex; | ||
| justify-content: space-between; | ||
| align-items: center; | ||
| background-color: #fff; |
There was a problem hiding this comment.
мається на увазі що це і так дефолтний колір, то це правило тут не потрібне, просто видали його
src/style.css
Outdated
| padding: 0 50px; | ||
| } | ||
|
|
||
| .header img { |
There was a problem hiding this comment.
додай атрибут клас для цієї картинки і використовуй його замість img
src/style.css
Outdated
| padding: 0 50px; | ||
| } | ||
|
|
||
| .header__logo img { |
There was a problem hiding this comment.
ви тут навчаэте чи допити влаштовуєте????
src/style.css
Outdated
| padding: 0 50px; | ||
| } | ||
|
|
||
| .header__logo img { |
src/index.html
Outdated
| href="#" | ||
| aria-label="Home" | ||
| > | ||
| <img src="./images/logo.png" alt="logo"> |
There was a problem hiding this comment.
| <img src="./images/logo.png" alt="logo"> | |
| <img class="header__img" src="./images/logo.png" alt="logo"> |
src/style.css
Outdated
| padding: 0 50px; | ||
| } | ||
|
|
||
| .header__logo img { |
There was a problem hiding this comment.
| .header__logo img { | |
| .header__img { |
There was a problem hiding this comment.
а в чому помилка коли на тег а стояв клас?
There was a problem hiding this comment.
я не міг зрозуміти що потрібно якщо клас від а впринципі керував картинкою
There was a problem hiding this comment.
Завжди краще робити саме таким чином
Комбіновані селектори уже мають вищу специфічність, це надійніше і зручніше потім підтримувати якщо селектор це просто 1 класс :)
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 ❗️