From 1efade83ed3c19f895d552fdc5f434b63303fc47 Mon Sep 17 00:00:00 2001 From: unabyband <110461462+unabyband@users.noreply.github.com> Date: Mon, 29 Aug 2022 22:21:27 +0300 Subject: [PATCH] Html_css_popup_task (#157) Popup_task @unabyband --- submissions/unabyband/popup-task/index.html | 161 +++++++++++ submissions/unabyband/popup-task/main.css | 293 ++++++++++++++++++++ 2 files changed, 454 insertions(+) create mode 100644 submissions/unabyband/popup-task/index.html create mode 100644 submissions/unabyband/popup-task/main.css diff --git a/submissions/unabyband/popup-task/index.html b/submissions/unabyband/popup-task/index.html new file mode 100644 index 0000000000..7622b0dbca --- /dev/null +++ b/submissions/unabyband/popup-task/index.html @@ -0,0 +1,161 @@ + + + + + + + unabyband pop-up + + + +
+
+
+ Cover image +
+
+ + +
+
+
+ + diff --git a/submissions/unabyband/popup-task/main.css b/submissions/unabyband/popup-task/main.css new file mode 100644 index 0000000000..33906c61e8 --- /dev/null +++ b/submissions/unabyband/popup-task/main.css @@ -0,0 +1,293 @@ +*{ + margin: 0; + padding: 0; +} + +html, body { + font-family: Arial, Helvetica, sans-serif; + width: 100%; + height: 100%; + border: 0; +} + +.header { + display: flex; + justify-content: flex-end; + padding: 20px 0; + position: relative; +} + +.top_menu { + display: flex; + align-items: center; + padding: 0 15px; + list-style: none; +} + +.top_menu__item { + line-height: 30px; + padding: 0 10px 0 10px; + font-size: 14px; + text-decoration: none; + color: rgba(0, 0, 0, 0.75); +} + +.top_menu__item:hover { + text-decoration: underline; +} + +.top_menu__item_bell { + display: block; + width: 20px; + height: 32px; + background: url("../icons/bell.png") center no-repeat; + background-size: 20px 25px; + margin-left: 5px; +} + +.top_menu__item_user { + display: block; + height: 32px; + width: 32px; + background: url("../icons/favicon.png") center no-repeat; + background-size: 32px 32px; +} + +.top_menu__item_bell:hover, .top_menu__item_user:hover, .button_popup:hover { + background-color: rgba(0, 64, 128, 0.07); + border-radius: 5%; +} + +.input_popup { + position: absolute; + opacity: 0; +} + +.input_popup:checked ~ .popup { + visibility: visible; +} + +.popup { + visibility: hidden; + display: flex; + flex-direction: column; + position: absolute; + width: 320px; + height: 430px; + top: 62px; + right: 15px; + border: 1px solid #ccc; + box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); + box-sizing: border-box; + background: #ffffff; + z-index: 1; +} + +.popup:after, +.popup:before { + content: ""; + display: block; + position: absolute; + width: 0; + height: 0; + border-color: transparent; + border-style: dashed dashed solid; + border-width: 0 9px 9px; + right: 102px; + border-bottom-color: rgba(0, 0, 0, 0.2); + top: -10px; +} +.popup:after { + border-color: transparent; + border-bottom: solid #fff; + border-style: dashed dashed solid; + border-width: 0 9px 9px; + right: 102px; + top: -9px; +} + +.button_popup { + width: 30px; + height: 30px; + display: block; + background: url("../icons/popup-button.png") center no-repeat; + cursor: pointer; + border: 2px solid transparent; +} + +.input_popup:focus ~ .button_popup { + border: 2px solid rgba(0, 0, 0, 0.75); + border-radius: 10%; +} + +.input_popup:checked ~ .button_popup{ + border: 2px solid rgba(0, 0, 0, 0.3); + border-radius: 10%; +} + +.popup_window { + width: 100%; + height: 100%; + overflow: auto; +} + +.popup_window_list { + display: flex; + flex-wrap: wrap; + padding: 28px 18px 23px 28px; +} + +.popup_window_visible { + margin-top: 0px; + padding-top: 0px; + margin-bottom: 0px; +} + +.popup_window_hidden { + display: none; +} + +.popup_window__link { + text-decoration: none; + padding-left: 10px; + padding-right: 10px; +} + +.popup_window_list__item { + width: 80px; + height: 80px; + display: flex; + justify-content: center; + border: 1px solid transparent; + margin-top: 10px; +} + +.popup_window_list__item:hover, .morebutton:hover { + background-color: rgba(0, 64, 128, 0.07); + border-radius: 3%; + +} +.popup_window__img { + display: inline-block; + height: 55px; + width: 55px; + +} +.popup_window__label { + display: block; + font-size: 13px; + text-align: center; + color: rgba(0, 0, 0, 0.87); + border: none; + +} + +.top_menu__item_other { + display: block; + flex: auto; + text-align: center; + margin-top: 10px; + margin-bottom: -35px; +} + +.hidden_input { + appearance: none; + box-sizing:content-box; + border: none; +} + +.hidden_input:focus ~ .morebutton { + border: 1px solid rgba(0, 0, 0, 0.75); + border-radius: 3%; +} + +.morebutton { + display: block; + flex: auto; + text-align: center; + background-color: rgba(128, 128, 128, 0.1); + padding: 10px 0px 10px 0px; + margin-top: -22px; + cursor: pointer; + border: 1px solid transparent; +} + +.hidden_input:checked ~ .popup_window_hidden { + display: flex; + border-top: 2px solid #e5e5e5; +} + +.hidden_input:checked ~ .morebutton { + display: none; +} + +.find { + display: flex; + justify-content: center; + padding: 50px 15px; +} + +.find-container { + display: flex; + flex-direction: column; + align-items: center; + +} + +.find_cover { + width: 100%; + height: 100%; + padding-bottom: 30px; +} + +.find_field { + width: 100%; + position: relative; +} + +.find_field-input { + width: 100%; + height: 100%; + border: 2px solid transparent; + background: transparent; + padding: 13px 45px 13px 30px; + box-sizing: border-box; + background: #F1F3F4; + border-radius: 22px; + transition: .2s; + color: #80868b; + font-size: 14px; +} + +.find_field-icon { + position: absolute; + width: 20px; + height: 30px; + top: 7px; + right: 15px; + background: url("../icons/mic.png") center no-repeat; + background-size: cover; +} + +.find_field-input:focus { + border: 2px solid rgba(0, 0, 0, 0.75); +} +.find_field-input:hover { + background-color: rgba(0, 0, 0, 0.1); +} + +@media screen and (max-width: 768px) { + .find_cover-image { + max-width: 470px; + } +} +@media screen and (max-width: 480px) { + .find_cover-image { + max-width: 310px; + } +} +@media screen and (max-width: 320px) { + .find_cover-image { + max-width: 250px; + } +}