Pop-up task

Semka094 · Aug 23, 2022 · 0141c28 · 0141c28
1 parent 3e7012d
commit 0141c28
Show file tree

Hide file tree

Showing 25 changed files with 338 additions and 0 deletions.
diff --git a/images/apps.png b/images/apps.png
diff --git a/images/bell.png b/images/bell.png
diff --git a/images/blogs.png b/images/blogs.png
diff --git a/images/calendar.png b/images/calendar.png
diff --git a/images/chat.png b/images/chat.png
diff --git a/images/classroom.png b/images/classroom.png
diff --git a/images/collection.png b/images/collection.png
diff --git a/images/contacts.png b/images/contacts.png
diff --git a/images/documents.png b/images/documents.png
diff --git a/images/favicon.png b/images/favicon.png
diff --git a/images/files.png b/images/files.png
diff --git a/images/mail.png b/images/mail.png
diff --git a/images/maps.png b/images/maps.png
diff --git a/images/mars.png b/images/mars.png
diff --git a/images/mic.png b/images/mic.png
diff --git a/images/news.png b/images/news.png
diff --git a/images/photos.png b/images/photos.png
diff --git a/images/popup-button.png b/images/popup-button.png
diff --git a/images/profileImg_1.png b/images/profileImg_1.png
diff --git a/images/promo.png b/images/promo.png
diff --git a/images/search.png b/images/search.png
diff --git a/images/tanslation.png b/images/tanslation.png
diff --git a/images/videos.png b/images/videos.png
diff --git a/index.html b/index.html
@@ -0,0 +1,139 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <link rel="stylesheet" href="style.css"/>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,300;0,400;0,500;1,300;1,400;1,500&display=swap"
+          rel="stylesheet">
+    <title>Pop-up</title>
+</head>
+
+<body>
+
+<div class="menuContainer">
+    <nav class="navWrapper">
+        <div class="navItem">
+            <a class="navLink" href="#">Mail</a>
+        </div>
+        <div class="navItem">
+            <a class="navLink" href="#">Images</a>
+        </div>
+        <div class="navItem icon">
+            <input class="popupBtnCheckbox" type="checkbox" name="" id="popupBtn">
+            <label tabindex="0" class="" for="popupBtn">
+                <img class="navLink" src="./images/popup-button.png" alt="dotted button">
+            </label>
+
+            <div class="appsPopup">
+                <div class="popupContainer">
+                    <div class="popupWrapper">
+                        <div class="itemList">
+                            <a href="#" class="columnItem">
+                                <div class="imgItem"><img src="./images/calendar.png" alt="Calendar"></div>
+                                <div class="itemTitle">Calendar</div>
+                            </a>
+                            <a href="#" class="columnItem">
+                                <div><img src="./images/mail.png" alt="Mail"></div>
+                                <div class="itemTitle">Mail</div>
+                            </a>
+                            <a href="#" class="columnItem">
+                                <div><img src="./images/news.png" alt="News"></div>
+                                <div class="itemTitle">News</div>
+                            </a>
+                            <a href="#" class="columnItem">
+                                <div><img src="./images/maps.png" alt="Maps"></div>
+                                <div class="itemTitle">Map</div>
+                            </a>
+                            <a href="#" class="columnItem">
+                                <div><img src="./images/files.png" alt="Files"></div>
+                                <div class="itemTitle">Files</div>
+                            </a>
+                            <a href="#" class="columnItem">
+                                <div><img src="./images/contacts.png" alt="Contacts"></div>
+                                <div class="itemTitle">Contacts</div>
+                            </a>
+                            <a href="#" class="columnItem">
+                                <div><img src="./images/tanslation.png" alt="Translation"></div>
+                                <div class="itemTitle">Translation</div>
+                            </a>
+                            <a href="#" class="columnItem">
+                                <div><img src="./images/videos.png" alt="Videos"></div>
+                                <div class="itemTitle">Videos</div>
+                            </a>
+                            <a href="#" class="columnItem">
+                                <div><img src="./images/search.png"alt="Search"></div>
+                                <div class="itemTitle">Search</div>
+                            </a>
+                        </div>
+
+                        <input class="visibilityFlag" type="checkbox" name="" id="loadMore">
+
+                        <label tabindex="0" class="loadMore" for="loadMore">
+                            More
+                        </label>
+
+                        <div class="hiddenItems">
+                            <a href="#" class="columnItem">
+                                <div><img src="./images/photos.png" alt="Photo"></div>
+                                <div class="itemTitle">Photo</div>
+                            </a>
+                            <a href="#" class="columnItem">
+                                <div><img src="./images/apps.png" alt="Apps"></div>
+                                <div class="itemTitle">Apps</div>
+                            </a>
+                            <a href="#" class="columnItem">
+                                <div><img src="./images/documents.png" alt="Documents"></div>
+                                <div class="itemTitle">Documents</div>
+                            </a>
+                            <a href="#" class="columnItem">
+                                <div><img src="./images/chat.png" alt="Chat"></div>
+                                <div class="itemTitle">Chat</div>
+                            </a>
+                            <a href="#" class="columnItem">
+                                <div><img src="./images/classroom.png" alt="Classroom"></div>
+                                <div class="itemTitle">Classroom</div>
+                            </a>
+                            <a href="#" class="columnItem">
+                                <div><img src="./images/collection.png" alt="Collection"></div>
+                                <div class="itemTitle">Collection</div>
+                            </a>
+                            <a href="#" class="columnItem">
+                                <div><img src="./images/mars.png" alt="Mars"></div>
+                                <div class="itemTitle">Mars</div>
+                            </a>
+                            <a href="#" class="columnItem">
+                                <div><img src="./images/blogs.png" alt="Blogs"></div>
+                                <div class="itemTitle">Blogs</div>
+                            </a>
+                            <a href="#" class="columnItem">
+                                <div><img src="./images/promo.png" alt="Promos"></div>
+                                <div class="itemTitle">Promos</div>
+                            </a>
+                        </div>
+                        <div tabindex="0" class="evenMore">
+                            Even more from Kottans
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="navItem icon">
+            <a class="navLink" href="#">
+                <img src="./images/bell.png" alt="bell">
+            </a>
+        </div>
+
+        <div class="navItem profile">
+            <a class="navLink" href="#">
+                <img src="./images/profileImg_1.png" alt="Profile image">
+            </a>
+        </div>
+    </nav>
+</div>
+
+
+</body>
+
+</html>
diff --git a/style.css b/style.css
@@ -0,0 +1,199 @@
+* {
+    font-family: Jost, Helvetica Neue, Arial, sans-serif;
+    margin: 0;
+    padding: 0;
+}
+
+.hiddenItems {
+    display: none;
+}
+
+.popupContainer {
+    width: 400px;
+    border: 1px solid rgba(173, 139, 156, 0.34);
+    border-radius: 5px 5px 0 0;
+    box-shadow: -3px 10px 23px 1px rgba(242, 220, 232, 0.22);
+    overflow: scroll;
+    height: 400px;
+}
+
+.popupContainer:after {
+    content: "";
+    width: 15px;
+    height: 15px;
+    transform: rotate(-45deg);
+    background: #fff;
+    position: absolute;
+    box-shadow: 2px -2px 2px -1px rgb(242 220 232);
+    z-index: 0;
+    top: -5px;
+    left: calc(90% - 3px);
+}
+
+.menuContainer {
+    background-color: #f5f7fa;
+    height: 65px;
+    display: flex;
+    align-items: center;
+    justify-content: right;
+    padding-right: 50px;
+}
+
+.navWrapper {
+    display: flex;
+    align-items: center;
+    height: 50px;
+}
+
+.navWrapper .navItem {
+    border: 2px solid transparent;
+    position: relative;
+    padding: 5px 8px;
+}
+
+.navWrapper .navItem:hover {
+    border: 2px solid #f6ccdb;
+    border-radius: 3px;
+}
+
+.navWrapper .navItem .navLink {
+    font-size: 18px;
+    color: dimgray;
+    text-decoration: none;
+    height: inherit;
+    display: block;
+}
+
+.navWrapper .navItem img {
+    height: 100%;
+}
+
+.navWrapper .navItem.icon {
+    width: 25px;
+    height: 25px;
+}
+
+.navWrapper .navItem .popupBtnCheckbox {
+    display: none;
+}
+.popupBtnCheckbox:checked ~ .appsPopup {
+    display: block;
+}
+
+.navWrapper .profile {
+    height: 45px;
+    width: 45px;
+    padding: 0;
+    margin-left: 15px;
+}
+
+.navWrapper .navItem.profile:hover {
+    border-radius: 50%;
+}
+
+.navWrapper .profile img {
+    border-radius: 50%;
+    width: 100%;
+    height: 100%;
+}
+
+.navWrapper .appsPopup {
+    display: none;
+    position: absolute;
+    right: -15px;
+    top: 50px;
+}
+
+.navWrapper a:focus .appsPopup {
+    display: block;
+}
+
+.navWrapper .popupWrapper .itemList {
+    overflow: auto;
+    display: flex;
+    flex-wrap: wrap;
+}
+
+.popupWrapper .loadMore {
+    background-color: lightgrey;
+    border: none;
+    color: white;
+    padding: 10px;
+    text-align: center;
+    text-decoration: none;
+    font-size: 17px;
+    width: 100%;
+    display: block;
+    box-sizing: border-box;
+    cursor: pointer;
+    user-select: none;
+}
+
+.popupWrapper .loadMore:hover {
+    background-color: #afafaf;
+}
+
+.popupWrapper .visibilityFlag {
+    display: none;
+}
+
+.visibilityFlag:checked ~ .loadMore {
+    display: none;
+}
+
+.popupWrapper .visibilityFlag:checked ~ .hiddenItems {
+    overflow: auto;
+    display: flex;
+    flex-wrap: wrap;
+}
+
+.popupWrapper .visibilityFlag:checked ~ .evenMore {
+    display: block;
+    width: 100%;
+    color: lightslategray;
+    text-align: center;
+    padding: 10px 0;
+}
+
+.evenMore {
+    display: none;
+}
+
+.popupContainer .popupWrapper img {
+    height: 40px;
+    padding: 5px 3px;
+    margin: 8px 3px;
+}
+
+.columnItem {
+    box-sizing: border-box;
+    width: 32%;
+    text-align: center;
+    margin: 13px auto;
+    border: 1px solid transparent;
+    text-decoration: none;
+}
+.columnItem:hover {
+    border: 1px dashed #b4e2f5;
+}
+
+.columnItem:focus {
+    border: 1px solid #b4e2f5;
+}
+
+.itemTitle {
+    font-size: 13px;
+    color: grey;
+    text-decoration: none;
+}
+
+.popupBtn {
+    background-color: lightgrey;
+    border: none;
+    color: white;
+    padding: 10px;
+    text-align: center;
+    text-decoration: none;
+    font-size: 17px;
+    width: 100%;
+}