diff --git a/templates/assets/css/index.css b/templates/assets/css/index.css index 7289bbe..193f422 100644 --- a/templates/assets/css/index.css +++ b/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; diff --git a/templates/assets/js/main.js b/templates/assets/js/main.js index 41244ef..a331d7a 100644 --- a/templates/assets/js/main.js +++ b/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"; } }