diff --git a/100_projects/93-stranger-things-cards/images/bg-dustin.png b/100_projects/93-stranger-things-cards/images/bg-dustin.png deleted file mode 100644 index a24fe9c..0000000 Binary files a/100_projects/93-stranger-things-cards/images/bg-dustin.png and /dev/null 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 deleted file mode 100644 index b38965a..0000000 Binary files a/100_projects/93-stranger-things-cards/images/bg-eddie.png and /dev/null 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 deleted file mode 100644 index 5579713..0000000 Binary files a/100_projects/93-stranger-things-cards/images/bg-eleven.png and /dev/null 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 deleted file mode 100644 index 379bd9f..0000000 Binary files a/100_projects/93-stranger-things-cards/images/bg-hopper.png and /dev/null 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 deleted file mode 100644 index b9b3351..0000000 Binary files a/100_projects/93-stranger-things-cards/images/bg-vecna.png and /dev/null differ diff --git a/100_projects/93-stranger-things-cards/images/dustin.png b/100_projects/93-stranger-things-cards/images/dustin.png deleted file mode 100644 index ba1815a..0000000 Binary files a/100_projects/93-stranger-things-cards/images/dustin.png and /dev/null differ diff --git a/100_projects/93-stranger-things-cards/images/eddie.png b/100_projects/93-stranger-things-cards/images/eddie.png deleted file mode 100644 index c033a49..0000000 Binary files a/100_projects/93-stranger-things-cards/images/eddie.png and /dev/null differ diff --git a/100_projects/93-stranger-things-cards/images/eleven.png b/100_projects/93-stranger-things-cards/images/eleven.png deleted file mode 100644 index b5a1f31..0000000 Binary files a/100_projects/93-stranger-things-cards/images/eleven.png and /dev/null differ diff --git a/100_projects/93-stranger-things-cards/images/hopper.png b/100_projects/93-stranger-things-cards/images/hopper.png deleted file mode 100644 index a905a24..0000000 Binary files a/100_projects/93-stranger-things-cards/images/hopper.png and /dev/null differ diff --git a/100_projects/93-stranger-things-cards/images/vecna.png b/100_projects/93-stranger-things-cards/images/vecna.png deleted file mode 100644 index 6811f13..0000000 Binary files a/100_projects/93-stranger-things-cards/images/vecna.png and /dev/null differ diff --git a/100_projects/93-stranger-things-cards/index.html b/100_projects/93-stranger-things-cards/index.html deleted file mode 100644 index 9070452..0000000 --- a/100_projects/93-stranger-things-cards/index.html +++ /dev/null @@ -1,75 +0,0 @@ - - - - - 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 deleted file mode 100644 index 08e9d9b..0000000 --- a/100_projects/93-stranger-things-cards/script.js +++ /dev/null @@ -1,4 +0,0 @@ -$(".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 deleted file mode 100644 index e569e28..0000000 --- a/100_projects/93-stranger-things-cards/style.css +++ /dev/null @@ -1,186 +0,0 @@ -*{ - 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