ann-sm · ann-sm · Sep 10, 2024 · Sep 12, 2024 · Sep 13, 2024 · Sep 13, 2024
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,106 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+*.lcov
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# TypeScript v1 declaration files
+typings/
+
+# TypeScript cache
+*.tsbuildinfo
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Microbundle cache
+.rpt2_cache/
+.rts2_cache_cjs/
+.rts2_cache_es/
+.rts2_cache_umd/
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+.env.test
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+
+# Next.js build output
+.next
+
+# Nuxt.js build / generate output
+.nuxt
+dist
+
+# Gatsby files
+.cache/
+# Comment in the public line in if your project uses Gatsby and *not* Next.js
+# https://nextjs.org/blog/next-9-1#public-directory-support
+# public
+
+# vuepress build output
+.vuepress/dist
+
+# Serverless directories
+.serverless/
+
+# FuseBox cache
+.fusebox/
+
+# DynamoDB Local files
+.dynamodb/
+
+# TernJS port file
+.tern-port
+
+.DS_Store
diff --git a/cssMemeSlider/assets/meme-code.png b/cssMemeSlider/assets/meme-code.png
diff --git a/cssMemeSlider/assets/meme-github-resume.png b/cssMemeSlider/assets/meme-github-resume.png
diff --git a/cssMemeSlider/assets/meme-gitignore.png b/cssMemeSlider/assets/meme-gitignore.png
diff --git a/cssMemeSlider/assets/meme-pp.png b/cssMemeSlider/assets/meme-pp.png
diff --git a/cssMemeSlider/index.html b/cssMemeSlider/index.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>CSS Meme Slider</title>
+    <link rel="stylesheet" href="style.css">
+    <link rel="icon" href="">
+</head>
+<body>
+        <div class="container">
+            <input type="radio" name="memes" id="radio-1" checked>
+            <input type="radio" name="memes" id="radio-2">
+            <input type="radio" name="memes" id="radio-3">
+            <input type="radio" name="memes" id="radio-4">
+            <div class="slider">
+                <div class="slider-wrapper">
+                    <img id="meme-1" src="assets/meme-github-resume.png" alt="meme-1">
+                    <img id="meme-2" src="assets/meme-gitignore.png" alt="meme-2">
+                    <img id="meme-3" src="assets/meme-pp.png" alt="meme-3">
+                    <img id="meme-4" src="assets/meme-code.png" alt="meme-4">
+                </div>
+            </div>
+            <div class="wrapper">
+                <div class="labels-wrapper">
+                    <div class="labels">
+                        <label for="radio-1" class="radio-label" id="radio-label-1">
+                            <span></span>
+                        </label>
+                        <label for="radio-2" class="radio-label" id="radio-label-2">
+                            <span></span>
+                        </label>
+                        <label for="radio-3" class="radio-label" id="radio-label-3">
+                            <span></span>
+                        </label>
+                        <label for="radio-4" class="radio-label" id="radio-label-4">
+                            <span></span>
+                        </label>
+                    </div>
+                </div>
+                <div class="caption-wrapper">
+                    <p id="meme-caption-1">Check out my GitHub, I have some amazing projects there! My projects:</p>
+                    <p id="meme-caption-2">But what if I add .gitignore inside the .gitignore file?</p>
+                    <p id="meme-caption-3">After watching another "CSS in 15 minutes" video on YouTube</p>
+                    <p id="meme-caption-4">Github users: Thanks for the fork, man.</p>
+                </div>
+            </div>
+    </div>
+</body>
+</html>
diff --git a/cssMemeSlider/style.css b/cssMemeSlider/style.css
@@ -0,0 +1,205 @@
+
+body {
+    margin: 0;
+    background-color: #25282a;
+    transition: all 1s;;
+}
+
+p {
+    color: white;
+    animation: change-caption 0.5s;
+    margin: 0;
+}
+
+.container {
+    padding: 2rem;
+    max-width: 45rem;
+    margin: auto;
+    margin-top: calc((100vh - 30rem) / 2);
+}
+
+.slider {
+    display: flex;
+    overflow: hidden;
+    aspect-ratio: 16 / 9;
+    border-radius: 0.5rem;
+}
+
+.slider-wrapper {
+    display: flex;
+    transition: transform 1s;
+}
+
+.wrapper {
+    display: flex;
+    flex-direction: row-reverse;
+    justify-content:space-between;
+    align-items: center;
+    margin-top: 1rem;
+}
+
+.labels-wrapper {
+    display: flex;
+    justify-content: flex-end;
+    width: 25%;
+}
+
+.labels {
+    display: flex;
+}
+
+.radio-label {
+    padding: 0.4rem;
+}
+
+.radio-label span{
+    display: block;
+    width: 0.5rem;
+    height: 0.5rem;
+    border-radius: 50%;
+    border: 1px solid #7faae8;
+    background-color: #7faae8;
+}
+
+.radio-label:hover {
+    cursor: pointer;
+}
+
+.radio-label:hover > span {
+    background-color: white;
+    border-color: white;
+}
+
+.radio-label span:hover {
+    background-color: white;
+    border-color: white;
+}
+
+.radio-label:active > span {
+    border-color: grey;
+}
+
+.caption-wrapper {
+    display: flex;
+    width: 75%;
+}
+
+
+/* SLIDER */
+#radio-1:checked ~ .slider .slider-wrapper{
+    transform: translateX(0);
+}
+
+#radio-2:checked ~ .slider .slider-wrapper{
+    transform: translateX(-25%);
+}
+
+#radio-3:checked ~ .slider .slider-wrapper{
+    transform: translateX(-50%);
+}
+
+#radio-4:checked ~ .slider .slider-wrapper{
+    transform: translateX(-75%);
+}
+
+/* CAPTIONS */
+#meme-caption-2,
+#meme-caption-3,
+#meme-caption-4 {
+    display: none;
+}
+
+/* Caption #1 */
+#radio-1:checked ~ .wrapper .caption-wrapper #meme-caption-1 {
+    display: block;
+}
+#radio-1:checked ~ .wrapper .caption-wrapper #meme-caption-2,
+#radio-1:checked ~ .wrapper .caption-wrapper #meme-caption-3,
+#radio-1:checked ~ .wrapper .caption-wrapper #meme-caption-4
+ {
+    display: none;
+}
+
+/* Caption #2 */
+#radio-2:checked ~ .wrapper .caption-wrapper #meme-caption-2 {
+    display: block;
+}
+#radio-2:checked ~ .wrapper .caption-wrapper #meme-caption-1,
+#radio-2:checked ~ .wrapper .caption-wrapper #meme-caption-3,
+#radio-2:checked ~ .wrapper .caption-wrapper #meme-caption-4
+ {
+    display: none;
+}
+
+/* Caption #3 */
+#radio-3:checked ~ .wrapper .caption-wrapper #meme-caption-3 {
+    display: block;
+}
+#radio-3:checked ~ .wrapper .caption-wrapper #meme-caption-1,
+#radio-3:checked ~ .wrapper .caption-wrapper #meme-caption-2,
+#radio-3:checked ~ .wrapper .caption-wrapper #meme-caption-4
+ {
+    display: none;
+}
+
+/* Caption #4 */
+#radio-4:checked ~ .wrapper .caption-wrapper #meme-caption-4 {
+    display: block;
+}
+#radio-4:checked ~ .wrapper .caption-wrapper #meme-caption-1,
+#radio-4:checked ~ .wrapper .caption-wrapper #meme-caption-2,
+#radio-4:checked ~ .wrapper .caption-wrapper #meme-caption-3
+ {
+    display: none;
+}
+
+/* RADIOBUTTONS */
+input {
+    display: none;
+}
+
+#radio-1:checked ~ .wrapper .labels-wrapper .labels #radio-label-1 span,
+#radio-2:checked ~ .wrapper .labels-wrapper .labels #radio-label-2 span,
+#radio-3:checked ~ .wrapper .labels-wrapper .labels #radio-label-3 span,
+#radio-4:checked ~ .wrapper .labels-wrapper .labels #radio-label-4 span
+ {
+    background-color: #25282a;
+}
+
+
+/* ANIMATION */
+
+@keyframes change-caption {
+    from {
+        transform: translateX(4rem);
+    }
+    to {
+        transform: translateX(0);
+    }
+}
+
+/* MEDIA */
+@media (max-width: 768px) {
+    .container {
+        margin-top: calc((100vh - 25rem) / 2);
+    }
+
+    .wrapper {
+        flex-direction: column;
+        margin-top: 0;
+    }
+
+    .labels-wrapper {
+        margin-top: 1rem;       
+        margin-bottom: 1rem;
+        width: 100%;
+    }
+
+    .labels {
+        margin: auto;
+    }
+
+    .caption-wrapper {
+        width: 100%;
+    }
+}