diff --git a/cssMemSlider/audio/this-is-wonderful.mp3 b/cssMemSlider/audio/this-is-wonderful.mp3 new file mode 100644 index 0000000..fc998ca Binary files /dev/null and b/cssMemSlider/audio/this-is-wonderful.mp3 differ diff --git a/cssMemSlider/audio/this-is-wonderful.ogg b/cssMemSlider/audio/this-is-wonderful.ogg new file mode 100644 index 0000000..92653fc Binary files /dev/null and b/cssMemSlider/audio/this-is-wonderful.ogg differ diff --git a/cssMemSlider/audio/this-is-wonderful.opus b/cssMemSlider/audio/this-is-wonderful.opus new file mode 100644 index 0000000..3058448 Binary files /dev/null and b/cssMemSlider/audio/this-is-wonderful.opus differ diff --git a/cssMemSlider/img/1.jpg b/cssMemSlider/img/1.jpg new file mode 100644 index 0000000..bcfdbf5 Binary files /dev/null and b/cssMemSlider/img/1.jpg differ diff --git a/cssMemSlider/img/1.webp b/cssMemSlider/img/1.webp new file mode 100644 index 0000000..d0b21b1 Binary files /dev/null and b/cssMemSlider/img/1.webp differ diff --git a/cssMemSlider/img/2.jpg b/cssMemSlider/img/2.jpg new file mode 100644 index 0000000..63e350f Binary files /dev/null and b/cssMemSlider/img/2.jpg differ diff --git a/cssMemSlider/img/2.webp b/cssMemSlider/img/2.webp new file mode 100644 index 0000000..d6c63df Binary files /dev/null and b/cssMemSlider/img/2.webp differ diff --git a/cssMemSlider/img/3.jpg b/cssMemSlider/img/3.jpg new file mode 100644 index 0000000..23e1dab Binary files /dev/null and b/cssMemSlider/img/3.jpg differ diff --git a/cssMemSlider/img/3.webp b/cssMemSlider/img/3.webp new file mode 100644 index 0000000..d3b6815 Binary files /dev/null and b/cssMemSlider/img/3.webp differ diff --git a/cssMemSlider/img/4.jpg b/cssMemSlider/img/4.jpg new file mode 100644 index 0000000..ea6c074 Binary files /dev/null and b/cssMemSlider/img/4.jpg differ diff --git a/cssMemSlider/img/4.webp b/cssMemSlider/img/4.webp new file mode 100644 index 0000000..927a3ea Binary files /dev/null and b/cssMemSlider/img/4.webp differ diff --git a/cssMemSlider/img/5.jpg b/cssMemSlider/img/5.jpg new file mode 100644 index 0000000..5d912a7 Binary files /dev/null and b/cssMemSlider/img/5.jpg differ diff --git a/cssMemSlider/img/5.webp b/cssMemSlider/img/5.webp new file mode 100644 index 0000000..19a7b63 Binary files /dev/null and b/cssMemSlider/img/5.webp differ diff --git a/cssMemSlider/img/backgrond.jpg b/cssMemSlider/img/backgrond.jpg new file mode 100644 index 0000000..88dd6a1 Binary files /dev/null and b/cssMemSlider/img/backgrond.jpg differ diff --git a/cssMemSlider/img/backgrond.webp b/cssMemSlider/img/backgrond.webp new file mode 100644 index 0000000..4b9cfb4 Binary files /dev/null and b/cssMemSlider/img/backgrond.webp differ diff --git a/cssMemSlider/img/memes.jpg b/cssMemSlider/img/memes.jpg new file mode 100644 index 0000000..9063da0 Binary files /dev/null and b/cssMemSlider/img/memes.jpg differ diff --git a/cssMemSlider/img/memes.webp b/cssMemSlider/img/memes.webp new file mode 100644 index 0000000..e7bf3cd Binary files /dev/null and b/cssMemSlider/img/memes.webp differ diff --git a/cssMemSlider/img/mqdefault.jpg b/cssMemSlider/img/mqdefault.jpg new file mode 100644 index 0000000..2a0883d Binary files /dev/null and b/cssMemSlider/img/mqdefault.jpg differ diff --git a/cssMemSlider/img/mqdefault.webp b/cssMemSlider/img/mqdefault.webp new file mode 100644 index 0000000..4dc69ab Binary files /dev/null and b/cssMemSlider/img/mqdefault.webp differ diff --git a/cssMemSlider/img/pepe.jpg b/cssMemSlider/img/pepe.jpg new file mode 100644 index 0000000..37872cd Binary files /dev/null and b/cssMemSlider/img/pepe.jpg differ diff --git a/cssMemSlider/img/pepe.webp b/cssMemSlider/img/pepe.webp new file mode 100644 index 0000000..72184fd Binary files /dev/null and b/cssMemSlider/img/pepe.webp differ diff --git a/cssMemSlider/img/way.webp b/cssMemSlider/img/way.webp new file mode 100644 index 0000000..268d6fa Binary files /dev/null and b/cssMemSlider/img/way.webp differ diff --git a/cssMemSlider/img/wig.jpg b/cssMemSlider/img/wig.jpg new file mode 100644 index 0000000..55fe575 Binary files /dev/null and b/cssMemSlider/img/wig.jpg differ diff --git a/cssMemSlider/img/wig.webp b/cssMemSlider/img/wig.webp new file mode 100644 index 0000000..32dc9b1 Binary files /dev/null and b/cssMemSlider/img/wig.webp differ diff --git a/cssMemSlider/index.html b/cssMemSlider/index.html new file mode 100644 index 0000000..76b16d5 --- /dev/null +++ b/cssMemSlider/index.html @@ -0,0 +1,81 @@ + + + + + + + + + + cssMemSlider + + + + +

