-
-
Notifications
You must be signed in to change notification settings - Fork 184
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* Oleksii Drohachov html_css_ popup task done. Added index.html and style.css files * Second commit. prettifying code. * Applied changes requested by mentor * Fourth commit, changed nav tag for second popup to span tag, refactored icons titles, styled them * Fourth commit, changed nav tag for second popup to span tag, refactored icons titles, styled them * Changed span for div as second wrapper, because of validation conflic…
- Loading branch information
Showing
2 changed files
with
583 additions
and
0 deletions.
There are no files selected for viewing
291 changes: 291 additions & 0 deletions
291
submissions/Oleksii_Drohachov/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,291 @@ | ||
| <!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" /> | ||
| <link rel="stylesheet" href="style.css" /> | ||
| <link rel="stylesheet" href="fonts/Ubuntu-Medium.ttf" /> | ||
| <title>Hooli-style-PopUp</title> | ||
| </head> | ||
| <body> | ||
| <header> | ||
| <nav> | ||
| <ul class="nav__list"> | ||
| <li class="nav__item"> | ||
| <a | ||
| class="nav_link" | ||
| href="https://github.com/kottans/frontend/blob/2022_UA/contents.md" | ||
| >My lovely course</a | ||
| > | ||
| </li> | ||
| <li class="nav__item"> | ||
| <a class="nav_link" href="https://t.me/+kI9jsoLH2rQ4YzVi" | ||
| >My Kottans in TG</a | ||
| > | ||
| </li> | ||
| <li class="nav__item__menu"> | ||
| <label for="first"></label> | ||
| <input id="first" class="first" type="checkbox" name="first" /> | ||
| <nav class="main__wrapper"> | ||
| <ul class="menu__list__main"> | ||
| <li class="menu__item__main"> | ||
| <a href="#" class="item_box" | ||
| ><img class="item__icon" src="icons/apps.png" alt="" /> | ||
| <p class="icon__title">Strange BMW logo</p></a | ||
| > | ||
| </li> | ||
| <li class="menu__item__main"> | ||
| <a href="#" class="item_box" | ||
| ><img class="item__icon" src="icons/bell.png" alt="" /> | ||
| <p class="icon__title">Ringing bell</p></a | ||
| > | ||
| </li> | ||
| <li class="menu__item__main"> | ||
| <a href="#" class="item_box" | ||
| ><img class="item__icon" src="icons/blogs.png" alt="" /> | ||
| <p class="icon__title">List of tasks</p></a | ||
| > | ||
| </li> | ||
| <li class="menu__item__main"> | ||
| <a href="#" class="item_box" | ||
| ><img class="item__icon" src="icons/calendar.png" alt="" /> | ||
| <p class="icon__title">Studying plan</p></a | ||
| > | ||
| </li> | ||
| <li class="menu__item__main"> | ||
| <a href="#" class="item_box" | ||
| ><img class="item__icon" src="icons/chat.png" alt="" /> | ||
| <p class="icon__title">Kottans chat</p></a | ||
| > | ||
| </li> | ||
| <li class="menu__item__main"> | ||
| <a href="#" class="item_box" | ||
| ><img class="item__icon" src="icons/maps.png" alt="" /> | ||
| <p class="icon__title">Treasure map</p></a | ||
| > | ||
| </li> | ||
| <li class="menu__item__main"> | ||
| <a href="#" class="item_box" | ||
| ><img class="item__icon" src="icons/mail.png" alt="" /> | ||
| <p class="icon__title">Msgs from mentor</p></a | ||
| > | ||
| </li> | ||
| <li class="menu__item__main"> | ||
| <a href="#" class="item_box" | ||
| ><img class="item__icon" src="icons/files.png" alt="" /> | ||
| <p class="icon__title">Project folder</p></a | ||
| > | ||
| </li> | ||
| <li class="menu__item__main"> | ||
| <a href="#" class="item_box" | ||
| ><img class="item__icon" src="icons/photos.png" alt="" /> | ||
| <p class="icon__title">Screenshots</p></a | ||
| > | ||
| </li> | ||
| <li class="menu__item__second__popup"> | ||
| <input | ||
| class="second" | ||
| name="second" | ||
| id="second" | ||
| type="checkbox" | ||
| /> | ||
| <label class="second_label" for="second"> | ||
| Even more icons !</label | ||
| > | ||
| <div class="second_wrapper"> | ||
| <ul class="menu__list__main"> | ||
| <li class="menu__item__main"> | ||
| <a href="#" class="item_box" | ||
| ><img | ||
| class="item__icon" | ||
| src="icons/tanslation.png" | ||
| alt="" | ||
| /> | ||
| <p class="icon__title">Vocabulary</p></a | ||
| > | ||
| </li> | ||
| <li class="menu__item__main"> | ||
| <a href="#" class="item_box" | ||
| ><img | ||
| class="item__icon" | ||
| src="icons/contacts.png" | ||
| alt="" | ||
| /> | ||
| <p class="icon__title">CV folder</p></a | ||
| > | ||
| </li> | ||
| <li class="menu__item__main"> | ||
| <a href="#" class="item_box" | ||
| ><img | ||
| class="item__icon" | ||
| src="icons/videos.png" | ||
| alt="" | ||
| /> | ||
| <p class="icon__title">Youtube</p></a | ||
| > | ||
| </li> | ||
| <li class="menu__item__main"> | ||
| <a href="#" class="item_box" | ||
| ><img | ||
| class="item__icon" | ||
| src="icons/search.png" | ||
| alt="" | ||
| /> | ||
| <p class="icon__title">Best option</p></a | ||
| > | ||
| </li> | ||
| <li class="menu__item__main"> | ||
| <a href="#" class="item_box" | ||
| ><img | ||
| class="item__icon" | ||
| src="icons/classroom.png" | ||
| alt="" | ||
| /> | ||
| <p class="icon__title">Codewars</p></a | ||
| > | ||
| </li> | ||
| <li class="menu__item__main"> | ||
| <a href="#" class="item_box" | ||
| ><img | ||
| class="item__icon" | ||
| src="icons/collection.png" | ||
| alt="" | ||
| /> | ||
| <p class="icon__title">Universal selector</p></a | ||
| > | ||
| </li> | ||
| <li class="menu__item__main"> | ||
| <a href="#" class="item_box" | ||
| ><img class="item__icon" src="icons/mic.png" alt="" /> | ||
| <p class="icon__title">Discord</p></a | ||
| > | ||
| </li> | ||
| <li class="menu__item__main"> | ||
| <a href="#" class="item_box" | ||
| ><img | ||
| class="item__icon" | ||
| src="icons/news.png" | ||
| alt="" | ||
| /> | ||
| <p class="icon__title">Harb</p></a | ||
| > | ||
| </li> | ||
| <li class="menu__item__main"> | ||
| <a href="#" class="item_box" | ||
| ><img | ||
| class="item__icon" | ||
| src="icons/mars.png" | ||
| alt="" | ||
| /> | ||
| <p class="icon__title">Clown nose</p></a | ||
| > | ||
| </li> | ||
| <li class="menu__item__main"> | ||
| <a href="#" class="item_box" | ||
| ><img | ||
| class="item__icon" | ||
| src="icons/apps.png" | ||
| alt="" | ||
| /> | ||
| <p class="icon__title">Strange BMW logo</p></a | ||
| > | ||
| </li> | ||
| <li class="menu__item__main"> | ||
| <a href="#" class="item_box" | ||
| ><img | ||
| class="item__icon" | ||
| src="icons/bell.png" | ||
| alt="" | ||
| /> | ||
| <p class="icon__title">Ringing bell</p></a | ||
| > | ||
| </li> | ||
| <li class="menu__item__main"> | ||
| <a href="#" class="item_box" | ||
| ><img | ||
| class="item__icon" | ||
| src="icons/blogs.png" | ||
| alt="" | ||
| /> | ||
| <p class="icon__title">List of tasks</p></a | ||
| > | ||
| </li> | ||
| <li class="menu__item__main"> | ||
| <a href="#" class="item_box" | ||
| ><img | ||
| class="item__icon" | ||
| src="icons/calendar.png" | ||
| alt="" | ||
| /> | ||
| <p class="icon__title">Studying plan</p></a | ||
| > | ||
| </li> | ||
| <li class="menu__item__main"> | ||
| <a href="#" class="item_box" | ||
| ><img | ||
| class="item__icon" | ||
| src="icons/chat.png" | ||
| alt="" | ||
| /> | ||
| <p class="icon__title">Kottans chat</p></a | ||
| > | ||
| </li> | ||
| <li class="menu__item__main"> | ||
| <a href="#" class="item_box" | ||
| ><img | ||
| class="item__icon" | ||
| src="icons/maps.png" | ||
| alt="" | ||
| /> | ||
| <p class="icon__title">Treasure map</p></a | ||
| > | ||
| </li> | ||
| <li class="menu__item__main"> | ||
| <a href="#" class="item_box" | ||
| ><img | ||
| class="item__icon" | ||
| src="icons/mail.png" | ||
| alt="" | ||
| /> | ||
| <p class="icon__title">Msgs from mentor</p></a | ||
| > | ||
| </li> | ||
| <li class="menu__item__main"> | ||
| <a href="#" class="item_box" | ||
| ><img | ||
| class="item__icon" | ||
| src="icons/files.png" | ||
| alt="" | ||
| /> | ||
| <p class="icon__title">Project folder</p></a | ||
| > | ||
| </li> | ||
| <li class="menu__item__main"> | ||
| <a href="#" class="item_box" | ||
| ><img | ||
| class="item__icon" | ||
| src="icons/photos.png" | ||
| alt="" | ||
| /> | ||
| <p class="icon__title">Screenshots</p></a | ||
| > | ||
| </li> | ||
| </ul> | ||
| </div> | ||
| </li> | ||
| </ul> | ||
| </nav> | ||
| </li> | ||
| <li class="nav__item"> | ||
| <a href="https://github.com/Tedzury" | ||
| ><div><img class="logo__git" src="img/repo-img.jpg" alt="" /></div | ||
| ></a> | ||
| </li> | ||
| </ul> | ||
| </nav> | ||
| </header> | ||
| </body> | ||
| </html> | ||
|
|
||
|
|
Oops, something went wrong.