CSS Meme Slider

README.md

@@ -0,0 +1 @@
+https://anastanei.github.io/cssMemeSlider/cssMemeSlider/index.html

cssMemeSlider/index.css

@@ -0,0 +1,283 @@
+:root {
+  --padding: 2rem;
+  --slider-width-mobile: calc(100vw - 4 * var(--padding));
+  --slider-width-desktop: 55vw;
+  --slider-width-max: 62.5rem;
+  --footer-width-mobile: calc(100vw - 2 * var(--padding));
+  --footer-width-desktop: calc(55vw + 4rem);
+  --footer-width-max: calc(62.5rem + 4rem);
+
+  --aspect-ratio: 0.6;
+  --slider-height-mobile: calc(var(--aspect-ratio) * var(--slider-width-mobile));
+  --slider-height-desktop: calc(var(--aspect-ratio) * var(--slider-width-desktop));
+  --slider-height-max: calc(var(--aspect-ratio) * var(--slider-width-max));
+
+
+  --red: #f21b18;
+  --yellow: #f8b746;
+  --blue: #1ab2f4;
+
+  --brand-primary: #B074E9;
+}
+
+html {
+  background-color: var(--brand-primary);
+}
+
+* {
+  box-sizing: border-box;
+}
+
+h2 {
+  margin: 0;
+  font-size: clamp(1.2rem, 3vw,3rem);
+}
+
+main {
+  min-height: 100vh;
+  margin: 0 auto;
+  padding: var(--padding) 0;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.container {
+  padding: 0 var(--padding);
+}
+
+.wrapper {
+  margin-bottom: 1rem;
+  padding-top: var(--padding);
+  padding-bottom: var(--padding);
+  box-shadow: 0 0.625rem 1.25rem rgba(0, 0, 0, 0.19), 0 0.375rem 0.375rem rgba(0, 0, 0, 0.23);
+  background-color: #F3F74D;
+  border-radius: 0.5rem;
+}
+
+.slider, .slide, .meme {
+  min-width: var(--slider-width-mobile);
+  max-width: var(--slider-width-mobile);
+
+  @media (min-width: 768px) {
+    min-width: var(--slider-width-desktop);
+    max-width: var(--slider-width-desktop);
+  }
+
+  @media (min-width: 1560px) {
+    min-width: var(--slider-width-max);
+    max-width: var(--slider-width-max);
+  }
+}
+
+.slider {
+  overflow: hidden;
+}
+
+.slides {
+  display: flex;
+  transition: all 1s ease-out;
+}
+
+.slide {
+  height: var(--slider-height-mobile);
+  background-image: url('./images/meme-2.webp');
+  background-size: cover;
+  background-position-x: center;
+  border-radius: 0.5rem;
+
+
+  @media (min-width: 768px) {
+    height: var(--slider-height-desktop);
+  }
+
+  @media (min-width: 1560px) {
+    height: var(--slider-height-max);
+  }
+}
+
+.slide-1 {
+  background-image: url('./images/meme-1.webp');
+}
+
+.slide-2 {
+  background-image: url('./images/meme-2.webp');
+}
+
+.slide-3 {
+  background-image: url('./images/meme-3.webp');
+}
+
+.slide-4 {
+  background-image: url('./images/meme-4.webp');
+}
+
+.caption-wrapper {
+  width: 100%;
+}
+
+.caption {
+  opacity: 0;
+  width: 0;
+  height: 0;
+  transition: opacity 1s ease-in-out;
+  overflow: hidden;
+}
+
+body:has(.control-1:checked) .footer .caption-wrapper .captions .caption-1,
+body:has(.control-2:checked) .footer .caption-wrapper .captions .caption-2,
+body:has(.control-3:checked) .footer .caption-wrapper .captions .caption-3,
+body:has(.control-4:checked) .footer .caption-wrapper .captions .caption-4 {
+  height: auto;
+  width: 100%;
+  opacity: 100%;
+  transition: opacity 1s ease-in-out;
+}
+
+.footer {
+  width: var(--footer-width-mobile);
+  height: clamp(9rem, 15vw, 13rem);
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+  gap: 2rem;
+  background-color: white;
+  box-shadow: 0 0.625rem 1.25rem rgba(0, 0, 0, 0.19), 0  0.375rem 0.375rem rgba(0, 0, 0, 0.23);
+
+
+  @media (min-width: 768px) {
+    display: flex;
+    flex-direction: row-reverse;
+    justify-content: space-between;
+    align-items: flex-start;
+    max-width: var(--footer-width-desktop);
+  }
+
+
+  @media (min-width: 1560px) {
+    display: flex;
+    flex-direction: row-reverse;
+    justify-content: space-between;
+    align-items: flex-start;
+    max-width: var(--footer-width-max);
+  }
+}
+
+input[type='radio'] {
+  display: none;
+}
+
+.controls {
+  width: fit-content;
+  margin: 0 auto 1rem;
+  display: flex;
+
+  @media (min-width: 768px) {
+    margin: 0;
+  }
+}
+
+.label {
+  width: 2rem;
+  height: 2rem;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: background-color 0.3s ease-out;
+  cursor: pointer;
+
+
+  @media (min-width: 1280px) {
+    width: 3rem;
+    height: 3rem;
+  }
+}
+
+.label span {
+  display: block;
+  width: 1rem;
+  height: 1rem;
+  border: none;
+  border-radius: 50%;
+
+
+  @media (min-width: 1280px) {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+}
+
+.label:active {
+  background-color: black;
+  outline: none;
+}
+
+@media (hover: hover) {
+  .label-1:hover,
+  .label-4:hover {
+    background-color: rgba(241, 26, 22, 0.5);
+  }
+}
+
+@media (hover: hover) {
+  .label-2:hover {
+    background-color: rgba(26, 178, 244, 0.5);
+  }
+}
+
+@media (hover: hover) {
+  .label-3:hover {
+    background-color: rgba(248, 183, 70, 0.5);
+  }
+}
+
+.label-1:active, .label-4:active {
+  background-color: var(--red);
+}
+
+.label-2:active {
+  background-color: var(--blue);
+}
+
+.label-3:active {
+  background-color: var(--yellow);
+}
+
+.label-1 span, .label-4 span{
+  background-color: var(--red);
+  outline: 0.2rem solid var(--red);
+}
+
+.label-2 span {
+  background-color: var(--blue);
+  outline: 0.2rem solid var(--blue);
+}
+
+.label-3 span {
+  background-color: var(--yellow);
+  outline: 0.2rem solid var(--yellow);
+}
+
+body:has(.control-1:checked) .footer .controls .label-1 span, 
+body:has(.control-2:checked) .footer .controls .label-2 span, 
+body:has(.control-3:checked) .footer .controls .label-3 span, 
+body:has(.control-4:checked) .footer .controls .label-4 span {
+  background-color: transparent;
+}
+
+body:has(.control-1:checked) .slides {
+  transform: translateX(0);
+}
+
+body:has(.control-2:checked) .slides {
+  transform: translateX(-100%);
+}
+
+body:has(.control-3:checked) .slides {
+  transform: translateX(-200%);
+}
+
+body:has(.control-4:checked) .slides {
+  transform: translateX(-300%);
+}

cssMemeSlider/index.html

@@ -1,8 +1,6 @@
 <!DOCTYPE html>
 <html lang="en">
 
-</html>
-
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -13,4 +11,52 @@
 </head>
 
 <body>
-</body>
+  <main class="main">
+    <div class="wrapper container">
+      <div class="slider">
+        <div class="slides">
+          <div class="slide slide-1">
+          </div>
+          <div class="slide slide-2">
+          </div>
+          <div class="slide slide-3">
+          </div>
+          <div class="slide slide-4">
+          </div>
+        </div>
+      </div>
+    </div>
+    <footer class="footer container">
+      <div class="controls">
+        <label class="label label-1" for="control-1">
+          <span></span>
+        </label>
+        <label class="label label-2" for="control-2">
+          <span></span>
+        </label>
+        <label class="label label-3" for="control-3">
+          <span></span>
+        </label>
+        <label class="label label-4" for="control-4">
+          <span></span>
+        </label>
+      </div>
+      <div class="caption-wrapper">
+        <div class="captions">
+          <h2 class="caption caption-1">Who is&nbsp;FICA and why is&nbsp;he&nbsp;taking all my&nbsp;money?</h2>
+          <h2 class="caption caption-2">They don&rsquo;t know that we&nbsp;know they know we&nbsp;know.</h2>
+          <h2 class="caption caption-3">I&nbsp;wish I&nbsp;could, but&nbsp;I don&rsquo;t want&nbsp;to.</h2>
+          <h2 class="caption caption-4">So&nbsp;it&nbsp;seems like this internet thing is&nbsp;here to&nbsp;stay, huh?
+          </h2>
+        </div>
+      </div>
+    </footer>
+
+    <input class="control control-1" id="control-1" name="slider" type="radio" checked>
+    <input class="control control-2" id="control-2" name="slider" type="radio">
+    <input class="control control-3" id="control-3" name="slider" type="radio">
+    <input class="control control-4" id="control-4" name="slider" type="radio">
+  </main>
+</body>
+
+</html>