I fixed the problem with the banner but it seems it pushed everything…

… down
CommuniCare1 · Oct 19, 2024 · 4337c65 · 4337c65
1 parent e5613f5
commit 4337c65
Show file tree

Hide file tree

Showing 9 changed files with 330 additions and 331 deletions.
diff --git a/about.css b/about.css
@@ -622,4 +622,5 @@ button{
         width:100%;
     }
 }
-/*About Us Ends*/
+/*About Us Ends*/
+
diff --git a/about.html b/about.html
@@ -11,30 +11,55 @@
         <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
         <link href="https://fonts.googleapis.com/css2?family=Domine:[email protected]&family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap" rel="stylesheet">
         <link href='https://unpkg.com/[email protected]/css/boxicons.min.css' rel='stylesheet'>
-    </head>
+        <meta http-equiv="X-UA-Compatible™" content="IE-edge">
 
+    </head>
+
     <body>
         <header>
-            <div class = "container">
-                <div class = "image">
+            <div class="navbar">
+                <div class="logo">
                     <img class="leaf"src="images/Brand/Logo.svg"/>
                     <img src="images/Brand/Logo text.svg"/>
                 </div>
-                <nav class="navbar">
-                    <a href="index.html">Home</a>
-                    <a href="about.html">About</a>
-                    <a href="workshops.html">Workshops</a> 
-                    <a href="contact.html">Contact</a> 
-                    <button onclick="document.location='app.html'">Our App</button>
-                </nav>
-                <input type="checkbox" id="check">
-                <label for="check" class="icons">
+                <ul class="links">
+                    <li><a href="index.html">Home</a></li>
+                    <li><a href="about.html">About</a></li>
+                    <li><a href="workshops.html">Workshops</a></li>
+                    <li><a href="contact.html">Contact</a></li>
+                </ul>
+                <a href="app.html" class="action_btn">Our App</a>
+                <div class="toggle_btn">
                     <i class='bx bx-menu' id="menu-icon"style="font-size: 2.8rem; color: #1C3312;"></i>
-                    <i class='bx bx-x'id="close-icon"style="font-size: 2.8rem; color: #1C3312;"></i>
                 </label>
+                </div>
+            </div>
+
+            <div class="dropdown_menu">
+                <li><a href="index.html">Home</a></li>
+                <li><a href="about.html">About</a></li>
+                <li><a href="workshops.html">Workshops</a></li>
+                <li><a href="contact.html">Contact</a></li>
+                <li><a href="app.html" class="action_btn">Our App</a></li>
             </div>
         </header>
 
+        <script>
+            const toggleBtn = document.querySelector('.toggle_btn')
+            const toggleBtnIcon = document.querySelector('.toggle_btn i')
+            const dropDownMenu = document.querySelector('.dropdown_menu')
+
+            toggleBtn.onclick = function(){
+                dropDownMenu.classList.toggle('open')
+                const isOpen = dropDownMenu.classList.contains('open')
+
+                toggleBtnIcon.classList = isOpen
+                 ? 'bx bx-x'
+                 :'bx bx-menu'
+            }
+
+        </script>
+
         <section class="aboutus-about">
             <img src="images/Brand/leaf sprout.svg"/>
             <h1>About Us</h1>

diff --git a/app.html b/app.html
@@ -12,30 +12,54 @@
         <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
         <link href="https://fonts.googleapis.com/css2?family=Domine:[email protected]&family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap" rel="stylesheet">
         <link href='https://unpkg.com/[email protected]/css/boxicons.min.css' rel='stylesheet'>
+        <meta http-equiv="X-UA-Compatible™" content="IE-edge">
 
     </head>
     <body>
         <header>
-            <div class = "container">
-                <div class = "image">
+            <div class="navbar">
+                <div class="logo">
                     <img class="leaf"src="images/Brand/Logo.svg"/>
                     <img src="images/Brand/Logo text.svg"/>
                 </div>
-                <nav class="navbar">
-                    <a href="index.html">Home</a>
-                    <a href="about.html">About</a>
-                    <a href="workshops.html">Workshops</a> 
-                    <a href="contact.html">Contact</a> 
-                    <button onclick="document.location='app.html'">Our App</button>
-                </nav>
-                <input type="checkbox" id="check">
-                <label for="check" class="icons">
+                <ul class="links">
+                    <li><a href="index.html">Home</a></li>
+                    <li><a href="about.html">About</a></li>
+                    <li><a href="workshops.html">Workshops</a></li>
+                    <li><a href="contact.html">Contact</a></li>
+                </ul>
+                <a href="app.html" class="action_btn">Our App</a>
+                <div class="toggle_btn">
                     <i class='bx bx-menu' id="menu-icon"style="font-size: 2.8rem; color: #1C3312;"></i>
-                    <i class='bx bx-x'id="close-icon"style="font-size: 2.8rem; color: #1C3312;"></i>
                 </label>
+                </div>
+            </div>
+
+            <div class="dropdown_menu">
+                <li><a href="index.html">Home</a></li>
+                <li><a href="about.html">About</a></li>
+                <li><a href="workshops.html">Workshops</a></li>
+                <li><a href="contact.html">Contact</a></li>
+                <li><a href="app.html" class="action_btn">Our App</a></li>
             </div>
         </header>
 
+        <script>
+            const toggleBtn = document.querySelector('.toggle_btn')
+            const toggleBtnIcon = document.querySelector('.toggle_btn i')
+            const dropDownMenu = document.querySelector('.dropdown_menu')
+
+            toggleBtn.onclick = function(){
+                dropDownMenu.classList.toggle('open')
+                const isOpen = dropDownMenu.classList.contains('open')
+
+                toggleBtnIcon.classList = isOpen
+                 ? 'bx bx-x'
+                 :'bx bx-menu'
+            }
+
+        </script>
+
         <div class="meet-app">
             <div class="h1-box">
                 <h1>Meet The CommuniCare App</h1>