+
+
+
+ Today's Selections
+Japanese Fusion • Sushi • Brunch • Drinks
++ Fresh rolls, warm bites, and smooth drinks served in a modern Japanese-inspired dining experience. +
+Today's Selections
+${item.description}
+${item.price}
+`; + + menuDisplay.appendChild(menuItem); + }); +} + +displayMenu("breakfast"); +buttons[0].classList.add("active"); + +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); + }); +}); \ No newline at end of file diff --git a/Interactive-restaurant-menu/style.css b/Interactive-restaurant-menu/style.css new file mode 100644 index 0000000..e9f3305 --- /dev/null +++ b/Interactive-restaurant-menu/style.css @@ -0,0 +1,282 @@ +* { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +body { + font-family: Arial, sans-serif; + background: + radial-gradient(circle at top left, rgba(244, 114, 182, 0.12), transparent 30%), + radial-gradient(circle at bottom right, rgba(20, 184, 166, 0.12), transparent 28%), + linear-gradient(135deg, #fff8f4, #fff1ec, #fffaf7); + color: #1f2937; + line-height: 1.6; + padding: 20px; + min-height: 100vh; + position: relative; + overflow-x: hidden; +} + +.page-glow { + position: fixed; + width: 300px; + height: 300px; + border-radius: 50%; + filter: blur(90px); + opacity: 0.35; + z-index: 0; + pointer-events: none; +} + +.glow-1 { + background: #fb7185; + top: -80px; + left: -80px; +} + +.glow-2 { + background: #14b8a6; + bottom: -100px; + right: -100px; +} + +.hero { + position: relative; + max-width: 1100px; + margin: 0 auto 35px; + min-height: 420px; + border-radius: 24px; + overflow: hidden; + background: + radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.12), transparent 30%), + radial-gradient(circle at 80% 70%, rgba(255, 255, 255, 0.08), transparent 30%), + linear-gradient(135deg, #9d174d, #0f766e); + + box-shadow: 0 18px 45px rgba(0, 0, 0, 0.18); + + display: flex; + align-items: center; + justify-content: center; +} + + +.hero-overlay { + position: absolute; + inset: 0; + + /* subtle glass + lighting effect */ + background: + linear-gradient( + 120deg, + rgba(255, 255, 255, 0.05), + rgba(255, 255, 255, 0.02), + rgba(255, 255, 255, 0.08) + ); +} + +.hero-content { + position: relative; + text-align: center; + color: white; + padding: 30px; + max-width: 760px; + animation: fadeUp 0.9s ease; +} + +.hero::before { + content: ""; + position: absolute; + width: 260px; + height: 260px; + border: 2px solid rgba(255, 255, 255, 0.1); + border-radius: 50%; + top: 30px; + left: 60px; +} + +.hero::after { + content: ""; + position: absolute; + width: 180px; + height: 180px; + border: 2px solid rgba(255, 255, 255, 0.08); + border-radius: 50%; + bottom: 40px; + right: 70px; +} + +.eyebrow { + font-size: 0.9rem; + letter-spacing: 2px; + text-transform: uppercase; + opacity: 0.95; + margin-bottom: 14px; +} + +.hero h1 { + font-size: clamp(2.4rem, 5vw, 4rem); + margin-bottom: 14px; +} + +.hero-text { + margin: 0 auto; + font-size: 1.08rem; + opacity: 0.95; +} + +.menu-controls { + position: relative; + z-index: 1; + display: flex; + flex-wrap: wrap; + justify-content: center; + gap: 12px; + max-width: 1000px; + margin: 0 auto 35px; +} + +.menu-btn { + border: none; + padding: 12px 18px; + border-radius: 999px; + background: white; + color: #0f766e; + font-weight: 700; + cursor: pointer; + font-size: 0.98rem; + box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08); + transition: transform 0.25s ease, background 0.25s ease, color 0.25s ease, box-shadow 0.25s ease; +} + +.menu-btn:hover { + transform: translateY(-3px); + background: #0f766e; + color: white; + box-shadow: 0 12px 24px rgba(15, 118, 110, 0.24); +} + +.menu-btn.active { + background: #e11d48; + color: white; + box-shadow: 0 12px 24px rgba(225, 29, 72, 0.25); +} + +.menu-section { + position: relative; + z-index: 1; + max-width: 1050px; + margin: 0 auto; +} + +.section-heading { + text-align: center; + margin-bottom: 22px; +} + +.section-tag { + color: #0f766e; + font-size: 0.9rem; + font-weight: 700; + letter-spacing: 1px; + text-transform: uppercase; + margin-bottom: 8px; +} + +#menu-title { + color: #9d174d; + font-size: clamp(1.8rem, 3vw, 2.5rem); +} + +#menu-display { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); + gap: 22px; +} + +.menu-item { + background: rgba(255, 255, 255, 0.94); + border: 1px solid rgba(255, 255, 255, 0.7); + border-radius: 18px; + padding: 22px; + box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08); + backdrop-filter: blur(10px); + transform: translateY(18px); + opacity: 0; + animation: cardFade 0.55s ease forwards; +} + +.menu-item:nth-child(1) { animation-delay: 0.05s; } +.menu-item:nth-child(2) { animation-delay: 0.12s; } +.menu-item:nth-child(3) { animation-delay: 0.19s; } + +.menu-item h3 { + color: #111827; + margin-bottom: 8px; + font-size: 1.1rem; +} + +.menu-item p { + color: #4b5563; + margin-bottom: 10px; +} + +.menu-image { + width: 100%; + height: 140px; + border-radius: 12px; + margin-bottom: 12px; + + background-size: cover; + background-position: center; + + transition: transform 0.3s ease; +} + +.menu-item:hover .menu-image { + transform: scale(1.05); +} + +.price { + color: #e11d48; + font-weight: bold; + font-size: 1rem; +} + +@keyframes fadeUp { + from { + opacity: 0; + transform: translateY(18px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +@keyframes cardFade { + from { + opacity: 0; + transform: translateY(18px) scale(0.98); + } + to { + opacity: 1; + transform: translateY(0) scale(1); + } +} + +@media (max-width: 700px) { + body { + padding: 16px; + } + + .hero { + min-height: 340px; + border-radius: 18px; + } + + .menu-btn { + width: 100%; + max-width: 220px; + } +}