Skip to content

Chateau Money is ready to serve :) #14

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
bmmoney26-1 wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Chateau Money is ready to serve :) #14

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
38 changes: 38 additions & 0 deletions Restaurant Menu/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Interactive Restaurant Menu</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<header class="hero">
<h1>Château Money</h1>
<p>Fine dining without the fine print.</p>
</header>

<section class="menu-controls">
<button class="menu-btn" data-category="breakfast">Breakfast</button>
<button class="menu-btn" data-category="lunch">Lunch</button>
<button class="menu-btn" data-category="brunch">Brunch</button>
<button class="menu-btn" data-category="dinner">Dinner</button>
<button class="menu-btn" data-category="happyHour">Happy Hour</button>
<button class="menu-btn" data-category="drinks">Drinks</button>
</section>

<main class="menu-section">
<h2 id="menu-title">Menu</h2>
<div id="menu-display">
<p>Select a category to view menu items.</p>
</div>
</main>

<script src="script.js"></script>
<footer class="footer">
<p class="footer-name">Château Money</p>
<p class="footer-slogan">You belong here. We promise.</p>
<p class="footer-copy">&copy; 2026 Château Money. All rights reserved.</p>
</footer>
</body>
</html>
86 changes: 86 additions & 0 deletions Restaurant Menu/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 = `
<h3>${item.name}</h3>
<p>${item.description}</p>
<p class="price">${item.price}</p>
`;

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");
172 changes: 172 additions & 0 deletions Restaurant Menu/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
}