Otabek996 · Otabek996 · Sep 15, 2023 · Sep 15, 2023 · Sep 15, 2023 · Sep 15, 2023
diff --git a/cssMemeSlider/img/img01.jpg b/cssMemeSlider/img/img01.jpg
diff --git a/cssMemeSlider/img/img02.jpg b/cssMemeSlider/img/img02.jpg
diff --git a/cssMemeSlider/img/img03.jpg b/cssMemeSlider/img/img03.jpg
diff --git a/cssMemeSlider/img/img04.png b/cssMemeSlider/img/img04.png
diff --git a/cssMemeSlider/index.html b/cssMemeSlider/index.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+    <!--==================== CSS ====================-->
+    <link rel="stylesheet" href="./style.css">
+
+    <title>CSS Meme Slider</title>
+</head>
+<body>
+    <section class="container">
+        <div class="slider-container">
+            <div class="slider-images">
+                <img id="imgOne" class="img img-active" src="./img/img01.jpg" alt="Image one">
+                <img id="imgTwo" class="img" src="./img/img02.jpg" alt="Image two">
+                <img id="imgThree" class="img" src="./img/img03.jpg" alt="Image three">
+                <img id="imgFour" class="img" src="./img/img04.png" alt="Image Four">
+            </div>
+
+            <div class="slider-card">
+                <div class="slider-text">
+                    <p id="text" class="text">Project start</p>
+                </div>
+
+                <div class="slider-dots">
+                    <div id="btnOne" class="dot-box active">
+                        <div class="dot"></div>
+                    </div>
+                    <div id="btnTwo" class="dot-box">
+                        <div class="dot"></div>
+                    </div>
+                    <div id="btnThree" class="dot-box">
+                        <div class="dot"></div>
+                    </div>
+                    <div id="btnFour" class="dot-box">
+                        <div class="dot"></div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!--==================== CSS ====================-->
+    <script src="./main.js"></script>
+</body>
+</html>
diff --git a/cssMemeSlider/main.js b/cssMemeSlider/main.js
@@ -0,0 +1,66 @@
+// ==================== SLIDER ====================
+const imgOne = document.getElementById("imgOne");
+const imgTwo = document.getElementById("imgTwo");
+const imgThree = document.getElementById("imgThree");
+const imgFour = document.getElementById("imgFour");
+const text = document.getElementById("text");
+
+const btnOne = document.getElementById("btnOne");
+const btnTwo = document.getElementById("btnTwo");
+const btnThree = document.getElementById("btnThree");
+const btnFour = document.getElementById("btnFour");
+
+const textImage = {
+    imgOne: "Project start",
+    imgTwo: "Night before deadline",
+    imgThree: "On deadline day",
+    imgFour: "We are ******"
+};
+
+const animateSwiping = [
+    { transform: "translateX(100%)" },
+    { transform: "translateX(0%)" },
+];
+
+const animateTiming = {
+    duration: 350,
+    iterations: 1
+};
+
+const changeImg = (img, btn) => {
+    if (imgOne.classList.value == "img img-active") {
+        imgOne.classList.remove("img-active");
+        btnOne.classList.remove("active");
+    };
+    if (imgTwo.classList.value == "img img-active") {
+        imgTwo.classList.remove("img-active");
+        btnTwo.classList.remove("active");
+    };
+    if (imgThree.classList.value == "img img-active") {
+        imgThree.classList.remove("img-active");
+        btnThree.classList.remove("active");
+    };
+    if (imgFour.classList.value == "img img-active") {
+        imgFour.classList.remove("img-active");
+        btnFour.classList.remove("active");
+    };
+
+    img.classList.add("img-active");
+    img.animate(animateSwiping, animateTiming);
+    btn.classList.add("active");
+    text.innerText = textImage[img.id];
+    text.animate(animateSwiping, animateTiming);
+}
+
+btnOne.addEventListener("click", () => {
+    changeImg(imgOne, btnOne);
+})
+btnTwo.addEventListener("click", () => {
+    changeImg(imgTwo, btnTwo);
+})
+btnThree.addEventListener("click", () => {
+    changeImg(imgThree, btnThree);
+})
+btnFour.addEventListener("click", () => {
+    changeImg(imgFour, btnFour);
+})
diff --git a/cssMemeSlider/style.css b/cssMemeSlider/style.css
@@ -0,0 +1,145 @@
+/*=============== BASE ===============*/
+* {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+}
+
+body {
+    background: rgb(58, 58, 58);
+}
+
+/*=============== SLIDER ===============*/
+.slider-container {
+    margin: 3.125rem;
+}
+
+.slider-images {
+    display: flex;
+    align-items: center;
+    overflow-x: hidden;
+}
+
+.img {
+    width: 100%;
+    height: 43.75rem;
+    border-radius: 0.625rem;
+    display: none;
+}
+
+.img-active {
+    display: block;
+}
+
+.slider-card {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 3.125rem 0;
+}
+
+.text {
+    font-family: Arial, sans-serif;
+    font-size: 1.875rem;
+    line-height: 2.5rem;
+    color: white;
+}
+
+.slider-dots {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+}
+
+.dot-box {
+    padding: 0.5rem;
+    cursor: pointer;
+    border-radius: 50%;
+}
+
+.dot {
+    width: 1.25rem;
+    height: 1.25rem;
+    background: rgba(105, 105, 240, 0.5);
+    border: 0.125rem solid rgba(105, 105, 240, 0.5);
+    border-radius: 50%;
+    transition: all 0.3s;
+}
+
+.dot-box:hover .dot {
+    background: white;
+}
+
+.dot-box.active .dot {
+    background: rgb(58, 58, 58);
+}
+
+.dot-box.active:hover .dot {
+    border-color: white;
+}
+
+
+@media screen and (max-width: 1155px) {
+    .slider-images img {
+        height: 31.25rem;
+    }
+}
+
+@media screen and (max-width: 900px) {
+    .slider-images img {
+        height: 25rem;
+    }
+}
+
+@media screen and (max-width: 750px) {
+    .slider-container {
+        margin: 1.875rem;
+    }
+
+    .slider-images img {
+        height: 18.75rem;
+    }
+
+    .slider-card {
+        flex-direction: column-reverse;
+        gap: 1.563rem;
+    }
+
+    .slider-text {
+        width: 100%;
+        text-align: start;
+    }
+}
+
+@media screen and (max-width: 430px) {
+    .slider-container {
+        margin: 1.25rem;
+    }
+
+    .slider-images img {
+        height: 14.38rem;
+    }
+
+    .text {
+        font-size: 1.563rem;
+    }
+}
+
+@media screen and (max-width: 370px) {
+    .slider-container {
+        margin: 0.94rem;
+    }
+
+    .slider-images img {
+        height: 12.5rem;
+    }
+
+    .text {
+        font-size: 1.375rem;
+    }
+
+    .dot {
+        width: 1rem;
+        height: 1rem;
+    }
+}
diff --git a/index.html b/index.html
diff --git a/style.css b/style.css