/
hellok1tta
/
html-css
Обзор
Документация
Войти
/
hellok1tta
/
html-css
Код
Запросы
0
Задачи
Вики
Пакеты
0
Релизы
0
CI/CD
Аналитика
Безопасность
master
frontend/menu.html
203 строки
10 KB
hellok1tta
upload files
20 дек 2025, 12:41
20 дек 2025, 12:41
b528fd7
Код
Авторство
О чём код?
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Меню</title> <style> @import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Unbounded:wght@200..900&display=swap'); </style> <link rel="stylesheet" href="assets/css/main.css"> <link rel="website icon" type="png" href="assets/img/H.png"> </head> <body> <header> <nav> <div class="logo"> <a href="index.html"><img src="assets/img/Heaven.png" alt="лого"></a> </div> <div class="menu"> <a class="menu-btn" href="menu.html">Меню</a> <a class="menu-btn" href="promotions.html">Акции</a> <a class="menu-btn" href="workshops.html">Мастер-классы</a> <a class="menu-btn" href="contacts.html">Контакты</a> <a class="a-btn" href="account.html">Личный Кабинет</a> <a class="a-btn cart-btn" href="cart.html"> 🛒 <span id="cartCount" class="cart-count">0</span> </a> </div> <button class="burger-menu" id="burgerMenu" aria-label="Открыть меню"> <span></span> <span></span> <span></span> </button> </nav> <div class="mobile-menu-overlay" id="mobileMenuOverlay"></div> <div class="mobile-menu" id="mobileMenu"> <div class="mobile-menu-header"> <a href="index.html" class="mobile-logo"> <img src="assets/img/Heaven.png" alt="Heaven"> </a> </div> <div class="mobile-menu-content"> <a class="mobile-menu-link" href="menu.html">Меню</a> <a class="mobile-menu-link" href="promotions.html">Акции</a> <a class="mobile-menu-link" href="workshops.html">Мастер-классы</a> <a class="mobile-menu-link" href="contacts.html">Контакты</a> <div class="mobile-menu-buttons"> <a class="a-btn mobile-account-btn" href="account.html"> Личный Кабинет </a> <a class="a-btn mobile-cart-btn" href="cart.html"> Корзина <span id="mobileCartCount" class="cart-count">0</span> </a> </div> </div> </div> </header> <main> <div class="menu-container"> <div class="mobile-categories-toggle"> <button class="categories-toggle-btn" id="categoriesToggleBtn"> <span>Категории</span> <svg class="toggle-icon" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M4 6L8 10L12 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg> </button> <div class="mobile-categories-dropdown" id="mobileCategoriesDropdown"> <ul class="mobile-category-list"> <li class="mobile-category-item"> <a href="#coffee" class="mobile-category-link" data-category="coffee">Кофе</a> </li> <li class="mobile-category-item"> <a href="#cold-coffee" class="mobile-category-link" data-category="cold-coffee">Холодный кофе</a> </li> <li class="mobile-category-item"> <a href="#tea" class="mobile-category-link" data-category="tea">Чай</a> </li> <li class="mobile-category-item"> <a href="#cold-tea" class="mobile-category-link" data-category="cold-tea">Холодный чай</a> </li> <li class="mobile-category-item"> <a href="#desserts" class="mobile-category-link" data-category="desserts">Десерты</a> </li> <li class="mobile-category-item"> <a href="#breakfasts" class="mobile-category-link" data-category="breakfasts">Завтраки</a> </li> <li class="mobile-category-item"> <a href="#seasonal" class="mobile-category-link" data-category="seasonal">Сезонное меню</a> </li> </ul> </div> </div> <div class="menu-wrapper"> <aside class="sidebar desktop-sidebar"> <h2>Категории</h2> <ul class="category-list"> <li class="category-item"> <a href="#coffee" class="category-link">Кофе</a> </li> <li class="category-item"> <a href="#cold-coffee" class="category-link">Холодный кофе</a> </li> <li class="category-item"> <a href="#tea" class="category-link">Чай</a> </li> <li class="category-item"> <a href="#cold-tea" class="category-link">Холодный чай</a> </li> <li class="category-item"> <a href="#desserts" class="category-link">Десерты</a> </li> <li class="category-item"> <a href="#breakfasts" class="category-link">Завтраки</a> </li> <li class="category-item"> <a href="#seasonal" class="category-link">Сезонное меню</a> </li> </ul> </aside> <main class="menu-content"> <section id="coffee" class="category-section"> <h2 class="category-title">Кофе</h2> <div class="menu-grid" id="coffee-grid"></div> </section> <section id="cold-coffee" class="category-section"> <h2 class="category-title">Холодный кофе</h2> <div class="menu-grid" id="cold-coffee-grid"></div> </section> <section id="tea" class="category-section"> <h2 class="category-title">Чай</h2> <div class="menu-grid" id="tea-grid"></div> </section> <section id="cold-tea" class="category-section"> <h2 class="category-title">Холодный чай</h2> <div class="menu-grid" id="cold-tea-grid"></div> </section> <section id="desserts" class="category-section"> <h2 class="category-title">Десерты</h2> <div class="menu-grid" id="desserts-grid"></div> </section> <section id="breakfasts" class="category-section"> <h2 class="category-title">Завтраки</h2> <div class="menu-grid" id="breakfasts-grid"></div> </section> <section id="seasonal" class="category-section"> <h2 class="category-title">Сезонное меню</h2> <div class="menu-grid" id="seasonal-grid"></div> </section> </main> </div> </div> </main> <footer> <div class="footer-container"> <div class="footer-content"> <div class="footer-column animate-on-scroll fade-in-up"> <h3>Кофейня Heaven</h3> <p>Ваш уголок рая на земле</p> </div> <div class="footer-column animate-on-scroll fade-in-up"> <h3>Контакты</h3> <ul> <li>Ростов-на-Дону, ул. Текучёва, 139а</li> <li>+7 (999) 123-45-67</li> <li>info@heaven-coffee.ru</li> </ul> </div> <div class="footer-column animate-on-scroll fade-in-up"> <h3>Часы работы</h3> <ul> <li>Пн-Пт: 8:00 - 22:00</li> <li>Сб-Вс: 9:00 - 23:00</li> </ul> </div> </div> <p class="copyright">2025 Heaven | Создано с <i class="fas fa-heart" style="color: #ffffff;"></i> для ценителей кофе</p> </div> </footer> <script src="/assets/js/menu.js"></script> <script src="/assets/js/burger-menu.js"></script> <script src="/assets/js/cart-counter.js"></script> <script src="assets/js/animations.js"></script> </body> </html>