From 55e709a011abe9bc74c631979822eb5b8546ff66 Mon Sep 17 00:00:00 2001 From: asa Date: Mon, 8 Aug 2022 16:40:18 +0300 Subject: [PATCH 1/6] added index.html --- .../asaMitaka/hooliStylePopup/index.html | 167 ++++++++++++++++++ 1 file changed, 167 insertions(+) create mode 100644 submissions/asaMitaka/hooliStylePopup/index.html diff --git a/submissions/asaMitaka/hooliStylePopup/index.html b/submissions/asaMitaka/hooliStylePopup/index.html new file mode 100644 index 0000000000..aeaf865bbb --- /dev/null +++ b/submissions/asaMitaka/hooliStylePopup/index.html @@ -0,0 +1,167 @@ + + + + + + + Document + + + + + + + + From 125f67ddc2b809d2b80e0afc6b6a650a6c00c8c3 Mon Sep 17 00:00:00 2001 From: asa Date: Mon, 8 Aug 2022 16:40:34 +0300 Subject: [PATCH 2/6] added style.css --- .../asaMitaka/hooliStylePopup/style.css | 183 ++++++++++++++++++ 1 file changed, 183 insertions(+) create mode 100644 submissions/asaMitaka/hooliStylePopup/style.css diff --git a/submissions/asaMitaka/hooliStylePopup/style.css b/submissions/asaMitaka/hooliStylePopup/style.css new file mode 100644 index 0000000000..876d097484 --- /dev/null +++ b/submissions/asaMitaka/hooliStylePopup/style.css @@ -0,0 +1,183 @@ +/* nav block */ + +.nav__ul { + display: flex; + flex-direction: row; + justify-content: end; +} + +.nav__item { + padding: 0 10px; + list-style: none; + display: flex; + align-items: center; +} + +.nav__ul li a { + color: black; + text-decoration: none; +} + +.nav__item a:hover { + color: rgb(78, 69, 69); + text-decoration: underline; +} + +:focus { + outline: 2px solid blue; +} + +.check__input { + position: absolute; + /* appearance: none; */ + clip: rect(0 0 0 0); + cursor: pointer; +} + +:focus { + outline: 2px solid blue; +} + +/* nav image */ + +.img__checkbox { + cursor: pointer; + /* position: absolute; */ +} + +.img__nav { + border-radius: 10rem; + height: 25px; + width: 25px; +} + +.img__nav:hover { + box-shadow: 14px 17px 41px 10px rgba(0,0,0,0.1); +} + + +/* popup */ + +.popup { + display: none; + top: 50px; + right: 4em; + position: absolute; + width: 360px; + height: 430px; + overflow-y: auto; + box-shadow: 0px 0px 22px -1px rgba(0,0,0,0.12); +} + +:checked ~ .popup { + display: block; +} + +.popup ul { + display: flex; + flex-wrap: wrap; + right: 4em; + padding: 0; +} + +.popup__item { + list-style: none; + flex: 0 0 33%; +} + +.popup__item:hover { + box-shadow: 0px 0px 22px -1px rgba(0,0,0,0.12); +} + +.popup__item a { + margin: 10px 5px; + display: flex; + flex-direction: column; + align-items: center; +} + +.popup__item_img { + width: 40x; + height: 40px; + padding-bottom: 15px; +} + +.popup__open { + background-color: rgb(175, 170, 170); + text-align: center; + padding: 10px; + display: block; + cursor: pointer; +} + + +/* more Popup */ + +.more__checkbox { + position: absolute; + clip: rect(0 0 0 0); + /* appearance: none; */ +} + +.popup__open:focus { + border: 1px solid blue; + background-color: gainsboro; +} + +.more__checkbox ~ .popup__open { + display: block; +} + +.more__checkbox:checked ~ .popup__open { + display: none; +} + +.more__checkbox:checked ~ .more__popup { + display: flex; +} + +.more__popup { + display: flex; +} + +.more__popup { + display: none; + flex-wrap: wrap; + right: 4em; + padding: 0; +} + +.more__popup__item { + list-style: none; + flex: 0 0 33%; +} + +.more__popup__item a { + margin: 10px 5px; + display: flex; + flex-direction: column; + align-items: center; +} + +.more__popup__item_img { + width: 40x; + height: 40px; + padding-bottom: 15px; +} + +.more__popup__open { + width: 100%; + text-align: center; + padding: 20px 10px; + display: block; +} + +.more__popup__open a { + text-decoration: none; + color: black; +} + +.more__popup__open a:hover { + text-decoration: underline; +} + From 21d08684fb82210dc90efc7b257bf6d2741bf881 Mon Sep 17 00:00:00 2001 From: AsaMitaka Date: Tue, 9 Aug 2022 14:57:17 +0300 Subject: [PATCH 3/6] added header, title, added possibility to open and hide icons menu with keyboard --- .../asaMitaka/hooliStylePopup/index.html | 272 +++++++++--------- .../asaMitaka/hooliStylePopup/style.css | 33 ++- 2 files changed, 155 insertions(+), 150 deletions(-) diff --git a/submissions/asaMitaka/hooliStylePopup/index.html b/submissions/asaMitaka/hooliStylePopup/index.html index aeaf865bbb..1e8d646ae6 100644 --- a/submissions/asaMitaka/hooliStylePopup/index.html +++ b/submissions/asaMitaka/hooliStylePopup/index.html @@ -4,164 +4,170 @@ - Document + Hooli Style Popup - + diff --git a/submissions/asaMitaka/hooliStylePopup/style.css b/submissions/asaMitaka/hooliStylePopup/style.css index 876d097484..a3eebd5a9d 100644 --- a/submissions/asaMitaka/hooliStylePopup/style.css +++ b/submissions/asaMitaka/hooliStylePopup/style.css @@ -1,5 +1,3 @@ -/* nav block */ - .nav__ul { display: flex; flex-direction: row; @@ -13,7 +11,7 @@ align-items: center; } -.nav__ul li a { +.nav__item a { color: black; text-decoration: none; } @@ -27,22 +25,18 @@ outline: 2px solid blue; } +input[type='checkbox']:focus + label { + outline: 2px solid blue; +} + .check__input { position: absolute; - /* appearance: none; */ clip: rect(0 0 0 0); cursor: pointer; } -:focus { - outline: 2px solid blue; -} - -/* nav image */ - .img__checkbox { cursor: pointer; - /* position: absolute; */ } .img__nav { @@ -55,9 +49,6 @@ box-shadow: 14px 17px 41px 10px rgba(0,0,0,0.1); } - -/* popup */ - .popup { display: none; top: 50px; @@ -111,12 +102,9 @@ } -/* more Popup */ - .more__checkbox { position: absolute; clip: rect(0 0 0 0); - /* appearance: none; */ } .popup__open:focus { @@ -181,3 +169,14 @@ text-decoration: underline; } +@media only screen and (max-width: 600px) { + .popup { + right: 1em; + } +} + +@media only screen and (max-width: 400px) { + .popup { + right: -1em; + } +} \ No newline at end of file From 2dc2110387d8f0e7dbceb8c26b7f31e8e98e7ae7 Mon Sep 17 00:00:00 2001 From: AsaMitaka Date: Tue, 16 Aug 2022 16:29:11 +0300 Subject: [PATCH 4/6] removed unnecessary comments --- submissions/asaMitaka/hooliStylePopup/index.html | 5 ----- 1 file changed, 5 deletions(-) diff --git a/submissions/asaMitaka/hooliStylePopup/index.html b/submissions/asaMitaka/hooliStylePopup/index.html index 1e8d646ae6..645209b807 100644 --- a/submissions/asaMitaka/hooliStylePopup/index.html +++ b/submissions/asaMitaka/hooliStylePopup/index.html @@ -18,11 +18,9 @@ Images
  • - @@ -104,8 +102,6 @@
    - @@ -170,4 +166,3 @@ - From ec231261600d9d5e65251738c34833e44f3a0091 Mon Sep 17 00:00:00 2001 From: AsaMitaka Date: Tue, 16 Aug 2022 16:30:12 +0300 Subject: [PATCH 5/6] replaced input[type='checkbox'] by className, add empty line at the end style.css file --- submissions/asaMitaka/hooliStylePopup/style.css | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/submissions/asaMitaka/hooliStylePopup/style.css b/submissions/asaMitaka/hooliStylePopup/style.css index a3eebd5a9d..fae825ca5d 100644 --- a/submissions/asaMitaka/hooliStylePopup/style.css +++ b/submissions/asaMitaka/hooliStylePopup/style.css @@ -25,7 +25,11 @@ outline: 2px solid blue; } -input[type='checkbox']:focus + label { +.check__input:focus + label { + outline: 2px solid blue; +} + +.more__checkbox:focus + label { outline: 2px solid blue; } @@ -179,4 +183,4 @@ input[type='checkbox']:focus + label { .popup { right: -1em; } -} \ No newline at end of file +} From e2ecacf599239b487ae8d9e380cb297923f894d1 Mon Sep 17 00:00:00 2001 From: AsaMitaka Date: Thu, 18 Aug 2022 13:24:18 +0300 Subject: [PATCH 6/6] fixed style.css, used only class names --- .../asaMitaka/hooliStylePopup/index.html | 86 +++++++++---------- .../asaMitaka/hooliStylePopup/style.css | 41 ++++----- 2 files changed, 64 insertions(+), 63 deletions(-) diff --git a/submissions/asaMitaka/hooliStylePopup/index.html b/submissions/asaMitaka/hooliStylePopup/index.html index 645209b807..c51eccd1cb 100644 --- a/submissions/asaMitaka/hooliStylePopup/index.html +++ b/submissions/asaMitaka/hooliStylePopup/index.html @@ -12,89 +12,89 @@