Условие:

html css

Решение:

Данная задача относится к предмету "Веб-разработка" и его разделу "HTML и CSS". Мы видим на изображении часть макета интерфейса веб-страницы или приложения, который содержит текст и изображение телефона с приложением для заказа еды. ### Что нам нужно сделать? Необходимо разобраться с тем, как реализовать подобный макет с помощью HTML и CSS, и как структурировать страницу. ### Шаг 1: Структура HTML Для начала создадим базовую структуру HTML-документа: ```html Food Ordering App

Find the easiest way!

Download our mobile app for Android or iOS device and order foods from anywhere you are!

Download

``` #### Что тут: 1. Использован основной HTML-шаблон с тегами `html`, `head`, и `body`. 2. В теге `head` мы указываем стандартные метаданные и подключаем CSS файл. 3. Внутри тега `body` создан основной контейнер `div class="container"` для объединения двух основных блоков страницы: текстовой и визуальной части. 4. В текстовом блоке `text-section` — заголовок, описание и кнопка. 5. В блоке с изображением устройства `image-section` — изображение телефона с приложением. ### Шаг 2: Оформление сайта с помощью CSS Теперь создадим CSS, чтобы структурировать и стилизовать элементы. ```css /* Сброс стандартных стилей для различных браузеров */ * { margin: 0; padding: 0; box-sizing: border-box; } /* Контейнер, который объединяет текст и изображение */ .container { display: flex; justify-content: space-between; align-items: center; padding: 20px; max-width: 1200px; margin: 0 auto; } /* Оформление текстового блока */ .text-section { max-width: 50%; } .text-section h1 { font-size: 2.5em; color: black; margin-bottom: 10px; } .text-section p { font-size: 1.2em; margin-bottom: 20px; color: #333; } .text-section button { padding: 10px 20px; background-color: #007BFF; color: white; border: none; font-size: 1em; cursor: pointer; } .text-section button:hover { background-color: #0056b3; } /* Оформление блока с изображением */ .image-section img { max-width: 100%; height: auto; } ``` #### Что здесь сделано: 1. **Сброс стандартных стилей** с помощью * — обнуляются стандартные отступы, что помогает избежать проблем с версткой в разных браузерах. 2. Для главного контейнера `.container` используются **Flexbox** для выравнивания текста и изображения по горизонтальной оси. Элементы выстроены в строку с помощью свойства `display: flex`. 3. **Текстовая секция** `text-section` настроена с максимальной шириной в 50%, добавлены стили для заголовка, текста и кнопки. 4. Кнопка с классом `button`: **стиль для кнопки** включает отступы, цвет фона и добавляет эффект при наведении. 5. **Изображение" в блоке `image-section`** автоматически подстраивается по высоте и ширине, заполняя максимум доступного пространства. ### Шаг 3: Адаптивность Добавим несколько стилей для обеспечения адаптивности на мобильных устройствах (при изменении ширины экрана): ```css @media (max-width: 768px) { .container { flex-direction: column; text-align: center; } .text-section, .image-section { max-width: 100%; } .text-section { margin-bottom: 20px; } } ``` Здесь: 1. **`@media` правило** — задаем поведение для экранов шириной до 768px, т.е. для планшетов и мобильных устройств. При изменении ширины экрана: - Весь блок будет превращаться в вертикальную колонку. - Элементы будут брать 100% своей ширины и центрироваться. ### Итог: Этот код создаст веб-страницу, на которой будет выведен текст и изображение телефона рядом друг с другом (на десктопах), а на мобильных — будут размещены один под другим. Тексты и кнопки стилизованы, а изображение телефона адаптируется под экран. Если у вас есть файл с изображением телефона `phone.jpg`, нужно убедиться, что он находится в правильной папке — там, где ожидает его HTML-код.