Skip to content

Commit

Permalink
html-css-popup (#48)
Browse files Browse the repository at this point in the history 
* html-css-popup

* added empty lines after each block in style.css

* cleared attribute alt

* replaced popap with popup

* added attribute tabindex

Added attribute tabindex because when you navigate with tab, focus should be at icons first, and on More after icons.

* hide "hidden" icons

Took away the opportunity to interact with "hidden" icons when I navigate with a tab.
  • Loading branch information
@KonstantinOkhorzin
KonstantinOkhorzin authored Aug 5, 2022
1 parent 68d8e80 commit ea688f1
Show file tree
Hide file tree
Showing 2 changed files with 367 additions and 0 deletions.
219 changes: 219 additions & 0 deletions submissions/KostiantynOkhorzin/html-css-popup/css/style.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,219 @@
* {
padding: 0;
margin: 0;
border: 0;
}

*, *:before, *:after {
box-sizing: border-box;
}

html, body {
height: 100%;
width: 100%;
font-size: 100%;
line-height: 1;
font-size: 14px;
-ms-text-size-adjust: 100%;
-moz-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}

input, button, textarea {
font: inherit;
}

input::-ms-clear {
display: none;
}

a, a:visited {
text-decoration: none;
color: inherit;
}

a:hover {
text-decoration: none;
}

ul li {
list-style: none;
}

* {
font-family: Arial, Helvetica, sans-serif;
}

.header {
padding: 15px 30px;
}

.navbar {
display: flex;
justify-content: flex-end;
height: 48px;
}

.navbar__menu {
display: flex;
align-items: center;
gap: 15px;
}

.navbar__link {
display: block;
padding: 10px 0;
outline: none;
border-radius: 5px;
transition: all 0.3s;
}

.navbar__link:focus, .navbar__link:hover {
box-shadow: 0px 0px 0px 2px #A4C6FD;
}

.navbar__profile {
display: block;
width: 32px;
height: 32px;
background-color: #C2185B;
border-radius: 50%;
border: 2px solid #fff;
}

.popup {
position: relative;
}

.popup__input {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
}

.popup__input:checked ~ .popup__body {
opacity: 1;
visibility: visible;
}

.popup__input:focus + .popup__trigger, .popup__input:hover + .popup__trigger {
box-shadow: 0px 0px 0px 2px #A4C6FD;
}

.popup__trigger {
display: flex;
width: 28px;
height: 28px;
border-radius: 5px;
cursor: pointer;
}

.popup__body {
position: absolute;
display: flex;
flex-direction: column-reverse;
gap: 30px;
right: -60px;
top: 50px;
width: 285px;
border-radius: 5px;
transition: all 0.5s;
opacity: 0;
visibility: hidden;
box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.1);
}

.popup__list {
width: 100%;
display: grid;
gap: 10px;
padding: 15px;
grid-template-columns: repeat(3, 1fr);
height: 390px;
overflow: hidden;
}

.popup__item_hidden {
display: none;
}

.popup__link {
padding: 10px 0;
display: grid;
justify-content: center;
grid-template-columns: 1fr;
grid-template-rows: 40px auto;
gap: 10px;
border-radius: 5px;
transition: all 0.3s;
outline: none;
}

.popup__link:hover, .popup__link:focus {
box-shadow: 0px 0px 0px 2px #A4C6FD;
}

.popup__link-icon {
width: 100%;
height: 100%;
-o-object-fit: contain;
object-fit: contain;
}

.popup__link-name {
text-align: center;
}

.popup__input-more {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
bottom: 0;
left: 0;
right: 0;
}

.popup__input-more:checked + .popup__btn {
background-color: transparent;
}

.popup__input-more:checked + .popup__btn::after {
content: "Even more from Kottans";
}

.popup__input-more:focus + .popup__btn {
box-shadow: 0px 0px 0px 2px #A4C6FD;
}

.popup__input-more:checked ~ .popup__list {
overflow: auto;
height: 485px;
}

.popup__input-more:checked ~ .popup__list .popup__item_hidden {
display: block;
}

.popup__btn {
display: flex;
justify-content: center;
align-items: center;
left: 0;
height: 40px;
width: 100%;
cursor: pointer;
background-color: #F5F5F5;
border-radius: 0 0 5px 5px;
}

.popup__btn::after {
content: "More";
}

