diff --git a/100_projects/93-stranger-things-cards/images/bg-dustin.png b/100_projects/93-stranger-things-cards/images/bg-dustin.png new file mode 100644 index 0000000..a24fe9c Binary files /dev/null and b/100_projects/93-stranger-things-cards/images/bg-dustin.png differ diff --git a/100_projects/93-stranger-things-cards/images/bg-eddie.png b/100_projects/93-stranger-things-cards/images/bg-eddie.png new file mode 100644 index 0000000..b38965a Binary files /dev/null and b/100_projects/93-stranger-things-cards/images/bg-eddie.png differ diff --git a/100_projects/93-stranger-things-cards/images/bg-eleven.png b/100_projects/93-stranger-things-cards/images/bg-eleven.png new file mode 100644 index 0000000..5579713 Binary files /dev/null and b/100_projects/93-stranger-things-cards/images/bg-eleven.png differ diff --git a/100_projects/93-stranger-things-cards/images/bg-hopper.png b/100_projects/93-stranger-things-cards/images/bg-hopper.png new file mode 100644 index 0000000..379bd9f Binary files /dev/null and b/100_projects/93-stranger-things-cards/images/bg-hopper.png differ diff --git a/100_projects/93-stranger-things-cards/images/bg-vecna.png b/100_projects/93-stranger-things-cards/images/bg-vecna.png new file mode 100644 index 0000000..b9b3351 Binary files /dev/null and b/100_projects/93-stranger-things-cards/images/bg-vecna.png differ diff --git a/100_projects/93-stranger-things-cards/images/dustin.png b/100_projects/93-stranger-things-cards/images/dustin.png new file mode 100644 index 0000000..ba1815a Binary files /dev/null and b/100_projects/93-stranger-things-cards/images/dustin.png differ diff --git a/100_projects/93-stranger-things-cards/images/eddie.png b/100_projects/93-stranger-things-cards/images/eddie.png new file mode 100644 index 0000000..c033a49 Binary files /dev/null and b/100_projects/93-stranger-things-cards/images/eddie.png differ diff --git a/100_projects/93-stranger-things-cards/images/eleven.png b/100_projects/93-stranger-things-cards/images/eleven.png new file mode 100644 index 0000000..b5a1f31 Binary files /dev/null and b/100_projects/93-stranger-things-cards/images/eleven.png differ diff --git a/100_projects/93-stranger-things-cards/images/hopper.png b/100_projects/93-stranger-things-cards/images/hopper.png new file mode 100644 index 0000000..a905a24 Binary files /dev/null and b/100_projects/93-stranger-things-cards/images/hopper.png differ diff --git a/100_projects/93-stranger-things-cards/images/vecna.png b/100_projects/93-stranger-things-cards/images/vecna.png new file mode 100644 index 0000000..6811f13 Binary files /dev/null and b/100_projects/93-stranger-things-cards/images/vecna.png differ diff --git a/100_projects/93-stranger-things-cards/index.html b/100_projects/93-stranger-things-cards/index.html new file mode 100644 index 0000000..9070452 --- /dev/null +++ b/100_projects/93-stranger-things-cards/index.html @@ -0,0 +1,75 @@ + + + + + document + + + + +
+
+
+
+
+ +
+
+
Vecna
+
It's time.
+
+
+
+
+
+
+
+ +
+
+
Eleven
+
My hero is my father.
+
+
+
+
+
+
+
+ +
+
+
Hopper
+
Mornings are for coffee and contemplation
+
+
+
+
+
+
+
+ +
+
+
Eddie
+
Welcome to Hellfire.
+
+
+
+
+
+
+
+ +
+
+
Dustin
+
Sea Sea BOOM!
+
+
+
+
+ + + + \ No newline at end of file diff --git a/100_projects/93-stranger-things-cards/script.js b/100_projects/93-stranger-things-cards/script.js new file mode 100644 index 0000000..08e9d9b --- /dev/null +++ b/100_projects/93-stranger-things-cards/script.js @@ -0,0 +1,4 @@ +$(".option").click(function () { + $(".option").removeClass("active"); + $(this).addClass("active"); +}); diff --git a/100_projects/93-stranger-things-cards/style.css b/100_projects/93-stranger-things-cards/style.css new file mode 100644 index 0000000..e569e28 --- /dev/null +++ b/100_projects/93-stranger-things-cards/style.css @@ -0,0 +1,186 @@ +*{ + margin:0; + padding: 0; + box-sizing: border-box; +} +body { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + overflow: hidden; + height: 100vh; + font-family: "Roboto", sans-serif; + transition: 0.25s; + background: #212123; + color: white; +} +body .options { + display: flex; + flex-direction: row; + align-items: stretch; + overflow: hidden; + min-width: 600px; + max-width: 900px; + width: calc(100% - 100px); + height: 400px; +} +/* @media screen and (max-width: 776px) { + body .options { + width: 50px; + } + body .options .option:nth-child(5) { + display: none; + } +} +@media screen and (max-width: 638px) { + body .options { + min-width: 440px; + } + body .options .option:nth-child(4) { + display: none; + } +} +@media screen and (max-width: 558px) { + body .options { + min-width: 360px; + } + body .options .option:nth-child(3) { + display: none; + } +} +@media screen and (max-width: 478px) { + body .options { + min-width: 280px; + } + body .options .option:nth-child(2) { + display: none; + } +} */ +body .options .option { + position: relative; + overflow: hidden; + min-width: 60px; + margin: 10px; + background: var(--optionBackground, var(--defaultBackground, #e6e9ed)); + background-size: auto 120%; + background-position: center; + cursor: pointer; + transition: 0.5s cubic-bezier(0.05, 0.61, 0.41, 0.95); +} +body .options .option:nth-child(1) { + --defaultBackground: #ed5565; +} +body .options .option:nth-child(2) { + --defaultBackground: #fc6e51; +} +body .options .option:nth-child(3) { + --defaultBackground: #ffce54; +} +body .options .option:nth-child(4) { + --defaultBackground: #2ecc71; +} +body .options .option:nth-child(5) { + --defaultBackground: #5d9cec; +} +body .options .option:nth-child(6) { + --defaultBackground: #ac92ec; +} +body .options .option.active { + flex-grow: 10000; + transform: scale(1); + max-width: 600px; + margin: 0px; + border-radius: 40px; + background-size: auto 100%; +} +body .options .option.active .shadow { + box-shadow: inset 0 -120px 120px -120px black, + inset 0 -120px 120px -100px black; +} +body .options .option.active .label { + bottom: 20px; + left: 20px; +} +body .options .option.active .label .info > div { + left: 0px; + opacity: 1; +} +body .options .option:not(.active) { + flex-grow: 1; + border-radius: 30px; +} +body .options .option:not(.active) .shadow { + bottom: -40px; + box-shadow: inset 0 -120px 0px -120px black, inset 0 -120px 0px -100px black; +} +body .options .option:not(.active) .label { + bottom: 10px; + left: 10px; +} +body .options .option:not(.active) .label .info > div { + left: 20px; + opacity: 0; +} +body .options .option .shadow { + position: absolute; + bottom: 0px; + left: 0px; + right: 0px; + height: 120px; + transition: 0.5s cubic-bezier(0.05, 0.61, 0.41, 0.95); +} +body .options .option .label { + display: flex; + position: absolute; + right: 0px; + height: 40px; + transition: 0.5s cubic-bezier(0.05, 0.61, 0.41, 0.95); +} +body .options .option .label .icon { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + min-width: 40px; + max-width: 40px; + height: 40px; + border-radius: 100%; + background-color: white; + color: var(--defaultBackground); +} +body .options .option .label .icon img { + min-width: 20px; + max-width: 20px; +} +body .options .option .label .icon { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + min-width: 40px; + max-width: 40px; + height: 40px; + border-radius: 100%; + background-color: #212123; + color: var(--defaultBackground); +} +body .options .option .label .info { + display: flex; + flex-direction: column; + justify-content: center; + margin-left: 10px; + color: white; + white-space: pre; +} +body .options .option .label .info > div { + position: relative; + transition: 0.5s cubic-bezier(0.05, 0.61, 0.41, 0.95), opacity 0.5s ease-out; +} +body .options .option .label .info .main { + font-weight: bold; + font-size: 1.2rem; +} +body .options .option .label .info .sub { + transition-delay: 0.1s; +} \ No newline at end of file