diff --git a/cssMemeSlider/img/img01.jpg b/cssMemeSlider/img/img01.jpg
new file mode 100644
index 0000000..aea1f93
Binary files /dev/null and b/cssMemeSlider/img/img01.jpg differ
diff --git a/cssMemeSlider/img/img02.jpg b/cssMemeSlider/img/img02.jpg
new file mode 100644
index 0000000..be2d627
Binary files /dev/null and b/cssMemeSlider/img/img02.jpg differ
diff --git a/cssMemeSlider/img/img03.jpg b/cssMemeSlider/img/img03.jpg
new file mode 100644
index 0000000..d5e1e01
Binary files /dev/null and b/cssMemeSlider/img/img03.jpg differ
diff --git a/cssMemeSlider/img/img04.png b/cssMemeSlider/img/img04.png
new file mode 100644
index 0000000..96f654b
Binary files /dev/null and b/cssMemeSlider/img/img04.png differ
diff --git a/cssMemeSlider/index.html b/cssMemeSlider/index.html
new file mode 100644
index 0000000..fef9a5e
--- /dev/null
+++ b/cssMemeSlider/index.html
@@ -0,0 +1,48 @@
+
+
+
+
+
+
+
+
+
+ CSS Meme Slider
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/cssMemeSlider/main.js b/cssMemeSlider/main.js
new file mode 100644
index 0000000..306e9dc
--- /dev/null
+++ 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
new file mode 100644
index 0000000..1eb5ee3
--- /dev/null
+++ 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
deleted file mode 100644
index ff7bb7b..0000000
--- a/index.html
+++ /dev/null
@@ -1,15 +0,0 @@
-
-
-
-
-
-
-
-
-
- CSS Meme Slider
-
-
-
-
-
\ No newline at end of file
diff --git a/style.css b/style.css
deleted file mode 100644
index b4a559d..0000000
--- a/style.css
+++ /dev/null
@@ -1,6 +0,0 @@
-/*=============== BASE ===============*/
-* {
- box-sizing: border-box;
- padding: 0;
- margin: 0;
-}
\ No newline at end of file
+ 
+ 
+ 
+