Skip to content

Hooli style popup #755

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 3 commits into
base: main
Choose a base branch
from
Open

Hooli style popup #755

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
b22942b
Hooli-style popup: index.html, popup.css.
IraAnurovaPrykhodko Feb 8, 2023
d856316
Added alt to img. Removed '/' from <img> and <hr>.
IraAnurovaPrykhodko Feb 8, 2023
4f8a2b9
Fix tab navigation.
IraAnurovaPrykhodko Feb 8, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
193 changes: 193 additions & 0 deletions submissions/IraAnurovaPrykhodko/hooli-style-popup/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,193 @@
<!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="stylesheet" href="./popup.css">

</head>

<body>
<header class="nav__header">
<nav class="nav__popup">
<address class="nav__address nav__margin"><a class="nav__style_text" href="#">Mail</a></address>
<a class="nav__images nav__margin nav__style_text" href="#">Images</a>
<div class="nav__popup_button nav__button nav__margin" tabindex="0">
<img class="nav__button_size" src="./popup-icons/popup-button.png" alt="The popup button icon">

<div class="popup">
<div class="grid">
<a class="grid_content__option" href="#">
<img class="content__option_img" src="./popup-icons/calendar.png"
alt="The calendar button icon">
<div class="content__option_caption">Calendar</div>
</a>
<a class="grid_content__option" href="#">
<img class="content__option_img" src="./popup-icons/mail.png" alt="The mail button icon">
<div class="content__option_caption">Mail</div>
</a>
<a class="grid_content__option" href="#">
<img class="content__option_img" src="./popup-icons/news.png" alt="The news button icon">
<div class="content__option_caption">News</div>
</a>
<a class="grid_content__option" href="#">
<img class="content__option_img" src="./popup-icons/maps.png" alt="The map button icon">
<div class="content__option_caption">Map</div>
</a>
<a class="grid_content__option" href="#">
<img class="content__option_img" src="./popup-icons/files.png" alt="The files button icon">
<div class="content__option_caption">Files</div>
</a>
<a class="grid_content__option" href="#">
<img class="content__option_img" src="./popup-icons/contacts.png"
alt="The contacts button icon">
<div class="content__option_caption">Contacts</div>
</a>
<a class="grid_content__option" href="#">
<img class="content__option_img" src="./popup-icons/translation.png"
alt="The translation button icon">
<div class="content__option_caption">Translate</div>
</a>
<a class="grid_content__option" href="#">
<img class="content__option_img" src="./popup-icons/videos.png"
alt="The videos button icon">
<div class="content__option_caption">Videos</div>
</a>
<a class="grid_content__option" href="#">
<img class="content__option_img" src="./popup-icons/search.png"
alt="The search button icon">
<div class="content__option_caption">Search</div>
</a>
<a class="grid_content__option" href="#">
<img class="content__option_img" src="./popup-icons/photos.png" alt="The photo button icon">
<div class="content__option_caption">Photos</div>
</a>
<a class="grid_content__option" href="#">
<img class="content__option_img" src="./popup-icons/apps.png" alt="The app button icon">
<div class="content__option_caption">Apps</div>
</a>
<a class="grid_content__option" href="#">
<img class="content__option_img" src="./popup-icons/documents.png"
alt="The document button icon">
<div class="content__option_caption">Documents</div>
</a>
</div>

<div class="popup-more-focus-trap">
<button class="popup__btn-more">More</button>

<div class="popup__more">
<div class="grid">
<a class="grid_content__option" href="#">
<img class="content__option_img" src="./popup-icons/calendar.png"
alt="The calendar button icon">
<div class="content__option_caption">Calendar</div>
</a>
<a class="grid_content__option" href="#">
<img class="content__option_img" src="./popup-icons/mail.png"
alt="The mail button icon">
<div class="content__option_caption">Mail</div>
</a>
<a class="grid_content__option" href="#">
<img class="content__option_img" src="./popup-icons/news.png"
alt="The news button icon">
<div class="content__option_caption">News</div>
</a>
<a class="grid_content__option" href="#">
<img class="content__option_img" src="./popup-icons/maps.png"
alt="The map button icon">
<div class="content__option_caption">Map</div>
</a>
<a class="grid_content__option" href="#">
<img class="content__option_img" src="./popup-icons/files.png"
alt="The files button icon">
<div class="content__option_caption">Files</div>
</a>
<a class="grid_content__option" href="#">
<img class="content__option_img" src="./popup-icons/contacts.png"
alt="The contacts button icon">
<div class="content__option_caption">Contacts</div>
</a>
<a class="grid_content__option" href="#">
<img class="content__option_img" src="./popup-icons/translation.png"
alt="The translation button icon">
<div class="content__option_caption">Translate</div>
</a>
<a class="grid_content__option" href="#">
<img class="content__option_img" src="./popup-icons/videos.png"
alt="The videos button icon">
<div class="content__option_caption">Videos</div>
</a>
<a class="grid_content__option" href="#">
<img class="content__option_img" src="./popup-icons/search.png"
alt="The search button icon">
<div class="content__option_caption">Search</div>
</a>
<a class="grid_content__option" href="#">
<img class="content__option_img" src="./popup-icons/photos.png"
alt="The photo button icon">
<div class="content__option_caption">Photos</div>
</a>
<a class="grid_content__option" href="#">
<img class="content__option_img" src="./popup-icons/apps.png"
alt="The app button icon">
<div class="content__option_caption">Apps</div>
</a>
<a class="grid_content__option" href="#">
<img class="content__option_img" src="./popup-icons/documents.png"
alt="The document button icon">
<div class="content__option_caption">Documents</div>
</a>
</div>
<hr class="more-line">
<div class="grid">
<a class="grid_content__option" href="#">
<img class="content__option_img" src="./popup-icons/chat.png"
alt="The chat button icon">
<div class="content__option_caption">Chat</div>
</a>
<a class="grid_content__option" href="#">
<img class="content__option_img" src="./popup-icons/classroom.png"
alt="The classroom button icon">
<div class="content__option_caption">Classroom</div>
</a>
<a class="grid_content__option" href="#">
<img class="content__option_img" src="./popup-icons/collection.png"
alt="The collection button icon">
<div class="content__option_caption">Collection</div>
</a>
<a class="grid_content__option" href="#">
<img class="content__option_img" src="./popup-icons/mars.png"
alt="The mars button icon">
<div class="content__option_caption">Mars</div>
</a>
<a class="grid_content__option" href="#">
<img class="content__option_img" src="./popup-icons/blogs.png"
alt="The blogs button icon">
<div class="content__option_caption">Blogs</div>
</a>
<a class="grid_content__option" href="#">
<img class="content__option_img" src="./popup-icons/promo.png"
alt="The promo button icon">
<div class="content__option_caption">Promo</div>
</a>
</div>
<div class="even-more">Even more from Kottans</div>
</div>
</div>
</div>
</div>

