html-css-popup complited

kottans · TonyG89 · Sep 9, 2022 · Sep 9, 2022 · Sep 9, 2022 · Sep 9, 2022
commit 817417583654f84a3e8090cdc0893b8ce3923236
diff --git a/submissions/TonyOkylistik/html-css-popup/img/bell.png b/submissions/TonyOkylistik/html-css-popup/img/bell.png
diff --git a/submissions/TonyOkylistik/html-css-popup/img/icons/apps.png b/submissions/TonyOkylistik/html-css-popup/img/icons/apps.png
diff --git a/submissions/TonyOkylistik/html-css-popup/img/icons/blogs.png b/submissions/TonyOkylistik/html-css-popup/img/icons/blogs.png
diff --git a/submissions/TonyOkylistik/html-css-popup/img/icons/calendar.png b/submissions/TonyOkylistik/html-css-popup/img/icons/calendar.png
diff --git a/submissions/TonyOkylistik/html-css-popup/img/icons/chat.png b/submissions/TonyOkylistik/html-css-popup/img/icons/chat.png
diff --git a/submissions/TonyOkylistik/html-css-popup/img/icons/classroom.png b/submissions/TonyOkylistik/html-css-popup/img/icons/classroom.png
diff --git a/submissions/TonyOkylistik/html-css-popup/img/icons/collections.png b/submissions/TonyOkylistik/html-css-popup/img/icons/collections.png
diff --git a/submissions/TonyOkylistik/html-css-popup/img/icons/contacts.png b/submissions/TonyOkylistik/html-css-popup/img/icons/contacts.png
diff --git a/submissions/TonyOkylistik/html-css-popup/img/icons/document.png b/submissions/TonyOkylistik/html-css-popup/img/icons/document.png
diff --git a/submissions/TonyOkylistik/html-css-popup/img/icons/files.png b/submissions/TonyOkylistik/html-css-popup/img/icons/files.png
diff --git a/submissions/TonyOkylistik/html-css-popup/img/icons/mail.png b/submissions/TonyOkylistik/html-css-popup/img/icons/mail.png
diff --git a/submissions/TonyOkylistik/html-css-popup/img/icons/map.png b/submissions/TonyOkylistik/html-css-popup/img/icons/map.png
diff --git a/submissions/TonyOkylistik/html-css-popup/img/icons/mars.png b/submissions/TonyOkylistik/html-css-popup/img/icons/mars.png
diff --git a/submissions/TonyOkylistik/html-css-popup/img/icons/news.png b/submissions/TonyOkylistik/html-css-popup/img/icons/news.png
diff --git a/submissions/TonyOkylistik/html-css-popup/img/icons/photo.png b/submissions/TonyOkylistik/html-css-popup/img/icons/photo.png
diff --git a/submissions/TonyOkylistik/html-css-popup/img/icons/promos.png b/submissions/TonyOkylistik/html-css-popup/img/icons/promos.png
diff --git a/submissions/TonyOkylistik/html-css-popup/img/icons/search.png b/submissions/TonyOkylistik/html-css-popup/img/icons/search.png
diff --git a/submissions/TonyOkylistik/html-css-popup/img/icons/translate.png b/submissions/TonyOkylistik/html-css-popup/img/icons/translate.png
diff --git a/submissions/TonyOkylistik/html-css-popup/img/icons/videos.png b/submissions/TonyOkylistik/html-css-popup/img/icons/videos.png
diff --git a/submissions/TonyOkylistik/html-css-popup/img/menu-burder.png b/submissions/TonyOkylistik/html-css-popup/img/menu-burder.png
diff --git a/submissions/TonyOkylistik/html-css-popup/img/user.png b/submissions/TonyOkylistik/html-css-popup/img/user.png
diff --git a/submissions/TonyOkylistik/html-css-popup/index.html b/submissions/TonyOkylistik/html-css-popup/index.html
@@ -0,0 +1,92 @@
+<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="style.css" />
+    <title>html css popup</title>
+  </head>
+  <body>
+    <div class="wrapper">
+      <header>
+        <nav class="menu">
+          <ul class="list">
+            <li class="list__item"><a href="">Mail</a></li>
+            <li class="list__item"><a href="">Images</a></li>
+            <li class="list__item popup-menu">
+              <label for="popup__main"><input type="checkbox" id="popup__main" />
+                <a href="#"><img src="./img/menu-burder.png" alt="popup-menu"/></a>
+                <nav class="burger-menu">
+                  <ul class="list">
+                    <li class="list__item">
+                      <a href="#"><img src="./img/icons/calendar.png" alt="Calendar" />Calendar</a>
+                    </li>
+                    <li class="list__item">
+                      <a href="#"><img src="./img/icons/mail.png" alt="Mail" />Mail</a>
+                    </li>
+                    <li class="list__item">
+                      <a href="#"><img src="./img/icons/news.png" alt="News" />News</a>
+                    </li>
+                    <li class="list__item">
+                      <a href="#"><img src="./img/icons/map.png" alt="Map" />Map</a>
+                    </li>
+                    <li class="list__item">
+                      <a href="#"><img src="./img/icons/files.png" alt="Files" />Files</a>
+                    </li>
+                    <li class="list__item">
+                      <a href="#"><img src="./img/icons/contacts.png" alt="Contacts" />Contacts</a>
+                    </li>
+                    <li class="list__item">
+                      <a href="#"><img src="./img/icons/translate.png" alt="Translate" />Translate</a>
+                    </li>
+                    <li class="list__item">
+                      <a href="#"><img src="./img/icons/videos.png" alt="Videos"/>Videos</a>
+                    </li>
+                    <li class="list__item">
+                      <a href="#"><img src="./img/icons/search.png" alt="Search"/>Search</a>
+                    </li>
+                    <li class="list__item">
+                      <a href="#"><img src="./img/icons/photo.png" alt="Photo" />Photo</a>
+                    </li>
+                    <li class="list__item">
+                      <a href="#"><img src="./img/icons/apps.png" alt="Apps" />Apps</a>
+                    </li>
+                    <li class="list__item">
+                      <a href="#"><img src="./img/icons/document.png" alt="Document"/>Document</a>
+                    </li>
+                  </ul>
+                  <label for="popup__more" id="label__more"><input type="checkbox" id="popup__more" /><a href="#" id="more"></a>
+                    <ul class="list list__more">
+                      <li class="list__item">
+                        <a href="#"><img src="./img/icons/chat.png" alt="Chat" />Chat</a>
+                      </li>
+                      <li class="list__item">
+                        <a href="#"><img src="./img/icons/classroom.png" alt="Classroom"/>Classroom</a>
+                      </li>
+                      <li class="list__item">
+                        <a href="#"><img src="./img/icons/collections.png" alt="Collection"/>Collection</a>
+                      </li>
+                      <li class="list__item">
+                        <a href="#"><img src="./img/icons/mars.png" alt="Mars" />Mars</a>
+                      </li>
+                      <li class="list__item">
+                        <a href="#"><img src="./img/icons/blogs.png" alt="Blogs"/>Blogs</a>
+                      </li>
+                      <li class="list__item">
+                        <a href="#"><img src="./img/icons/promos.png" alt="Promos"/>Promos</a>
+                      </li><li><a href="https://github.com/kottans">Even more from Kottans</a></li>
+                    </ul></label>
+                </nav></label>
+            </li>
+            <li class="list__item">
+              <a href=""><img src="./img/bell.png" alt="bell" /></a>
+            </li>
+            <li class="list__item">
+              <a href=""><img src="./img/user.png" alt="user" /></a>
+            </li>
+          </ul>
+        </nav>
+      </header>
+    </div>
+  </body>
+</html>
diff --git a/submissions/TonyOkylistik/html-css-popup/style.css b/submissions/TonyOkylistik/html-css-popup/style.css
@@ -0,0 +1,244 @@
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+* {
+  margin: 0;
+}
+
+html,
+body {
+  height: 100%;
+}
+
+body {
+  line-height: 1.5;
+  -webkit-font-smoothing: antialiased;
+}
+
+img,
+picture,
+video,
+canvas,
+svg {
+  display: block;
+  max-width: 100%;
+}
+
+input,
+button,
+textarea,
+select {
+  font: inherit;
+}
+
+p,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  overflow-wrap: break-word;
+}
+
+#root,
+#__next {
+  isolation: isolate;
+}
+
+ul {
+  margin: 0;
+  padding: 0;
+  text-indent: 0;
+  list-style-type: none;
+}
+
+body {
+  background-color: #f6f1b4;
+}
+
+a {
+  text-decoration: none;
+  color: #242424;
+  text-shadow: -0.5px 0.5px 1px rgba(0, 0, 0, 0.411);
+  transition: padding 0.3s ease;
+  width: 100%;
+  margin: 0 auto;
+}
+a:focus {
+  border-radius: 40% 10%;
+  padding: 2px;
+}
+
+.wrapper {
+  margin: 0 auto;
+  height: 100vh;
+  width: 400px;
+  background-color: #a6b5eb;
+  -webkit-animation: shadow 5s infinite;
+          animation: shadow 5s infinite;
+  position: relative;
+}
+
+header {
+  background-color: #8cd4aa;
+  border-bottom: 3px solid #d48cc0;
+}
+
+#popup__main {
+  opacity: 0;
+  transform: scale(2);
+  position: absolute;
+  top: 7px;
+  left: 7px;
+}
+#popup__main:checked ~ .burger-menu {
+  visibility: visible;
+}
+#popup__more {
+  opacity: 0;
+  height: 22px;
+  position: absolute;
+  top: 300px;
+  width: 100%;
+}
+#popup__more:checked ~ .list__more {
+  display: flex;
+}
+#popup__more:checked ~ #more {
+  background-color: #f6f1b4;
+}
+#popup__more:checked ~ #more:before {
+  content: "...";
+}
+
+a#more {
+  overflow-x: hidden;
+  background-color: #8cd4aa;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.085);
+  transition: opacity 0.3s ease;
+}
+a#more:before {
+  content: "MORE";
+}
+a#more:hover {
+  opacity: 0.85;
+}
+a#more:focus {
+  border: 2px solid 0;
+  border-radius: 0;
+  margin: 1px 2px;
+  width: 256px;
+}
+
+li,
+.list {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  flex-direction: wrap;
+}
+li__more,
+.list__more {
+  background-color: #f6f1b4;
+}
+li__item,
+.list__item {
+  text-align: center;
+  font-size: 14px;
+  margin: 10px;
+  padding: 3px;
+  border-radius: 40% 10%;
+  border: 2px solid rgba(246, 127, 0, 0.3921568627);
+  background-color: rgba(246, 127, 0, 0.3333333333);
+  text-transform: uppercase;
+  position: relative;
+}
+li__item img,
+.list__item img {
+  height: 20px;
+  padding: 2px;
+  margin: 0 auto;
+}
+li__item:hover,
+.list__item:hover {
+  border: 2px solid rgba(246, 127, 0, 0.6862745098);
+  background-color: rgba(246, 127, 0, 0.5647058824);
+}
+li__item:active,
+.list__item:active {
+  border: 2px solid #2cb264;
+  background-color: #8cd4aa;
+}
+
+label {
+  display: flex;
+  flex-direction: column;
+}
+
+.burger-menu {
+  visibility: hidden;
+  position: absolute;
+  top: 41px;
+  right: 0;
+  border-top-right-radius: 5px;
+  background-color: #f6f1b4;
+  -webkit-animation: shadow 5s infinite;
+          animation: shadow 5s infinite;
+  width: 260px;
+  max-height: 400px;
+  overflow-y: auto;
+}
+.burger-menu .list {
+  justify-content: center;
+  flex-wrap: wrap;
+}
+.burger-menu .list__item {
+  width: 25%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  font-size: 10px;
+  text-transform: capitalize;
+  align-self: center;
+}
+.burger-menu .list__item img {
+  height: 30px;
+}
+.burger-menu .list__more {
+  display: none;
+}
+
+@-webkit-keyframes shadow {
+  from {
+    box-shadow: 2px 2px 10px #46496c;
+  }
+  30% {
+    box-shadow: 2px 2px 5px #d48cc0;
+  }
+  60% {
+    box-shadow: 2px 2px 1px #8cd4aa;
+  }
+  to {
+    box-shadow: 2px 2px 5px #46496c;
+  }
+}
+
+@keyframes shadow {
+  from {
+    box-shadow: 2px 2px 10px #46496c;
+  }
+  30% {
+    box-shadow: 2px 2px 5px #d48cc0;
+  }
+  60% {
+    box-shadow: 2px 2px 1px #8cd4aa;
+  }
+  to {
+    box-shadow: 2px 2px 5px #46496c;
+  }
+}/*# sourceMappingURL=style.css.map */