Skip to content

Commit

Permalink
Hooli style popup (#212)
Browse files Browse the repository at this point in the history 
* add my html-css homework

* fix focus on popup menu and remove tags from css

* fix responsive for mobile and fix alt description
  • Loading branch information
@drewzag
drewzag authored Aug 31, 2022
1 parent 1953bf7 commit 277cff9
Show file tree
Hide file tree
Showing 2 changed files with 355 additions and 0 deletions.
173 changes: 173 additions & 0 deletions submissions/drewzag/hooli-style-popup/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,173 @@
<!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
href="https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="style.css" />
<title>Hooli-style-Popup</title>
</head>
<body>
<header class="header">
<nav class="header__menu">
<ul class="header__list">
<li class="header__item">
<a href="#" class="header__link">Mail</a>
</li>
<li class="header__item">
<a href="#" class="header__link">Images</a>
</li>
<li class="header__item">
<input type="checkbox" class="header__checkbox" id="checkbox" />
<label for="checkbox" class="label__checkbox">
<img src="./popup-icons/popup-button.png" alt="menu" class="popup" />
</label>

<div class="popup__wrapper">
<ul class="popup__list">
<li class="popup__item">
<a href="#" class="popup__item-link">
<img src="./popup-icons/calendar.png" alt="" class="popup-image" />
<span class="popup-text">Calnendar</span>
</a>
</li>
<li class="popup__item">
<a href="#" class="popup__item-link">
<img src="./popup-icons/mail.png" alt="" class="popup-image" />
<span class="popup-text">Mail</span>
</a>
</li>
<li class="popup__item">
<a href="#" class="popup__item-link">
<img src="./popup-icons/news.png" alt="" class="popup-image" />
<span class="popup-text">News</span>
</a>
</li>
<li class="popup__item">
<a href="#" class="popup__item-link">
<img src="./popup-icons/maps.png" alt="" class="popup-image" />
<span class="popup-text">Maps</span>
</a>
</li>
<li class="popup__item">
<a href="#" class="popup__item-link">
<img src="./popup-icons/files.png" alt="" class="popup-image" />
<span class="popup-text">Files</span>
</a>
</li>
<li class="popup__item">
<a href="#" class="popup__item-link">
<img src="./popup-icons/contacts.png" alt="" class="popup-image" />
<span class="popup-text">Contacts</span>
</a>
</li>
<li class="popup__item">
<a href="#" class="popup__item-link">
<img src="./popup-icons/translation.png" alt="" class="popup-image" />
<span class="popup-text">Translate</span>
</a>
</li>
<li class="popup__item">
<a href="#" class="popup__item-link">
<img src="./popup-icons/videos.png" alt="" class="popup-image" />
<span class="popup-text">Video</span>
</a>
</li>
<li class="popup__item">
<a href="#" class="popup__item-link">
<img src="./popup-icons/search.png" alt="" class="popup-image" />
<span class="popup-text">Search</span>
</a>
</li>
<li class="popup__item">
<a href="#" class="popup__item-link">
<img src="./popup-icons/photos.png" alt="" class="popup-image" />
<span class="popup-text">Photo</span>
</a>
</li>
<li class="popup__item">
<a href="#" class="popup__item-link">
<img src="./popup-icons/apps.png" alt="" class="popup-image" />
<span class="popup-text">Apps</span>
</a>
</li>
<li class="popup__item">
<a href="#" class="popup__item-link">
<img src="./popup-icons/documents.png" alt="" class="popup-image" />
<span class="popup-text">Document</span>
</a>
</li>
</ul>

<input type="checkbox" class="more__checkbox" id="checkbox__more-less" />
<label for="checkbox__more-less">
<span class="show-more">Show More</span>
</label>

<div class="popup__wrapper-more">
<div class="popup__menu-more">
<ul class="popup__list">
<li class="popup__item">
<a href="#" class="popup__item-link">
<img src="./popup-icons/chat.png" alt="" class="popup-image" />
<span class="popup-text">Chat</span>
</a>
</li>
<li class="popup__item">
<a href="#" class="popup__item-link">
<img src="./popup-icons/classroom.png" alt="" class="popup-image" />
<span class="popup-text">Classroom</span>
</a>
</li>
<li class="popup__item">
<a href="#" class="popup__item-link">
<img src="./popup-icons/collection.png" alt="" class="popup-image" />
<span class="popup-text">Collection</span>
</a>
</li>
<li class="popup__item">
<a href="#" class="popup__item-link">
<img src="./popup-icons/mars.png" alt="" class="popup-image" />
<span class="popup-text">Mars</span>
</a>
</li>
<li class="popup__item">
<a href="#" class="popup__item-link">
<img src="./popup-icons/blogs.png" alt="" class="popup-image" />
<span class="popup-text">Blogs</span>
</a>
</li>
<li class="popup__item">
<a href="#" class="popup__item-link">
<img src="./popup-icons/promo.png" alt="" class="popup-image" />
<span class="popup-text">Promos</span>
</a>
</li>
</ul>
</div>
</div>

<label for="checkbox__more-less">
<span class="show-less">Show Less</span>
</label>
</div>
</li>
<li class="header__item">
<a href="#" class="header__link">
<img src="./popup-icons/bell.png" alt="" class="bell" />
</a>
</li>
<li class="header__item">
<a href="#" class="header__link">
<img src="./popup-icons/favicon.png" alt="" class="ava" />
</a>
</li>
</ul>
</nav>
</header>
</body>
</html>
182 changes: 182 additions & 0 deletions submissions/drewzag/hooli-style-popup/style.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,182 @@
*,
*::after,
*::before {
padding: 0;
margin: 0;
}

html {
box-sizing: border-box;
}

body {
font-family: 'Roboto', sans-serif;
}

ol,
ul {
list-style: none;
}

a,
a:link,
a:visited,
a:hover {
text-decoration: none;
color: gray;
}

.popup-image {
max-height: 2em;
}

.popup {
cursor: pointer;
height: 1.7em;
}

.bell {
height: 1.5em;
}

.header {
background-color: bisque;
height: 3em;
}

.header__menu {
margin-right: 5vw;
}

.header__list {
display: flex;
justify-content: flex-end;
align-items: center;
}

.header__item {
margin-left: 20px;
position: relative;
}

.header__checkbox,
.more__checkbox,
.less__checkbox {
appearance: none;
position: absolute;
}

.header__checkbox {
width: 30px;
height: 30px;
}

.more__checkbox {
bottom: 10px;
right: 50px;
height: 30px;
width: 300px;
}

.more__checkbox:checked {
bottom: -145px;
right: 50px;
height: 30px;
width: 300px;
}

.popup__wrapper {
display: none;
}

.header__checkbox:checked ~ .popup__wrapper {
display: flex;
flex-direction: column;
position: absolute;
top: 3em;
right: -4em;
max-height: 35em;
overflow: auto;
box-shadow: 0 0 5px 2px gray;
}

.header__checkbox::before {
position: absolute;
top: 2em;
left: -0.2em;
content: '';
z-index: 1;
width: 0;
height: 0;
border-style: solid;
border-width: 0 16.5px 21px 16.5px;
border-color: transparent transparent white transparent;
display: none;
}

.header__checkbox:checked::before {
display: block;
}

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

.popup__item {
margin: 20px;
}

.popup__item:hover {
box-shadow: 0 0 5px 2px gray;
}

.popup__item-link {
display: flex;
flex-direction: column;
align-items: center;
gap: 20px;
}

.show-more,
.show-less {
height: 3em;
display: flex;
align-items: center;
justify-content: center;
background-color: gray;
color: white;
width: 100%;
cursor: pointer;
}

.popup__menu-more {
position: relative;
}

.popup__wrapper-more {
display: none;
}

.show-less {
display: none;
}

.more__checkbox:checked ~ label .show-more {
display: none;
}

.more__checkbox:checked ~ .popup__wrapper-more {
display: block;
}

.more__checkbox:checked ~ label .show-less {
display: flex;
}

@media (max-width: 430px) {
.popup__list {
grid-template-columns: repeat(2, 1fr);
}
}

0 comments on commit 277cff9

Please sign in to comment.