SeniorMiddleton · SeniorMiddleton · Sep 15, 2023 · Sep 15, 2023 · Sep 15, 2023 · Sep 15, 2023
diff --git a/README.md b/README.md
@@ -1 +1,2 @@
-# cssMemeSlider
+# cssMemeSlider
+https://SeniorMiddleton.github.io/cssMemeSlider/cssMemeSlider/index.html
diff --git a/cssMemeSlider/index.html b/cssMemeSlider/index.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>slider</title>
+    <link rel="stylesheet" href="style.css" />
+  </head>
+  <body>
+    <div class="box">
+      <div class="sliderBox">
+        <div class="slider">
+          <input checked type="radio" name="sl" id="sl1" />
+          <input type="radio" name="sl" id="sl2" />
+          <input type="radio" name="sl" id="sl3" />
+          <input type="radio" name="sl" id="sl4" />
+          <div class="slide s1"><img src="./mem1.jpg" alt="" /></div>
+          <div class="slide"><img src="./mem2.jpg" alt="" /></div>
+          <div class="slide"><img src="./mem3.jpg" alt="" /></div>
+          <div class="slide"><img src="./mem4.jpg" alt="" /></div>
+
+          <div id="navigation">
+            <div class="nav">
+              <label for="sl1"></label>
+              <label for="sl2"></label>
+              <label for="sl3"></label>
+              <label for="sl4"></label>
+            </div>
+          </div>
+
+          <div class="text">
+            <div class="text1">
+              <h1>Слава Україні!</h1>
+              <h1>Героям Слава!</h1>
+              <h1>Слава нації!</h1>
+              <h1>Смерть ворогам!</h1>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </body>
+</html>
+
diff --git a/cssMemeSlider/mem1.jpg b/cssMemeSlider/mem1.jpg
diff --git a/cssMemeSlider/mem2.jpg b/cssMemeSlider/mem2.jpg
diff --git a/cssMemeSlider/mem3.jpg b/cssMemeSlider/mem3.jpg
diff --git a/cssMemeSlider/mem4.jpg b/cssMemeSlider/mem4.jpg
diff --git a/cssMemeSlider/style.css 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%;
+}