Верстка шапки сайта.

Как правило, когда мы с вами начинаем создавать макет любой веб-страницы, мы начинаем делать это с шапки сайта.

Как правило, на всех веб-страницах сайта - эта шапка сайта есть. 

В фреймворке Bulma за шапку сайта отвечает специальный раздел документации, который называется Layout - Hero. 

Пример кода для создания самой простой шапки сайта следующий:

<section class="hero">
  <div class="hero-body">
    <div class="container">
      <h1 class="title">
        Hero title
      </h1>
      <h2 class="subtitle">
        Hero subtitle
      </h2>
    </div>
  </div>
</section>

Код для шапки сайта, как правило размещается сразу после открывающего элемента <body>.

По сути, шапка сайта создается с помощью класса hero и hero-body.

Чтобы изменить фоновый цвет, можно добавить какой-либо модификатор цвета для элемента с классом hero.

Например,

<section class="hero is-success">
...
</section>

Т.е. просто скопировав заготовку кода из документации Bulma - мы с вами создали полноценную шапку сайта.

Если нам нужно в качестве фонового цвета использовать градиент, можно добавить модификатор is-bold.

<section class="hero is-success is-bold">
…

Есть также модификаторы, который отвечают за размер. Есть 3 основных значения:

medium

large

fullheight

Например,

<section class="hero is-success is-bold is-medium">
…

Сделает размер шапки "средним" размером.

Это основы работы с шапкой (hero) в фреймворке Bulma. Все очень просто, копируем заготовку и применяем к ней различные модификаторы: для цвета, градиента или размера.

Вот общий алгоритм, как это делается.

Здесь есть много особенностей, которые могут возникнуть при решении каких-то конкретных практических задач верстки. Но, в целом - это самые главные основы, которые мы с вами должны знать.

Чтобы оставить комментарий или отчет по выполнению задания, зарегистрируйтесь на сайте.