inital commit

2025-01-05 20:26:18 -05:00 · 2025-01-05 20:26:18 -05:00 · 80126d1b36
commit 80126d1b36
parent 82b0c8b0b0
5 changed files with 116 additions and 0 deletions
--- a/assets/logo/BeachPartyBalloons-logo.png
+++ b/assets/logo/BeachPartyBalloons-logo.png
--- a/assets/pics/classic/20240825_104716.webp
+++ b/assets/pics/classic/20240825_104716.webp
--- a/index.html
+++ b/index.html
@ -0,0 +1,71 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Beach Party Balloons</title>
+    <link
+  rel="stylesheet"
+  href="https://cdn.jsdelivr.net/npm/bulma@1.0.2/css/bulma.min.css"
+>
+<link rel="stylesheet" href="style.css">
+<script defer src="script.js"></script>
+</head>
+<body>
+    <nav class="navbar" role="navigation" aria-label="main navigation">
+        <div class="navbar-brand">
+          <a class="navbar-item is-large" href="index.html">
+      <img src="assets/logo/BeachPartyBalloons-logo.png" alt="Beach Party Balloons logo">
+          </a>
+      
+          <a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample">
+            <span aria-hidden="true"></span>
+            <span aria-hidden="true"></span>
+            <span aria-hidden="true"></span>
+            <span aria-hidden="true"></span>
+          </a>
+        </div>
+      
+        <div id="navbarBasicExample" class="navbar-menu">
+          <div class="navbar-start">
+            <a class="navbar-item" href="index.html">
+              Home
+            </a>
+      
+            <a class="navbar-item" href="about/index.html">
+              About Us
+            </a>
+      
+            <!-- <div class="navbar-item "> -->
+              <a class="navbar-item" href="gallery/index.html">
+                Gallery
+              </a>
+      
+              <!-- <div class="navbar-dropdown"> -->
+                <a class="navbar-item" href="contact/index.html">
+                  Contact
+                </a>
+            
+            </div>
+          </div>
+      
+          <div class="navbar-end">
+
+          </div>
+        </div>
+      </nav>
+      <header class="container is-fluid">
+        <img
+        src="assets/pics/classic/20240825_104716.webp"
+        alt="Classic Arch with bumble bees"
+      />
+      <div class="centerimg">
+       <img src="assets/logo/BeachPartyBalloons-logo.png" alt="logo">
+
+      </div>
+      </header>
+
+
+  
+</body>
+</html>
--- a/script.js
+++ b/script.js
@ -0,0 +1,21 @@
+document.addEventListener('DOMContentLoaded', () => {
+
+    // Get all "navbar-burger" elements
+    const $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0);
+  
+    // Add a click event on each of them
+    $navbarBurgers.forEach( el => {
+      el.addEventListener('click', () => {
+  
+        // Get the target from the "data-target" attribute
+        const target = el.dataset.target;
+        const $target = document.getElementById(target);
+  
+        // Toggle the "is-active" class on both the "navbar-burger" and the "navbar-menu"
+        el.classList.toggle('is-active');
+        $target.classList.toggle('is-active');
+  
+      });
+    });
+  
+  });
--- a/style.css
+++ b/style.css
@ -0,0 +1,24 @@
+:root {
+    --bulma-primary-h: 197deg;
+    --bulma-primary-l: 47%;
+    --bulma-info-h: 175deg;
+    --bulma-info-s: 88%;
+    --bulma-info-l: 42%;
+  }
+  html{
+    background-color:antiquewhite
+  }
+
+  header{
+    position: relative;
+    text-align: center;
+    color: antiquewhite;
+  }
+
+  .centerimg {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    font-size: 4em;
+  }