feat: add image slider (Sun, Sep 08, 2024 10:07:12 PM)

anastanei · Sep 8, 2024 · eb27e43 · eb27e43
1 parent ab9f425
commit eb27e43
Show file tree

Hide file tree

Showing 8 changed files with 178 additions and 3 deletions.
diff --git a/.DS_Store b/.DS_Store
diff --git a/cssMemeSlider/.DS_Store b/cssMemeSlider/.DS_Store
diff --git a/cssMemeSlider/images/.DS_Store b/cssMemeSlider/images/.DS_Store
diff --git a/cssMemeSlider/images/meme-1.avif b/cssMemeSlider/images/meme-1.avif
diff --git a/cssMemeSlider/images/meme-1.jpg b/cssMemeSlider/images/meme-1.jpg
diff --git a/cssMemeSlider/images/meme-1.webp b/cssMemeSlider/images/meme-1.webp
diff --git a/cssMemeSlider/index.css b/cssMemeSlider/index.css
@@ -0,0 +1,137 @@
+:root {
+  --padding: 2rem;
+  --slider-width-mobile: calc(100vw - 4 * var(--padding));
+  --slider-width-desktop: 70vw;
+  --footer-width-mobile: calc(100vw - 2 * var(--padding));
+  --footer-width-desktop: calc(70vw + 4rem);
+}
+
+html {
+  background-color: #B074E9;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+h2 {
+  margin: 0;
+}
+
+main {
+  /* max-width: 80%; */
+  min-height: 100vh;
+  /* width: 100vw; */
+  margin: 0 auto;
+  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 {
+  width: var(--slider-width-mobile);
+  @media (min-width: 768px) {
+    max-width: var(--slider-width-desktop);
+  }
+}
+
+.slider {
+  overflow: hidden;
+}
+
+.slides {
+  display: flex;
+
+  transition: all 1s ease-out;
+}
+
+.slide {
+}
+
+.meme {
+  border-radius: 0.5rem;
+}
+
+.footer {
+  width: var(--footer-width-mobile);
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+  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;
+    /* flex-direction: column;  */
+    max-width: var(--footer-width-desktop);
+  }
+}
+
+input[type='radio'] {
+  display: none;
+}
+
+.controls {
+  width: fit-content;
+  margin: 0 auto;
+  display: flex;
+
+  @media (min-width: 768px) {
+    margin: 0;
+  }
+}
+
+.label {
+  display: block;
+  width: 1rem;
+  height: 1rem;
+  border: none;
+  border-radius: 50%;
+}
+
+.label-1, .label-4 {
+  background-color: #f11a16;
+}
+
+.label-2 {
+  background-color: #1ab2f4;
+}
+
+.label-3 {
+  background-color: #f8b746;
+}
+
+
+.control-1:checked~.slides {
+  transform: translateX(0);
+}
+
+.control-2:checked~.slides {
+  transform: translateX(-100%);
+
+}
+
+.control-3:checked~.slides {
+  transform: translateX(-200%);
+}
+
+.control-4:checked~.slides {
+  transform: translateX(-300%);
+}
diff --git a/cssMemeSlider/index.html b/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,44 @@
 </head>
 
 <body>
-</body>
+  <main class="main">
+    <div class="wrapper container">
+      <div class="slider">
+        <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">
+        <div class="slides">
+          <div class="slide">
+            <img class="meme" src="./images/meme-1.webp" alt="" width="100">
+          </div>
+          <div class="slide">
+            <img class="meme" src="./images/meme-1.webp" alt="" width="100">
+          </div>
+          <div class="slide">
+            <img class="meme" src="./images/meme-1.webp" alt="" width="100">
+          </div>
+          <div class="slide">
+            <img class="meme" src="./images/meme-1.webp" alt="" width="100">
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="footer container">
+      <div class="controls">
+        <label class="label label-1" for="control-1"></label>
+        <label class="label label-2" for="control-2"></label>
+        <label class="label label-3" for="control-3"></label>
+        <label class="label label-4" for="control-4"></label>
+      </div>
+      <div class="captions">
+        <h2 class="caption caption-1">Binya</h2>
+        <h2 class="caption caption-2">Binya</h2>
+        <h2 class="caption caption-3">Binya</h2>
+        <h2 class="caption caption-4">Binya</h2>
+      </div>
+    </div>
+  </main>
+</body>
+
+</html>