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 @@ + + + + + + + АНТИ javascR.I.P.t КЛУБ + + + + + + + + + +
+
+
+

+ Если Вы хотите просто посмотреть слайдер: + +

+

+ Если интересна расширенная версия сайта и Вы: +

+ +
+ Этой работой я не хотел никого оскорбить, просто подумал кому и где + мог бы быть нужен сайт без использования JS. Ошибки, битые ссылки на другие ресурсы или изображения сделаны нарочно. +
+
+
+
+

⚠️ Внимание! ⚠️

+

+ Эта страница освобождена от ЖаваСкрипта. Вход на неё исключительно + адекватным людям, которые понимают все последствия использования его + человечеством. +

+

+ Если для тебя эта смишно, СМЕЙСА ДАЛЬШЕ! Пасмотрим кто будет смеятса + когда его отключат рептилоиды. А лучше ухади с этой странички в свои + ТикТоки и не мещай адыкватным людям гаварить о действительно серъезных + темах. +

+

Вход разришается всем кто подходит под один из этих пунктов:

+ + + +
+ +
+ +
+
+
+
+ javascR.I.P.t + STOP +
+ +
Внимание! Очень важная информация‼️
Мы улечили группировку RS.School в цельно направленном набеге на наш сайт! Это операция происходит под рукаводством некого Dzmitry Astraukh (@DrDiman). Эти пколонники ЖаваСкрипта ещё не знают с кем связались! Все АПИ адреса нападавших записиваются и никто не избижит наказания! Никто не будет забыт! Часть функционала сайта заморожена, некоторые статьи скрыты из общего доступа! Не поддавайтесь паники. Набег скоро пройдет и сайт вернетса в свое нормальное состояние. Такие черные лебеди делает наше сообщество только крепче. А нам дает ещё раз убидиться, что наше дело правое.
+
+

Их планы

+ Все до банальности просто! Сейчас большинство операций производится через Интернет. Что будет если отключить ДжаваСкрипт на всех сайтах? Человечество поработит хаус! Они ждут, когда все сайты перейдут на ДжаваСкрипт и потом просто отрубят его. Но сообщества таких же как мы, не даст им выполнить задуманное. Мы не перенесем наш сайт на ДжаваСкрипт, чего бы нам этого не стоило! То что они это разрабатывают давно можно понять по утекшим документам, например как этот:
+ Doc +
+
+

Доказательство, что ЖаваСкрипт от Сатаны:

+
    +
  1. Давайте начнем с самого простого. Все мы знаем, что Риптилоиды и Массоны любят оставлять посхалочки, которые доказывают, что это их рук дела. К примеру Массонский знак на деньгах ( более подробнее тут ) ЖаваСкрипт в этом плане не исключение. Наверное слышали такую абривиатуру ЖаваСкрипта, как: JS. Так, а что она значит действительно значит? J – job, S – Satan. Работа Сатане, угу… а кто приклоняется Сатане? Правильно Массоны. При этом они этого и не скрывают, водят своей аббревиатурой перед носом людей, думая что все дурачки не поймут этаго. Типо: «Ха-ха, какие мы умные, вы - простолюдины этого понять не сможете, даже если мы все карты разложем перед вами».
  2. +
  3. Давайте посмотрим боле подробно на само название ЖаваСкрипт. По официальной версии изначально он назывался ECMAScript, потом его переименовали на JavaScript ради популяризации. А зачем его начали популяризировать и кто? И к тому же, при смене названия осталась слово script, а вы некогда не считали сколько букв в этом слове? Хм… на какое-то удивительное совпадение их 6ть. А шесть чье число? Это слово и имя Сатаны начинается с большой буквы С, какая-та нелепая череда случайных совпадений? Или все же не случайность? Окей, а в каком году он появился, в 1995? Единичка нам как бы показывает, что нам нужно сделать что-то с первым значением, давайте его изменим, а если быть точным, добавим эту же единичку к первому числу. Выходит 996. На что же оно может быть похоже, хм… а если 99 перевернуть… ой, опять нелепое совпадение? Думайте! +
  4. +
  5. Если кто-то работал с JavaScript. Во-первых сочувствую. Во-вторых заметили, что логика его работы отличается от логики работы в других языках программирования? Нелогичное сравнение и записи разных примитивов. Интересно почему, может это вовсе не человеческая логика? Подумайте. +
  6. +
+
+
+

Чат

+
+

Андрей

+ +

Добрый день. Кто-то делал перчатки из фольги? Как Вы решили проблему с тем, что она рвется при сгибе пальцев? Для работы необходимо заходить на определенный сайт, а на нем стоит дрянной скрипт. Я заметил, что когда работаю с ним голыми руками, у меня постепенно становиться плохое самочувствие, мигрень и боль в глазах.

+
+
+

Инкогнито

+ +

Сейчас очень тяжело найти правдивую информацию, в безграничном интернете, таких сайтов можно сосчитать на пальцах одной руки. Благодарю за честность. Добавил сайт в закладки, буду регулярно на него заходить.

+
+
+

Юлия

+ +

Администрации спасибо за этот спокойный островок справедливости, в море безумия. Сайт дает очевидные ответы на вопросы, которые в обществе не принято задавать из-за своей якобы очевидности.

+
+
+

Истинный человек

+ +

Андрей, добрый день. Тоже долго мучался от таких же недугов. В обычном хозяйственном магазине поищите уже готовые перчатки из фольги, они хоть хуже самодельных и менее эффективны, нежели самодельные, но с ними меньше мороки. Узнал о них через жену, она кондитер и использует их в работе.

+
+
+

Елена

+ +

Очень страшно за ребят, которые с этой штукой работают. Передники - программисты, вроде так их называют. Они же совсем не понимают с чем и на кого работают, кого прославляют!

+
+
+

Ольга

+ +

Да, Елена, сын учится на программиста. Я сказала не в коем случае не работать с жавпскиптом, лучше получить двойку по предмету, чем связать свою жизнь с этой гадостью. Очень переживаю за него.

+
+
+

Евгений

+ +

Что Вы скажите о работе WebAssembly, его использовать можно?

+
+
+

Администрация

+ +

Евгений, приветствую! Данный язык глубоко изучается нашими специалистами. Сейчас есть пару спорных моментов (например его аббревиатура WASM, опять почему-то S), как только они найдут на них ответы и язык не дискредитирует себя, Мы сообщим об этом. Тема очень серьезная и не простительна к расторопности, поэтому может занять от месяца до двух.

+
+
+

Евгений

+ +

Спасибо большое, надеюсь Мы получим добро на использование.

+
+ +
+ + + +
+ +
+ + + +
+ + + + + + + + +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+
+ Нет такой проблемы, гайд по решению которой не записал индус. +
+
+ Не все что выглядит и работает как SVG – есть SVG. Проверь файл + перед тем как пустишь его в свой код. © Кодекс Великого Фронтендера. +
+
+ При подключении 2го монитора такая же ситуация. +
+
+ Если работает, не трогай! +
+
+ I remember it like yesterday. +
+
+ Что слышат Фронтенд разработчики, когда едят в поезде? + <td><td> <td><td> +
+
+ Иногда мне кажется, что без Фиксиков мир бы поработил хаос. +
+
No comments!
+
+
+ + + + + + + + + + + + + + + + + + + +
+
+
+ + +