Forlocks · Forlocks · Sep 17, 2023 · Sep 17, 2023 · Sep 17, 2023 · Sep 17, 2023
diff --git a/cssMemeSlider/assets/images/slide-1.jpg b/cssMemeSlider/assets/images/slide-1.jpg
diff --git a/cssMemeSlider/assets/images/slide-2.jpg b/cssMemeSlider/assets/images/slide-2.jpg
diff --git a/cssMemeSlider/assets/images/slide-3.jpg b/cssMemeSlider/assets/images/slide-3.jpg
diff --git a/cssMemeSlider/assets/images/slide-4.jpg b/cssMemeSlider/assets/images/slide-4.jpg
diff --git a/cssMemeSlider/index.html b/cssMemeSlider/index.html
@@ -10,5 +10,26 @@
   <link rel="stylesheet" href="styles/adaptive.css">
 </head>
 <body>
-
+  <div class="slider-container">
+    <input id="r1" type="radio" name="slider" checked>
+    <label id="l1" for="r1"></label>
+    <input id="r2" type="radio" name="slider">
+    <label id="l2" for="r2"></label>
+    <input id="r3" type="radio" name="slider">
+    <label id="l3" for="r3"></label>
+    <input id="r4" type="radio" name="slider">
+    <label id="l4" for="r4"></label>
+    <div class="slider-texts">
+      <p class="t1">Нельзя просто взять и сделать пустой коммит</p>
+      <p class="t2">Ну ты это, чего смотришь, листай дальше</p>
+      <p class="t3">Я, наконец-то закончивший делать library-3</p>
+      <p class="t4">Когда сказали, что надо сделать слайдер только на CSS</p>
+    </div>
+    <div class="slider-images">
+      <img class="s1" src="..//cssMemeSlider/assets/images/slide-1.jpg">
+      <img class="s2" src="..//cssMemeSlider/assets/images/slide-2.jpg">
+      <img class="s3" src="..//cssMemeSlider/assets/images/slide-3.jpg">
+      <img class="s4" src="..//cssMemeSlider/assets/images/slide-4.jpg">
+    </div>
+  </div>
 </body>
diff --git 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;
+  }
+}
diff --git 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;
 }