forked from kottans/frontend-2022-homeworks
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* Add files via upload * Update index.html * Update style.css * Rename submissions/task_html-css-popup/index.html to submissions/julia-online/task_html-css-popup/index.html * Rename submissions/task_html-css-popup/style.css to submissions/julia-online/task_html-css-popup/style.css
- Loading branch information
1 parent
7f598ef
commit 659e774
Showing
2 changed files
with
583 additions
and
0 deletions.
There are no files selected for viewing
216 changes: 216 additions & 0 deletions
216
submissions/julia-online/task_html-css-popup/index.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,216 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="UTF-8"> | ||
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | ||
| <meta name="viewport" content="width=device-width,initial-scale=1.0"> | ||
| <title>Hooli-Style Popup</title> | ||
| <link rel="icon" type="image/x-icon" href="cat-paw.png"> | ||
| <link rel="stylesheet" href="style.css"> | ||
| </head> | ||
| <body class="body"> | ||
| <header class="header"> | ||
| <div class="container"> | ||
| <a class="header__logo-link" href="#"> | ||
| <img class="header__logo-img" src="cat-paw.png" alt=""> | ||
| </a> | ||
| <nav class="header__navigation"> | ||
| <ul class="header__list"> | ||
| <li class="header__items"> | ||
| <a class="header__links" href="#">Watchlist</a> | ||
| </li> | ||
| <li class="header__items"> | ||
| <a class="header__links" href="#">Subscribe</a> | ||
| </li> | ||
| <li class="header__items"> | ||
| <a class="header__links" href="#">Sing In</a> | ||
| </li> | ||
| <li class="header__items"> | ||
| <label class="header__popup-label" for="checkbox"></label> | ||
| <input class="header__popup-input" id="checkbox" type="checkbox"> | ||
| <span class="header__popup-btn-img"></span> | ||
| <ul class="header__popup-submenu" tabindex="-1"> | ||
| <li class="header__popup-item"> | ||
| <a class="header__popup-link" href="#"> | ||
| <picture> | ||
| <img class="header__popup-img" src="cat-food.png" alt=""> | ||
| </picture> | ||
| <span class="header__popup-text">Mackerel</span> | ||
| </a> | ||
| </li> | ||
| <li class="header__popup-item"> | ||
| <a class="header__popup-link" href="#"> | ||
| <picture> | ||
| <img class="header__popup-img" src="cat-food.png" alt=""> | ||
| </picture> | ||
| <span class="header__popup-text">Cod</span> | ||
| </a> | ||
| </li> | ||
| <li class="header__popup-item"> | ||
| <a class="header__popup-link" href="#"> | ||
| <picture> | ||
| <img class="header__popup-img" src="cat-food.png" alt=""> | ||
| </picture> | ||
| <span class="header__popup-text">Sardines</span> | ||
| </a> | ||
| </li> | ||
| <li class="header__popup-item"> | ||
| <a class="header__popup-link" href="#"> | ||
| <picture> | ||
| <img class="header__popup-img" src="cat-food.png" alt=""> | ||
| </picture> | ||
| <span class="header__popup-text">Tuna</span> | ||
| </a> | ||
| </li> | ||
| <li class="header__popup-item"> | ||
| <a class="header__popup-link" href="#"> | ||
| <picture> | ||
| <img class="header__popup-img" src="cat-food.png" alt=""> | ||
| </picture> | ||
| <span class="header__popup-text">Salmon</span> | ||
| </a> | ||
| </li> | ||
| <li class="header__popup-item"> | ||
| <a class="header__popup-link" href="#"> | ||
| <picture> | ||
| <img class="header__popup-img" src="cat-food.png" alt=""> | ||
| </picture> | ||
| <span class="header__popup-text">Swordfish</span> | ||
| </a> | ||
| </li> | ||
| <li class="header__popup-item"> | ||
| <a class="header__popup-link" href="#"> | ||
| <picture> | ||
| <img class="header__popup-img" src="cat-food.png" alt=""> | ||
| </picture> | ||
| <span class="header__popup-text">Anchovies</span> | ||
| </a> | ||
| </li> | ||
| <li class="header__popup-item"> | ||
| <a class="header__popup-link" href="#"> | ||
| <picture> | ||
| <img class="header__popup-img" src="cat-food.png" alt=""> | ||
| </picture> | ||
| <span class="header__popup-text">Halibut</span> | ||
| </a> | ||
| </li> | ||
| <li class="header__popup-item"> | ||
| <a class="header__popup-link" href="#"> | ||
| <picture> | ||
| <img class="header__popup-img" src="cat-food.png" alt=""> | ||
| </picture> | ||
| <span class="header__popup-text">Herring</span> | ||
| </a> | ||
| </li> | ||
| <li class="header__popup-item"> | ||
| <a class="header__popup-link" href="#"> | ||
| <picture> | ||
| <img class="header__popup-img" src="cat-food.png" alt=""> | ||
| </picture> | ||
| <span class="header__popup-text">Fish alt.</span> | ||
| </a> | ||
| </li> | ||
| <li class="header__popup-item"> | ||
| <a class="header__popup-link" href="#"> | ||
| <picture> | ||
| <img class="header__popup-img" src="cat-food.png" alt=""> | ||
| </picture> | ||
| <span class="header__popup-text">Fish alt.</span> | ||
| </a> | ||
| </li> | ||
| <li class="header__popup-item"> | ||
| <a class="header__popup-link" href="#"> | ||
| <picture> | ||
| <img class="header__popup-img" src="cat-food.png" alt=""> | ||
| </picture> | ||
| <span class="header__popup-text">Fish alt.</span> | ||
| </a> | ||
| </li> | ||
| <li class="header__popup-more"> | ||
| <label class="header__popup-more-label" for="btn-more"></label> | ||
| <input class="header__popup-input-more" id="btn-more" type="checkbox"> | ||
| <span class="header__popup-btn-text">Open more</span> | ||
| <ul class="header__more-content"> | ||
| <li class="header__popup-item"> | ||
| <a class="header__popup-link" href="#"> | ||
| <picture> | ||
| <img class="header__popup-img" src="cat-food.png" alt=""> | ||
| </picture> | ||
| <span class="header__popup-text">Fish alt.</span> | ||
| </a> | ||
| </li> | ||
| <li class="header__popup-item"> | ||
| <a class="header__popup-link" href="#"> | ||
| <picture> | ||
| <img class="header__popup-img" src="cat-food.png" alt=""> | ||
| </picture> | ||
| <span class="header__popup-text">Fish alt.</span> | ||
| </a> | ||
| </li> | ||
| <li class="header__popup-item header__more-items"> | ||
| <a class="header__popup-link" href="#"> | ||
| <picture> | ||
| <img class="header__popup-img" src="cat-food.png" alt=""> | ||
| </picture> | ||
| <span class="header__popup-text">Fish alt.</span> | ||
| </a> | ||
| </li> | ||
| <li class="header__popup-item header__more-items"> | ||
| <a class="header__popup-link" href="#"> | ||
| <picture> | ||
| <img class="header__popup-img" src="cat-food.png" alt=""> | ||
| </picture> | ||
| <span class="header__popup-text">Fish alt.</span> | ||
| </a> | ||
| </li> | ||
| <li class="header__popup-item header__more-items"> | ||
| <a class="header__popup-link" href="#"> | ||
| <picture> | ||
| <img class="header__popup-img" src="cat-food.png" alt=""> | ||
| </picture> | ||
| <span class="header__popup-text">Fish alt.</span> | ||
| </a> | ||
| </li> | ||
| <li class="header__popup-item header__more-items"> | ||
| <a class="header__popup-link" href="#"> | ||
| <picture> | ||
| <img class="header__popup-img" src="cat-food.png" alt=""> | ||
| </picture> | ||
| <span class="header__popup-text">Fish alt.</span> | ||
| </a> | ||
| </li> | ||
| </ul> | ||
| </li> | ||
| </ul> | ||
| </li> | ||
| <li class="header__items"> | ||
| <a class="header__links" href="#"> | ||
| <img class="header__user-avatar" src="julia-online.jpg" alt=""> | ||
| </a> | ||
| </li> | ||
| </ul> | ||
| </nav> | ||
| </div> | ||
| </header> | ||
| <main class="main"> | ||
| <div class="img-paws" alt=""> | ||
| <svg xmlns="http://www.w3.org/2000/svg" viewBox="-9 0 530 512" style="enable-background:new 0 0 512 512" | ||
| xml:space="preserve"><path d="M370.381 307.837a31.907 31.907 0 0 1-19.772-29.576c0-54.299-43.326-100.174-94.609-100.174s-94.609 | ||
| 45.875-94.609 100.174c0 13-7.761 24.614-19.772 29.581-35.315 14.614-58.141 48.875-58.141 87.288 0 52.168 | ||
| 42.446 94.609 94.609 94.609 13.185 0 25.956-2.668 37.978-7.935 25.381-11.125 54.478-11.142 79.881.006 12.011 | ||
| 5.261 24.782 7.929 37.967 7.929 52.163 0 94.609-42.44 94.609-94.609 0-38.419-22.827-72.685-58.141-87.293zM178.087 | ||
| 22.261c-36.152 0-55.652 63.201-55.652 89.044 0 30.684 24.968 55.652 55.652 55.652s55.652-24.968 | ||
| 55.652-55.652c0-25.843-19.5-89.044-55.652-89.044zM333.913 22.261c-36.152 0-55.652 63.201-55.652 89.044 0 30.684 | ||
| 24.968 55.652 55.652 55.652s55.652-24.968 55.652-55.652c0-25.843-19.5-89.044-55.652-89.044zM55.652 155.826C19.501 | ||
| 155.826 0 219.027 0 244.87c0 30.684 24.968 55.652 55.652 55.652s55.652-24.968 | ||
| 55.652-55.652c0-25.843-19.5-89.044-55.652-89.044zM456.348 155.826c-36.152 0-55.652 63.201-55.652 | ||
| 89.043 0 30.684 24.968 55.652 55.652 55.652S512 275.553 512 244.869c0-25.842-19.5-89.043-55.652-89.043z"/></svg> | ||
| </div> | ||
| </main> | ||
| </body> | ||
| </html> | ||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
Oops, something went wrong.