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

Coffee & Vibes

+

Vibes for every part of your day

+
+ +
+ + +
+ + + + + + +
+ + +
+ +
+
+ +
+
+
+ +
+
+
+ + + + + +
+
+ +
+
+
+ + + + + +
+
+ +
+
+
+
+
+
+ + + + \ No newline at end of file diff --git a/Restaurant/script.js b/Restaurant/script.js new file mode 100644 index 0000000..a85f6f7 --- /dev/null +++ b/Restaurant/script.js @@ -0,0 +1,146 @@ +const breakfastButton = document.querySelector("#breakfast-btn"); +const lunchButton = document.querySelector("#lunch-btn"); +const brunchButton = document.querySelector("#brunch-btn"); +const dinnerButton = document.querySelector("#dinner-btn"); +const happyHourButton = document.querySelector("#happyhour-btn"); +const drinksButton = document.querySelector("#drinks-btn"); + +const menuTitle = document.querySelector("#menu-title"); +const menuDisplay = document.querySelector("#menu-display"); + +function updateMenu(title, items) { + menuTitle.textContent = title; + menuDisplay.innerHTML = items; +} + +const breakfastItems = ` +
+

Pancake Stack

+

Fluffy pancakes served with syrup and fresh berries.

+ $8.99 +
+
+

Eggs & Bacon

+

Scrambled eggs, crispy bacon, and buttered toast.

+ $9.49 +
+
+

French Toast

+

Golden toast with cinnamon sugar and powdered topping.

+ $7.99 +
+`; + +const lunchItems = ` +
+

Classic Burger

+

Juicy beef patty with lettuce, tomato, and fries.

+ $12.99 +
+
+

Chicken Caesar Wrap

+

Grilled chicken, romaine, parmesan, and Caesar dressing.

+ $10.99 +
+
+

Garden Salad

+

Fresh greens, cucumbers, tomatoes, and house vinaigrette.

+ $8.49 +
+`; + +const brunchItems = ` +
+

Avocado Toast

+

Toasted sourdough topped with avocado and poached eggs.

+ $11.49 +
+
+

Brunch Platter

+

Waffles, eggs, sausage, and seasonal fruit.

+ $13.99 +
+
+

Breakfast Burrito

+

Loaded with eggs, cheese, peppers, and potatoes.

+ $10.49 +
+`; + +const dinnerItems = ` +
+

Grilled Salmon

+

Served with garlic mashed potatoes and vegetables.

+ $18.99 +
+
+

Steak Plate

+

Tender steak cooked to order with rice and asparagus.

+ $22.99 +
+
+

Pasta Primavera

+

Pasta tossed with fresh vegetables in a light cream sauce.

+ $15.99 +
+`; + +const happyHourItems = ` +
+

Mini Sliders

+

Three cheeseburger sliders with special sauce.

+ $6.99 +
+
+

Mozzarella Sticks

+

Crispy golden sticks served with marinara sauce.

+ $5.99 +
+
+

Loaded Nachos

+

Tortilla chips topped with cheese, jalapeños, and salsa.

+ $7.49 +
+`; + +const drinksItems = ` +
+

Tropical Smoothie

+

A refreshing blend of mango, pineapple, and orange.

+ $4.99 +
+
+

Iced Coffee

+

Chilled coffee with cream and sweet flavor options.

+ $3.99 +
+
+

Berry Lemonade

+

Fresh lemonade mixed with strawberry and blueberry flavors.

+ $4.49 +
+`; + +breakfastButton.addEventListener("click", function () { + updateMenu("Breakfast Menu", breakfastItems); +}); + +lunchButton.addEventListener("click", function () { + updateMenu("Lunch Menu", lunchItems); +}); + +brunchButton.addEventListener("click", function () { + updateMenu("Brunch Menu", brunchItems); +}); + +dinnerButton.addEventListener("click", function () { + updateMenu("Dinner Menu", dinnerItems); +}); + +happyHourButton.addEventListener("click", function () { + updateMenu("Happy Hour Menu", happyHourItems); +}); + +drinksButton.addEventListener("click", function () { + updateMenu("Drinks Menu", drinksItems); +}); \ No newline at end of file diff --git a/Restaurant/style.css b/Restaurant/style.css new file mode 100644 index 0000000..64724db --- /dev/null +++ b/Restaurant/style.css @@ -0,0 +1,340 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + font-family: Arial, sans-serif; + min-height: 100vh; + background: linear-gradient(to bottom, #ff9966, #ff5e62, #ffc371, #47cacc); + color: #ffffff; + overflow-x: hidden; +} + +.overlay { + min-height: 100vh; + background: rgba(0, 0, 0, 0.22); + padding: 30px 20px 0; +} + +.hero { + text-align: center; + margin-bottom: 30px; +} + +.hero h1 { + font-size: 3rem; + margin-bottom: 10px; + letter-spacing: 1px; + text-shadow: 2px 2px 12px rgba(0, 0, 0, 0.25); +} + +.tagline { + font-size: 1.2rem; + color: #fff8e7; +} + +.menu-container { + max-width: 1000px; + margin: 0 auto 40px; + background: rgba(255, 255, 255, 0.12); + border-radius: 20px; + padding: 30px; + backdrop-filter: blur(10px); + box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25); +} + +#menu-title { + text-align: center; + margin-bottom: 25px; + font-size: 2rem; +} + +.button-container { + display: flex; + flex-wrap: wrap; + justify-content: center; + gap: 15px; + margin-bottom: 30px; +} + +button { + background: #ffffff; + color: #ff5f6d; + border: none; + padding: 12px 20px; + border-radius: 999px; + font-size: 1rem; + font-weight: bold; + cursor: pointer; + transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease; +} + +button:hover { + background: #ff5f6d; + color: #ffffff; + transform: translateY(-3px); + box-shadow: 0 8px 18px rgba(0, 0, 0, 0.2); +} + +.menu-display { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); + gap: 20px; +} + +.menu-card, +.welcome-card { + background: rgba(255, 255, 255, 0.18); + border-radius: 18px; + padding: 20px; + box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18); +} + +.menu-card h3, +.welcome-card h3 { + margin-bottom: 10px; + color: #fff4b8; +} + +.menu-card p, +.welcome-card p { + margin-bottom: 8px; + line-height: 1.5; +} + +.price { + display: inline-block; + margin-top: 8px; + font-weight: bold; + color: #ffffff; + background: rgba(0, 0, 0, 0.2); + padding: 6px 10px; + border-radius: 999px; +} + +/* BEACH SCENE */ +.beach-scene { + position: relative; + width: 100%; + height: 320px; + margin-top: 20px; + overflow: hidden; + background: linear-gradient(to bottom, #6fd3ff 0%, #9fe8ff 35%, #3cb6d9 70%, #1f8fb3 100%); +} + +.sun { + position: absolute; + top: 35px; + right: 90px; + width: 70px; + height: 70px; + background: #ffd54f; + border-radius: 50%; + box-shadow: 0 0 30px rgba(255, 213, 79, 0.85); + animation: pulseSun 3s ease-in-out infinite; +} + +.bird { + position: absolute; + width: 24px; + height: 12px; + border-top: 3px solid #1d3557; + border-radius: 50%; +} + +.bird::after { + content: ""; + position: absolute; + left: 10px; + top: -3px; + width: 24px; + height: 12px; + border-top: 3px solid #1d3557; + border-radius: 50%; +} + +.bird-one { + top: 60px; + left: -60px; + animation: flyAcross 12s linear infinite; +} + +.bird-two { + top: 100px; + left: -120px; + transform: scale(0.85); + animation: flyAcross 16s linear infinite 2s; +} + +.bird-three { + top: 140px; + left: -200px; + transform: scale(0.7); + animation: flyAcross 18s linear infinite 4s; +} + +.palm-tree { + position: absolute; + bottom: 55px; + width: 140px; + height: 220px; +} + +.palm-left { + left: 40px; +} + +.palm-right { + right: 50px; + transform: scale(1.05); +} + +.trunk { + position: absolute; + bottom: 0; + left: 55px; + width: 18px; + height: 160px; + background: linear-gradient(to bottom, #8b5a2b, #5c3a1e); + border-radius: 12px; + transform: skew(-8deg); + box-shadow: inset 2px 0 0 rgba(255, 255, 255, 0.15); +} + +.leaves { + position: absolute; + top: 20px; + left: 5px; + width: 130px; + height: 90px; +} + +.leaf { + position: absolute; + width: 90px; + height: 18px; + background: linear-gradient(to right, #2ecc71, #1f9d55); + border-radius: 50px 0 50px 0; + transform-origin: left center; + animation: swayLeaf 4s ease-in-out infinite; +} + +.leaf1 { + top: 10px; + left: 35px; + transform: rotate(-25deg); +} + +.leaf2 { + top: 25px; + left: 20px; + transform: rotate(-5deg); +} + +.leaf3 { + top: 35px; + left: 18px; + transform: rotate(15deg); +} + +.leaf4 { + top: 18px; + left: 0; + transform: rotate(-45deg); +} + +.leaf5 { + top: 38px; + left: 0; + transform: rotate(35deg); +} + +.ocean { + position: absolute; + bottom: 45px; + left: 0; + width: 100%; + height: 95px; + background: linear-gradient(to bottom, #3cc8ff, #198fb8); +} + +.wave { + position: absolute; + left: -10%; + width: 120%; + height: 20px; + border-radius: 50%; + background: rgba(255, 255, 255, 0.3); +} + +.wave1 { + bottom: 110px; + animation: waveMove 4s linear infinite; +} + +.wave2 { + bottom: 90px; + animation: waveMove 6s linear infinite; +} + +.sand { + position: absolute; + bottom: 0; + left: 0; + width: 100%; + height: 60px; + background: linear-gradient(to bottom, #f6d58e, #e5b96d); +} + +/* ANIMATIONS */ +@keyframes flyAcross { + 0% { + transform: translateX(0) translateY(0); + } + 25% { + transform: translateX(30vw) translateY(-8px); + } + 50% { + transform: translateX(60vw) translateY(6px); + } + 75% { + transform: translateX(90vw) translateY(-5px); + } + 100% { + transform: translateX(120vw) translateY(0); + } +} + +@keyframes swayLeaf { + 0%, 100% { + margin-left: 0; + } + 50% { + margin-left: 6px; + } +} + +@keyframes waveMove { + 0% { + transform: translateX(0); + } + 50% { + transform: translateX(-3%); + } + 100% { + transform: translateX(0); + } +} + +@keyframes pulseSun { + 0%, 100% { + transform: scale(1); + box-shadow: 0 0 30px rgba(255, 213, 79, 0.85); + } + 50% { + transform: scale(1.08); + box-shadow: 0 0 45px rgba(255, 213, 79, 1); + } +} \ No newline at end of file