Skip to content

Commit

Permalink
popup (#308)
Browse files Browse the repository at this point in the history 
* popup

* Update style.css

* Update style.css

* Update index.html

* Update index.html

* change

* change

* change

* change

* change
  • Loading branch information
@Westerinoo
Westerinoo authored Sep 2, 2022
1 parent 7a36d42 commit 8c5a864
Show file tree
Hide file tree
Showing 2 changed files with 213 additions and 0 deletions.
58 changes: 58 additions & 0 deletions submissions/Westerinoo/HTML-CSS-popup/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,58 @@
<!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>Pop-Up</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<nav class="navigation">
<ul class="nav__lists">
<li class="nav__items"><a class="link" href="#">Mail</a></li>
<li class="nav__items"><a class="link" href="#">Images</a></li>
<li class="nav__items">

<input id="checkbox__popup" type="checkbox" class="checkbox__popup">
<div class="wrap-popup">
<div class="popup__content">
<ul class="popup__lists">
<li class="popup__items"><a class ="link-popup" href="#"><img class="icons" src="./icons/calendar.png" alt=""><span>calendar</span></a></li>
<li class="popup__items"><a class ="link-popup" href="#"><img src="./icons/mail.png" alt="" class="icons"><span>mail</span></a></li>
<li class="popup__items"><a class ="link-popup" href="#"><img src="./icons/news.png" alt="" class="icons"><span>news</span></a></li>
<li class="popup__items"><a class ="link-popup" href="#"><img src="./icons/maps.png" alt="" class="icons"><span>maps</span></a></li>
<li class="popup__items"><a class ="link-popup" href="#"><img src="./icons/files.png" alt="" class="icons"><span>files</span></a></li>
<li class="popup__items"><a class ="link-popup" href="#"><img src="./icons/contacts.png" alt="" class="icons"><span>contacts</span></a></li>
<li class="popup__items"><a class ="link-popup" href="#"><img src="./icons/tanslation.png" alt="" class="icons"><span>translation</span></a></li>
<li class="popup__items"><a class ="link-popup" href="#"><img src="./icons/videos.png" alt="" class="icons"><span>video</span></a></li>
<li class="popup__items"><a class ="link-popup" href="#"><img src="./icons/search.png" alt="" class="icons"><span>search</span></a></li>
<li class="popup__items"><a class ="link-popup" href="#"><img src="./icons/photos.png" alt="" class="icons"><span>photos</span></a></li>
<li class="popup__items"><a class ="link-popup"href="#"><img src="./icons/apps.png" alt="" class="icons"><span>apps</span></a></li>
<li class="popup__items"><a class ="link-popup" href="#"><img src="./icons/documents.png" alt="" class="icons"><span>documents</span></a></li>
</ul>
<input type="checkbox" class="checkbox__popup-more" id="checkbox__popup-more">
<label class="label__popup-more" for="checkbox__popup-more">
<span>More</span>
</label>
<ul class="popup__lists popup__lists-more">
<li class="popup__items popup__items-more"><a class="link-popup" href="#"><img src="./icons/chat.png" alt="" class="icons"><span>Chat</span></a></li>
<li class="popup__items popup__items-more"><a class="link-popup" href="#"><img src="./icons/classroom.png" alt="" class="icons"><span>Classroom</span></a></li>
<li class="popup__items popup__items-more"><a class="link-popup" href="#"><img src="./icons/collection.png" alt="" class="icons"><span>Collection</span></a></li>
<li class="popup__items popup__items-more"><a class="link-popup" href="#"><img src="./icons/mars.png" alt="" class="icons"><span>Mars</span></a></li>
<li class="popup__items popup__items-more"><a class="link-popup" href="#"><img src="./icons/blogs.png" alt="" class="icons"><span>Blog</span></a></li>
<li class="popup__items popup__items-more"><a class="link-popup" href="#"><img src="./icons/promo.png" alt="" class="icons"><span>Promos</span></a></li>
</ul>
</div>

</div>
</li>
<li class="nav__items"><a class="link" href="#"><img src="./icons/bell.png" alt="" class="nav-icons"></a></li>
<li class="nav__items"><a class="link" href="#"><img src="./icons/account.png" alt="" class="nav-icons"></a></li>
</ul>
</nav>
</header>
</html>


155 changes: 155 additions & 0 deletions submissions/Westerinoo/HTML-CSS-popup/style.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,155 @@
* {
box-sizing: border-box;
list-style: none;
text-decoration: none;
padding: 0;
margin: 0;
}
/*-------------------------------------Navigation--------------------------*/
.checkbox__popup {
appearance: none;
background-image: url(./icons/popup-button.png);
height: 30px;
background-repeat: no-repeat;
background-position: center;
width: 80px;
display: block;
cursor: pointer;
}
.checkbox__popup:focus,
.link:focus {
outline: 2px solid rgb(108, 201, 238);
border-radius: 3px;
}
.nav__lists {
display: grid;
grid-template-columns: repeat(5, 1fr);
justify-items: center;
align-items: center;
}
.navigation {
display: grid;
align-items: center;
border-radius: 4px;
background-color: rgb(246, 247, 239);
height: 50px;
width: 100%;
margin: auto;
}
.nav-icons {
width: 20px;
}
.nav__items {
justify-self: center;
}
.label__popup {
cursor: pointer;
display: block;
}
.link,
.label__popup {
display: grid;
align-items: center;
justify-items: center;
width: 80px;
height: 30px;
}
.link:hover,
.checkbox__popup:hover {
outline: 1px solid grey;
border-radius: 3px;
}
/*------------------------popUp----------------------------*/
.wrap-popup {
height: 100%;
display: none;
width: 100%;
justify-items: center;
align-items: center;
}
.checkbox__popup:checked ~ .wrap-popup,
.checkbox__popup:checked ~ .popup__content-more {
display: grid;
}
.popup__content {
display: grid;
position: absolute;
gap: 5px;
top: 60px;
height: 500px;
padding: 10px;
background-color: rgb(246, 247, 239);
outline: 1px solid black;
overflow-y: scroll;
box-shadow: 0px 0px 20px grey;
border-radius: 3px;
}
.icons {
width: 40%;
}
.popup__lists {
display: grid;
grid-template-columns: repeat(3, 100px);
gap: 10px;
justify-content: center;
align-items: center;
}
.popup__items {
width: 100px;
height: 100px;
}
.popup__items:hover {
outline: 1px solid grey;
border-radius: 3px;
}
.link-popup {
height: 100%;
display: grid;
justify-items: center;
align-items: center;
}
.link-popup:focus {
outline: 2px solid rgb(108, 201, 238);
border-radius: 3px;
}
.label__popup-more {
display: grid;
justify-items: center;
align-items: center;
width: 100%;
height: 35px;
outline: 1px solid rgba(red, rgb(201, 204, 201), blue, 0.6);
background-color: rgb(201, 201, 191);
border-radius: 3px;
cursor: pointer;
}
.label__popup-more:hover {
outline: 1px solid grey;
}
/*------------------------------------------------popUp-more-----------------------------*/
.checkbox__popup-more {
appearance: none;
}
.checkbox__popup-more:focus + label {
outline: 2px solid rgb(108, 201, 238);
border-radius: 3px;
}
.checkbox__popup-more:focus {
outline: none;
}
.popup__lists-more {
display: none;
position: absolute;
height: 230px;
top: 91%;
}
.popup__lists-more {
margin-left: 10px;
padding-bottom: 5px;
}
.checkbox__popup-more:checked ~ .label__popup-more {
visibility: hidden;
}
.checkbox__popup-more:checked ~ .popup__lists-more {
display: grid;
}

0 comments on commit 8c5a864

Please sign in to comment.