Skip to content

Commit

Permalink
Html & CSS Practice. Popup (#43)
Browse files Browse the repository at this point in the history 
* Add file

* Fix mistake according to previous PR

* fix width for containers

* fix hover, centered containers, add border-radius etc.

Co-authored-by: pro <pro@pros-MacBook-Pro.local>
  • Loading branch information
@HelenGreent
HelenGreent and pro authored Aug 11, 2022
1 parent fb9b9fc commit 61d5ca4
Show file tree
Hide file tree
Showing 2 changed files with 342 additions and 0 deletions.
215 changes: 215 additions & 0 deletions submissions/HelenGreent/task_html_css_popup/index.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,215 @@
@import url("https://fonts.googleapis.com/css2?family=Work+Sans:wght@500;700&display=swap");

:root {
--main-color: #d3d3d3;
--bg-color: #ffffff;
--text-color: #333333;
--box-shadow: rgba(35, 35, 35, 0.2) 0px 2px 8px 0px;
--border-focus: 1px solid rgb(8, 74, 179);
--border-hover: 1px solid rgb(138, 146, 148);
}

* {
margin: 0;
padding: 0;
border: 0;
box-sizing: border-box;
}

body {
font-family: "Work Sans", sans-serif;
background-color: var(--main-color);
}

.header {
padding: 0.6rem 0;
background-color: var(--bg-color);
box-shadow: var(--box-shadow);
position: relative;
}

.main__nav {
display: flex;
align-items: center;
justify-content: flex-end;
padding: 0 1rem;
}

.main__nav-item {
padding: 0rem 1rem;
font-size: 1.2rem;
font-weight: 500;
color: var(--text-color);
text-decoration: none;
outline: none;
border: 1px solid transparent;
}

.main__nav-item > img {
height: 1rem;
padding-right: .2rem;
}

.nav {
padding: 0rem 1rem;
}

.nav__list {
list-style: none;
}

.nav__link {
text-decoration: none;
outline: none;
}

.popup {
position: relative;
}

.popup__toggler {
padding: .25rem;
display: flex;
align-items: center;
}

.popup__control {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
appearance: none;
outline: none;
cursor: pointer;
border: 2px solid transparent;
}

.popup__control:checked ~ .popup__content {
display: block;
}

.popup__content {
display: none;
position: absolute;
top: 3.5rem;
right: -5.5rem;
min-width: 300px;
max-height: 500px;
padding: .6rem;
overflow-y: auto;
overflow-x: hidden;
border-radius: 1%;
background-color: var(--bg-color);
box-shadow: var(--box-shadow);
}

.popup__content::before {
content: "";
position: fixed;
top: 2.25rem;
right: 10rem;
transform: translateX(-50%);
border: 15px solid;
border-color: transparent transparent var(--bg-color) transparent;
z-index: 1;
}

.popup__list {
display: flex;
justify-content: space-around;
flex-wrap: wrap;
list-style: none;
}

.popup__list:nth-child(-n+3){
margin-top: .5rem;
}

.popup__list-item {
display: flex;
flex-flow: column wrap;
justify-content: space-around;
width: 30%;
height: 7rem;
text-align: center;
}

.popup__link {
padding: .9rem .2rem .9rem;
text-decoration: none;
outline: none;
color: inherit;
border: 1px solid transparent;
}

.popup__link-title {
display: block;
padding-top: .6rem;
font-size: .9rem;
text-align: center;
}

.popup__link-icon {
max-width: 3rem;
height: 2rem;
object-fit: contain;
}

.add-popup {
position: relative;
}

.add-popup__toggler {
width: 100%;
text-align: center;
padding: .6rem;
}

.add-popup__title {
display: block;
font-weight: 700;
width: 100%;
text-align: center;
}

.add-popup__control {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
appearance: none;
cursor: pointer;
outline: none;
border: 1px solid transparent;
}

.add-popup__content {
display: none;
overflow-y: hidden;
}

.add-popup__control:checked ~ .add-popup__content {
display: block;
}

.add-popup__control:checked ~ .add-popup__toggler,
.add-popup__control:checked {
display: none;
}

.main__nav-item:focus,
.nav__link:focus,
.popup__control:focus,
.popup__link:focus,
.add-popup__control:focus {
border: var(--border-focus);
border-radius: 3%;
}

.nav__link:hover,
.popup__link:hover {
border: var(--border-hover);
border-radius: 3%;
}
127 changes: 127 additions & 0 deletions submissions/HelenGreent/task_html_css_popup/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,127 @@
<!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 rel="stylesheet" href="index.css" />
<title>Kottans | Popup</title>
</head>
<body>
<header class="header">
<div class="header__wrapper">
<nav class="main__nav">
<a class="main__nav-item" href="#">Mail</a>
<a class="main__nav-item" href="#">Images</a>
<div class="nav">
<ul class="nav__list">
<li class="nav__list-item">
<div class="popup">
<input class="popup__control" id="popup-inner" type="checkbox"/>
<label class="popup__toggler" for="popup-inner">
<img
src="./images/popup-button.png"
alt="open/close popup"
/>
</label>
<div class="popup__content">
<ul class="popup__list">
<li class="popup__list-item">
<a class="popup__link" href="#">
<img class="popup__link-icon" src="./images/mars.png" alt="mars"/>
<span class="popup__link-title">Mars</span>
</a>
</li>
<li class="popup__list-item">
<a class="popup__link" href="#">
<img class="popup__link-icon" src="./images/mail.png" alt="mail"/>
<span class="popup__link-title">Mail</span>
</a>
</li>
<li class="popup__list-item">
<a class="popup__link" href="#">
<img class="popup__link-icon" src="./images/contacts.png" alt="contacts"/>
<span class="popup__link-title">Contacts</span>
</a>
</li>
<li class="popup__list-item">
<a class="popup__link" href="#">
<img class="popup__link-icon" src="./images/blogs.png" alt="contacts"/>
<span class="popup__link-title">News</span>
</a>
</li>
<li class="popup__list-item">
<a class="popup__link" href="#">
<img class="popup__link-icon" src="./images/calendar.png" alt="calendar"/>
<span class="popup__link-title">Calendar</span>
</a>
</li>
<li class="popup__list-item">
<a class="popup__link" href="#">
<img class="popup__link-icon" src="./images/classroom.png" alt="classroom"/>
<span class="popup__link-title">Sketch</span>
</a>
</li>
<li class="popup__list-item">
<a class="popup__link" href="#">
<img class="popup__link-icon" src="./images/chat.png" alt="chat"/>
<span class="popup__link-title">Chat</span>
</a>
</li>
<li class="popup__list-item">
<a class="popup__link" href="#">
<img class="popup__link-icon" src="./images/maps.png" alt="maps"/>
<span class="popup__link-title">Maps</span>
</a>
</li>
<li class="popup__list-item">
<a class="popup__link" href="#">
<img class="popup__link-icon" src="./images/photos.png" alt="photo"/>
<span class="popup__link-title">Photos</span>
</a>
</li>
</ul>
<div>
<div class="add-popup">
<input class="add-popup__control" type="checkbox" id="popup-more"/>
<label class="add-popup__toggler" for="popup-more">
<span class="add-popup__title">More</span>
</label>
<div class="add-popup__content">
<ul class="popup__list">
<li class="popup__list-item">
<a class="popup__link" href="#">
<img class="popup__link-icon" src="./images/favicon.png" alt="kottans"/>
<span class="popup__link-title">Kottans</span>
</a>
</li>
<li class="popup__list-item">
<a class="popup__link" href="#">
<img class="popup__link-icon" src="./images/collection.png" alt="collection"/>
<span class="popup__link-title">Collection</span>
</a>
</li>
<li class="popup__list-item">
<a class="popup__link" href="#">
<img class="popup__link-icon" src="./images/documents.png" alt="documents"/>
<span class="popup__link-title">Doc</span>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
<a class="main__nav-item" href="#">
<img src="./images/bell.png" alt="bell"/>
</a>
<a class="main__nav-item" href="#">Helen</a>
</nav>
</div>
</header>
</body>
</html>

0 comments on commit 61d5ca4

Please sign in to comment.