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..a46287714b --- /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.

+
+
+ +
+ + + + 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..e91686b7da --- /dev/null +++ b/submissions/natata-tutorial/hooli-style-popup/style.css @@ -0,0 +1,244 @@ +/*Обнуление*/ +*{ + 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; +} +html{ + font-size:14px; +} +body { + 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; + grid-template-areas: + "header" + "main" + "footer"; +} +.grid__header { + grid-area: header; + padding: 15px; + display: grid; + grid-template: repeat(2, 1fr) / 1fr minmax(100px, 300px) 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: center; +} +.header__menu { + grid-column: 2 / 3; +} +.menu__list { + display: grid; + grid-auto-flow:column; + justify-items: end; +} +.menu__link { + display: block; + color: currentColor; + font-weight:bold; + font-size: 1.1rem; + padding: 10px 15px; + +} +.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: -84px; + display: none; + width: 300px; + max-width: 90vw; + height: 330px; + max-height: 80vh; + background-color: #f6f5ee; + color: #0d393c; + top: calc(100% + 19px); + overflow-y: scroll; + border: 1px solid #0d393c; +} +.popup__check:checked ~ .popup__container{ + display: block; +} +.popup__list { + display: grid; + padding: 15px; + gap: 15px; + grid-template-columns: repeat(auto-fit, minmax(28%, 1fr)); +} +.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; + +} +@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