sept28

templates/assets/css/index.css

@@ -195,6 +195,11 @@ img {
     width: 3rem !important;
     height: 3rem !important;
 }
+
+.link .sub_container p {
+    font-size: 3.5vw;
+}
+
 }
 
 @media(min-width: 700px) {
@@ -264,13 +269,26 @@ img {
         font-size: 3.5vw;
     }
 
+    #spider {
+        margin-top: 66vw !important;
+    }
+
+    #cube {
+        margin-top: 100vw !important;
+        margin-left: -1vw;
+    }
+
+    #cube .sub_container {
+        height: 34vw;
+    }
+
     #offgrid .sub_container {
         width: 35vw;
         height: 40vw;
     }
 
     #offgrid .sub_container p {
-        height: 55vw !important;
+        height: 59vw !important;
     }
 
     #cyber .sub_container p {
@@ -307,13 +325,18 @@ img {
         margin-top: 5vw;
     }
 
+    #hemp .sub_container p {
+        height: 40vw;
+        margin-top: -6vw;
+    }
+
     #permapp {
         margin-top: 33vw;
     }
 
     #permapp .sub_container p {
-        height: 60vw;
-        margin-top: 8vw;
+        height: 50vw !important;
+        margin-top: 2vw !important;
     }
 
     #spider {
@@ -322,15 +345,16 @@ img {
     }
 
     #spider .sub_container p {
-        height: 60vw;
-        margin-top: 8vw;
+        height: 50vw !important;
+        margin-top: 3vw !important;
     }
 
     #cube {
-        margin-top: 90vw;
-        z-index: 1;
+        margin-top: 90vw !important;
+        margin-left: -1vw;
     }
 
+
     #cube .sub_container p {
         height: 60vw;
         margin-top: 15vw;

templates/assets/js/main.js

