diff --git a/cssMemeSlider/assets/images/slide-1.jpg b/cssMemeSlider/assets/images/slide-1.jpg new file mode 100644 index 0000000..daa833d Binary files /dev/null and b/cssMemeSlider/assets/images/slide-1.jpg differ diff --git a/cssMemeSlider/assets/images/slide-2.jpg b/cssMemeSlider/assets/images/slide-2.jpg new file mode 100644 index 0000000..e8433bb Binary files /dev/null and b/cssMemeSlider/assets/images/slide-2.jpg differ diff --git a/cssMemeSlider/assets/images/slide-3.jpg b/cssMemeSlider/assets/images/slide-3.jpg new file mode 100644 index 0000000..656b113 Binary files /dev/null and b/cssMemeSlider/assets/images/slide-3.jpg differ diff --git a/cssMemeSlider/assets/images/slide-4.jpg b/cssMemeSlider/assets/images/slide-4.jpg new file mode 100644 index 0000000..f6dea63 Binary files /dev/null and b/cssMemeSlider/assets/images/slide-4.jpg differ diff --git a/cssMemeSlider/index.html b/cssMemeSlider/index.html index 6cedf7a..20675fb 100644 --- a/cssMemeSlider/index.html +++ b/cssMemeSlider/index.html @@ -10,5 +10,26 @@ - +
+ + + + + + + + +
+

Нельзя просто взять и сделать пустой коммит

+

Ну ты это, чего смотришь, листай дальше

+

Я, наконец-то закончивший делать library-3

+

Когда сказали, что надо сделать слайдер только на CSS

+
+
+ + + + +
+
\ No newline at end of file diff --git a/cssMemeSlider/styles/adaptive.css b/cssMemeSlider/styles/adaptive.css index e69de29..ff5afec 100644 --- a/cssMemeSlider/styles/adaptive.css +++ b/cssMemeSlider/styles/adaptive.css @@ -0,0 +1,24 @@ +@media (max-width: 768px) { + #l1 { + margin-left: 35vw; + order: 2; + } + + #l2 { + order: 3; + } + + #l3 { + order: 4; + } + + #l4 { + order: 5; + margin-right: 35vw; + } + + .slider-texts { + margin-right: 12vw; + order: 6; + } +} \ No newline at end of file diff --git a/cssMemeSlider/styles/style.css b/cssMemeSlider/styles/style.css index 4a8eba7..766dcb3 100644 --- a/cssMemeSlider/styles/style.css +++ b/cssMemeSlider/styles/style.css @@ -1,4 +1,169 @@ @font-face { font-family: "Inter"; src: url("../assets/fonts/Inter-Regular.ttf"); +} + + + + + +* { + box-sizing: border-box; +} + +body { + display: block; + margin: 0 auto; + background-color: #9b9b9b; +} + +.slider-container { + display: flex; + flex-direction: row; + justify-content: center; + flex-wrap: wrap; + width: 90%; + height: 70vw; + border: 0.5vw solid #ffffff; + border-radius: 2.5vw; + margin: 7vw auto; + background-color: #272626; +} + +.slider-images { + display: flex; + width: 60%; + height: 54vw; + border-radius: 2.5vw; + margin-top: 2.5vw; + overflow: hidden; + order: 1; +} + +img { + width: 100%; + height: 100%; +} + +.slider-texts { + display: flex; + flex-direction: column; + width: 40.059vw; + height: 4.999vw; + margin-right: 1vw; + overflow: hidden; + order: 2; +} + +P { + width: 100%; + margin-top: 1.5vw; + font-size: 1.953vw; + font-family: Inter, sans-serif; + font-weight: 700; + color: #ffffff; +} + +input { + opacity: 0; + display: none; +} + +label { + width: 2.25vw; + height: 2.25vw; + border: 0.5vw solid #272626; + margin-left: 0.75vw; + margin-top: 1vw; + cursor: pointer; + border-radius: 50%; + cursor: pointer; + background-color: #9283bd; + transition: background-color 0.5s, box-shadow 0.5s; +} + +label:hover { + background-color: #614f91; + transition: background-color 0.5s; +} + +label:active { + box-shadow: 0 0 0.5vw 0.5vw #614f91; + transition: box-shadow 0.5s; +} + +#r1:checked ~ #l1 { + box-shadow: 0 0 0.5vw 0.5vw #9283bd; + transition: box-shadow 0.5s; +} + +#r2:checked ~ #l2 { + box-shadow: 0 0 0.5vw 0.5vw #9283bd; + transition: box-shadow 0.5s; +} + +#r3:checked ~ #l3 { + box-shadow: 0 0 0.5vw 0.5vw #9283bd; + transition: box-shadow 0.5s; +} + +#r4:checked ~ #l4 { + box-shadow: 0 0 0.5vw 0.5vw #9283bd; + transition: box-shadow 0.5s; +} + +#l1 { + order: 3; +} + +#l2 { + order: 4; +} + +#l3 { + order: 5; +} + +#l4 { + order: 6; +} + +#r1:checked ~ .slider-images > .s1 { + margin-left: -0%; + transition: margin-left 1s; +} + +#r2:checked ~ .slider-images > .s1 { + margin-left: -100%; + transition: margin-left 1s; +} + +#r3:checked ~ .slider-images > .s1 { + margin-left: -200%; + transition: margin-left 1s; +} + +#r4:checked ~ .slider-images > .s1 { + margin-left: -300%; + transition: margin-left 1s; +} + +#r1:checked ~ .slider-texts > .t1 { + margin-top: -0%; + transition: margin-top 1s; +} + +#r2:checked ~ .slider-texts > .t1 { + margin-top: -13%; + transition: margin-top 1s; +} + +#r3:checked ~ .slider-texts > .t1 { + margin-top: -26%; + transition: margin-top 1s; +} + +#r4:checked ~ .slider-texts > .t1 { + margin-top: -39%; + transition: margin-top 1s; } \ No newline at end of file