HTML-CSS-Popup #743
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,190 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="ru"> | ||
| <head> | ||
| <title>Popup-menu</title> | ||
| <link rel="stylesheet" href="style.css" /> | ||
| <meta charset="UTF-8" /> | ||
| <meta http-equiv="X-UA-Compatible" content="ie=edge" /> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | ||
| </head> | ||
|
|
||
| <body> | ||
| <div class="wraper"> | ||
| <header class="header"> | ||
| <div class="container"> | ||
| <nav class="header__menu"> | ||
| <ul class="header__lists"> | ||
| <li class="header__list"> | ||
| <a href="#" class="header__link">Mail</a> | ||
| </li> | ||
| <li class="header__list"> | ||
| <a href="#" class="header__link">Images</a> | ||
| </li> | ||
| <li class="header__list header__link"> | ||
| <input | ||
| type="checkbox" | ||
| class="header__input" | ||
| id="header__input" | ||
| /> | ||
| <label for="header__input" class="header__input-label"> | ||
| <img | ||
| src="icon/menu.png" | ||
| alt="menu" | ||
| class="header__logo-menu" | ||
| /> | ||
| </label> | ||
| <div class="popup"> | ||
| <ul class="header__lists-popup"> | ||
| <li class="popup__list"> | ||
| <a href="#" class="popup__link"> | ||
| <img | ||
| class="popup-img" | ||
| src="icon/Безпека.png" | ||
| alt | ||
| />Безпека</a | ||
| > | ||
| </li> | ||
| <li class="popup__list"> | ||
| <a href="#" class="popup__link"> | ||
| <img | ||
| class="popup-img" | ||
| src="icon/Календар.png" | ||
| alt | ||
| />Календар</a | ||
| > | ||
|
Comment on lines
+49
to
+54
Contributor
There was a problem hiding this comment. Read how and when to populate alt attribute value 6 simple rules for good alt-text
Author
There was a problem hiding this comment. I almost don’t understand, it says what not to write near decorative icons, and the text should be meaningful. Thank you.
Author
There was a problem hiding this comment. Should I remove the entire description, leave only an empty alt?
Contributor
There was a problem hiding this comment. Make an alt description if the picture is relevant to the content. For decorative images, use alt, which is equal to an empty string |
||
| </li> | ||
| <li class="popup__list"> | ||
| <a href="#" class="popup__link"> | ||
| <img | ||
| class="popup-img" | ||
| src="icon/Калькулятор.png" | ||
| alt | ||
| />Калькулятор</a | ||
| > | ||
| </li> | ||
| <li class="popup__list"> | ||
| <a href="#" class="popup__link"> | ||
| <img | ||
| class="popup-img" | ||
| src="icon/Контакти.png" | ||
| alt | ||
| />Контакти</a | ||
| > | ||
| </li> | ||
| <li class="popup__list"> | ||
| <a href="#" class="popup__link"> | ||
| <img | ||
| class="popup-img" | ||
| src="icon/Контролер.png" | ||
| alt | ||
| />Контролер</a | ||
| > | ||
| </li> | ||
| <li class="popup__list"> | ||
| <a href="#" class="popup__link"> | ||
| <img | ||
| class="popup-img" | ||
| src="icon/Мапа.png" | ||
| alt | ||
| />Мапа</a | ||
| > | ||
| </li> | ||
| <li class="popup__list"> | ||
| <a href="#" class="popup__link"> | ||
| <img | ||
| class="popup-img" | ||
| src="icon/Новини.png" | ||
| alt | ||
| />Новини</a | ||
| > | ||
| </li> | ||
| <li class="popup__list"> | ||
| <a href="#" class="popup__link"> | ||
| <img | ||
| class="popup-img" | ||
| src="icon/Нотатки.png" | ||
| alt | ||
| />Нотатки</a | ||
| > | ||
| </li> | ||
| <li class="popup__list"> | ||
| <a href="#" class="popup__link"> | ||
| <img | ||
| class="popup-img" | ||
| src="icon/Поділитися.png" | ||
| alt | ||
| />Поділитися</a | ||
| > | ||
| </li> | ||
| </ul> | ||
| <input | ||
| type="checkbox" | ||
| class="sub__check-input" | ||
| id="sub__input" | ||
| /> | ||
| <label for="sub__input" class="sub__check-label"> | ||
| Більше | ||
| </label> | ||
| <div class="sub__lists-popup"> | ||
| <ul class="sub__lists"> | ||
| <li class="popup__list"> | ||
| <a href="#" class="popup__link"> | ||
| <img | ||
| class="sub__popup-img" | ||
| src="icon/Поради.png" | ||
| alt | ||
| />Поради</a | ||
| > | ||
| </li> | ||
| <li class="popup__list"> | ||
| <a href="#" class="popup__link"> | ||
| <img | ||
| class="sub__popup-img" | ||
| src="icon/Пошта.png" | ||
| alt | ||
| />Пошта</a | ||
| > | ||
| </li> | ||
| <li class="popup__list"> | ||
| <a href="#" class="popup__link"> | ||
| <img | ||
| class="sub__popup-img" | ||
| src="icon/Месенджер.png" | ||
| alt | ||
| />Месенджер</a | ||
| > | ||
|
Comment on lines
+150
to
+155
Contributor
There was a problem hiding this comment. alt must be equal to the empty string.
Author
There was a problem hiding this comment. Corrected. Changed file names to English. Add alt="". May I clarify? Can I leave a description of the "menu" and "View" icons? They carry meaning.
Contributor
There was a problem hiding this comment.
Yes, you can. |
||
| </li> | ||
| <li class="popup__list"> | ||
| <a href="#" class="popup__link"> | ||
| <img | ||
| class="sub__popup-img" | ||
| src="icon/Синхронізація.png" | ||
| alt | ||
| />Синхронізація</a | ||
| > | ||
| </li> | ||
| </ul> | ||
| </div> | ||
| </div> | ||
| </li> | ||
| <li class="header__list"> | ||
| <a href="#" class="header__link"> | ||
| <img | ||
| class="notification" | ||
| src="icon/bell.png" | ||
| alt="Повідомлення" | ||
| /> | ||
| </a> | ||
| </li> | ||
| <li class="header__list"> | ||
| <a href="#" class="header__link"> | ||
| <img class="Фото користувача" src="icon/avatar.png" alt="Аватар" /> | ||
|
Contributor
There was a problem hiding this comment. What means class="Фото користувача" ? =)
Author
There was a problem hiding this comment. Can I clarify? I can leave the description of the "menu" and "Повідомлення" icons. They carry meaning. |
||
| </a> | ||
| </li> | ||
| </ul> | ||
| </nav> | ||
| </div> | ||
| </header> | ||
| </div> | ||
| </body> | ||
| </html> | ||
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Use English for filenames.