@@ -50,128 +50,147 @@ document.getElementById("chevron_3").addEventListener("click", function menu() {
 
 // button 1
 
-document.getElementById("b_1").addEventListener("click", function menu() {
-    var x= document.getElementById("c_1");
-    let hemp = document.getElementById("hemp");
-    if (x.style.display === "none") {
-        x.style.display = "flex";
+let btn_1 = document.getElementById("b_1");
+var p_1= document.getElementById("c_1");
+let hemp = document.getElementById("hemp");
+p_1.style.display = "none";
+
+btn_1.addEventListener("click", () => {
+    if (p_1.style.display === "none") {
+        p_1.style.display = "flex";
         hemp.style.zIndex = "9";
     }
         else {
-            x.style.display ="none";
+            p_1.style.display ="none";
             hemp.style.zIndex = "0";
         }
     }
 );
 
 // button 2
-
-document.getElementById("b_2").addEventListener("click", function menu() {
-    var x= document.getElementById("c_2");
-    let permapp = document.getElementById("permapp");
-    if (x.style.display === "none") {
-        x.style.display = "flex";
+let btn_2 = document.querySelector("#b_2");
+let p_2= document.getElementById("c_2");
+let permapp = document.getElementById("permapp");
+p_2.style.display = "none";
+
+btn_2.addEventListener("click", () => {
+    if (p_2.style.display === "none") {
+        p_2.style.display = "flex";
         permapp.style.zIndex = "9";
     }
         else {
-            x.style.display ="none";
+            p_2.style.display ="none";
             permapp.style.zIndex = "0";
         }
     }
 );
 
 // button 3
-
-document.getElementById("b_3").addEventListener("click", function menu() {
-    var x= document.getElementById("c_3");
-    let spider = document.getElementById("spider");
-    if (x.style.display === "none") {
-        x.style.display = "flex";
+let btn_3 = document.querySelector("#b_3");
+let p_3= document.getElementById("c_3");
+let spider = document.getElementById("spider");
+p_3.style.display = "none";
+
+btn_3.addEventListener("click", () => {
+    if (p_3.style.display === "none") {
+        p_3.style.display = "flex";
         spider.style.zIndex = "9";
     }
         else {
-            x.style.display ="none";
+            p_3.style.display ="none";
             spider.style.zIndex = "0";
         }
     }
 );
 
-// button 4
 
-document.getElementById("b_4").addEventListener("click", function menu() {
-    var x= document.getElementById("c_4");
-    let cube = document.getElementById("cube");
-    if (x.style.display === "none") {
-        x.style.display = "flex";
+// button 4
+let btn_4 = document.querySelector("#b_4");
+let p_4= document.getElementById("c_4");
+let cube = document.getElementById("cube");
+p_4.style.display = "none";
+
+btn_4.addEventListener("click", () => {
+    if (p_4.style.display === "none") {
+        p_4.style.display = "flex";
         cube.style.zIndex = "9";
     }
         else {
-            x.style.display ="none";
+            p_4.style.display ="none";
             cube.style.zIndex = "0";
         }
     }
 );
 
 // button 5
-
-document.getElementById("b_5").addEventListener("click", function menu() {
-    var x= document.getElementById("c_5");
-    let offgrid = document.getElementById("offgrid");
-    if (x.style.display === "none") {
-        x.style.display = "flex";
+let btn_5 = document.querySelector("#b_5");
+let p_5= document.getElementById("c_5");
+let offgrid = document.getElementById("offgrid");
+p_5.style.display = "none";
+
+btn_5.addEventListener("click", () => {
+    if (p_5.style.display === "none") {
+        p_5.style.display = "flex";
         offgrid.style.zIndex = "9";
     }
         else {
-            x.style.display ="none";
+            p_5.style.display ="none";
             offgrid.style.zIndex = "0";
-            
         }
     }
 );
 
-// button 6
 
-document.getElementById("b_6").addEventListener("click", function menu() {
-    var x= document.getElementById("c_6");
-    let cyber = document.getElementById("cyber");
-    if (x.style.display === "none") {
-        x.style.display = "flex";
+
+// button 6
+let btn_6 = document.querySelector("#b_6");
+let p_6= document.getElementById("c_6");
+let cyber = document.getElementById("cyber");
+p_6.style.display = "none";
+
+btn_6.addEventListener("click", () => {
+    if (p_6.style.display === "none") {
+        p_6.style.display = "flex";
         cyber.style.zIndex = "9";
     }
         else {
-            x.style.display ="none";
+            p_6.style.display ="none";
             cyber.style.zIndex = "0";
         }
     }
 );
 
 // button 7
-
-document.getElementById("b_7").addEventListener("click", function menu() {
-    var x= document.getElementById("c_7");
-    let machina = document.getElementById("machina");
-    if (x.style.display === "none") {
-        x.style.display = "flex";
+let btn_7 = document.querySelector("#b_7");
+let p_7= document.getElementById("c_7");
+let machina = document.getElementById("machina");
+p_7.style.display = "none";
+
+btn_7.addEventListener("click", () => {
+    if (p_7.style.display === "none") {
+        p_7.style.display = "flex";
         machina.style.zIndex = "9";
     }
         else {
-            x.style.display ="none";
+            p_7.style.display ="none";
             machina.style.zIndex = "0";
         }
     }
 );
 
-// button 
+// button 8
+let btn_8 = document.querySelector("#b_8");
+let p_8= document.getElementById("c_8");
+let miner = document.getElementById("miner");
+p_8.style.display = "none";
 
-document.getElementById("b_8").addEventListener("click", function menu() {
-    var x= document.getElementById("c_8");
-    let miner = document.getElementById("miner");
-    if (x.style.display === "none") {
-        x.style.display = "flex";
+btn_8.addEventListener("click", () => {
+    if (p_8.style.display === "none") {
+        p_8.style.display = "flex";
         miner.style.zIndex = "9";
     }
         else {
-            x.style.display ="none";
+            p_8.style.display ="none";
             miner.style.zIndex = "0";
         }
     }