diff --git a/submissions/Valerii49/hooli-style-popup/index.html b/submissions/Valerii49/hooli-style-popup/index.html new file mode 100644 index 0000000000..a125526f4a --- /dev/null +++ b/submissions/Valerii49/hooli-style-popup/index.html @@ -0,0 +1,164 @@ + + + + + + + + + Hooli Popup + + + +
+
+
+ +
+
+
+
+
+

HTML\CSS practice Kottans Front-End Course +

+
+

The course contains basics of front-end development: HTML, CSS, JavaScript, TypeScript and front-end frameworks. We plan to decrease the amount of lectures in favor of collective discussions, team projects & collective work

+
+
+
+
+ +
+ + + \ No newline at end of file diff --git a/submissions/Valerii49/hooli-style-popup/style.css b/submissions/Valerii49/hooli-style-popup/style.css new file mode 100644 index 0000000000..b27ca76726 --- /dev/null +++ b/submissions/Valerii49/hooli-style-popup/style.css @@ -0,0 +1,328 @@ +* { + padding: 0px; + margin: 0px; + border: none; +} +*, +*:before, +*:after { + box-sizing: border-box; +} +a { + color: inherit; + text-decoration: none; +} +ul li { + list-style: none; +} +html, +body { + height: 100%; + min-width: 320px; + background-color: #263238; + color: #b0b0b0; + font-family: Arial, Helvetica, sans-serif; +} +.wrapper { + min-height: 100%; + display: grid; + grid-template-rows: auto 1fr auto; +} +[class*=__container] { + max-width: 75rem; + margin: 0 auto; + padding-left: 0.9375rem; + padding-right: 0.9375rem; +} +.header { + -webkit-tap-highlight-color: transparent; + padding-top: 0.25rem; + padding-bottom: 0.25rem; + background-color: #1b2327; +} +.header :focus, +.header :active { + outline: none; +} +.header a:focus, +.header a:active { + outline: none; +} +.header *:focus { + box-shadow: 0 0 0 0.0625rem rgba(255, 255, 255, 0.3), 0 0 0 0.125rem #23b123; +} +.header__body { + display: grid; + column-gap: 1rem; + row-gap: 5; + grid-template: 3.75rem/4.375rem 1fr auto; + align-items: center; +} +.header__logo { + display: flex; + background-color: rgba(255, 255, 255, 0.4); + justify-content: center; + border-radius: 0.125rem; + transition: background-color 0.3s ease 0s; +} +.header__logo img { + width: 3.125rem; + align-self: center; + padding: 0.3125rem; +} +@media (any-hover: hover) { + .header__logo:hover { + background-color: #b0b0b0; + } +} +.header__menu { + flex: 1 1 auto; +} +.header__menu-list { + display: flex; + column-gap: 1rem; + row-gap: 0.3125rem; + flex-wrap: wrap; + justify-content: end; + align-items: center; +} +.header__menu-link { + border-radius: 0.125rem; + color: #707070; + transition: color 0.3s; +} +@media (any-hover: hover) { + .header__menu-link:hover { + color: #b0b0b0; + } +} +.actions-header { + display: flex; + flex-wrap: wrap; + gap: 0.625rem; +} +.actions-header *:focus { + background-color: rgba(255, 255, 255, 0.6); +} +.actions-header__item { + display: flex; + align-items: center; + justify-content: center; + flex: 0 0 2.375rem; + width: 2.375rem; + height: 2.375rem; + border-radius: 50%; + transition: background-color 0.4s ease 0s; +} +@media (any-hover: hover) { + .actions-header__item:hover { + background-color: rgba(255, 255, 255, 0.8); + } +} +.actions-header__bell { + height: 1.5rem; +} +.actions-header__avatar { + background-color: #707070; + height: 2rem; + padding: 0.1875rem; + border-radius: 50%; +} + +.popup { + position: relative; +} +.popup__label { + position: relative; + pointer-events: auto; + cursor: pointer; + padding: 18.7%; + width: 2.375rem; + height: 2.375rem; + border-radius: 50%; +} +.popup__label::after { + content: ""; + position: absolute; + pointer-events: none; + display: block; + width: 0.75rem; + height: 0.75rem; + rotate: 45deg; + left: 0.90625rem; + top: 4.0625rem; + background-color: #b0b0b0; + border-radius: 0.0625rem; + border-top: 1px solid; + border-left: 1px solid; + display: none; +} +.popup__input { + -webkit-appearance: none; + appearance: none; + position: absolute; + width: 2.375rem; + height: 2.375rem; + border-radius: 50%; + background-color: transparent; + transition: background-color 0.4s ease 0s; +} +.popup__input:checked + .popup__label { + background-color: #8f8f8f; +} +.popup__input:checked + .popup__label::after { + display: block; +} +@media (any-hover: hover) { + .popup__input:checked + .popup__label:hover { + background-color: rgba(194, 194, 194, 0.2); + } +} +.popup__input:checked ~ .popup__body { + display: block; +} +.popup__body { + position: absolute; + left: -7.125rem; + top: 4.375rem; + display: none; + width: 15.375rem; + height: 21.875rem; + max-height: 80vh; + background-color: #b0b0b0; + border-radius: 0.3125rem; + overflow: auto; +} +.popup__list { + display: grid; + padding: 1rem; + grid-template-columns: repeat(3, 1fr); + gap: 1rem; +} +.popup__list_more { + display: none; + padding: 1rem 0 0 0; +} +.popup__item { + width: 100%; +} +.popup__item_more { + grid-column: 1/4; + position: relative; +} +.popup__link { + padding: 0.375rem 0.375rem; + border: 1px solid rgba(255, 255, 255, 0.3); + border-radius: 0.125rem; + width: 100%; + height: 100%; + pointer-events: auto; + cursor: pointer; + display: flex; + flex-direction: column; + align-items: center; + font-size: 0.75rem; +} +.popup__link:focus { + background-color: rgba(255, 255, 255, 0.2); +} +@media (any-hover: hover) { + .popup__link:hover { + background-color: rgba(255, 255, 255, 0.2); + } + .popup__link:hover .popup__icon-name { + outline: 1.5px solid #23b123; + } +} +.popup__icon { + padding: 0 1.25rem; + margin-bottom: 0.25rem; + height: 2.5rem; + position: relative; +} +.popup__icon img { + position: absolute; + width: 100%; + height: 100%; + top: 0; + left: 0; + object-fit: contain; +} +.popup__icon-name { + padding: 0.0625rem 0.1875rem; + color: #fff; +} + +.popup-more__label { + cursor: pointer; + width: 100%; + text-align: center; + display: inline-block; + color: #fff; + padding: 0.625rem 0rem; + background-color: #23b123; + border-radius: 0.125rem; + transition: all 0.3s ease 0s; +} +@media (any-hover: hover) { + .popup-more__label:hover { + background-color: #1b8b1b; + } +} + +.popup-more__input { + -webkit-appearance: none; + appearance: none; + pointer-events: none; + position: absolute; + width: 100%; + padding: 1.1875rem 0rem; + top: 0; + left: 0; + border-radius: 0.125rem; +} +.popup-more__input:focus { + box-shadow: 0 0 0 0.0625rem rgb(255, 255, 255), 0 0 0 0.125rem #23b123; + background-color: transparent; +} +.popup-more__input:checked { + background-color: rgba(121, 121, 121, 0.4); + box-shadow: 0 0 0 0.0625rem rgb(35, 35, 35), 0 0 0 0.125rem #23b123; +} +.popup-more__input:checked ~ .popup__list_more { + display: grid; +} + +.main__content { + max-width: 31.25rem; + margin-top: 5rem; + margin-bottom: 1.25rem; + margin-left: auto; + margin-right: auto; +} +.main__title { + line-height: 1.3; + font-size: 3.125rem; +} +.main__title:not(:last-child) { + margin-bottom: 1.875rem; +} +.main__title span { + color: #23b123; +} +.main__text { + padding-left: 1.875rem; + font-size: 1.25rem; + max-width: 25.625rem; + line-height: 1.7; +} + +.footer { + line-height: 2.4; + text-align: center; + padding-bottom: 0.25rem; +} +.footer__copy-right { + border-top: 1px solid; +} +