В папке проекта сверстай новую страницу Детальная новость (news_detail.html), используй только html, css, css переменные и легкую JS-анимацию, учитывай современные стандарты CSS, поддержку браузеров и производительность. Верстка должна быть адаптивной (должна корректно отображаться на мобильных устройствах (смартфоны, планшеты), ноутбуках и десктопах). Используй BEM naming. Для верстки используй существующие стили и оформление. Страница должна быть современной, читабельной и удобной для пользователя. Вдохновение: страницы новостей крупных медиа (BBC, The Guardian, РБК, Коммерсантъ). Фокус на читаемости: достаточно белого пространства, чёткое разделение блоков. Единый стиль для всех блоков на сайте.
Структура страницы:
1. header взять из index.html;
2. sidebar взять из index.html;
3. Основной контент (main);
4. footer взять из index.html.
Основной контент (main) должен содержать хлебные крошки: главная - новости; изображение‑баннер; заголовок; краткий анонс новости (1–3 предложения); мета‑информация: дата публикации; основной текст новости: разбивка на абзацы с отступами, выделение цитат (блок‑цитата), использование списков (<ul>, <ol>); галерея изображений: сетка изображений (2–4 колонки в зависимости от ширины экрана), миниатюры с возможностью открытия в лайтбоксе (lightbox) для просмотра в полном размере; блок с документами: заголовок «Документы» или «Прикреплённые файлы», список файлов с иконками (PDF, DOC, XLS и т. д.), название файла и его размер (например, Документ.pdf (2,3 МБ)), ссылка для скачивания (значок скачивания рядом с названием); блок со ссылками: заголовок «Полезные ссылки» или «По теме», указание, что ссылка ведёт на внешний ресурс (значок или надпись «Вне сайта»).