Page indicator, second page done!

index.html

@@ -22,6 +22,11 @@
          <div class="next" id="next" onclick="next()">
             <span class="arrow">&#10230;</span>
          </div>
+         <ul class="progress">
+            <li id="meetIndicator"></li>
+            <li id="vegetable-dashIndicator"></li>
+            <li id="coming-soonIndicator"></li>
+         </ul>
       </div>
       <!-- Vegetable Dash -->
       <div class="block" id="vegetable-dash">
@@ -31,7 +36,25 @@
          <div class="text">
             <br>
             <!-- Use diffrent animation for head -->
-            <h1 class="meet-vegetable">Vegetable Dash!</h1>
+            <h1 class="meet-vegetable">
+               <ul class="smokey">
+                  <li>V</li>
+                  <li>e</li>
+                  <li>g</li>
+                  <li>e</li>
+                  <li>t</li>
+                  <li>a</li>
+                  <li>b</li>
+                  <li>l</li>
+                  <li>e</li>
+                  <li class="space"></li>
+                  <li>D</li>
+                  <li>a</li>
+                  <li>s</li>
+                  <li>h</li>
+                  <li>!</li>
+               </ul>
+            </h1>
             <p class="about-vegetable">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 <a href="https://squirrel-314.github.io/vegetable-dash">here</a>, or visit the GitHub repository <a href="https://github.com/squirrel-314/vegetable-dash">here</a>!</p>
          </div>
       </div>

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 */

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;
 }
 
 /*==================================================