diff --git a/cssMemSlider/img/Slide-1.jpg b/cssMemSlider/img/Slide-1.jpg
new file mode 100644
index 0000000..bf2a8b7
Binary files /dev/null and b/cssMemSlider/img/Slide-1.jpg differ
diff --git a/cssMemSlider/img/Slide-2.jpg b/cssMemSlider/img/Slide-2.jpg
new file mode 100644
index 0000000..33df7f8
Binary files /dev/null and b/cssMemSlider/img/Slide-2.jpg differ
diff --git a/cssMemSlider/img/Slide-3.jpg b/cssMemSlider/img/Slide-3.jpg
new file mode 100644
index 0000000..ee41666
Binary files /dev/null and b/cssMemSlider/img/Slide-3.jpg differ
diff --git a/cssMemSlider/img/Slide-4.jpg b/cssMemSlider/img/Slide-4.jpg
new file mode 100644
index 0000000..fe5401c
Binary files /dev/null and b/cssMemSlider/img/Slide-4.jpg differ
diff --git a/cssMemSlider/img/Slide-5.jpg b/cssMemSlider/img/Slide-5.jpg
new file mode 100644
index 0000000..1b7ff32
Binary files /dev/null and b/cssMemSlider/img/Slide-5.jpg differ
diff --git a/cssMemSlider/index.html b/cssMemSlider/index.html
new file mode 100644
index 0000000..b042bb5
--- /dev/null
+++ b/cssMemSlider/index.html
@@ -0,0 +1,53 @@
+
+
+
+
+
+ CSS Mem Slider
+
+
+
+
+ CSS Mem Slider
+
+
+
+
+
\ No newline at end of file
diff --git a/cssMemSlider/style.css b/cssMemSlider/style.css
new file mode 100644
index 0000000..4391cf6
--- /dev/null
+++ 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;
+ }
+}
+ 
+ 
+ 
+ 
+