Skip to content
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

added popup #278

Closed
wants to merge 2 commits into from
Closed

added popup #278

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
0af679e
added popup local
Alissy27 Aug 23, 2022
4ac1d5d
changed files
Alissy27 Aug 23, 2022
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
150 changes: 150 additions & 0 deletions submissions/Alissy27/popup/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,150 @@
<!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="stylesheet" href="style.css">
</head>
<body>

<header class="header header__flex">
<img class="logo" src="https://alissy27.github.io/Test/puma.jfif" alt="puma">
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

A logo should be a link that leads to the home page.

<nav>
<ul class="nav">
<li class="nav__li"><a href="#">Mail</a></li>
<li class="nav__li"><a href="#">Images</a></li>
<li class="nav__li"><a href="#">
<img class="nav__img" src="https://alissy27.github.io/Test/img/bell.png" alt="bell"></a>
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Read how and when to populate alt attribute value Как правильно написать alt-текст

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

deleted alts from icons

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Add cursor: pointer to all interactive elements.

</li>
<li class="nav__li nav__popup">
<input type="checkbox" id="popup__checkbox">
<label for="popup__checkbox" class="label__checkbox">
Comment on lines +22 to +23
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Avoid shifting sibling elements on hover or focus state. Watch video

<img class="nav__img" src="https://alissy27.github.io/Test/img/popup-button.png" alt="popup-button">
</label>
<div class="popup__list">
<ul class="popup__ul">
<li class="popup__item">
<a href="#">
<img class="popup__img" src="https://alissy27.github.io/Test/img/calendar.png" alt="calendar">
<p>Calendar</p>
</a>
</li>
<li class="popup__item">
<a href="#">
<img class="popup__img" src="https://alissy27.github.io/Test/img/mail.png" alt="mail">
<p>Mail</p>
</a>
</li>
<li class="popup__item">
<a href="#">
<img class="popup__img" src="https://alissy27.github.io/Test/img/news.png" alt="News">
<p>News</p>
</a>
</li>
<li class="popup__item">
<a href="#">
<img class="popup__img" src="https://alissy27.github.io/Test/img/maps.png" alt="maps">
<p>Maps</p>
</a>
</li>
<li class="popup__item">
<a href="#">
<img class="popup__img" src="https://alissy27.github.io/Test/img/files.png" alt="files">
<p>Files</p>
</a>
</li>
<li class="popup__item">
<a href="#">
<img class="popup__img" src="https://alissy27.github.io/Test/img/contacts.png" alt="contacts">
<p>Contacts</p>
</a>
</li>
<li class="popup__item">
<a href="#">
<img class="popup__img" src="https://alissy27.github.io/Test/img/translation.png" alt="translation">
<p>Translate</p>
</a>
</li>
<li class="popup__item">
<a href="#">
<img class="popup__img" src="https://alissy27.github.io/Test/img/videos.png" alt="videos">
<p>Videos</p>
</a>
</li>
<li class="popup__item">
<a href="#">
<img class="popup__img" src="https://alissy27.github.io/Test/img/search.png" alt="search">
<p>Search</p>
</a>
</li>
<li class="popup__item">
<a href="#">
<img class="popup__img" src="https://alissy27.github.io/Test/img/photos.png" alt="photos">
<p>Photos</p>
</a>
</li>
<li class="popup__item">
<a href="#">
<img class="popup__img" src="https://alissy27.github.io/Test/img/apps.png" alt="apps">
<p>Apps</p>
</a>
Comment on lines +89 to +92
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Fix styles on focus state.
image

