From 3f57bba7550169796db3c9975969511ef296b5bd Mon Sep 17 00:00:00 2001 From: "natata.webtools" Date: Mon, 27 Feb 2023 19:20:01 +0200 Subject: [PATCH 1/2] HTML CSS Popup - Hooli style Popup --- .../hooli-style-popup/index.html | 181 +++++++++++++ .../hooli-style-popup/style.css | 245 ++++++++++++++++++ 2 files changed, 426 insertions(+) create mode 100644 submissions/natata-tutorial/hooli-style-popup/index.html create mode 100644 submissions/natata-tutorial/hooli-style-popup/style.css diff --git a/submissions/natata-tutorial/hooli-style-popup/index.html b/submissions/natata-tutorial/hooli-style-popup/index.html new file mode 100644 index 0000000000..233868feed --- /dev/null +++ b/submissions/natata-tutorial/hooli-style-popup/index.html @@ -0,0 +1,181 @@ + + + + + + Document + + + + + + + +
+
+ + + +
+ +
+
+

Lorem ipsum

+

Lorem ipsum dolor, sit, amet consectetur adipisicing elit. Quo tenetur quae ad ducimus cum veritatis, suscipit repellendus magni nulla iusto aut illum? Minima vitae magni sunt cupiditate esse, nemo ab vel consectetur possimus perferendis pariatur accusamus eveniet. Quas, pariatur, aspernatur.

