añadi navbar, tagline y js interacciones

website/assets/js/main.js

@@ -0,0 +1,52 @@
+document.addEventListener("mouseover", function(e){
+
+    if(e.target.classList.contains("coffee-btn")){
+        e.target.style.transform = "scale(1.08)";
+        e.target.style.backgroundColor = "#a67c52";
+    }
+});
+
+document.addEventListener("mouseout", function(e){
+
+    if(e.target.classList.contains("coffee-btn")){
+        e.target.style.transform = "scale(1)";
+        e.target.style.backgroundColor = "#c8a27a";
+    }
+});
+
+document.addEventListener("click", function(e){
+
+    if(e.target.classList.contains("coffee-btn")){
+
+        if(e.target.innerText === "Order your Coffee"){
+            e.target.innerText = "Coffee on the way... ☕";
+            e.target.style.color = "black";
+        } 
+        else{
+            e.target.innerText = "Order your Coffee";
+            e.target.style.color = "white";
+        }
+    }
+});
+
+document.addEventListener("mouseover", function(e){
+
+if(e.target.classList.contains("nav-btn")){
+    e.target.style.color = "#a67c52";
+}
+});
+
+document.addEventListener("mouseout", function(e){
+
+if(e.target.classList.contains("nav-btn")){
+    e.target.style.color = "#333";
+}
+});
+
+document.addEventListener("click", function(e){
+
+if(e.target.classList.contains("search-icon")){
+    alert("Search feature coming soon 🔍");
+}
+});
+

website/index.html

@@ -39,7 +39,7 @@
 
     <!-- Optional JavaScript -->
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
-
+    <script src="assets/js/main.js"></script>
 </body>
 
 </html>

website/templates/first_heading.html

@@ -1,2 +1,21 @@
 <!-- your html code here -->
-<p>Hello, I'm the first_heading.html</p>
+<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500&family=Poppins:wght@300;400&display=swap" rel="stylesheet">
+
+<section style="
+background:#f3e9dc;
+padding:20px 0;
+text-align:center;
+font-family:'Poppins', sans-serif;
+">
+
+<h2 style="
+font-size:13px;
+font-weight:500;
+margin:0;
+">
+
+Freshly brewed coffee made with passion every single day.
+
+</h2>
+
+</section>

website/templates/navbar.html

@@ -1,2 +1,19 @@
 <!-- your html code here -->
-<p>Hello, I'm the navbar.html</p>
+<nav style="background-color:#f3e9dc; padding:15px 40px; display:flex; align-items:center; justify-content:space-between; font-family: 'Poppins', sans-serif;">
+
+    <div style="font-weight:600; font-size:22px; letter-spacing:1px;">
+        Coffee
+    </div>
+
+    <div style="display:flex; gap:35px; font-size:16px;">
+        <a class="nav-btn" href="#" style="text-decoration:none; color:#333;">Home</a>
+        <a class="nav-btn" href="#" style="text-decoration:none; color:#333;">Share</a>
+        <a class="nav-btn" href="#" style="text-decoration:none; color:#333;">Menu</a>
+        <a class="nav-btn" href="#" style="text-decoration:none; color:#333;">Types</a>
+    </div>
+
+    <div class="search-icon" style="font-size:18px; cursor:pointer;">
+        🔍
+    </div>
+
+</nav>

website/templates/tagline.html

@@ -1,3 +1,54 @@
 <!-- your html code here -->
-<!-- Also called a hero image or a jumbotron before bootstrap 5. This might be helpful: https://getbootstrap.com/docs/5.1/examples/jumbotron/ -->
-<p>Hello, I'm the tagline and I was loaded using ajax from templates/tagline.html</p>
+
+<section style="
+background-image: url('https://images.unsplash.com/photo-1509042239860-f550ce710b93');
+background-size: cover;
+background-position: center;
+height: 80vh;
+display: flex;
+align-items: center;
+justify-content: center;
+text-align: center;
+color: white;
+font-family: 'Poppins', sans-serif;
+">
+
+    <div style="background: rgba(0,0,0,0.4); padding:35px; border-radius:10px;">
+
+        <h1 style="
+        font-size:48px;
+        font-weight:600;
+        line-height:1.1;
+        margin-bottom:5px;
+    ">
+            Brewed to<br>Perfection
+        </h1>
+
+        <p style="
+        font-size:14px;
+        margin-top:8px;
+        max-width:500px;
+        margin-left:auto;
+        margin-right:auto;
+    ">
+            Experience the rich aroma and smooth taste of freshly crafted coffee,
+            made with passion in every single cup.
+        </p>
+
+        <button class="coffee-btn" style="
+margin-top:15px;
+padding:10px 26px;
+border:none;
+background:#c8a27a;
+color:white;
+font-size:14px;
+border-radius:6px;
+cursor:pointer;
+transition:0.2s;
+">
+            Order your Coffee
+        </button>
+
+    </div>
+
+</section>