</li>
<li class="popup__item">
<a href="#">
<img class="popup__img" src="https://alissy27.github.io/Test/img/documents.png" alt="documents">
<p>Documents</p>
</a>
</li>
</ul>
<input type="checkbox" id="popup__checkbox__more">
<label for="popup__checkbox__more" class="label__checkbox__more label__text__more">More</label>
<ul class="popup__ul popup__ul__more">
<li class="popup__item">
<a href="#">
<img class="popup__img" src="https://alissy27.github.io/Test/img/chat.jpg" alt="chat">
<p>Chat</p>
</a>
</li>
<li class="popup__item">
<a href="#">
<img class="popup__img" src="https://alissy27.github.io/Test/img/classroom.png" alt="classroom">
<p>Classroom</p>
</a>
</li>
<li class="popup__item">
<a href="#">
<img class="popup__img" src="https://alissy27.github.io/Test/img/collection.png" alt="collection">
<p>Collection</p>
</a>
</li>
<li class="popup__item">
<a href="#">
<img class="popup__img" src="https://alissy27.github.io/Test/img/mars.png" alt="mars">
<p>Mars</p>
</a>
</li>
<li class="popup__item">
<a href="#">
<img class="popup__img" src="https://alissy27.github.io/Test/img/blogs.png" alt="blogs">
<p>Blogs</p>
</a>
</li>
<li class="popup__item">
<a href="#">
<img class="popup__img" src="https://alissy27.github.io/Test/img/promo.png" alt="promo">
<p>Promo</p>
</a>
</li>
</ul>


</div>
</li>
</ul>
</nav>
</header>

</body>
</html>
174 changes: 174 additions & 0 deletions submissions/Alissy27/popup/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,174 @@
* {
margin: 0;
padding: 0;
font: 20px Tahoma;
color: rgb(11, 83, 38);
list-style-type: none;
text-decoration: none;
}

.header {
background: rgba(156, 231, 185, 0.27);
padding: 52px;
}

.header__flex{
display: flex;
justify-content: space-between;
align-items: center;
}

.header__flex .logo {
max-width: 150px;
border-radius: 30%;
margin-left: 50px;
}

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

.nav__li{
margin-left: 15px;
}

.nav__popup label{
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Avoid styling by HTML tags except if you add base styles. Reason Also, avoid too specific CSS selectors. Read more about that

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

added class to label, changed css

cursor:pointer;
}


.label__text__more {
position: sticky;
text-align: center;
top: 325px;
font-weight: 600;
}

.nav__img {
display:block;
max-width: 24px;
}

#popup__checkbox {
appearance: none;
position: absolute;
}

#popup__checkbox__more {
appearance: none;
position: relative;
}

.popup__list {
display: none;
position: absolute;
right: 52px;
top: 190px;
padding: 50px 40px;
border: 1px solid rgba(0,0,0,.2);
border-radius: 5px;
background-color: #f5f5f5;
}

.popup__ul__more {
display: none;
right: 52px;
top: 190px;
padding: 0;
border: none;
border-radius: 5px;
background-color: #f5f5f5;
}

#popup__checkbox:checked ~ .popup__list{
display: grid;

}

#popup__checkbox__more:checked ~ .popup__ul__more {
display: grid;
width: auto;
}

.popup__list__checkbox, .popup__list__checkbox__more {
padding: 5px;
max-height: 360px;
overflow: auto;

}

.popup__img {
height: 40px;
width: 40px;
}

.label__checkbox {
display: block;
}

.label__checkbox__more {
display: block;
border-radius: 5px;
padding: 2px;
border: 2px solid transparent;
}

.popup__ul,.popup__ul__more {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px;
text-align: center;
}

.popup__ul__more{
display:none;
}

.popup__ul__more:checked {
display: grid;
}

.popup__item:hover {
cursor: pointer;
border: 1px solid rgb(74, 150, 103);
background-color: rgb(170, 245, 202);
}

#popup__checkbox:focus ~ .label__checkbox {
border: 2px solid black;
border-radius: 5px;
}

#popup__checkbox__more:focus ~ .label__checkbox__more {
border: 2px solid black;
}

@media screen and (max-width: 420px) {
.header {
padding: 20px;
}

.header__flex{
max-width: 420px;
flex-direction: column-reverse;
justify-content: left;
margin-left: 10px;
text-align: center;
}

.logo {
margin-left: 10px;
margin-top: 10px;
max-width: 75px;
}

.popup__list {
right: 20px;
top: 50px;
}

.popup__ul,.popup__ul__more {
grid-template-columns: repeat(2, 1fr);
}
}