diff --git a/masonbrown/images/Screenshotter.png b/masonbrown/images/Screenshotter.png new file mode 100644 index 0000000..5b42850 Binary files /dev/null and b/masonbrown/images/Screenshotter.png differ diff --git a/masonbrown/images/bistroana.png b/masonbrown/images/bistroana.png new file mode 100644 index 0000000..a27ea9b Binary files /dev/null and b/masonbrown/images/bistroana.png differ diff --git a/masonbrown/images/brunchlogo.png b/masonbrown/images/brunchlogo.png new file mode 100644 index 0000000..47fddc7 Binary files /dev/null and b/masonbrown/images/brunchlogo.png differ diff --git a/masonbrown/images/brunchpic1.png b/masonbrown/images/brunchpic1.png new file mode 100644 index 0000000..ddc19c3 Binary files /dev/null and b/masonbrown/images/brunchpic1.png differ diff --git a/masonbrown/images/contactus.png b/masonbrown/images/contactus.png new file mode 100644 index 0000000..04af2ff Binary files /dev/null and b/masonbrown/images/contactus.png differ diff --git a/masonbrown/images/dinnerlogo.png b/masonbrown/images/dinnerlogo.png new file mode 100644 index 0000000..7919a3d Binary files /dev/null and b/masonbrown/images/dinnerlogo.png differ diff --git a/masonbrown/images/dinnerpic1.png b/masonbrown/images/dinnerpic1.png new file mode 100644 index 0000000..bc71ed6 Binary files /dev/null and b/masonbrown/images/dinnerpic1.png differ diff --git a/masonbrown/images/gnocchirasta.png b/masonbrown/images/gnocchirasta.png new file mode 100644 index 0000000..09cf60a Binary files /dev/null and b/masonbrown/images/gnocchirasta.png differ diff --git a/masonbrown/images/homeicon.png b/masonbrown/images/homeicon.png new file mode 100644 index 0000000..e0e72cf Binary files /dev/null and b/masonbrown/images/homeicon.png differ diff --git a/masonbrown/images/lunchlogo.png b/masonbrown/images/lunchlogo.png new file mode 100644 index 0000000..fae143c Binary files /dev/null and b/masonbrown/images/lunchlogo.png differ diff --git a/masonbrown/images/lunchpic1.png b/masonbrown/images/lunchpic1.png new file mode 100644 index 0000000..93f8750 Binary files /dev/null and b/masonbrown/images/lunchpic1.png differ diff --git a/masonbrown/images/menulogo.png b/masonbrown/images/menulogo.png new file mode 100644 index 0000000..b98d59c Binary files /dev/null and b/masonbrown/images/menulogo.png differ diff --git a/masonbrown/images/navbarmenulogo.png b/masonbrown/images/navbarmenulogo.png new file mode 100644 index 0000000..bcff8d3 Binary files /dev/null and b/masonbrown/images/navbarmenulogo.png differ diff --git a/masonbrown/images/reservationlogo.png b/masonbrown/images/reservationlogo.png new file mode 100644 index 0000000..d977484 Binary files /dev/null and b/masonbrown/images/reservationlogo.png differ diff --git a/masonbrown/images/salmonlunch.png b/masonbrown/images/salmonlunch.png new file mode 100644 index 0000000..179ba92 Binary files /dev/null and b/masonbrown/images/salmonlunch.png differ diff --git a/masonbrown/images/shrimpdinner1.png b/masonbrown/images/shrimpdinner1.png new file mode 100644 index 0000000..9036d0e Binary files /dev/null and b/masonbrown/images/shrimpdinner1.png differ diff --git a/masonbrown/index.html b/masonbrown/index.html new file mode 100644 index 0000000..b6e7814 --- /dev/null +++ b/masonbrown/index.html @@ -0,0 +1,37 @@ + + + + + + Bistroana + + + + + + +

Bistroana

+ + +
+ + + +
+ + + + + + \ No newline at end of file diff --git a/masonbrown/reservation.html b/masonbrown/reservation.html new file mode 100644 index 0000000..f434436 --- /dev/null +++ b/masonbrown/reservation.html @@ -0,0 +1,102 @@ + + + + + + Bistroana Reservations + + + + + +

Bistroana Private Party Reservations

+

We are currently accepting private party bookings! Please fill out the form below:

+ +
+ + + + + +
+ +

