EXUPERY WEB LAB / CHALLENGE 01

Създай адаптивна навигация

Използвай CSS Flexbox, за да създадеш навигация, която се адаптира към различни размери на екрана.

Твоята задача

Използвай семантичен елемент nav.
Добави поне три навигационни връзки.
Подреди връзките хоризонтално с Flexbox.
При ширина 375px подреди връзките вертикално.

EDITOR READY

LIVE PREVIEW

HTML + CSS

<nav class="site-nav">
  <a href="#home">Начало</a>
  <a href="#about">За нас</a>
  <a href="#contact">Контакти</a>
</nav>

<main>
  <h1>Моят адаптивен сайт</h1>
  <p>Направи навигацията responsive.</p>
</main>

body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 24px;
}

.site-nav {
  background: #182235;
  padding: 16px;
}

.site-nav a {
  color: white;
  text-decoration: none;
  padding: 8px 12px;
}

/* Задача:
   1. Добави display: flex към .site-nav.
   2. Подреди връзките хоризонтално.
   3. При ширина до 600px използвай
      flex-direction: column.
*/

Нуждаеш се от помощ?

Разкривай подсказките постепенно, когато се затрудниш.

0 / 3

Подсказка 1
Коя CSS layout система позволява подреждане в ред или колона?
Подсказка 2
Използвай display: flex върху .site-nav. Помисли как flex-direction определя посоката.
Подсказка 3
Добави @media (max-width: 600px), в който променяш flex-direction на .site-nav за мобилния изглед.

Проверка на решението

Провери HTML структурата и адаптивното CSS оформление.

Резултатите ще се появят тук след проверката.