<button class="nav__popup_bell nav__button nav__margin">
<img class="nav__bell_size" src="./popup-icons/bell.png" alt="The bell button icon">
</button>

<img class="nav__icon nav__button_size" src="./popup-icons/favicon.png" alt="The favicon icon">
</nav>
</header>
</body>

</html>
189 changes: 189 additions & 0 deletions submissions/IraAnurovaPrykhodko/hooli-style-popup/popup.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,189 @@
body {
background-color: beige;
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
}

.nav__header {
display: flex;
justify-content: flex-end;
position: relative;

}

.nav__style_text {
text-decoration: none;
font-style: normal;
color: gray;
}

.nav__popup {
display: flex;
align-items: center;
}

.nav__margin {
margin-right: 20px;
padding: 0px;
}

.nav__button {
border: solid 2px transparent;
background-color: transparent;
cursor: pointer;
}

.nav__button_size {
width: 40px;
height: 40px;
margin: 0;
padding: 0;

}


.nav__button:focus {
border: solid 2px rgb(112, 174, 205);
border-radius: 5px;
cursor: pointer;
padding: 0px;
}


.nav__bell_size {
width: 25px;
height: 30px;
padding: 5px;
}

.nav__icon {
border: solid gray 2px;
border-radius: 20px;
cursor: pointer;
}

.popup {
padding: 20px 0 35px 0;
width: 350px;
height: 590px;
max-height: 530px;
background-color: white;
color: gray;
box-shadow: 0 0 5px 0 rgba(0, 0, 0, .6);
position: absolute;
top: 65px;
right: -25px;
display: none;
}


.popup::before {
content: ' ';
width: 20px;
height: 20px;
transform: rotate(45deg);

position: absolute;
top: -11px;
right: 35px;
background: white;
border: solid rgba(0, 0, 0, .3);
border-width: 1px 0 0 1px;
z-index: 1000;
}

.nav__popup_button {
position: relative;
}

.nav__popup_button:focus > .popup, .nav__popup_button:focus-within > .popup {
display: block;
}

.popup:hover {
display: block;
}

.content__option_img {
height: 40px;
margin: 0px 0px 10px 0px;
}


.popup__btn-more {
width: 100%;
background-color: rgb(232, 232, 232);
color: gray;
text-align: center;
padding: 5px;
border: none;
margin-top: 53px;
}

.popup__btn-more:focus + .popup__more {
display: block;
}


/* Grid */

.grid{
display: grid;
grid-template-columns: repeat(3,1fr);
}

.grid_content__option {
display: flex;
flex-direction: column;
align-items: center;
margin: 15px 10px 0 10px;
border: solid 2px rgb(254, 254, 254);
border-radius: 5px;
padding: 30px 5px 5px 5px;
text-decoration: none;
color: gray;
}

.grid_content__option:hover {
border: solid 2px rgb(205, 203, 203);
border-radius: 5px;
padding: 30px 5px 5px 5px;
}

.grid_content__option:focus {
border: solid 2px rgb(112, 174, 205);
border-radius: 5px;
padding: 30px 5px 5px 5px;
}

.popup__more {
height: 565px;
overflow-y: scroll;
display: none;
background: #fff;
margin-top: -564px;
z-index: 1000;
position: relative;

}

.popup__more:hover, .popup__more:focus-within {
display: block;
}

.more-line {
size: 2px;
width: auto;
color: gray;
margin: 30px 0;
}

.even-more {
display: flex;
align-items: center;
justify-content:center ;
padding: 30px 0 20px 0;
}

.popup-more-focus-trap:focus-within .popup__more {
display: block;
}