diff --git a/Restaurant Menu/index.html b/Restaurant Menu/index.html new file mode 100644 index 0000000..ceac5bd --- /dev/null +++ b/Restaurant Menu/index.html @@ -0,0 +1,38 @@ + + + + + + Interactive Restaurant Menu + + + +
+

Château Money

+

Fine dining without the fine print.

+
+ +
+ + + + + + +
+ +
+ + +
+ + + + + diff --git a/Restaurant Menu/script.js b/Restaurant Menu/script.js new file mode 100644 index 0000000..2d77583 --- /dev/null +++ b/Restaurant Menu/script.js @@ -0,0 +1,86 @@ +const buttons = document.querySelectorAll(".menu-btn"); +const menuTitle = document.querySelector("#menu-title"); +const menuDisplay = document.querySelector("#menu-display"); + +console.log(buttons); +console.log(menuTitle); +console.log(menuDisplay); + +const menuData = { + + breakfast: [ + { name: "Brioche French Toast", description: "Thick-cut brioche with vanilla cream and fresh berries", price: "$14" }, + { name: "Smoked Salmon Benedict", description: "Poached eggs, smoked salmon, hollandaise on toasted brioche", price: "$16" }, + { name: "Château Morning Plate", description: "Soft scrambled eggs, truffle butter, and seasonal greens", price: "$15" } +], + lunch: [ + { name: "Seared Tuna Niçoise", description: "Seared ahi tuna over mixed greens, olives, and soft egg", price: "$18" }, + { name: "Truffle Grilled Cheese", description: "Aged gruyère and black truffle on sourdough", price: "$16" }, + { name: "Château Steak Salad", description: "Sliced filet over arugula with shaved parmesan and lemon", price: "$19" } +], +brunch: [ + { name: "Lobster Eggs Benedict", description: "Poached eggs and butter-poached lobster on brioche", price: "$22" }, + { name: "Truffle Avocado Toast", description: "Whipped ricotta, avocado, and black truffle on sourdough", price: "$17" }, + { name: "Château Mimosa Flight", description: "Three house mimosas — classic, peach, and blood orange", price: "$18" } +], +dinner: [ + { name: "Filet Mignon", description: "8oz center-cut filet with red wine reduction and asparagus", price: "$42" }, + { name: "Pan-Seared Sea Bass", description: "Chilean sea bass with saffron beurre blanc and wild rice", price: "$38" }, + { name: "Wagyu Beef Risotto", description: "Slow-cooked wagyu over truffle parmesan risotto", price: "$44" } +], +happyHour: [ + { name: "Tuna Tartare", description: "Fresh ahi tuna with sesame, avocado, and wonton crisps", price: "$14" }, + { name: "Wagyu Sliders", description: "Three wagyu beef sliders with aged cheddar and truffle aioli", price: "$16" }, + { name: "Burrata & Prosciutto", description: "Fresh burrata with prosciutto, fig jam, and crostini", price: "$15" } +], +drinks: [ + { name: "Château Old Fashioned", description: "Bourbon, house bitters, orange peel, smoked cherry", price: "$16" }, + { name: "Gold Rush", description: "Honey whiskey, fresh lemon, and 24k gold shimmer", price: "$18" }, + { name: "La Vie en Rosé", description: "Premium rosé with elderflower and fresh raspberries", price: "$14" } +], +}; +function displayMenu(category) { + menuDisplay.innerHTML = ""; + + const categoryTitles = { + breakfast: "Breakfast Menu", + lunch: "Lunch Menu", + brunch: "Brunch Menu", + dinner: "Dinner Menu", + happyHour: "Happy Hour Menu", + drinks: "Drinks Menu" + }; + + menuTitle.textContent = categoryTitles[category]; + + menuData[category].forEach(item => { + const menuItem = document.createElement("div"); + menuItem.classList.add("menu-item"); + + menuItem.innerHTML = ` +

${item.name}

+

${item.description}

+

${item.price}

+ `; + + menuDisplay.appendChild(menuItem); + }); +} +displayMenu("breakfast"); +buttons.forEach(button => { + button.addEventListener("click", function () { + const selectedCategory = button.dataset.category; + displayMenu(selectedCategory); + }); +}); +buttons.forEach(button => { + button.addEventListener("click", function () { + buttons.forEach(btn => btn.classList.remove("active")); + button.classList.add("active"); + + const selectedCategory = button.dataset.category; + displayMenu(selectedCategory); + }); +}); +displayMenu("breakfast"); +buttons[0].classList.add("active"); \ No newline at end of file diff --git a/Restaurant Menu/style.css b/Restaurant Menu/style.css new file mode 100644 index 0000000..8fc6a55 --- /dev/null +++ b/Restaurant Menu/style.css @@ -0,0 +1,172 @@ +@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Cormorant+Garamond:wght@300;400;500&family=Montserrat:wght@300;400;500&display=swap'); +* { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +body { + font-family: 'Montserrat', sans-serif; + background-color: #faf7f2; + color: #2d2416; + line-height: 1.6; + padding: 40px 20px; +} + +.hero { + text-align: center; + margin-bottom: 50px; +padding: 60px 20px 40px; +border-bottom: 1px solid #d4b896; + +} + +.hero h1 { + font-family: 'Playfair Display', serif; + font-size: 3.5rem; + font-weight: 700; + letter-spacing: 4px; + color: #1a1208; + margin-bottom: 12px; +} + +.hero p { + font-family: 'Cormorant Garamond', serif; + font-size: 1.2rem; + color: #8c7355; + letter-spacing: 2px; +text-transform:uppercase; +} + +.menu-controls { + display: flex; + flex-wrap: wrap; + justify-content: center; + gap: 16px; + margin-bottom: 50px; +} + +.menu-btn { + padding: 12px 28px; + border: 1px solid #c9a84c; + background-color: transparent; + color: #c9a84c; + border-radius: 0; + cursor: pointer; + font-family: 'Montserrat', sans-serif; + font-size: .75rem; + font-weight: 500; + letter-spacing: 3px; + text-transform: uppercase; + transition: all .3s ease; +} + +.menu-btn:hover { + background-color: #c9a84c; + color: #faf7f2; +} + +.menu-btn.active { + background-color: #c9a84c; + color: #faf7f2; +} + +.menu-section { + max-width: 1000px; + margin: 0 auto; +} + +#menu-title { + text-align: center; + font-family: 'Playfair Display', serif; + font-size: 2rem; + font-weight: 400; + letter-spacing: 3px; + text-transform: uppercase; + color: #1a1208; + margin-bottom: 40px; +} + +#menu-display { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); + gap: 24px; +} + +.menu-item { + background-color: #fff; + border: 1px solid #e8ddd0; + border-radius: 0; + padding: 28px; + box-shadow: none; + transition: all 0.3s ease; + position: relative; +} +.menu-item::before { + content: ''; + position: absolute; + top: 0; + left: 0; + width: 3px; + height: 0; + background-color: #c9a84c; + transition: height 0.3s ease; +} +.menu-item:hover::before { + height: 100%; +} +.menu-item:hover { + box-shadow: 0 8px 32px rgba(0,0,0,0.08); + transform: translateY(-4px); +} +.menu-item h3 { + font-family: 'Playfair Display', serif; + font-size: 1.1rem; + font-weight: 700; + margin-bottom: 10px; + color: #1a1208; + letter-spacing: 1px; +} + +.menu-item p { + font-size: 0.85rem; + margin-bottom: 16px; + color: #8c7355; + line-height: 1.7; +} +.price { + font-family: 'Cormorant Garamond', serif; + font-size: 1.2rem; + font-weight: 500; + color: #c9a84c; + letter-spacing: 1px; +} +.footer { + text-align: center; + margin-top: 80px; + padding: 40px 20px; + border-top: 1px solid #d4b896; +} + +.footer-name { + font-family: 'Playfair Display', serif; + font-size: 1.4rem; + letter-spacing: 4px; + color: #1a1208; + margin-bottom: 8px; +} + +.footer-slogan { + font-family: 'Cormorant Garamond', serif; + font-size: 1rem; + color: #8c7355; + letter-spacing: 2px; + font-style: italic; + margin-bottom: 16px; +} + +.footer-copy { + font-size: 0.75rem; + color: #c9a84c; + letter-spacing: 1px; +}