diff --git a/cssMemSlider/css/paranoiaStyle.css b/cssMemSlider/css/paranoiaStyle.css new file mode 100644 index 0000000..b8b45e6 --- /dev/null +++ b/cssMemSlider/css/paranoiaStyle.css @@ -0,0 +1,962 @@ +.warning { + height: 500px; + width: 600px; + padding: 20px 40px; + border-radius: 30px; + background-color: white; + font-size: 1.3rem; + text-align: center; +} + +small { + font-size: 0.6rem; + margin-top: 0.5rem; +} + +.warning__label { + text-decoration: underline; + color: blue; + cursor: pointer; +} + +.warning__li { + text-align: left; + list-style-type: disc; +} + +.warning__h-mode { + margin-top: 30px; +} + +.warning__paranoid, +.warning__mode { + top: 0; + height: 0; + height: 100%; + width: 100%; + z-index: 4; + display: flex; + justify-content: center; + align-items: center; + position: absolute; + background: rgba(3, 3, 3, 0.4); + backdrop-filter: blur(0.4em); +} + +.warning__paranoid { + display: none; +} + +#paranoia:checked ~ .warning__mode, +#normal:checked ~ .warning__mode { + display: none; +} + +#paranoia:checked ~ .warning__paranoid { + display: flex; +} + +.warning__paranoid-info-box { + height: 600px; + width: 500px; + padding: 30px; + display: flex; + flex-direction: column; + background-color: black; + color: white; + border-radius: 30px; +} + +.warning__paranoid-info-box-title { + font-size: 1.6rem; + color: lightgreen; + text-align: center; +} + +.warning__img { + cursor: url('../img/aim.png'), auto; + float: left; + margin: 5px auto; + position: relative; + align-self: center; +} +.warning__img:before { + z-index: 4; + top: 0; + bottom: 0; + right: 0; + left: 0; + opacity: 1; + position: absolute; + content: ''; + user-select: none; + display: block; + animation: opac 0.5s infinite linear; + background-image: url(../img/crest.svg); +} + +@keyframes opac { + 0% { + opacity: 0; + } + 100% { + opacity: 1; + } +} + +.paranoid__li { + list-style-type: disc; +} + +.paranoid__joke { + font-weight: 600; + font-size: 1.1em; + margin: 10px 0; +} + +.paranoid__desc { + text-align: justify; +} + +.paranoid__list-desc { + margin-top: 10px; + text-align: justify; +} + +.paranoid__batton { + margin: 10px 0px; + display: block; + background-color: lawngreen; + color: white; + border-radius: 10px; + padding: 10px; + text-align: center; + cursor: pointer; +} + +#paranoia_site:checked ~ .warning__paranoid { + display: none; +} + +#paranoia_site:checked + ~ .conainer + > .slider + > .slider__nav-conatiner + > .paranoid__nav-label { + cursor: url('../img/aim.png') 14 0, auto; +} +.paranoid__nav-label > .slider__nav-point { + border-radius: 0; + border: none; + background-color: transparent; + background-image: url(../img/JS-pointer.svg); + background-size: contain; + background-repeat: no-repeat; +} +#paranoia_site:not(:checked) + ~ .conainer + > .slider + > .slider__nav-conatiner + > .paranoid__nav-label { + display: none; +} + +#paranoia_site:checked + ~ .conainer + > .slider + > .slider__nav-conatiner + > [class*='slider__nav-label-'] { + display: none; +} + +#paranoia_site:checked + ~ .conainer + > .slider + > .slider__nav-conatiner + > .paranoid__nav-label:hover + > .slider__nav-point { + opacity: 0.7; + animation: tremm 0.1s infinite linear; +} + +#paranoia_site:checked ~ .conainer > .slider > .slider__description-conatiner, +#paranoia_site:checked ~ .conainer > .slider > .slider__nav-conatiner { + background-color: #cbcaca; +} + +@keyframes tremm { + 0% { + transform: rotate(10deg); + } + 50% { + transform: rotate(0deg); + } + 100% { + transform: rotate(-10deg); + } +} + +#mem-1:checked + ~ .slider__nav-conatiner + > .paranoid__nav-label-1 + > .slider__nav-point, +#mem-2:checked + ~ .slider__nav-conatiner + > .paranoid__nav-label-2 + > .slider__nav-point, +#mem-3:checked + ~ .slider__nav-conatiner + > .paranoid__nav-label-3 + > .slider__nav-point, +#mem-4:checked + ~ .slider__nav-conatiner + > .paranoid__nav-label-4 + > .slider__nav-point, +#mem-5:checked + ~ .slider__nav-conatiner + > .paranoid__nav-label-5 + > .slider__nav-point, +#mem-6:checked + ~ .slider__nav-conatiner + > .paranoid__nav-label-6 + > .slider__nav-point, +#mem-7:checked + ~ .slider__nav-conatiner + > .paranoid__nav-label-7 + > .slider__nav-point, +#mem-8:checked + ~ .slider__nav-conatiner + > .paranoid__nav-label-8 + > .slider__nav-point { + background-image: url(../img/kill.svg); + transition: background-color 0.53s, border 0.53s; +} + +#mem-1:checked + ~ .slider__nav-conatiner + > .paranoid__nav-label-1:hover + > .slider__nav-point, +#mem-2:checked + ~ .slider__nav-conatiner + > .paranoid__nav-label-2:hover + > .slider__nav-point, +#mem-3:checked + ~ .slider__nav-conatiner + > .paranoid__nav-label-3:hover + > .slider__nav-point, +#mem-4:checked + ~ .slider__nav-conatiner + > .paranoid__nav-label-4:hover + > .slider__nav-point, +#mem-5:checked + ~ .slider__nav-conatiner + > .paranoid__nav-label-5:hover + > .slider__nav-point, +#mem-6:checked + ~ .slider__nav-conatiner + > .paranoid__nav-label-6:hover + > .slider__nav-point, +#mem-7:checked + ~ .slider__nav-conatiner + > .paranoid__nav-label-7:hover + > .slider__nav-point, +#mem-8:checked + ~ .slider__nav-conatiner + > .paranoid__nav-label-8:hover + > .slider__nav-point { + background-color: red; +} + +.paranoid__nav-label:hover > .slider__nav-point { + background-color: transparent; +} + +.paranoid__nav-label:active > .slider__nav-point { + transform: scale(1.5) !important; + background-size: 130%; +} + +#paranoia_site:checked ~ .conainer > .paranoid__visible { + display: block; +} + +#paranoia_site:not(:checked) ~ .conainer > .paranoid__visible { + display: none; + visibility: hidden; +} + +#paranoia_site:checked ~ .conainer { + font-family: Comic Sans MS; +} + +#paranoia_site:checked ~ .conainer { + display: grid; + height: auto; + align-items: start; + width: 100%; + background-color: transparent; + background-image: url(https://oboi-download.ru/files/wallpapers/298/6488.jpg); + background-repeat: no-repeat; + background-size: cover; + grid-template: 0.2fr 0.1fr 0.1fr 0.6fr 0.15fr 0.25fr 0.2fr 0.08fr/ 0.5fr 2fr 0.5fr; + grid-template-areas: + 'header header header' 'nav nav nav' 'asidel warning asider' + 'asidel memContainer asider' 'asidel plan asider' 'asidel pruff asider' + 'asidel chat asider' 'footer footer footer'; +} + +@media screen and (max-width: 810px) { + #paranoia_site:checked ~ .conainer { + grid-template: 0.1fr 0.1fr 0.1fr 0.7fr 0.15fr 0.25fr 0.2fr 0.02fr/ 0.5fr 2fr 0.5fr; + justify-content: center; + align-items: center; + grid-template-areas: + 'header header header' 'nav nav nav' 'asidel warning asider' + 'asidel memContainer asider' 'asidel plan asider' 'asidel pruff asider' + 'asidel chat asider' 'footer footer footer'; + } + aside { + align-self: start; + } +} + +.footer__cat { + height: 20%; + width: 12%; +} + +@media screen and (max-width: 710px) { + #paranoia_site:checked ~ .conainer { + grid-template: 0.1fr 0.1fr 0.1fr 0.5fr 0.15fr 0.25fr 0.2fr 0.1fr/ 0.5fr 2fr 0.5fr; + justify-content: center; + align-items: center; + grid-template-areas: + 'header header header' 'nav nav nav' 'asidel warning asider' + 'asidel memContainer asider' 'asidel plan asider' 'asidel pruff asider' + 'asidel chat asider' 'footer footer footer'; + } +} +@media screen and (max-width: 600px) { + #paranoia_site:checked ~ .conainer { + grid-template: 0.1fr 0.1fr 0.1fr 0.7fr 1fr 0.15fr 0.25fr 0.2fr 0.02fr/ 1fr 1fr; + justify-content: center; + align-items: center; + grid-template-areas: + 'header header' 'nav nav' ' warning warning' + 'memContainer memContainer' 'asidel asider' 'plan plan' 'pruff pruff' + 'chat chat' 'footer footer'; + } + aside { + align-self: start; + } +} + +@media screen and (max-width: 500px) { + #paranoia_site:checked ~ .conainer { + grid-template: 0.1fr 0.1fr 0.1fr 0.6fr 0.8fr 0.15fr 0.25fr 0.2fr 0.2fr/ 1fr 1fr; + justify-content: center; + align-items: center; + grid-template-areas: + 'header header' 'nav nav' ' warning warning' + 'memContainer memContainer' 'asidel asider' 'plan plan' 'pruff pruff' + 'chat chat' 'footer footer'; + } + .paranoid__menu { + flex-wrap: wrap; + } + #paranoia_site:checked ~ .conainer > .paranoid__header + .paranoid__visible { + padding: 10px; + } + .paranoid__visible > .paranoid__header-stop { + font-size: 4rem; + } + .paranoid__visible > .paranoid__header-text { + font-size: 3rem; + } +} +.mem__size { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + z-index: 10; + display: none; + background-size: cover; + background-repeat: no-repeat; + background-position: center; +} + +@media screen and (max-width: 300px) { + #paranoia_site:checked ~ .mem__size { + display: block; + background-image: url(../img/small.jpg); + } + .conainer, + .paranoid__visible { + display: none; + overflow: hidden; + } + body, + .paranoid__visible { + overflow: hidden; + } +} + +@media screen and (max-height: 200px) { + #paranoia_site:checked ~ .mem__size { + display: block; + background-image: url(../img/small-h.jpg); + } + .conainer, + .paranoid__visible { + display: none; + overflow: hidden; + } + body, + .paranoid__visible { + overflow: hidden; + } +} + +@media screen and (min-width: 2400px) { + #paranoia_site:checked ~ .mem__size { + display: block; + background-image: url(../img/big-w.jpg); + } + .conainer, + .paranoid__visible { + display: none; + overflow: hidden; + visibility: hidden; + } + body, + .paranoid__visible { + overflow: hidden; + } +} + +.footer__cat { + height: 20%; + width: 12%; +} + +#paranoia_site:checked ~ .conainer > .paranoid__header { + width: 80%; + height: 200px; + padding: 50px; + grid-area: header; + overflow: hidden; + justify-self: center; + text-align: center; + position: relative; +} + +#paranoia_site:checked ~ .conainer > .paranoid__nav { + width: 80%; + height: 80px; + padding: 20px; + background-color: black; + justify-self: center; + grid-area: nav; +} + +.paranoid__menu { + display: flex; + justify-content: flex-start; + padding: 4px; + border: 2px solid #0fff00; +} +.paranoid__nav-text { + color: white; + white-space: nowrap; + overflow: hidden; + padding: 2px; + background-color: blue; +} + +.paranoid__menu-item:before { + color: #ff0103; + content: '◍'; + padding-right: 3px; +} + +.menu__link { + font-family: monospace; + color: #0ee700; + text-decoration: underline; + margin-right: 10px; +} + +#paranoia_site:checked ~ .conainer > .paranoid__warning { + grid-area: warning; + margin: 10px auto; + background-color: #cbcaca; + border: 4px double black; +} + +#paranoia_site:checked + ~ .conainer + > .paranoid__warning + > .paranoid__warning-title { + background-color: #ff0201; + color: white; + padding: 7px 2px; + border: 4px double #cbcaca; +} +#paranoia_site:checked + ~ .conainer + > .paranoid__warning + > .paranoid__warning-text { + color: blue; + text-align: justify; + padding: 4px; +} + +#paranoia_site:checked ~ .conainer > .slider { + grid-area: memContainer; + margin: 0 auto; +} + +#paranoia_site:checked ~ .conainer > .paranoid__aside-left { + grid-area: asidel; +} + +#paranoia_site:checked ~ .conainer > .paranoid__aside-right { + grid-area: asider; +} + +#paranoia_site:checked ~ .conainer > .paranoid__plan { + grid-area: plan; +} + +#paranoia_site:checked ~ .conainer > .paranoid__proof { + grid-area: pruff; +} + +.paranoid__pruff-item { + margin-bottom: 10px; +} + +.paranoid__pruff-title { + font-size: 1.2rem; + font-weight: 600; +} + +#paranoia_site:checked ~ .conainer > .paranoid__chat { + grid-area: chat; +} + +#paranoia_site:checked ~ .conainer > .paranoid__footer { + grid-area: footer; + text-align: center; +} + +.paranoid__header-text { + width: 800; + font-size: 4rem; + background-color: #2aa5a0; + background-image: linear-gradient( + 0deg, + #9b4841 0%, + #9b4841 40%, + #b2c3d9 60%, + #b2c3d9 100% + ); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + font-family: ARIAL BLACK, sans-serifs; +} + +.paranoid__header-stop { + font-family: FANTASY, Helvetica, sans-serif; + width: 800; + font-size: 6rem; + text-shadow: 4px 4px red; + position: absolute; + left: 30%; + top: 20%; + transform: rotate(15deg); + animation: header-stop 0.5s infinite linear; +} +@keyframes header-stop { + 0% { + transform: scale(1.2); + transform: rotate(16deg); + color: darkred; + text-shadow: 4px 4px red; + } + + 100% { + color: black; + transform: scale(1); + transform: rotate(15deg); + text-shadow: 2px 2px darkred; + } +} + +.message { + margin: 3px 0; + border: 3px double black; + background-color: #cbcaca; + padding: 3px; +} + +.message__time { + font-family: monospace; +} + +.message__autor { + display: inline-block; +} + +.message__text { + margin-top: 5px; + background-color: white; +} + +.message__textarea { + display: block; + width: 100%; +} + +.message__button { + margin: 4px 2px; + padding: 2px 4px; +} + +.paranoid__news { + border: 4px double black; + margin: 10px 4px; + padding: 10px; + height: 150px; + display: flex; + flex-direction: column; + justify-content: space-between; + align-items: center; + background-color: #cbcaca; +} + +.paranoid__news-cap { + max-width: 40%; + display: block; + animation: cap 0.4s infinite linear; +} + +.paranoid__news-flat, +.paranoid__news-big, +.paranoid__news-zatmen, +.paranoid__news-eye, +.paranoid__news-reptil, +.paranoid__news-map, +.paranoid__news-cash { + position: relative; + overflow: hidden; +} + +.paranoid__news-flat > a, +.paranoid__news-big > a, +.paranoid__news-zatmen > a, +.paranoid__news-eye > a, +.paranoid__news-reptil > a, +.paranoid__news-map > a, +.paranoid__news-cash > a { + z-index: 1; +} + +.paranoid__news-flat > a, +.paranoid__news-big > a { + color: white; +} + +.paranoid__news-cash::before { + animation: cash 0.4s infinite linear; + content: ''; + position: absolute; + width: 100%; + height: 100%; + top: 0; + left: 0; + z-index: 0; + background-image: url(../img/cash.jpg); + background-size: cover; +} + +.paranoid__news-zatmen::before { + animation: cash 0.4s infinite linear; + content: ''; + position: absolute; + width: 100%; + height: 100%; + top: 0; + left: 0; + z-index: 0; + background-image: url(https://ukranews.com/upload/news/2017/08/21/599ae7ef81df0-screenshot-4_1200.jpg); + background-size: 100%; +} + +.paranoid__news-flat::before { + animation: reptil 1s infinite linear; + content: ''; + position: absolute; + width: 200%; + height: 130%; + top: 0; + left: 0; + z-index: 0; + background-image: url(https://www.ixbt.com/img/n1/news/2019/1/1/2019-02-18-image-5_large.jpg); + background-size: contain; +} + +.paranoid__news-big::before { + animation: map 1.4s infinite linear; + content: ''; + position: absolute; + width: 180%; + height: 150%; + top: 0; + left: 0; + z-index: 0; + background-image: url(https://avatars.mds.yandex.net/get-zen_doc/1864855/pub_5e567afa23af6e788c223a03_5e567b3a5a0acf593cd9b572/scale_1200); + background-size: cover; +} + +.paranoid__news-map::before { + animation: map 1.4s infinite linear; + content: ''; + position: absolute; + width: 300%; + height: 300%; + top: 0; + left: 0; + z-index: 0; + background-image: url(../img/map.jpg); + background-size: cover; +} + +.paranoid__news-reptil::before { + animation: reptil 1s infinite linear; + content: ''; + position: absolute; + width: 200%; + height: 100%; + top: 0; + left: 0; + z-index: 0; + background-image: url(../img/reptil.jpg); + background-size: cover; +} + +.paranoid__news-eye::before { + animation: cash 0.4s infinite linear; + content: ''; + position: absolute; + width: 100%; + height: 100%; + top: 0; + left: 0; + z-index: 0; + background-image: url(../img/eye.jpg); + background-size: cover; +} + +@keyframes reptil { + 0% { + left: 0; + } + + 70% { + left: -100%; + } + 100% { + left: 0%; + } +} + +@keyframes map { + 0% { + top: -8%; + left: -8%; + } + 30% { + top: -40%; + left: -32%; + } + 70% { + top: -30%; + left: -70%; + } + 84% { + top: -37%; + left: -54%; + } + 100% { + top: -8%; + left: -8%; + } +} + +@keyframes cash { + 0% { + transform: scale(1); + } + 30% { + transform: scale(1.4); + } + + 70% { + transform: scale(1.6); + } + 100% { + transform: scale(1); + } +} + +@keyframes cap { + 0% { + max-width: 40%; + transform: rotate(-6deg); + } + 30% { + max-width: 45%; + transform: rotate(0deg); + } + + 70% { + max-width: 50%; + transform: rotate(6deg); + } + 100% { + max-width: 40%; + transform: rotate(-6deg); + } +} + +.paranoid__news-rotate { + position: relative; + overflow: hidden; +} + +.paranoid__news-space > a, +.paranoid__news-rotate > a { + font-size: 1.4em; + z-index: 1; + color: #0fff00; +} + +.paranoid__news-rotate::before { + animation: rotate 0.4s infinite linear; + content: ''; + position: absolute; + width: 200%; + height: 200%; + top: -50%; + left: -50%; + z-index: 0; + background: conic-gradient( + red 0%, + red 0%, + red 5%, + red 5%, + white 5%, + white 5%, + white 10%, + white 10%, + red 10%, + red 10%, + red 15%, + red 15%, + white 15%, + white 15%, + white 20%, + white 20%, + red 20%, + red 20%, + red 25%, + red 25%, + white 25%, + white 25%, + white 30%, + white 30%, + red 30%, + red 30%, + red 35%, + red 35%, + white 35%, + white 35%, + white 40%, + white 40%, + red 40%, + red 40%, + red 45%, + red 45%, + white 45%, + white 45%, + white 50%, + white 50%, + red 50%, + red 50%, + red 55%, + red 55%, + white 55%, + white 55%, + white 60%, + white 60%, + red 60%, + red 60%, + red 65%, + red 65%, + white 65%, + white 65%, + white 70%, + white 70%, + red 70%, + red 70%, + red 75%, + red 75%, + white 75%, + white 75%, + white 80%, + white 80%, + red 80%, + red 80%, + red 85%, + red 85%, + white 85%, + white 85%, + white 90%, + white 90%, + red 90%, + red 90%, + red 95%, + red 95%, + white 95%, + white 95%, + white 100% + ); +} +.paranoid__news-space { + overflow: hidden; + position: relative; +} + +.paranoid__news-space::before { + animation: rotate 0.4s infinite linear; + content: ''; + position: absolute; + width: 200%; + height: 200%; + top: -50%; + left: -50%; + z-index: 0; + background-image: url(../img/space.jpg); +} + +@keyframes rotate { + 0% { + transform: rotate(35deg); + } + 100% { + transform: rotate(0deg); + } +} diff --git a/cssMemSlider/css/resetStyle.css b/cssMemSlider/css/resetStyle.css new file mode 100644 index 0000000..bfe4037 --- /dev/null +++ b/cssMemSlider/css/resetStyle.css @@ -0,0 +1,209 @@ +:root { + font-size: calc(0.6em + 1vh); + line-height: 1.15; + -webkit-text-size-adjust: 100%; + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; +} +* { + padding: 0; + margin: 0; + border: 0; +} +*, +:after, +:before { + -moz-box-sizing: inherit; + -webkit-box-sizing: inherit; + box-sizing: inherit; +} +a:active, +a:focus { + outline: 0; +} +:active, +:focus { + outline: 0; +} +aside, +footer, +header, +main, +nav { + display: block; +} +body, +html { + 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::-ms-clear { + display: none; +} +button { + cursor: pointer; +} +button::-moz-focus-inner { + padding: 0; + border: 0; +} +a { + background-color: transparent; +} +a, +a:visited { + text-decoration: none; +} +a:hover { + text-decoration: none; +} +ul li { + list-style: none; +} +img { + vertical-align: top; + border-style: none; +} +h1, +h2, +h3, +h4, +h5, +h6 { + font-size: inherit; + font-weight: 400; + margin: 0.67em 0; +} +hr { + box-sizing: content-box; + height: 0; + overflow: visible; +} +pre { + font-family: monospace, monospace; + font-size: 1em; +} +abbr[title] { + border-bottom: none; + text-decoration: underline; + text-decoration: underline dotted; +} +b, +strong { + font-weight: bolder; +} +code, +kbd, +samp { + font-family: monospace, monospace; + font-size: 1em; +} +small { + font-size: 80%; +} +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} +sub { + bottom: -0.25em; +} +sup { + top: -0.5em; +} +button, +input, +optgroup, +select, +textarea { + font-family: inherit; + font-size: 100%; + line-height: 1.15; + margin: 0; +} +button, +input { + overflow: visible; +} +button, +select { + text-transform: none; +} +[type='button'], +[type='reset'], +[type='submit'], +button { + -webkit-appearance: button; +} +[type='button']::-moz-focus-inner, +[type='reset']::-moz-focus-inner, +[type='submit']::-moz-focus-inner, +button::-moz-focus-inner { + border-style: none; + padding: 0; +} +[type='button']:-moz-focusring, +[type='reset']:-moz-focusring, +[type='submit']:-moz-focusring, +button:-moz-focusring { + outline: 1px dotted ButtonText; +} +fieldset { + padding: 0.35em 0.75em 0.625em; +} +legend { + box-sizing: border-box; + display: table; + max-width: 100%; + white-space: normal; + color: inherit; + padding: 0; +} +progress { + vertical-align: baseline; +} +textarea { + overflow: auto; +} +[type='checkbox'], +[type='radio'] { + box-sizing: border-box; + padding: 0; +} +[type='number']::-webkit-inner-spin-button, +[type='number']::-webkit-outer-spin-button { + height: auto; +} +[type='search'] { + -webkit-appearance: textfield; + outline-offset: -2px; +} +[type='search']::-webkit-search-decoration { + -webkit-appearance: none; +} +::-webkit-file-upload-button { + -webkit-appearance: button; + font: inherit; +} +details { + display: block; +} +summary { + display: list-item; +} +template { + display: none; +} +[hidden] { + display: none; +} diff --git a/cssMemSlider/css/style.css b/cssMemSlider/css/style.css new file mode 100644 index 0000000..bd020cd --- /dev/null +++ b/cssMemSlider/css/style.css @@ -0,0 +1,275 @@ +@import url(https://fonts.googleapis.com/css2?family=Montserrat&display=swap); + +:root { + color: #3a3a3a; + font-family: Montserrat, sans-serif; +} + +body { + position: relative; +} + +.conainer { + height: 100%; + margin: auto; + display: flex; + justify-content: center; + align-items: center; + background-color: gray; +} +.slider { + width: 90%; + height: 100%; + display: grid; + overflow: hidden; + grid-template: 6fr 1fr / 2.8fr 1fr; + row-gap: 1em; + grid-template-areas: 'mem mem' 'desc navbar'; + transition: all 0.53s; +} + +.slider__radio { + display: none; +} + +.slider__img-conatiner, +.slider__description-conatiner { + height: 100%; + width: 800%; + font-size: 0.8rem; + display: flex; + overflow: hidden; +} + +.slider__img-conatiner { + grid-area: mem; +} + +.slider__description-conatiner { + grid-area: desc; +} + +.slider__nav-conatiner { + z-index: 1; + grid-area: navbar; + display: flex; + justify-content: space-around; + background-color: gray; +} + +.slider__nav-label { + height: 30%; + width: 11.5%; + cursor: pointer; + transition: all 0.53s; + display: flex; + justify-content: center; + align-items: center; +} + +.slider__nav-label:hover { + transition: all 0.53s; +} +.slider__nav-label:hover > .slider__nav-point { + background-color: #fbfcff; + border: none; +} + +.slider__nav-point { + border-radius: 50%; + background-color: #75aefe; + height: 1.1rem; + width: 1.1rem; + transition: background-color 0.53s, border 0.53s; + display: block; +} + +.slider__description, +.slider__slide { + width: 12.5%; + transition: all 0.53s; +} + +.slider__description { + padding-right: 2%; + overflow-y: auto; +} + +.slider__slide { + height: 100%; + display: table-cell; + vertical-align: center; + text-align: center; + transition: all 0.53s; +} + +.slider__slide-img { + height: 100%; + width: 100%; + object-fit: contain; +} + +.slider__nav-label:active > .slider__nav-point { + transform: scale(1.1); +} + +#mem-1:checked + ~ .slider__nav-conatiner + > .slider__nav-label-1 + > .slider__nav-point, +#mem-2:checked + ~ .slider__nav-conatiner + > .slider__nav-label-2 + > .slider__nav-point, +#mem-3:checked + ~ .slider__nav-conatiner + > .slider__nav-label-3 + > .slider__nav-point, +#mem-4:checked + ~ .slider__nav-conatiner + > .slider__nav-label-4 + > .slider__nav-point, +#mem-5:checked + ~ .slider__nav-conatiner + > .slider__nav-label-5 + > .slider__nav-point, +#mem-6:checked + ~ .slider__nav-conatiner + > .slider__nav-label-6 + > .slider__nav-point, +#mem-7:checked + ~ .slider__nav-conatiner + > .slider__nav-label-7 + > .slider__nav-point, +#mem-8:checked + ~ .slider__nav-conatiner + > .slider__nav-label-8 + > .slider__nav-point { + background-color: transparent; + border: 2px solid #75aefe; + transition: background-color 0.53s, border 0.53s; +} + +#mem-1:checked + ~ .slider__nav-conatiner + > .slider__nav-label-1:hover + > .slider__nav-point, +#mem-2:checked + ~ .slider__nav-conatiner + > .slider__nav-label-2:hover + > .slider__nav-point, +#mem-3:checked + ~ .slider__nav-conatiner + > .slider__nav-label-3:hover + > .slider__nav-point, +#mem-4:checked + ~ .slider__nav-conatiner + > .slider__nav-label-4:hover + > .slider__nav-point, +#mem-5:checked + ~ .slider__nav-conatiner + > .slider__nav-label-5:hover + > .slider__nav-point, +#mem-6:checked + ~ .slider__nav-conatiner + > .slider__nav-label-6:hover + > .slider__nav-point, +#mem-7:checked + ~ .slider__nav-conatiner + > .slider__nav-label-7:hover + > .slider__nav-point, +#mem-8:checked + ~ .slider__nav-conatiner + > .slider__nav-label-8:hover + > .slider__nav-point { + border: 2px solid #fbfcff; + transition: border 0.53s; +} + +#mem-1:checked ~ .slider__mover > .slide-1 { + margin-left: 0%; +} + +#mem-2:checked ~ .slider__mover > .slide-1 { + margin-left: -12.5%; +} + +#mem-3:checked ~ .slider__mover > .slide-1 { + margin-left: -25%; +} + +#mem-4:checked ~ .slider__mover > .slide-1 { + margin-left: -37.5%; +} + +#mem-5:checked ~ .slider__mover > .slide-1 { + margin-left: -50%; +} + +#mem-6:checked ~ .slider__mover > .slide-1 { + margin-left: -62.5%; +} + +#mem-7:checked ~ .slider__mover > .slide-1 { + margin-left: -75%; +} + +#mem-8:checked ~ .slider__mover > .slide-1 { + margin-left: -87.5%; +} + +@media screen and (max-width: 430px) { + .slider { + padding: 10% 0; + row-gap: 0.4em; + grid-template: 3fr 0.2fr 1fr /1fr; + grid-template-areas: 'mem' 'navbar' 'desc'; + } + + .slider__nav-label { + height: 100%; + width: 6%; + margin: 0 2px; + } + + .slider__nav-point { + height: 0.7rem; + width: 0.7rem; + } + .slider__nav-conatiner { + justify-content: center; + } + + .slider__description-conatiner { + font-size: 1.2rem; + padding-top: 10px; + padding-left: 10px; + } +} + +@media screen and (min-width: 500px) { + .slider { + padding: 2% 0; + transition: all 0.53s; + } + + .slider__description-conatiner { + font-size: 1.4em; + } +} + +@media screen and (min-width: 950px) { + .slider { + padding: 1% 0; + width: 800px; + } + + .slider__description-conatiner { + font-size: 1.2em; + } + + .slider__description { + padding-top: 0.3em; + padding-left: 0.3em; + } +} diff --git a/cssMemSlider/img/1.jpg b/cssMemSlider/img/1.jpg new file mode 100644 index 0000000..a5a6cc1 Binary files /dev/null and b/cssMemSlider/img/1.jpg differ diff --git a/cssMemSlider/img/2.jpg b/cssMemSlider/img/2.jpg new file mode 100644 index 0000000..8d724e4 Binary files /dev/null and b/cssMemSlider/img/2.jpg differ diff --git a/cssMemSlider/img/3.jpg b/cssMemSlider/img/3.jpg new file mode 100644 index 0000000..90adea9 Binary files /dev/null and b/cssMemSlider/img/3.jpg differ diff --git a/cssMemSlider/img/4.jpg b/cssMemSlider/img/4.jpg new file mode 100644 index 0000000..791ab65 Binary files /dev/null and b/cssMemSlider/img/4.jpg differ diff --git a/cssMemSlider/img/5.jpg b/cssMemSlider/img/5.jpg new file mode 100644 index 0000000..b6d48b9 Binary files /dev/null and b/cssMemSlider/img/5.jpg differ diff --git a/cssMemSlider/img/6.jpg b/cssMemSlider/img/6.jpg new file mode 100644 index 0000000..9eda41f Binary files /dev/null and b/cssMemSlider/img/6.jpg differ diff --git a/cssMemSlider/img/7.jpg b/cssMemSlider/img/7.jpg new file mode 100644 index 0000000..0f761f4 Binary files /dev/null and b/cssMemSlider/img/7.jpg differ diff --git a/cssMemSlider/img/8.jpg b/cssMemSlider/img/8.jpg new file mode 100644 index 0000000..3555ee0 Binary files /dev/null and b/cssMemSlider/img/8.jpg differ diff --git a/cssMemSlider/img/JS-pointer.svg b/cssMemSlider/img/JS-pointer.svg new file mode 100644 index 0000000..4793125 --- /dev/null +++ b/cssMemSlider/img/JS-pointer.svg @@ -0,0 +1,7 @@ + \ No newline at end of file diff --git a/cssMemSlider/img/JS.svg b/cssMemSlider/img/JS.svg new file mode 100644 index 0000000..8005e25 --- /dev/null +++ b/cssMemSlider/img/JS.svg @@ -0,0 +1,9 @@ + \ No newline at end of file diff --git a/cssMemSlider/img/aim.png b/cssMemSlider/img/aim.png new file mode 100644 index 0000000..6dd66fe Binary files /dev/null and b/cssMemSlider/img/aim.png differ diff --git a/cssMemSlider/img/aim.svg b/cssMemSlider/img/aim.svg new file mode 100644 index 0000000..8be23c5 --- /dev/null +++ b/cssMemSlider/img/aim.svg @@ -0,0 +1,10 @@ + \ No newline at end of file diff --git a/cssMemSlider/img/big-w.jpg b/cssMemSlider/img/big-w.jpg new file mode 100644 index 0000000..41deb8d Binary files /dev/null and b/cssMemSlider/img/big-w.jpg differ diff --git a/cssMemSlider/img/cash.jpg b/cssMemSlider/img/cash.jpg new file mode 100644 index 0000000..261b22f Binary files /dev/null and b/cssMemSlider/img/cash.jpg differ diff --git a/cssMemSlider/img/crest.svg b/cssMemSlider/img/crest.svg new file mode 100644 index 0000000..93d88f3 --- /dev/null +++ b/cssMemSlider/img/crest.svg @@ -0,0 +1,9 @@ + \ No newline at end of file diff --git a/cssMemSlider/img/cup.png b/cssMemSlider/img/cup.png new file mode 100644 index 0000000..0fe57d3 Binary files /dev/null and b/cssMemSlider/img/cup.png differ diff --git a/cssMemSlider/img/eye.jpg b/cssMemSlider/img/eye.jpg new file mode 100644 index 0000000..21d69e5 Binary files /dev/null and b/cssMemSlider/img/eye.jpg differ diff --git a/cssMemSlider/img/icon.svg b/cssMemSlider/img/icon.svg new file mode 100644 index 0000000..a17923c --- /dev/null +++ b/cssMemSlider/img/icon.svg @@ -0,0 +1,14 @@ + \ No newline at end of file diff --git a/cssMemSlider/img/kill.svg b/cssMemSlider/img/kill.svg new file mode 100644 index 0000000..3057da1 --- /dev/null +++ b/cssMemSlider/img/kill.svg @@ -0,0 +1,9 @@ + \ No newline at end of file diff --git a/cssMemSlider/img/map.jpg b/cssMemSlider/img/map.jpg new file mode 100644 index 0000000..735a2f8 Binary files /dev/null and b/cssMemSlider/img/map.jpg differ diff --git a/cssMemSlider/img/reptil.jpg b/cssMemSlider/img/reptil.jpg new file mode 100644 index 0000000..4b5a62c Binary files /dev/null and b/cssMemSlider/img/reptil.jpg differ diff --git a/cssMemSlider/img/small-h.jpg b/cssMemSlider/img/small-h.jpg new file mode 100644 index 0000000..55f5524 Binary files /dev/null and b/cssMemSlider/img/small-h.jpg differ diff --git a/cssMemSlider/img/small.jpg b/cssMemSlider/img/small.jpg new file mode 100644 index 0000000..a2806f0 Binary files /dev/null and b/cssMemSlider/img/small.jpg differ diff --git a/cssMemSlider/img/space.jpg b/cssMemSlider/img/space.jpg new file mode 100644 index 0000000..cc3244c Binary files /dev/null and b/cssMemSlider/img/space.jpg differ diff --git a/cssMemSlider/img/zatmen.jpg b/cssMemSlider/img/zatmen.jpg new file mode 100644 index 0000000..35bc315 Binary files /dev/null and b/cssMemSlider/img/zatmen.jpg differ diff --git a/cssMemSlider/index.html b/cssMemSlider/index.html new file mode 100644 index 0000000..fd1c30d --- /dev/null +++ b/cssMemSlider/index.html @@ -0,0 +1,317 @@ + + +
+ + + ++ Если Вы хотите просто посмотреть слайдер: + +
++ Эта страница освобождена от ЖаваСкрипта. Вход на неё исключительно + адекватным людям, которые понимают все последствия использования его + человечеством. +
++ Если для тебя эта смишно, СМЕЙСА ДАЛЬШЕ! Пасмотрим кто будет смеятса + когда его отключат рептилоиды. А лучше ухади с этой странички в свои + ТикТоки и не мещай адыкватным людям гаварить о действительно серъезных + темах. +
+Вход разришается всем кто подходит под один из этих пунктов:
+