dinara-n · dinara-n · May 16, 2022 · May 16, 2022 · May 16, 2022 · May 16, 2022
diff --git a/cssMemSlider/img/Slide-1.jpg b/cssMemSlider/img/Slide-1.jpg
diff --git a/cssMemSlider/img/Slide-2.jpg b/cssMemSlider/img/Slide-2.jpg
diff --git a/cssMemSlider/img/Slide-3.jpg b/cssMemSlider/img/Slide-3.jpg
diff --git a/cssMemSlider/img/Slide-4.jpg b/cssMemSlider/img/Slide-4.jpg
diff --git a/cssMemSlider/img/Slide-5.jpg b/cssMemSlider/img/Slide-5.jpg
diff --git a/cssMemSlider/index.html b/cssMemSlider/index.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>CSS Mem Slider</title>
+    <link rel="stylesheet" href="./style.css">
+</head>
+<body>
+    <main class="container">
+        <h1>CSS Mem Slider</h1>
+        <section class="slider">
+            <input class="radiobtn" type="radio" name="radio" id="radio-1" checked>
+            <input class="radiobtn" type="radio" name="radio" id="radio-2">
+            <input class="radiobtn" type="radio" name="radio" id="radio-3">
+            <input class="radiobtn" type="radio" name="radio" id="radio-4">
+            <input class="radiobtn" type="radio" name="radio" id="radio-5">
+            <ul class="slides">
+                <li class="slide slide-1"><img src="./img/Slide-1.jpg" alt="Слайд 1"></li>
+                <li class="slide slide-2"><img src="./img/Slide-2.jpg" alt="Слайд 2"></li>
+                <li class="slide slide-3"><img src="./img/Slide-3.jpg" alt="Слайд 3"></li>
+                <li class="slide slide-4"><img src="./img/Slide-4.jpg" alt="Слайд 4"></li>
+                <li class="slide slide-5"><img src="./img/Slide-5.jpg" alt="Слайд 5"></li>
+            </ul>
+            <ul class="captions">
+                <li class="caption caption-1">Relatives</li>
+                <li class="caption caption-2">It works</li>
+                <li class="caption caption-3">Procrastination</li>
+                <li class="caption caption-4">Iteration</li>
+                <li class="caption caption-5">What I really do</li>
+            </ul>
+            <ul class="labels">
+                <li>
+                    <label class="label label-1" for="radio-1"><span></span></label>
+                </li>
+                <li>
+                    <label class="label label-2" for="radio-2"><span></span></label>
+                </li>
+                <li>
+                    <label class="label label-3" for="radio-3"><span></span></label>
+                </li>
+                <li>
+                    <label class="label label-4" for="radio-4"><span></span></label>
+                </li>
+                <li>
+                    <label class="label label-5" for="radio-5"><span></span></label>
+                </li>
+            </ul>
+        </section>
+        <!-- <p class="footnote">*Disclaimer: the memes are not mine</p> -->
+    </main>
+</body>
+</html>
diff --git a/cssMemSlider/style.css b/cssMemSlider/style.css
@@ -0,0 +1,209 @@
+body {
+    margin: 0;
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+}
+
+ul {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}
+
+img {
+    display: block;
+    width: 100%;
+    height: auto;
+}
+
+.container {
+    width: 70vw;
+    margin: 1% auto;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    background-color: rgb(156, 41, 41);
+    border: 0.1rem solid black;
+    border-radius: 1vw;
+}
+
+h1 {
+    margin-top: 1rem;
+    margin-bottom: 1rem;
+    color: white;
+    text-shadow: 0 0 1rem white;
+}
+
+.slider {
+    width: 65vw;
+    display: grid;
+    grid-template-columns: 3fr 1fr;
+}
+
+.radiobtn {
+    display: none;
+}
+
+.slides {
+    margin-bottom: 1rem;
+    grid-column: 1 / 3;
+    grid-row: 1 / 2;
+    display: grid;
+    align-items: center;
+    justify-items: center;
+    background-color: black;
+    border-radius: 1vw;
+    overflow: hidden;
+}
+
+.slide {
+    grid-column: 1 / 2;
+    grid-row: 1 / 2;
+    opacity: 0;
+    transition: all 1.7s;
+}
+
+.captions {
+    margin-bottom: 1rem;
+    grid-column: 1 / 2;
+    grid-row: 2 / 3;
+    display: grid;
+}
+
+.caption {
+    grid-column: 1 / 2;
+    grid-row: 1 / 2;
+    opacity: 0;
+    font-size: 1.5rem;
+    letter-spacing: 0.3rem;
+    color: white;
+    transition: all 1s;
+}
+
+.labels {
+    grid-column: 2 / 3;
+    grid-row: 2 / 3;
+    display: flex;
+    justify-content: space-between;
+}
+
+.label {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 2rem;
+    height: 2rem;
+    border-radius: 50%;
+    cursor: pointer;
+}
+
+.label span {
+    width: 0.8rem;
+    height: 0.8rem;
+    flex: 0 0 auto;
+    border: 0.12rem solid black;
+    border-radius: 50%;
+}
+
+.label:hover span {
+    border: 0.12rem solid white;
+    background-color: white;
+}
+
+.label:active span {
+    border: 0.12rem solid white;
+    background-color: white;
+    transform: scale(0.8);
+}
+
+#radio-1:checked ~ .slides .slide-1 {
+    opacity: 1;
+}
+#radio-2:checked ~ .slides .slide-2 {
+    opacity: 1;
+}
+#radio-3:checked ~ .slides .slide-3 {
+    opacity: 1;
+}
+#radio-4:checked ~ .slides .slide-4 {
+    opacity: 1;
+}
+#radio-5:checked ~ .slides .slide-5 {
+    opacity: 1;
+}
+
+#radio-1:checked ~ .captions .caption-1 {
+    opacity: 1;
+}
+#radio-2:checked ~ .captions .caption-2 {
+    opacity: 1;
+}
+#radio-3:checked ~ .captions .caption-3 {
+    opacity: 1;
+}
+#radio-4:checked ~ .captions .caption-4 {
+    opacity: 1;
+}
+#radio-5:checked ~ .captions .caption-5 {
+    opacity: 1;
+}
+
+#radio-1:checked ~ .labels .label-1 span {
+    border: 0.12rem solid white;
+    background-color: white;
+    box-shadow: 0 0 1rem 0 white;
+}
+#radio-2:checked ~ .labels .label-2 span {
+    border: 0.12rem solid white;
+    background-color: white;
+    box-shadow: 0 0 1rem 0 white;
+}
+#radio-3:checked ~ .labels .label-3 span {
+    border: 0.12rem solid white;
+    background-color: white;
+    box-shadow: 0 0 1rem 0 white;
+}
+#radio-4:checked ~ .labels .label-4 span {
+    border: 0.12rem solid white;
+    background-color: white;
+    box-shadow: 0 0 1rem 0 white;
+}
+#radio-5:checked ~ .labels .label-5 span {
+    border: 0.12rem solid white;
+    background-color: white;
+    box-shadow: 0 0 1rem 0 white;
+}
+
+.footnote {
+    font-size: 0.8rem;
+    color: rgb(172, 170, 170);
+}
+
+@media screen and (max-width: 768px) {
+    h1 {
+        font-size: 1.5rem;
+    }
+
+    .container {
+        width: 90vw;
+    }
+
+    .slider {
+        width: 80vw;
+    }
+
+    .captions {
+        margin-top: 0.5rem;
+        grid-column: 1 / 3;
+        grid-row: 3 / 4;
+    }
+
+    .caption {
+        font-size: 1rem;
+    }
+
+    .labels {
+        grid-column: 1 / 3;
+        grid-row: 2 / 3;
+        justify-self: center;
+    }
+}