+ + + + + \ No newline at end of file diff --git a/masonbrown/script.js b/masonbrown/script.js new file mode 100644 index 0000000..49bb246 --- /dev/null +++ b/masonbrown/script.js @@ -0,0 +1,131 @@ +console.log("JavaScript is connected!"); + +// Buttons and menu elements +const brunchButton = document.querySelector("#brunch-btn"); +const lunchButton = document.querySelector("#lunch-btn"); +const dinnerButton = document.querySelector("#dinner-btn"); +const menuDisplay = document.querySelector("#menu-display"); +const menuTitle = document.querySelector("#menu-title"); + +// Menu items +const brunchItems = ` +
+

Buttermilk Soufflé Pancakes

+

Delicately aerated pancakes with cultured butter, maple gastrique, and seasonal berries

+
+
+

Heritage Eggs & Applewood Bacon

+

Farm-raised eggs prepared to order, accompanied by crisp applewood-smoked bacon and chive-infused butter

+
+
+ Pancakes +
+`; + +const lunchItems = ` +
+

Dry-Aged Beef Burger

+

House-ground dry-aged beef, brioche bun, aged cheddar, heirloom tomato, and truffle aioli

+
+
+

Pommes Frites

+

Hand-cut potatoes, twice-fried to perfection, finished with sea salt and served with garlic confit aioli

+
+
+

Garden Salad

+

Seasonal greens, shaved vegetables, toasted seeds, and a light champagne vinaigrette

+
+
+ Lunch Dish +
+
+

Pan-Seared Atlantic Salmon with Saffron Risotto

+

Perfectly seared salmon fillet with crispy golden skin and flaky pink interior, accompanied by creamy saffron risotto Milanese, grilled asparagus, roasted cherry tomatoes, and lemon beurre blanc sauce.

+
+
+ Lunch Dish +
+`; + +const dinnerItems = ` +
+

Pan-Seared Filet Mignon

+

Prime beef filet, finished with herb butter, served alongside roasted seasonal vegetables

+
+
+

Pommes Purée

+

Silken mashed potatoes enriched with European butter and finished with a touch of cream

+
+
+

Seasonal Vegetable Medley

+

Chef-selected vegetables, lightly sautéed with herbs and extra virgin olive oil

+
+
+ Dinner Dish +
+
+

Caribbean Soul Fusion Gnocchi

+

Pillowy potato gnocchi handcrafted and pan-seared to achieve a golden exterior, served with Caribbean-inspired sauce.

+
+
+

Sauce, the Right Way

+

Bathed in our signature coconut-jerk cream sauce—a harmonious marriage of island spices and silken coconut reduction.

+
+
+

Fusion Cuisine

+

Tri-color bell peppers, toasted coconut flakes, fresh cilantro, and lime zest deliver layers of tropical complexity.

+
+
+ Gnocchi Dish +
+
+

Jumbo Rock Shrimp Scampi

+

The ocean's finest treasure, elevated to rarefied heights.

+
+
+

Star of the Show

+

3 pristine jumbo rock shrimp, seared to perfection, in a decadent lemon-garlic-parmesan emulsion.

+
+
+

Mediterranean Flavors

+

Accompanied by charred ciabatta crostini, Italian parsley, lemon zest curls, and vine-ripened cherry tomatoes.

