diff --git a/index.html b/index.html index 58cf2e1..5c0d9c8 100644 --- a/index.html +++ b/index.html @@ -22,6 +22,11 @@ +
@@ -31,7 +36,25 @@

-

Vegetable Dash!

+

+
    +
  • V
  • +
  • e
  • +
  • g
  • +
  • e
  • +
  • t
  • +
  • a
  • +
  • b
  • +
  • l
  • +
  • e
  • +
  • +
  • D
  • +
  • a
  • +
  • s
  • +
  • h
  • +
  • !
  • +
+

My newest and greatest JavaScript browser game! With all the high quality MS Paint images you could ever wish for, this game is simply fabulous! You can play the game here, or visit the GitHub repository here!

diff --git a/main.js b/main.js index 2c02e4b..eaaa298 100644 --- a/main.js +++ b/main.js @@ -39,4 +39,37 @@ function buttonVisiblility() { else { nextButton.style.opacity = "0"; } + where(); } + +function where() { + let meetIndicator = document.getElementById("meetIndicator"); + let vegIndicator = document.getElementById("vegetable-dashIndicator"); + let comingIndicator = document.getElementById("coming-soonIndicator"); + + if (pageLocation === "meet") { + meetIndicator.style.backgroundColor = "#262626"; + } + else { + meetIndicator.style.backgroundColor = "#d6d6d6"; + } + if (pageLocation === "vegetable-dash") { + vegIndicator.style.backgroundColor = "#262626"; + } + else { + vegIndicator.style.backgroundColor = "#d6d6d6"; + } + if (pageLocation === "coming-soon") { + comingIndicator.style.backgroundColor = "#262626"; + } + else { + comingIndicator.style.backgroundColor = "#d6d6d6"; + } +} + +// Like carousel show progress +// Transparent text moving background + +/* Links */ + +/* Should have nice hover that shows some content from link */ diff --git a/styles.css b/styles.css index 3b65bed..0e047f0 100644 --- a/styles.css +++ b/styles.css @@ -98,9 +98,35 @@ Common Classes } } -/* Links */ +/* Progress */ -/* Should have nice hover that shows some content from link */ +.progress { + position: fixed; + left: 0; + right: 0; + bottom: 75px; + display: flex; + justify-content: center; + align-items: center; + height: 0px; +} + +.progress li { + position: relative; + height: 25px; + width: 25px; + border-radius: 50%; + background-color: #d6d6d6; + color: #f9f9f9; + margin: 0 15px; + transition: 0.2s; + box-shadow: inset 2px 2px 10px #fff, + 0 0 2.5px #262626; +} + +#meetIndicator { + background-color: #262626; +} /*================================================== Landing @@ -196,53 +222,107 @@ Landing Vegetable Dash ==================================================*/ -/* Opening Animation */ - -.meet-vegetable { - -} -/* -.meet-vegetable { - border: 2px solid tomato; - background: none; - color: tomato; - padding: 20px 40px; - font-size: 25px; - text-transform: uppercase; - cursor: pointer; - transition: all 0.5s; - position: relative; - overflow: hidden; -} - -.meet-vegetable:hover { - color: #fff; -} - -.meet-vegetable:before { - content: ''; - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - background: tomato; - z-index: -1; - border-radius: 0 0 50% 50%; - height: 0%; - transition: all 0.8s; -} */ - -.meet-vegetable:hover:before { - height: 190%; -} - - /* General Information */ +.meet-vegetable { + +} + .about-vegetable { margin: 50px; font-size: 120%; + opacity: 0; + transform: scale(0); + transition: all 1s; + transition-delay: 2s; +} + +/* Opening Animation */ + +#vegetable-dash:hover .about-vegetable { + opacity: 1; + transform: scale(1); +} + +.space { + width: 10px; +} + +.smokey { + margin: 0; + padding: 0; + display: flex; + justify-content: center; +} + +.smokey li { + list-style: none; + transition: 1.5s; + transform: rotate(45deg) translateY(-200px); + opacity: 0; + filter: blur(50px); +} + +#vegetable-dash:hover li { + transform: rotate(0) translateY(0); + opacity: 1; + filter: blur(0); +} + +.smokey li:nth-child(2) { + transition-delay: .1s; +} + +.smokey li:nth-child(3) { + transition-delay: .2s; +} + +.smokey li:nth-child(4) { + transition-delay: .3s; +} + +.smokey li:nth-child(5) { + transition-delay: .4s; +} + +.smokey li:nth-child(6) { + transition-delay: .5s; +} + +.smokey li:nth-child(7) { + transition-delay: .6s; +} + +.smokey li:nth-child(8) { + transition-delay: .7s; +} + +.smokey li:nth-child(9) { + transition-delay: .8s; +} + +.smokey li:nth-child(10) { + transition-delay: .9s; +} + +.smokey li:nth-child(11) { + transition-delay: 1s; +} + +.smokey li:nth-child(12) { + transition-delay: 1.1s; +} + +.smokey li:nth-child(13) { + transition-delay: 1.2s; +} + +.smokey li:nth-child(14) { + transition-delay: 1.3s; +} + +.smokey li:nth-child(15) { + transition-delay: 1.4s; } /*==================================================