CSS Mem-Slider

+
+ + + + + + +
+ + + +
+
+ + + + + + +
+
+ +
+
+

Something on chicken...

+

Mr. Kitty

+

You are good boy?

+

Сongratulations!

+

Go-go-go!

+

Do you know the Way?

+
+ +
+ +
+ + + + + + +
+ +
+ +
+ + + + \ No newline at end of file diff --git a/cssMemSlider/style.css b/cssMemSlider/style.css new file mode 100644 index 0000000..36dd728 --- /dev/null +++ b/cssMemSlider/style.css @@ -0,0 +1,299 @@ +* { + 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; +} +aside, +nav, +footer, +header, +section { + display: block; +} +html, +body { + min-width: 19rem; + background: url("img/backgrond.webp") repeat-y; + background-size: 100% auto; + display: flex; + align-items: flex-start; + justify-content: center; + width: 100%; + color: #fff; + flex-wrap: wrap; +} +body { + line-height: 1; + font-family: "Roboto", sans serif; + -ms-text-size-adjust: 100%; + -moz-text-size-adjust: 100%; + -webkit-text-size-adjust: 100%; +} +input, +button, +textarea { + font-family: "Roboto", sans serif; +} +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-weight: inherit; + font-size: inherit; +} +h1 { + flex: 1 1 100%; + font-size: 5rem; + text-align: center; + align-self: center; +} +.slider-wrap { + background: url("img/pepe.webp"); + background-size: contain; + border-radius: 2rem; + margin: 2rem; + overflow: hidden; +} +.slider { + max-width: 40rem; + max-height: 96vh; + padding: 1.6rem 2.5rem; + + display: grid; + grid-template-columns: 5fr 1fr; + grid-template-rows: 7fr 0.5fr 0.001fr; + background: #00000080; + overflow: hidden; + row-gap: 1.5rem; +} +.audio { + grid-column: 1 / 3; + grid-row: 3 / 5; + width: 100%; + flex: 1 1 100%; + margin: 0 auto; + background: url("img/pepe.webp"); + display: none; +} +.slider-btn { + display: none; +} +.slider-pictures-wrap { + grid-column: 1 / 3; + width: 100%; + overflow: hidden; + border-radius: 1rem; +} +.slider-pictures-items { + width: 600%; + height: 100%; + display: flex; + align-items: center; + transition: all 0.5s; +} +.slider-pictures-item { + width: calc(100% / 6); + height: 100%; + object-fit: cover; +} +.slider-description-wrap { + width: 100%; + grid-row: 2 / 4; + grid-column: 1/2; + overflow: hidden; +} +.slider-description { + width: 600%; + display: flex; + margin: 0 auto 0 0; + transition: all 0.1s; +} +.slider-text { + width: calc(100% / 6); + color: #fff; + font-size: 1.6rem; +} +.slider-bullets-wrap { + grid-row: 2 / 3; + grid-column: 2 / 3; + display: flex; + transition: all 0.5s; + background-color: #00000080; + border-radius: 1.5rem; + justify-content: space-between; +} +.slider-bullets-item { + padding: 1rem; + cursor: pointer; +} +.slider-bullet { + width: 1.5rem; + height: 1.5rem; + background: #262525; + border-radius: 50%; + border: 0.1rem solid #e21a1a; +} +.slider-bullets-item:hover .slider-bullet { + background: #fff url("img/mqdefault.webp") center no-repeat; + background-size: cover; + border: 0.15rem solid #d10fa1; +} +.slider-bullets-item:hover #bullet-6 { + background: #fff url("img/memes.webp") center no-repeat; + background-size: cover; + border: 0.2rem solid #14af21; +} +.slider-bullets-item:active .slider-bullet { + background: #e21a1a url("img/wig.webp") center no-repeat; + background-size: cover; +} +.slider-bullets-item:active #bullet-6 { + animation: lol 2s linear; +} +#bullet-6-label { + display: none; +} +#btn-1:checked ~ .slider .slider-bullets-wrap .slider-bullets-item #bullet-1, +#btn-2:checked ~ .slider .slider-bullets-wrap .slider-bullets-item #bullet-2, +#btn-3:checked ~ .slider .slider-bullets-wrap .slider-bullets-item #bullet-3, +#btn-4:checked ~ .slider .slider-bullets-wrap .slider-bullets-item #bullet-4, +#btn-5:checked ~ .slider .slider-bullets-wrap .slider-bullets-item #bullet-5 { + background: url("img/way.webp") center no-repeat; + background-size: cover; +} +#btn-5:checked ~ .slider .slider-bullets-wrap #bullet-6-label { + display: block; +} +#btn-6:checked ~ .slider .slider-bullets-wrap .slider-bullets-item #bullet-1, +#btn-6:checked ~ .slider .slider-bullets-wrap .slider-bullets-item #bullet-2, +#btn-6:checked ~ .slider .slider-bullets-wrap .slider-bullets-item #bullet-3, +#btn-6:checked ~ .slider .slider-bullets-wrap .slider-bullets-item #bullet-4, +#btn-6:checked ~ .slider .slider-bullets-wrap .slider-bullets-item #bullet-5, +#btn-6:checked ~ .slider .slider-bullets-wrap .slider-bullets-item #bullet-6 { + background: url("img/way.webp") center no-repeat; + background-size: cover; +} +#btn-2:checked ~ .slider .slider-description-wrap .slider-description, +#btn-2:checked ~ .slider .slider-pictures-wrap .slider-pictures-items { + margin-left: -100%; +} +#btn-3:checked ~ .slider .slider-description-wrap .slider-description, +#btn-3:checked ~ .slider .slider-pictures-wrap .slider-pictures-items { + margin-left: -200%; +} +#btn-4:checked ~ .slider .slider-description-wrap .slider-description, +#btn-4:checked ~ .slider .slider-pictures-wrap .slider-pictures-items { + margin-left: -300%; +} +#btn-5:checked ~ .slider .slider-description-wrap .slider-description, +#btn-5:checked ~ .slider .slider-pictures-wrap .slider-pictures-items { + margin-left: -400%; +} +#btn-6:checked ~ .slider .slider-description-wrap .slider-description, +#btn-6:checked ~ .slider .slider-pictures-wrap .slider-pictures-items { + margin-left: -500%; +} +#btn-6:checked ~ #audio { + display: block; +} +@media (max-width: 1700px) { + body { + background-size: cover; + } +} +@media (max-width: 1440px) { + body { + height: 100vh; + } +} +@media (max-width: 769px) { + body { + height: 100vh; + } +} +@media (max-width: 670px) { + h1 { + font-size: 3rem; + } + .slider-wrap { + margin: 1rem; + } + .slider { + padding: 1rem 1.2rem; + grid-template-rows: 7fr 0.5fr 0.5fr; + } + .audio { + } + .slider-text { + font-size: 1.3rem; + } + .slider-bullets-wrap { + grid-column: 1 / 3; + } + .slider-description-wrap { + grid-row: 3 / 4; + } +} +@media (max-width: 420px) { + h1 { + font-size: 2.5rem; + } + .slider-bullets-item { + padding: 0.5rem; + } + .slider-bullet { + width: 1.2rem; + height: 1.2rem; + } + .slider-text { + font-size: 1.2rem; + } +} +@keyframes lol { + from { + transform: rotate(0deg); + } + to { + transform: rotate(360deg); + } +}