diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..b3bd4f7 --- /dev/null +++ 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 \ No newline at end of file diff --git a/cssMemeSlider/assets/meme-code.png b/cssMemeSlider/assets/meme-code.png new file mode 100644 index 0000000..7a1def9 Binary files /dev/null and b/cssMemeSlider/assets/meme-code.png differ diff --git a/cssMemeSlider/assets/meme-github-resume.png b/cssMemeSlider/assets/meme-github-resume.png new file mode 100644 index 0000000..9925f4c Binary files /dev/null and b/cssMemeSlider/assets/meme-github-resume.png differ diff --git a/cssMemeSlider/assets/meme-gitignore.png b/cssMemeSlider/assets/meme-gitignore.png new file mode 100644 index 0000000..6be1377 Binary files /dev/null and b/cssMemeSlider/assets/meme-gitignore.png differ diff --git a/cssMemeSlider/assets/meme-pp.png b/cssMemeSlider/assets/meme-pp.png new file mode 100644 index 0000000..cea562a Binary files /dev/null and b/cssMemeSlider/assets/meme-pp.png differ diff --git a/cssMemeSlider/index.html b/cssMemeSlider/index.html new file mode 100644 index 0000000..72a5e72 --- /dev/null +++ b/cssMemeSlider/index.html @@ -0,0 +1,50 @@ + + + + + + CSS Meme Slider + + + + +
+ + + + +
+
+ meme-1 + meme-2 + meme-3 + meme-4 +
+
+
+
+
+ + + + +
+
+
+

Check out my GitHub, I have some amazing projects there! My projects:

+

But what if I add .gitignore inside the .gitignore file?

+

After watching another "CSS in 15 minutes" video on YouTube

+

Github users: Thanks for the fork, man.

+
+
+
+ + \ No newline at end of file diff --git a/cssMemeSlider/style.css b/cssMemeSlider/style.css new file mode 100644 index 0000000..e5c2c60 --- /dev/null +++ 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%; + } +} \ No newline at end of file