diff --git a/README.md b/README.md index bdef2de..8da530e 100644 --- a/README.md +++ b/README.md @@ -1 +1,2 @@ -# cssMemeSlider \ No newline at end of file +# cssMemeSlider +https://SeniorMiddleton.github.io/cssMemeSlider/cssMemeSlider/index.html diff --git a/cssMemeSlider/index.html b/cssMemeSlider/index.html new file mode 100644 index 0000000..272d59a --- /dev/null +++ b/cssMemeSlider/index.html @@ -0,0 +1,44 @@ + + + + + + slider + + + +
+
+
+ + + + +
+
+
+
+ + + +
+
+

Слава Україні!

+

Героям Слава!

+

Слава нації!

+

Смерть ворогам!

+
+
+
+
+
+ + + diff --git a/cssMemeSlider/mem1.jpg b/cssMemeSlider/mem1.jpg new file mode 100644 index 0000000..abbf58f Binary files /dev/null and b/cssMemeSlider/mem1.jpg differ diff --git a/cssMemeSlider/mem2.jpg b/cssMemeSlider/mem2.jpg new file mode 100644 index 0000000..a8fdd8e Binary files /dev/null and b/cssMemeSlider/mem2.jpg differ diff --git a/cssMemeSlider/mem3.jpg b/cssMemeSlider/mem3.jpg new file mode 100644 index 0000000..9f10a08 Binary files /dev/null and b/cssMemeSlider/mem3.jpg differ diff --git a/cssMemeSlider/mem4.jpg b/cssMemeSlider/mem4.jpg new file mode 100644 index 0000000..4598232 Binary files /dev/null and b/cssMemeSlider/mem4.jpg differ diff --git a/cssMemeSlider/style.css b/cssMemeSlider/style.css new file mode 100644 index 0000000..a237718 --- /dev/null +++ b/cssMemeSlider/style.css @@ -0,0 +1,157 @@ +* { + margin: 0; + padding: 0; +} +@media screen and (max-width: 768px) { + #navigation { + position: absolute; + top: 41%; + width: 87%; + padding-top: 2em; + padding-bottom: 2em; + } + .nav { + display: flex; + justify-content: center; + } + .text { + width: 100%; + max-width: 16em; + height: 3em; + top: 57%; + overflow: hidden; + position: absolute; + } + .text1 { + width: 400%; + height: 100%; + display: flex; + } +} +@media screen and (min-width: 769px) { + #navigation { + position: absolute; + margin-top: 58%; + display: flex; + justify-content: end; + width: 94%; + } + .nav { + display: flex; + justify-content: center; + } + .text { + width: 100%; + max-width: 16em; + height: 3em; + margin-top: 58%; + overflow: hidden; + position: absolute; + } +} +body { + background-color: grey; + margin: 0 auto; +} + +.box { + width: 100%; + max-width: 64em; + height: 100%; + max-height: 47em; + top: 50%; + left: 50%; + overflow: hidden; + position: absolute; + background-color: #323b4c; + transform: translate(-50%, -50%); +} +.sliderBox { + margin-top: 2em; + margin-left: 2em; + margin-right: 2em; + overflow: hidden; + border-radius: 2em; +} + +/* АКТИВНИЙ ЧЕКПОІНТ */ +#sl1:checked ~ #navigation label:nth-child(1), +#sl2:checked ~ #navigation label:nth-child(2), +#sl3:checked ~ #navigation label:nth-child(3), +#sl4:checked ~ #navigation label:nth-child(4) { + background-color: black; +} +#navigation label { + border-radius: 50%; + width: 2em; + height: 2em; + margin: 0.5em; + background: grey; + display: flex; + flex-wrap: nowrap; + align-items: center; + justify-content: center; +} +#navigation label:hover { + opacity: 0.7; + transform: scale(1.1); + background-color: #fff; +} +input[name="sl"] { + display: none; +} +label { + cursor: pointer; +} +.slider { + display: flex; + width: 400%; + height: 75%; +} + +.slide { + width: 25%; + transition: all 0.5s ease; +} + +.text1 { + width: 400%; + height: 100%; + display: flex; +} +h1 { + width: 100%; + transition: all 0.5s ease; + font-size: 2em; + color: #fff; + font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif; +} +.slide img { + width: 100%; + height: 100%; +} +#sl1:checked ~ .s1 { + margin-left: 0%; +} +#sl2:checked ~ .s1 { + margin-left: -25%; +} +#sl3:checked ~ .s1 { + margin-left: -50%; +} +#sl4:checked ~ .s1 { + margin-left: -75%; +} + +#sl1:checked ~ .text h1 { + margin-left: 0; +} +#sl2:checked ~ .text h1 { + margin-left: -25%; +} +#sl3:checked ~ .text h1 { + margin-left: -50%; +} +#sl4:checked ~ .text h1 { + margin-left: -75%; +}