Расположение элементов

Часть раздела Styling with CSS путешествия по HTML на Coddy — урок 73 из 76.

Задание

Легко

Давайте попрактикуемся в использовании flexbox для создания простой горизонтальной панели навигации. Используйте CSS, чтобы стилизовать меню в соответствии с дизайном на изображении ниже.

Выполните следующие шаги:

Установите панель навигации в качестве flex-контейнера.
Добавьте расстояние между ссылками.
1. Используйте justify-content: space-around для равномерного распределения ссылок.
Стилизуйте панель навигации.
1. Установите цвет фона на darkblue.
2. Добавьте внутренние отступы (padding), чтобы создать пространство вокруг ссылок.
Стилизуйте навигационные ссылки.
1. Выберите элементы <a>.
2. Установите цвет текста на white.
3. Удалите подчеркивание по умолчанию.
4. Установите размер шрифта на 18px.
5. Добавьте padding 8px 15px для лучшего интервала.

Попробуйте сами

<html>
    <head>
        <title>Arrange Items</title>
        <link rel="stylesheet" href="styles.css">  
    </head>
    <body>
        <nav class="navbar">
          <a href="#">Home</a>
          <a href="#">About</a>
          <a href="#">Services</a>
          <a href="#">Contact</a>
        </nav>
    </body>
</html>