A web project for a food delivery service with a modern, responsive interface. Implemented using HTML5 and CSS3, without frameworks. The layout is based on a design from Figma.
/
├── index.html # Main HTML page
├── style.css # Project's main styles
└── img/ # Images
- Top navigation with logo, burger button, navigation links and actions (search, cart, Sign Up).
- Mobile adaptation via checkbox and pseudo-button.
- Main headline with CTA (Explore Food / Download App).
- Delivery image on the right side.
- Left: image.
- Right: text and features (icons + descriptions).
✅ HTML is semantically structured using
<header>,<nav>,<main>,<section>,<article>.
- Fonts: Google Fonts (
Rubik) - Color palette:
- Background:
#f5f6f8 - Text:
#363853 - Accents:
#FF7A50,#ff7757
- Background:
- Box-sizing:
border-boxfor all elements.
- Flexbox alignment.
- Mobile menu at
max-width: 992px:- Animated burger button.
- Menu expands on click.
- Two blocks: text and image.
- Responsive
font-sizeviaclamp(). - Flex → Column on mobile.
- Two blocks: image and content.
- Features list with icons (SVG).
- Centered content for screens <992px.
- Media queries for
1200px,992px,768px,576px,480px. clamp()used for scalable font sizes.- Mobile version: burger menu, vertically stacked blocks, reduced spacing and font sizes.
- ✅ Clean, valid HTML5/CSS3
- ✅ No JS (menu works via checkbox)
- ✅ Fully responsive design
- ✅ Modern UI, similar to mobile apps
Volodymyr Shevchenko --------- https://github.com/mewnityy
Free for educational use. Please credit the author if shared publicly.
Веб-проєкт для сервісу доставки їжі з сучасним, адаптивним інтерфейсом. Реалізований за допомогою HTML5 та CSS3, без використання фреймворків. Макет створений на основі дизайну з Figma.
/
├── index.html # Головна HTML-сторінка
├── style.css # Основні стилі проєкту
└── img/ # Зображення
- Верхнє меню з логотипом, бургер-кнопкою, навігацією та діями (пошук, корзина, Sign Up).
- Мобільна адаптація через checkbox та псевдо-кнопку.
- Головний заголовок з CTA (Explore Food / Download App).
- Зображення доставки з правого боку.
- Ліворуч: зображення.
- Праворуч: текст, фічі (ікони + описи).
✅ HTML структурований семантично з використанням
<header>,<nav>,<main>,<section>,<article>.
- Шрифти: Google Fonts (
Rubik) - Колірна палітра:
- Основний фон:
#f5f6f8 - Основний текст:
#363853 - Акценти:
#FF7A50,#ff7757
- Основний фон:
- Box-sizing:
border-boxдля всіх елементів.
- Flexbox для вирівнювання.
- Мобільне меню на
max-width: 992px:- Бургер-кнопка з анімацією.
- Меню розгортається при кліку.
- Два блоки: текст та зображення.
- Адаптивний
font-sizeчерезclamp(). - Flex → Column на мобільних.
- Два блоки: картинка та контент.
- Список фіч з іконками (SVG).
- Контент центрований на екранах <992px.
- Реалізовано медіа-запити на
1200px,992px,768px,576px,480px. - Використано
clamp()для масштабованих розмірів шрифтів. - Мобільна версія: меню-гамбургер, вертикальне вирівнювання блоків, зменшені відступи та шрифти.
- ✅ Чистий, валідний HTML5/CSS3
- ✅ Без JS (меню працює на checkbox)
- ✅ Повністю адаптивний дизайн
- ✅ Сучасний UI, схожий на мобільні застосунки
Володимир Шевченко --------- https://github.com/mewnityy
Вільне використання в освітніх цілях. Вказуй автора, якщо поширюєш публічно.