From f2339d2594a58f724d2a7a002bf919b2136d9bc5 Mon Sep 17 00:00:00 2001 From: Sarojini Torchon <123351893+Sarojini-T@users.noreply.github.com> Date: Sun, 3 Dec 2023 17:40:54 -0500 Subject: [PATCH] Updated index.html, main.js and styles.css --- index.html | 47 ++++++++++++++++++++++++++------ main.js | 27 +++++++++++++++++++ styles.css | 78 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 144 insertions(+), 8 deletions(-) diff --git a/index.html b/index.html index 4583daa..029e3a1 100644 --- a/index.html +++ b/index.html @@ -6,23 +6,54 @@ - Your Map + + + + + + + + + + + + + + + + Assert Map - -
- - About | Documentation | Datasets -
+
+
+ ASSERT +

AI Supported Smart Electricity Restoration Tool

+
+ +
+ + +
+ + +
- + + + + + diff --git a/main.js b/main.js index e69de29..5ec5647 100644 --- a/main.js +++ b/main.js @@ -0,0 +1,27 @@ +document.addEventListener("DOMContentLoaded", function () { + // Select the navigation bar, open icon, and close icon from the HTML and store in variables + const menuIcon = document.getElementById("open-icon"); + const navBar = document.querySelector(".menu-items"); + const closeIcon = document.getElementById("close-icon"); + + // Add event listeners to close the menu icon, display the close icon and the + // navbar when the user clicks to open the menu + menuIcon.addEventListener("click", () => { + // Toggle the "open" class on the navigation bar to show it + navBar.classList.toggle("open"); + + // Hide the menu icon and display the close icon + menuIcon.style.display = "none"; + closeIcon.style.display = "block"; + }); + + // Add event listener to close the menu on click of the close icon + closeIcon.addEventListener("click", () => { + // Remove the "open" class from the navigation bar to hide it + navBar.classList.remove("open"); + + // Display the menu icon and hide the close icon + menuIcon.style.display = "flex"; + closeIcon.style.display = "none"; + }); +}); \ No newline at end of file diff --git a/styles.css b/styles.css index df17623..d226cdd 100644 --- a/styles.css +++ b/styles.css @@ -6,6 +6,84 @@ body, html { overflow: hidden; } +.header{ + background: #FBFFF7; + position: fixed; + width: 100%; + display: flex; + align-items: center; + justify-content: space-between; + height: 65px; +} + + +.menu-and-close-icon{ + cursor: pointer; + display: flex; + justify-content: flex-start; +} + +#open-icon, #close-icon{ + padding-right: 30px; +} + +#close-icon{ + display: none; + cursor: pointer; +} + +.menu-items{ + display: none; + flex-direction: column; + position: absolute; + top: 45px; + right: 0; + padding: 5%; + background: rgba(251, 255, 247, 0.66); +} + +.menu-items.open{ + display: block; + opacity: 1; + transform: translateY(0); +} + +.nav-link{ + display: flex; + flex-direction: column; + font-size: 25px; + font-family: 'Alata', sans-serif; + text-decoration: none; + line-height: 50px; + color: #383D03; + align-items: center; +} + +.nav-link:hover{ + background: rgba(56,61,3,0.45); +} + +.website-name{ + display: flex; + flex-direction: column; + line-height: 10px; + padding-left: 10px; + padding-top: 20px; +} + +.title{ + font-family: 'Alata', sans-serif; + font-family: 'Poppins', sans-serif; + color: #383D03; + text-decoration: none; + font-size: 35px; + letter-spacing: 17px; +} + +.title-extended{ + font-size: 17px;; +} + #top-menu-bar { width: 100%; background-color: #333;