+
+
+
+
+ Natata's © 2023 +
+
+
+ + + + diff --git a/submissions/natata-tutorial/hooli-style-popup/style.css b/submissions/natata-tutorial/hooli-style-popup/style.css new file mode 100644 index 0000000000..d50b670478 --- /dev/null +++ b/submissions/natata-tutorial/hooli-style-popup/style.css @@ -0,0 +1,245 @@ +/*Обнуление*/ +*{ + padding: 0; + margin: 0; + border: 0; +} +*,*:before,*:after{ + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; +} +:focus,:active{outline: none;} +a:focus,a:active{outline: none;} + +nav,footer,header,aside{display: block;} + +html,body{ + height: 100%; + width: 100%; + font-size: 100%; + line-height: 1; + font-size: 14px; + -ms-text-size-adjust: 100%; + -moz-text-size-adjust: 100%; + -webkit-text-size-adjust: 100%; +} +input,button,textarea{font-family:inherit;} + +input::-ms-clear{display: none;} +button{cursor: pointer;} +button::-moz-focus-inner {padding:0;border:0;} +a, a:visited{text-decoration: none;} +a:hover{text-decoration: none;} +ul li{list-style: none;} +img{vertical-align: top;} + +h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight: 400;} +/*--------------------*/ + +.visually-hidden { + position: absolute; + width: 1px; + height: 1px; + margin: -1px; + border: 0; + padding: 0; + white-space: nowrap; + clip-path: inset(100%); + clip: rect(0 0 0 0); + overflow: hidden; +} + +body { + font-size:16px; + color: #0d393c; + font-family: 'Rubik', sans-serif; + line-height: 22px; +} +.title{ + font-family: 'Monoton', cursive; + font-size: 4rem; + line-height: 5rem; + +} + + +.grid { + min-height: 100%; + display: grid; + grid-template: minmax(50px, auto) 1fr minmax(50px, auto) / 1fr; + background-color: #f6f5ee; + grid-template-areas: + "header" + "main" + "footer"; +} +.grid__header { + + + grid-area: header; + padding: 15px; + display: grid; + grid-template: 1fr / + 1fr minmax(auto, 250px) minmax(auto, 450px) minmax(auto, 400px) 1fr; + align-items: center; + border-bottom: 1px solid currentColor; +} +.header__logo { + color: currentColor; + grid-column: 2 / 3; + font-family: 'Monoton', cursive; + text-transform: uppercase; + font-size: 3.5rem; + line-height: 3.5rem; + align-self: center; + justify-self: self-start; +} +.header__menu { + grid-column: 4 / 5; +} +.menu__list { + display: grid; + grid-auto-flow:column; + justify-items: end; +} +.menu__link { + display: block; + color: currentColor; + font-weight:bold; + font-size: 1.2rem; + padding: 10px 15px; + +} + +a:focus, +a:hover{ + box-shadow: 0 1px currentColor; +} +.popup { + position: relative; +} +.popup__label { + padding: 10px 15px; + display: block; + height: 42px; +} +.more__checkbox:active + .more__label, +.more__checkbox:focus + .more__label, +.more__label:hover, +.popup__check:active + .popup__label, +.popup__check:focus + .popup__label, +.popup__label:hover { + box-shadow: 0 1px currentColor; +} +.popup__label:hover { + cursor: pointer; +} +.popup__container { + position: absolute; + right: -50px; + display: none; + width: 300px; + height: 330px; + background-color: #f6f5ee; + color: #0d393c; + top: calc(100% + 19px); + overflow-y: scroll; + border: 1px solid #0d393c; +} +.popup__check:checked ~ .popup__container{ + display: block; +} + +.popup__container::before{ + position: absolute; + top:-15px; + right: 60px; + display: block; + content: ""; + width: 0; + height: 0; + border-left: 15px solid transparent; + border-right: 15px solid transparent; + border-bottom: 15px solid #0d393c; +} +.popup__list { + display: grid; + padding: 15px; + gap: 15px; + grid-template-columns: repeat(auto-fit, minmax(28%, 1fr)); +} +.popup__item { + + +} +.popup__link { + color:currentColor; + font-size: 1rem; + display: grid; + grid-auto-flow:row; + grid-template: 50px auto / 1fr; + justify-items: center; + align-items: center; +} +.popup__link img{ + max-width: 100%; + height: auto; +} +.popup__image{ + margin: 10px; +} +.popup__caption{ + align-self: center; +} +.more__label { + display: block; + width: 100%; + text-align: center; + padding: 15px; + background-color: #ddd; +} + +.popup__list--more { + display: none; +} +.more__checkbox:checked ~ .more__label { + display: none; +} +.more__checkbox:checked ~ .popup__list--more { + display: grid; +} + + +.grid__content { + padding: 15px; + grid-area: main; + display: grid; + grid-template: 1fr minmax(auto, calc( 100% - 50px - 50px )) 1fr/ + 1fr minmax(auto, 600px) 1fr; +} +.content {} +.content__about { + grid-column: 2 / 3; + grid-row: 2 / 3; + align-self: center; + +} +.content__title { + margin-bottom: 30px; +} +.grid__footer { + border-top: 1px solid currentColor; + + grid-area: footer; + display: grid; + grid-template: 1fr / 1fr minmax(auto, 1100px) 1fr; + + padding: 15px; +} +.footer__copy{ + grid-column: 2 / 3; + justify-self: center; + align-self: center; + +} From 169954142faec5016870056dcf2e562d2b82d139 Mon Sep 17 00:00:00 2001 From: "natata.webtools" Date: Mon, 27 Feb 2023 23:41:13 +0200 Subject: [PATCH 2/2] Fix mobile menu --- .../hooli-style-popup/index.html | 2 +- .../hooli-style-popup/style.css | 69 +++++++++---------- 2 files changed, 35 insertions(+), 36 deletions(-) diff --git a/submissions/natata-tutorial/hooli-style-popup/index.html b/submissions/natata-tutorial/hooli-style-popup/index.html index 233868feed..a46287714b 100644 --- a/submissions/natata-tutorial/hooli-style-popup/index.html +++ b/submissions/natata-tutorial/hooli-style-popup/index.html @@ -7,7 +7,7 @@ - + diff --git a/submissions/natata-tutorial/hooli-style-popup/style.css b/submissions/natata-tutorial/hooli-style-popup/style.css index d50b670478..e91686b7da 100644 --- a/submissions/natata-tutorial/hooli-style-popup/style.css +++ b/submissions/natata-tutorial/hooli-style-popup/style.css @@ -49,23 +49,26 @@ h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight: 400;} clip: rect(0 0 0 0); overflow: hidden; } - +html{ + font-size:14px; +} body { - font-size:16px; color: #0d393c; font-family: 'Rubik', sans-serif; line-height: 22px; } +a:focus, +a:hover{ + box-shadow: 0 1px currentColor; +} .title{ font-family: 'Monoton', cursive; font-size: 4rem; line-height: 5rem; - } - - .grid { min-height: 100%; + min-width: 300px; display: grid; grid-template: minmax(50px, auto) 1fr minmax(50px, auto) / 1fr; background-color: #f6f5ee; @@ -75,13 +78,10 @@ body { "footer"; } .grid__header { - - grid-area: header; padding: 15px; display: grid; - grid-template: 1fr / - 1fr minmax(auto, 250px) minmax(auto, 450px) minmax(auto, 400px) 1fr; + grid-template: repeat(2, 1fr) / 1fr minmax(100px, 300px) 1fr; align-items: center; border-bottom: 1px solid currentColor; } @@ -93,10 +93,10 @@ body { font-size: 3.5rem; line-height: 3.5rem; align-self: center; - justify-self: self-start; + justify-self: center; } .header__menu { - grid-column: 4 / 5; + grid-column: 2 / 3; } .menu__list { display: grid; @@ -107,15 +107,10 @@ body { display: block; color: currentColor; font-weight:bold; - font-size: 1.2rem; + font-size: 1.1rem; padding: 10px 15px; } - -a:focus, -a:hover{ - box-shadow: 0 1px currentColor; -} .popup { position: relative; } @@ -137,10 +132,12 @@ a:hover{ } .popup__container { position: absolute; - right: -50px; + right: -84px; display: none; width: 300px; + max-width: 90vw; height: 330px; + max-height: 80vh; background-color: #f6f5ee; color: #0d393c; top: calc(100% + 19px); @@ -150,28 +147,11 @@ a:hover{ .popup__check:checked ~ .popup__container{ display: block; } - -.popup__container::before{ - position: absolute; - top:-15px; - right: 60px; - display: block; - content: ""; - width: 0; - height: 0; - border-left: 15px solid transparent; - border-right: 15px solid transparent; - border-bottom: 15px solid #0d393c; -} .popup__list { display: grid; padding: 15px; gap: 15px; grid-template-columns: repeat(auto-fit, minmax(28%, 1fr)); -} -.popup__item { - - } .popup__link { color:currentColor; @@ -243,3 +223,22 @@ a:hover{ align-self: center; } +@media (min-width: 600px) { + html { + font-size:16px; + } + .grid__header { + grid-template: 1fr / + 1fr minmax(auto, 250px) minmax(auto, 450px) minmax(auto, 400px) 1fr; + } + .header__menu { + grid-column: 4 / 5; + } + .popup__container{ + right:-50px; + top: calc(100% + 22px); + } + .header__logo { + justify-self: self-start; + } +} \ No newline at end of file