В тази задача ще създадете уеб страница с име travel_guide.html, която представя пътеводител за туристически дестинации в Европа. Страницата трябва да бъде изградена с HTML за структурата и вътрешен CSS за оформлението.
Обща структура на страницата
Страницата съдържа пет основни блока и трябва:
- да бъде с ширина 1000 px
- да бъде центрирана в браузъра
- да премахне стандартните отстояния (margin и padding) за всички елементи
Блок 1 – Горен панел (Header)
Горният панел е с фон #2c3e50 и височина 200 px.
Той съдържа:
- Лого (logo.png) отляво, оразмерено на 80% от височината на панела, със заоблени ръбове (10 px) и отстояния по 10 px
- Заглавие от първо ниво: „ЕВРОПЕЙСКИ ПЪТЕВОДИТЕЛ“, шрифт Georgia, размер 36 px, цвят #ecf0f1, центрирано хоризонтално и вертикално
Блок 2 – Навигационно меню
Менюто е с фон #34495e и височина 50 px.
То съдържа линкове към секциите:
- Рим (#rome)
- Париж (#paris)
- Берлин (#berlin)
- Прага (#prague)
Линковете са без подчертаване, подравнени вдясно и вертикално центрирани, с цвят #f1c40f и размер 18 px. При посочване с мишката фонът става #f1c40f, а текстът – #2c3e50.
Блок 3 – Въведение
Блокът е с фон #011d23 и padding 20 px.
Съдържа заглавие:
„За нас“
- Размер: 32 px
- Цвят: #ecf0f1
- Центрирано подравняване
Следва параграф с текст от ресурсните файлове, размер 18 px, цвят #ffffff и двустранно подравняване.
Блок 4 – Дестинации
Фонът е #bdc3c7 с padding 20 px.
Съдържа четири секции – по две на ред, с ширина 45% и разстояние между тях 10%.
Всяка секция съдържа:
- Заглавие от второ ниво (Times New Roman, 28 px, #2c3e50)
- Горна рамка: 3 px solid #2c3e50
- Изображение на столицата, центрирано и с ширина 60%
- Параграф с текст от ресурсните файлове, размер 28 px, цвят #2c3e50
Footer
Долната част е с фон #2c3e50 и височина 80 px.
Тя съдържа центриран текст:
© 2026 European Travel Guide
Размер: 25 px, цвят: #ecf0f1.
Заключение
Тази задача обединява ключови умения по HTML и CSS: оформление на header, навигация, секции, работа с изображения, вътрешни стилове и подравняване. Тя е отлична за подготовка за ДЗИ и практически уеб проекти.
Успех в подготовката за ДЗИ!