+
+
+ Shrimp Dish +
+`; + +// Function to update menu +function updateMenu(title, items) { + menuTitle.textContent = title; + menuDisplay.innerHTML = items; +} + +// Button event listeners +brunchButton.addEventListener("click", () => updateMenu("Brunch Menu", brunchItems)); +lunchButton.addEventListener("click", () => updateMenu("Lunch Menu", lunchItems)); +dinnerButton.addEventListener("click", () => updateMenu("Dinner Menu", dinnerItems)); + +// ===== Image Overlay Logic ===== + +// Create overlay element +const overlay = document.createElement("div"); +overlay.id = "image-overlay"; +document.body.appendChild(overlay); + +// Create image inside overlay +const overlayImg = document.createElement("img"); +overlay.appendChild(overlayImg); + +// Event delegation: handle clicks on images inside menuDisplay +menuDisplay.addEventListener("click", (e) => { + if (e.target.tagName === "IMG") { + overlayImg.src = e.target.src; + overlay.style.display = "flex"; + } +}); + +// Clicking overlay closes it +overlay.addEventListener("click", () => { + overlay.style.display = "none"; +}); diff --git a/masonbrown/style.css b/masonbrown/style.css new file mode 100644 index 0000000..b66edd1 --- /dev/null +++ b/masonbrown/style.css @@ -0,0 +1,221 @@ +body { + min-height: 100vh; + margin: 0; + font-family: Arial, sans-serif; + text-align: center; + background-image: linear-gradient(#7b2c2c, #1d1818); + background-repeat: no-repeat; + background-size: cover; +} + +#logo img { + max-width: 300px; + height: auto; + margin-bottom: 20px; +} + +#buttons { + margin-bottom: 20px; +} + +button { + font-size: 40px; + margin: 10px; + padding: 15px 25px; + cursor: pointer; + background: linear-gradient(135deg, #484024, #c26b6b); + background-color: #c26b6b; + border: none; + border-radius: 8px; + transition: transform 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease; + overflow: hidden; +} + +button:hover { + transform: translateY(-5px); + background: linear-gradient(135deg, #b0b0af, #cbb043); + background-color: #cbb043; + box-shadow: 0 8px 15px rgba(0,0,0,0.3); +} + +#menu-display { + display: flex; + flex-wrap: wrap; + justify-content: center; + gap: 20px; + margin-top: 20px; +} +nav { + display: flex; + flex-wrap: wrap; + justify-content: center; + gap: 20px; + margin-top: 20px; + padding: 15px; + border-radius: 8px; + box-shadow: 0 4px px rgba(0,0,0,0.2); + gap: 30px; + +} + +.menu-card { + + background: linear-gradient(135deg, #cbb043, #753549); + padding: 20px; + border-radius: 12px; + box-shadow: 0 8px 15px rgba(0,0,0,0.2); + width: 250px; + text-align: center; + transition: transform 0.2s ease, box-shadow 0.2s ease; +} + +.menu-card:hover { + transform: translateY(-5px); + box-shadow: 0 12px 20px rgba(0,0,0,0.3); + background: linear-gradient(135deg, #cbb043, #5f5156); +} + +.menu-card h3 { + margin-bottom: 10px; + font-size: 20px; + color: #810d0d; +} + +.menu-card p { + font-size: 16px; + color: #333; +} + +#menu-title img { + max-width: 150px; + width: 100%; + height: auto; + vertical-align: middle; + margin-bottom: 10px; +} +button img { + width: 100%; + height: 100%; + object-fit: cover; + display: block; +} + +#buttons { + display: flex; + justify-content: center; + gap: 20px; + margin-bottom: 20px; +} + +.menu-card img { + width: 100%; + height: 150px; + object-fit: cover; + border-radius: 12px; + +} +nav ul { + display: flex; + gap: 30px; + list-style: none; + padding: 0; + margin: 0; +} + +nav ul li a { + text-decoration: none; + + font-size: 18px; + padding: 8px 12px; + transition: background 0.2s; + display: flex; + justify-content: center; + align-items: center; /* center image vertically */ +} + +nav ul li a:hover { + background-color: rgba(255, 255, 255, 0); + border-radius: 5px; +} +nav ul li a img { + padding: 20px 30px; /* space around the icon */ + width: 70px; /* size of the icon */ + height: 70px; + object-fit: contain; /* keep aspect ratio */ + display: block; /* removes bottom spacing */ +} + +nav img:hover { + transform: scale(1.45); /* slightly enlarge on hover */ + transition: transform 0.2s ease-in; + +} + +#reservation { + background-color: rgba(255, 255, 255, 0.9); + padding: 30px; + border-radius: 12px; + margin: 40px auto; + max-width: 500px; + text-align: left; + box-shadow: 0 8px 15px rgba(0,0,0,0.2); +} + +#reservation h2 { + text-align: center; + color: #810d0d; +} + +#reservation p { + text-align: center; + font-size: 16px; + color: #333; +} + +#reservation-form input, #reservation-form button { + width: 100%; + padding: 10px; + margin-top: 5px; + border-radius: 6px; + border: 1px solid #ccc; + box-sizing: border-box; +} + +#reservation-form button { + background-color: #c26b6b; + color: white; + font-size: 16px; + cursor: pointer; + margin-top: 15px; + border: none; +} + +#reservation-form button:hover { + background-color: #cbb043; +} +/* Fullscreen overlay for the enlarged image */ +#image-overlay { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: rgba(0,0,0,0.8); + display: none; /* hidden by default */ + justify-content: center; + align-items: center; + z-index: 1000; +} + +#image-overlay img { + max-width: 90%; + max-height: 90%; + border-radius: 12px; + box-shadow: 0 8px 25px rgba(0,0,0,0.5); + transition: transform 0.2s ease; +} + +#image-overlay img:hover { + transform: scale(1.05); + cursor: zoom-out; +} \ No newline at end of file