From b9563cc589f75fc678b68235e539a14fe38bc21d Mon Sep 17 00:00:00 2001
From: Halv27 <109965729+Halv27@users.noreply.github.com>
Date: Sun, 28 Aug 2022 16:22:14 +0300
Subject: [PATCH] HTML-CSS-practice-popup_task (#152)
* git commit -m 'Add html-css-popup_task'
* Add changes to the popup files
---
.../Halv27/html-css-popup-task/index.html | 326 ++++++++++++++++++
.../Halv27/html-css-popup-task/style.css | 245 +++++++++++++
2 files changed, 571 insertions(+)
create mode 100644 submissions/Halv27/html-css-popup-task/index.html
create mode 100644 submissions/Halv27/html-css-popup-task/style.css
diff --git a/submissions/Halv27/html-css-popup-task/index.html b/submissions/Halv27/html-css-popup-task/index.html
new file mode 100644
index 0000000000..ea5eac5eae
--- /dev/null
+++ b/submissions/Halv27/html-css-popup-task/index.html
@@ -0,0 +1,326 @@
+
+
+
+
+
+
+
+ HTML & CSS practice: Hooli-style Popup
+
+
+
+
+
+
+
diff --git a/submissions/Halv27/html-css-popup-task/style.css b/submissions/Halv27/html-css-popup-task/style.css
new file mode 100644
index 0000000000..a8dbc95106
--- /dev/null
+++ b/submissions/Halv27/html-css-popup-task/style.css
@@ -0,0 +1,245 @@
+:root {
+ --link-hover-color: #41475d;
+ --color-fill: hsl(206, 23%, 48%);
+ --shadow-black-color: #1313144d;
+ --shadow-blue: 0px 1px 2px 1px hsla(206, 26%, 52%, 0.792);
+}
+* {
+ padding: 0;
+ margin: 0;
+ border: none;
+}
+*,
+*:before,
+*:after {
+ box-sizing: border-box;
+}
+a {
+ color: inherit;
+ text-decoration: none;
+}
+body {
+ font-family: Tahoma, Helvetica, Arial, sans-serif;
+ font-size: 1em;
+ font-weight: bold;
+ color: black;
+ min-width: 320px;
+ position: relative;
+ overflow: hidden;
+}
+.wrapper {
+ min-width: 100vw;
+ min-height: 100vh;
+ background-image: url("./images/background-cat.jpg");
+ background-position: center;
+ background-attachment: fixed;
+ background-size: auto 100%;
+}
+.header {
+ padding: 1em 0;
+ background-color: #d0e5f2;
+ box-shadow: 6px 6px 16px -3px hsla(224, 14%, 15%, 0.7);
+}
+.nav {
+ padding: 0 1em;
+}
+.nav__menu {
+ display: flex;
+ justify-content: flex-end;
+ align-items: center;
+ column-gap: 2em;
+}
+.nav__list {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ list-style-type: none;
+}
+.nav__link {
+ padding: 0.5em;
+}
+.nav__link:hover {
+ color: var(--link-hover-color);
+ transition: color 0.1s ease-in;
+}
+.check, .check-more {
+ appearance: none;
+ -webkit-appearance: none;
+ -moz-appearance: none;
+ cursor: pointer;
+}
+.check:focus {
+ outline: none;
+}
+.check:checked ~ .popup__container {
+ display: flex;
+ flex-direction: column;
+}
+.check:checked ~ .check-more {
+ display: block;
+ cursor: pointer;
+}
+.nav__img {
+ width: 2em;
+ height: 2em;
+}
+.nav__btn:hover {
+ fill: rgba(240, 65, 155, 0.617);
+ stroke: #00000c;
+ stroke-width: 1px;
+ transition: all 0.2s ease-in;
+}
+.nav__bell:hover {
+ fill: rgba(240, 234, 65, 0.617);
+ stroke: #00000c;
+ stroke-width: 20px;
+ transition: all 0.2s ease-in;
+}
+.nav__user-img {
+ width: 2.5em;
+ height: 2.5em;
+}
+.nav__user-img:hover {
+ filter: brightness(80%);
+ transition: filter 0.2s ease-in;
+}
+.popup__container,
+.popup__more {
+ display: none;
+ }
+.popup__container {
+ position: absolute;
+ top: 70px;
+ max-height: 60%;
+ overflow-y: scroll;
+ padding: 8px 10px;
+ padding: 1% 2%;
+ box-shadow: 0px 2px 5px 3px #1313144d;
+ border-radius: 10px;
+ background-color: #ffffff;
+}
+.popup__box {
+ display: grid;
+ grid-template-columns: repeat(3, 1fr);
+ grid-auto-flow: row;
+ list-style-type: none;
+}
+.popup__link {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: space-around;
+ width: 80px;
+ height: 70px;
+ padding: 3px;
+ margin: 3px;
+ font-size: 0.8rem;
+}
+.popup__link:hover, .popup__link:focus {
+ fill: var(--color-fill);
+ color: var(--link-hover-color);
+ box-shadow: var(--shadow-blue);
+ border-radius: 5px;
+ transition: all 0.2s ease-in;
+}
+.popup__img {
+ height: 3em;
+ width: 3em;
+ object-fit: contain;
+ align-content: center;
+}
+.check-more:checked ~ .popup__container {
+ max-height: 90%;
+ overflow-y: scroll;
+}
+.check-more:checked ~ .popup__more {
+ display: grid;
+ grid-template-columns: repeat(3, 1fr);
+ grid-auto-flow: row;
+}
+.check-more:checked ~ .label__check-more {
+ display: none;
+}
+.label__check-more {
+ display: block;
+ align-self: center;
+ padding: 5px 30px;
+ margin: 7px 0;
+ box-shadow: var(--shadow-blue);
+ border-radius: 9px;
+ cursor: pointer;
+ color: #000000;
+}
+.label__check-more:hover {
+ box-shadow: 0px 2px 8px 1px var(--color-fill);
+ color: var(--link-hover-color);
+}
+.popup__more {
+ list-style-type: none;
+}
+.check:focus ~ .nav__label,
+.check-more:focus ~ .label__check-more,
+.popup__list:focus,
+.nav__list:focus,
+.popup__link:focus,
+.nav__link:focus {
+ outline: #1313144d solid 2px;
+ border-radius: 1em;
+ transition: outline 0.1s ease-in;;
+}
+@media (max-width: 500px) {
+ body {
+ font-size: 0.8em;
+ }
+ .nav {
+ padding: 0;
+ }
+ .nav__menu {
+ justify-content: space-around;
+ column-gap: 0;
+ }
+ .popup__container {
+ top: 55px;
+ padding: 5px;
+ margin: 5px;
+ }
+ .popup__link {
+ width: 70px;
+ height: 55px;
+ padding: 5px;
+ margin: 3px;
+ font-size: 0.7rem;
+ }
+ .label__check-more {
+ padding: 3px 27px;
+ margin: 8px 0;
+ }
+}
+@media (min-width: 501px) and (max-width: 767px) {
+ .header {
+ padding: 0.5em;
+ }
+ .nav {
+ padding: 0;
+ }
+ .nav__menu {
+ justify-content: space-around;
+ column-gap: 0;
+ }
+ .popup__container {
+ top: 59px;
+ max-height: 70%;
+ padding: 20px;
+ }
+ .popup__link {
+ width: 76px;
+ height: 55px;
+ padding: 5px;
+ margin: 5px;
+ font-size: 0.9em;
+ }
+ .label__check-more {
+ padding: 3px 27px;
+ margin: 5px 0 0;
+ }
+}