.popup__btn:hover {
box-shadow: 0px 0px 0px 2px #A4C6FD;
}
148 changes: 148 additions & 0 deletions submissions/KostiantynOkhorzin/html-css-popup/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,148 @@
<!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>Popup</title>
<link rel="shortcut icon" href="icons/favicon.png" type="image/x-icon">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header class="header">
<nav class="navbar">
<ul class="navbar__menu">
<li class="navbar__item">
<a href="#" class="navbar__link" tabindex="1">Mail</a>
</li>
<li class="navbar__item">
<a href="#" class="navbar__link" tabindex="1">Images</a>
</li>
<li class="navbar__item popup">
<input class="popup__input" id="popup__trigger" type="checkbox" tabindex="1">
<label class="popup__trigger" for="popup__trigger">
<img class="popup__trigger-icon" src="icons/popup-button.png" alt="">
</label>
<div class="popup__body">
<input class="popup__input-more" id="popup__more" type="checkbox" tabindex="2">
<label class="popup__btn" for="popup__more"></label>
<ul class="popup__list">
<li class="popup__item">
<a href="#" class="popup__link" tabindex="1">
<img class="popup__link-icon" src="icons/calendar.png" alt="">
<span class="popup__link-name">Calendar</span>
</a>
</li>
<li class="popup__item">
<a href="#" class="popup__link" tabindex="1">
<img class="popup__link-icon" src="icons/mail.png" alt="">
<span class="popup__link-name">Mail</span>
</a>
</li>
<li class="popup__item">
<a href="#" class="popup__link" tabindex="1">
<img class="popup__link-icon" src="icons/news.png" alt="">
<span class="popup__link-name">News</span>
</a>
</li>
<li class="popup__item">
<a href="#" class="popup__link" tabindex="1">
<img class="popup__link-icon" src="icons/maps.png" alt="">
<span class="popup__link-name">Map</span>
</a>
</li>
<li class="popup__item">
<a href="#" class="popup__link" tabindex="1">
<img class="popup__link-icon" src="icons/files.png" alt="">
<span class="popup__link-name">Files</span>
</a>
</li>
<li class="popup__item">
<a href="#" class="popup__link" tabindex="1">
<img class="popup__link-icon" src="icons/contacts.png" alt="">
<span class="popup__link-name">Contacts</span>
</a>
</li>
<li class="popup__item">
<a href="#" class="popup__link" tabindex="1">
<img class="popup__link-icon" src="icons/tanslation.png" alt="">
<span class="popup__link-name">Translate</span>
</a>
</li>
<li class="popup__item">
<a href="#" class="popup__link" tabindex="1">
<img class="popup__link-icon" src="icons/videos.png" alt="">
<span class="popup__link-name">Videos</span>
</a>
</li>
<li class="popup__item">
<a href="#" class="popup__link" tabindex="1">
<img class="popup__link-icon" src="icons/search.png" alt="">
<span class="popup__link-name">Search</span>
</a>
</li>
<li class="popup__item">
<a href="#" class="popup__link" tabindex="1">
<img class="popup__link-icon" src="icons/photos.png" alt="">
<span class="popup__link-name">Photo</span>
</a>
</li>
<li class="popup__item">
<a href="#" class="popup__link" tabindex="1">
<img class="popup__link-icon" src="icons/apps.png" alt="">
<span class="popup__link-name">Apps</span>
</a>
</li>
<li class="popup__item">
<a href="#" class="popup__link" tabindex="1">
<img class="popup__link-icon" src="icons/documents.png" alt="">
<span class="popup__link-name">Documents</span>
</a>
</li>
<li class="popup__item popup__item_hidden">
<a href="#" class="popup__link" tabindex="1">
<img class="popup__link-icon" src="icons/chat.png" alt="">
<span class="popup__link-name">Chat</span>
</a>
</li>
<li class="popup__item popup__item_hidden">
<a href="#" class="popup__link" tabindex="1">
<img class="popup__link-icon" src="icons/classroom.png" alt="">
<span class="popup__link-name">Classroom</span>
</a>
</li>
<li class="popup__item popup__item_hidden">
<a href="#" class="popup__link" tabindex="1">
<img class="popup__link-icon" src="icons/collection.png" alt="">
<span class="popup__link-name">Collection</span>
</a>
</li>
<li class="popup__item popup__item_hidden">
<a href="#" class="popup__link" tabindex="1">
<img class="popup__link-icon" src="icons/mars.png" alt="">
<span class="popup__link-name">Mars</span>
</a>
</li>
<li class="popup__item popup__item_hidden">
<a href="#" class="popup__link" tabindex="1">
<img class="popup__link-icon" src="icons/blogs.png" alt="">
<span class="popup__link-name">Blogs</span>
</a>
</li>
<li class="popup__item popup__item_hidden">
<a href="#" class="popup__link" tabindex="1">
<img class="popup__link-icon" src="icons/promo.png" alt="">
<span class="popup__link-name">Promos</span>
</a>
</li>
</ul>
</div>
</li>
<li class="navbar__item">
<a href="#" class="navbar__link navbar__profile" tabindex="3"></a>
</li>
</ul>
</nav>
</header>
</body>
</html>

0 comments on commit ea688f1

Please sign in to comment.