/
ikurakin
/
Table_with_HTML_and_CSS
Обзор
Документация
Войти
/
ikurakin
/
Table_with_HTML_and_CSS
Код
Запросы
0
Задачи
Вики
Пакеты
0
Релизы
0
CI/CD
Аналитика
Безопасность
master
index.html
293 строки
16 KB
Куракин Илья
Исходная версия HTML/CSS
10 янв 2026, 19:16
10 янв 2026, 19:16
1ff0ba4
Код
Авторство
О чём код?
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Прайс-лист на фрукты | Магазин "Фруктовый рай"</title> <link rel="stylesheet" href="style.css"> <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&family=Roboto:wght@300;400;500&display=swap" rel="stylesheet"> </head> <body> <div class="container"> <header class="header"> <h1 class="header__title">Прайс-лист на фрукты</h1> <p class="header__subtitle">Магазин "Фруктовый рай" - свежие фрукты круглый год</p> <div class="header__info"> <div class="info-item"> <span class="info-marker discount-marker"></span> <span>Акционные позиции выделены цветом</span> </div> <div class="info-item"> <span class="info-marker eco-marker"></span> <span>Все продукты экологически чистые</span> </div> </div> </header> <main class="main-content"> <div class="table-container"> <table class="price-table" id="fruit-price-table"> <caption class="table-caption">Актуальные цены на фрукты. Обновлено: <span id="current-date"></span></caption> <thead> <tr class="table-header"> <th scope="col" class="category-header">Категория</th> <th scope="col" class="name-header">Название фрукта</th> <th scope="col" class="origin-header">Страна происхождения</th> <th scope="col" class="season-header">Сезонность</th> <th scope="col" class="price-header">Цена за кг (руб.)</th> <th scope="col" class="availability-header">Наличие</th> </tr> </thead> <tbody> <!-- Категория: Цитрусовые --> <tr class="category-row"> <td rowspan="4" class="category-cell citrus-category"> <div class="category-content"> <span>Цитрусовые</span> </div> </td> <td class="fruit-name">Апельсин</td> <td class="fruit-origin">Египет</td> <td class="fruit-season"> <span class="season-badge year-round">Круглый год</span> </td> <td class="fruit-price">120 ₽</td> <td class="fruit-availability in-stock">В наличии</td> </tr> <tr class="data-row"> <td class="fruit-name">Лимон</td> <td class="fruit-origin">Турция</td> <td class="fruit-season"> <span class="season-badge year-round">Круглый год</span> </td> <td class="fruit-price">150 ₽</td> <td class="fruit-availability low-stock">Мало</td> </tr> <tr class="data-row"> <td class="fruit-name">Грейпфрут</td> <td class="fruit-origin">Китай</td> <td class="fruit-season"> <span class="season-badge winter">Зима</span> </td> <td class="fruit-price">180 ₽</td> <td class="fruit-availability in-stock">В наличии</td> </tr> <tr class="data-row"> <td class="fruit-name">Мандарин <span class="discount-badge">Акция!</span></td> <td class="fruit-origin">Марокко</td> <td class="fruit-season"> <span class="season-badge winter">Зима</span> </td> <td class="fruit-price discount-price"> <span class="old-price">200 ₽</span> 170 ₽ </td> <td class="fruit-availability in-stock">В наличии</td> </tr> <!-- Категория: Экзотические фрукты --> <tr class="category-row"> <td rowspan="5" class="category-cell exotic-category"> <div class="category-content"> <span>Экзотические</span> </div> </td> <td class="fruit-name">Манго</td> <td class="fruit-origin">Индия</td> <td class="fruit-season"> <span class="season-badge summer">Лето</span> </td> <td class="fruit-price">300 ₽</td> <td class="fruit-availability in-stock">В наличии</td> </tr> <tr class="data-row"> <td class="fruit-name">Маракуйя</td> <td class="fruit-origin">Бразилия</td> <td class="fruit-season"> <span class="season-badge year-round">Круглый год</span> </td> <td class="fruit-price">450 ₽</td> <td class="fruit-availability out-of-stock">Нет в наличии</td> </tr> <tr class="data-row"> <td class="fruit-name">Ананас</td> <td class="fruit-origin">Коста-Рика</td> <td class="fruit-season"> <span class="season-badge year-round">Круглый год</span> </td> <td class="fruit-price">280 ₽</td> <td class="fruit-availability in-stock">В наличии</td> </tr> <tr class="data-row"> <td class="fruit-name">Киви</td> <td class="fruit-origin">Новая Зеландия</td> <td class="fruit-season"> <span class="season-badge autumn">Осень</span> </td> <td class="fruit-price">220 ₽</td> <td class="fruit-availability in-stock">В наличии</td> </tr> <tr class="data-row"> <td class="fruit-name">Питахайя <span class="discount-badge">Акция!</span></td> <td class="fruit-origin">Вьетнам</td> <td class="fruit-season"> <span class="season-badge summer">Лето</span> </td> <td class="fruit-price discount-price"> <span class="old-price">500 ₽</span> 420 ₽ </td> <td class="fruit-availability in-stock">В наличии</td> </tr> <!-- Категория: Ягоды --> <tr class="category-row"> <td rowspan="4" class="category-cell berries-category"> <div class="category-content"> <span>Ягоды</span> </div> </td> <td class="fruit-name">Клубника</td> <td class="fruit-origin">Россия</td> <td class="fruit-season"> <span class="season-badge summer">Лето</span> </td> <td class="fruit-price">350 ₽</td> <td class="fruit-availability in-stock">В наличии</td> </tr> <tr class="data-row"> <td class="fruit-name">Виноград</td> <td class="fruit-origin">Молдова</td> <td class="fruit-season"> <span class="season-badge autumn">Осень</span> </td> <td class="fruit-price">290 ₽</td> <td class="fruit-availability in-stock">В наличии</td> </tr> <tr class="data-row"> <td class="fruit-name">Вишня</td> <td class="fruit-origin">Россия</td> <td class="fruit-season"> <span class="season-badge summer">Лето</span> </td> <td class="fruit-price">320 ₽</td> <td class="fruit-availability low-stock">Мало</td> </tr> <tr class="data-row"> <td class="fruit-name">Малина</td> <td class="fruit-origin">Россия</td> <td class="fruit-season"> <span class="season-badge summer">Лето</span> </td> <td class="fruit-price">400 ₽</td> <td class="fruit-availability in-stock">В наличии</td> </tr> <!-- Категория: Косточковые --> <tr class="category-row"> <td rowspan="3" class="category-cell stone-category"> <div class="category-content"> <span>Косточковые</span> </div> </td> <td class="fruit-name">Персик</td> <td class="fruit-origin">Азербайджан</td> <td class="fruit-season"> <span class="season-badge summer">Лето</span> </td> <td class="fruit-price">250 ₽</td> <td class="fruit-availability in-stock">В наличии</td> </tr> <tr class="data-row"> <td class="fruit-name">Абрикос</td> <td class="fruit-origin">Армения</td> <td class="fruit-season"> <span class="season-badge summer">Лето</span> </td> <td class="fruit-price">230 ₽</td> <td class="fruit-availability in-stock">В наличии</td> </tr> <tr class="data-row"> <td class="fruit-name">Слива <span class="discount-badge">Акция!</span></td> <td class="fruit-origin">Молдова</td> <td class="fruit-season"> <span class="season-badge autumn">Осень</span> </td> <td class="fruit-price discount-price"> <span class="old-price">190 ₽</span> 160 ₽ </td> <td class="fruit-availability in-stock">В наличии</td> </tr> </tbody> <tfoot> <tr class="table-footer"> <td colspan="3" class="footer-info"> Всего позиций: <span class="highlight">16</span> </td> <td colspan="3" class="footer-note"> Доставка бесплатна при заказе от 2000 ₽ </td> </tr> </tfoot> </table> <div class="legend"> <h3 class="legend-title">Легенда таблицы</h3> <div class="legend-items"> <div class="legend-item"> <span class="legend-color availability-in-stock"></span> <span>В наличии</span> </div> <div class="legend-item"> <span class="legend-color availability-low"></span> <span>Мало в наличии</span> </div> <div class="legend-item"> <span class="legend-color availability-out"></span> <span>Нет в наличии</span> </div> <div class="legend-item"> <span class="discount-badge small">Акция!</span> <span>Акционные товары</span> </div> </div> </div> </div> </main> <footer class="footer"> <p>© 2025, Магазин "Фруктовый рай". Все права защищены.</p> <p class="footer-contacts"> Телефон: +7 (XXX) XXX-XX-XX | Email: info@fruitparadise.ru | Адрес: г. Москва, ул. Фруктовая, д. 10 </p> </footer> </div> <script> // Установка текущей даты в заголовок таблицы document.getElementById('current-date').textContent = new Date().toLocaleDateString('ru-RU', { day: 'numeric', month: 'long', year: 'numeric' }); </script> </body> </html>