Зверстати сайт про місто Вільнюс. Сайт має повторювати структуру наведеного прикладу (фото прикріпила), але містити власний опрацьований контент.
1. Ширина колонки сайту — 1000 пікселів. Розмір фонового зображення в хедері — 1000*600 пікселів. Гарнітура Calibri.
2. Меню сайту має бути зафіксованим на висоті 20 пікселів від верхнього поля сторінки, та залишатись на цій висоті при прокрутці сторінки (допускається часткове перекриття контенту). Колір фону під меню білий*, з прозорістю в 30%. Прозорість фону задається за допомогою background-color зі значеннями в rgba ( де r — червоний колір, g — зелений, b — синій, а — альфа-канал, що дає можливість задати прозорість).
3. Необхідно надати посиланням у меню особливих властивостей — при наведенні пункт меню має змінюватись з сірого на темно синій* та міняти накреслення зі звичайного на жирне . Такого ефекту можна досягти завдяки псевдо-селектору :hover.
Формат запису:
a:hover {color:green;} — означає що при наведенні колір посилання буде змінюватись на зелений
.classname:hover {text-decoration:underline} — при наведенні у елемента з класом classname буде з’являтися підкреслення
* колір у вашому макеті може відрізнятися, залежить від обраного зображення для хедеру та основних кольорів макету.
4. Сайт односторінковий. Навігація в межах сторінки має проходити за допомогою посилань-якорів. http://htmlbook.ru/samhtml/yakorya
Формат запису:
Наприклад, якщо необхідно перейти від пункту меню «Факти» до певного місця на сторінці де про ці факти розповідається, необхідно:
• біля місця де розповідається про факти створити «якір» — <a name="facty"></a>, де facty ваша назва якоря
• пункту меню задати посилання на цей «якір» — <a href="#facty ">Факти</a> (решітка + ваша назва якоря).
5. Кнопка «Вгору» має бути зафіксована внизу сторінки (position: absolute;) та вести на «якір» в хедері сайту.