Как сделать элегантную шапку сайта: Лучшие практики и примеры на HTML

Содержание статьи

Введение

Первое впечатление, как известно, формируется очень быстро, и в случае с вашим веб-сайтом, «шапка» играет в этом ключевую роль. От того, насколько красиво и функционально выполнена шапка сайта на HTML, зависит впечатление посетителей и, в конечном итоге, эффективность сайта. В этой статье мы разберемся, как создать привлекательную и полезную шапку сайта на примере уже готовой разметки.

Расширенная HTML Структура

Начнём с HTML структуры, в которую включим все необходимые элементы. Мы будем работать в современном формате HTML используя подходящие теги и методологию BEM нейминга.

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <!-- поисковая оптимизация  -->
  <title>Экокомфорт</title>
  <meta name="description" content="" />
  <meta name="keywords" content="" />
  <!-- подключаем шрифты -->
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  <link
    href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap"
    rel="stylesheet"
  />
  <!-- подключаем стили -->
  <link rel="stylesheet" type="text/css" href="styles.css">
</head>

<body>
  <div class="page__header">
    <header class="header">
      <!-- Контент шапки -->
      <div class="wrapper">
        <div class="header__grid">
          <div class="header__logo">
            <svg xmlns="http://www.w3.org/2000/svg" width="251" height="23" fill="none">
              <path fill="#99BD3D"
                d="M9.33.64c2.08 0 3.94.47 5.58 1.41a9.94 9.94 0 0 1 3.9 3.87c.94 1.64 1.41 3.5 1.41 5.58s-.47 3.95-1.41 5.61a10.21 10.21 0 0 1-3.9 3.87c-1.64.92-3.5 1.38-5.58 1.38-1.86 0-3.54-.32-5.04-.96a9.725 9.725 0 0 1-3.72-2.79l3.09-2.88c1.48 1.66 3.29 2.49 5.43 2.49 1.54 0 2.84-.45 3.9-1.35 1.08-.9 1.78-2.11 2.1-3.63H6.57V9.52h8.46c-.34-1.44-1.04-2.59-2.1-3.45-1.06-.86-2.34-1.29-3.84-1.29-2.14 0-3.95.83-5.43 2.49L.57 4.39c1-1.22 2.24-2.15 3.72-2.79C5.79.96 7.47.64 9.33.64Zm24.326 12.9h-3.36V22h-4.83V1h4.83v8.49h3.48L39.296 1h5.13l-6.87 10.14L44.636 22h-5.52l-5.46-8.46Zm24.689 8.82c-2.18 0-4.15-.47-5.91-1.41-1.74-.94-3.11-2.23-4.11-3.87-.98-1.66-1.47-3.52-1.47-5.58s.49-3.91 1.47-5.55c1-1.66 2.37-2.96 4.11-3.9 1.76-.94 3.73-1.41 5.91-1.41s4.14.47 5.88 1.41c1.74.94 3.11 2.24 4.11 3.9 1 1.64 1.5 3.49 1.5 5.55 0 2.06-.5 3.92-1.5 5.58-1 1.64-2.37 2.93-4.11 3.87-1.74.94-3.7 1.41-5.88 1.41Zm0-4.14c1.24 0 2.36-.28 3.36-.84 1-.58 1.78-1.38 2.34-2.4.58-1.02.87-2.18.87-3.48 0-1.3-.29-2.46-.87-3.48a5.93 5.93 0 0 0-2.34-2.37c-1-.58-2.12-.87-3.36-.87-1.24 0-2.36.29-3.36.87-1 .56-1.79 1.35-2.37 2.37-.56 1.02-.84 2.18-.84 3.48 0 1.3.28 2.46.84 3.48a6.351 6.351 0 0 0 2.37 2.4c1 .56 2.12.84 3.36.84Z"
                class="first"></path>
              <path fill="#fff"
                d="M83.209 13.54h-3.36V22h-4.83V1h4.83v8.49h3.48L88.849 1h5.13l-6.87 10.14L94.189 22h-5.52l-5.46-8.46Zm24.689 8.82c-2.18 0-4.15-.47-5.91-1.41-1.74-.94-3.11-2.23-4.11-3.87-.98-1.66-1.47-3.52-1.47-5.58s.49-3.91 1.47-5.55c1-1.66 2.37-2.96 4.11-3.9 1.76-.94 3.73-1.41 5.91-1.41s4.14.47 5.88 1.41c1.74.94 3.11 2.24 4.11 3.9 1 1.64 1.5 3.49 1.5 5.55 0 2.06-.5 3.92-1.5 5.58-1 1.64-2.37 2.93-4.11 3.87-1.74.94-3.7 1.41-5.88 1.41Zm0-4.14c1.24 0 2.36-.28 3.36-.84 1-.58 1.78-1.38 2.34-2.4.58-1.02.87-2.18.87-3.48 0-1.3-.29-2.46-.87-3.48a5.93 5.93 0 0 0-2.34-2.37c-1-.58-2.12-.87-3.36-.87-1.24 0-2.36.29-3.36.87-1 .56-1.79 1.35-2.37 2.37-.56 1.02-.84 2.18-.84 3.48 0 1.3.28 2.46.84 3.48a6.351 6.351 0 0 0 2.37 2.4c1 .56 2.12.84 3.36.84ZM143.741 22l-.03-12.57-6.18 10.35h-2.16l-6.18-10.11V22h-4.56V1h4.02l7.86 13.05L144.251 1h4.02l.03 21h-4.56Zm36.147-10.56c0 2.78-.95 4.97-2.85 6.57-1.88 1.58-4.59 2.46-8.13 2.64v2.28h-4.47v-2.31c-3.56-.2-6.29-1.09-8.19-2.67-1.88-1.6-2.82-3.77-2.82-6.51 0-2.76.94-4.92 2.82-6.48 1.9-1.58 4.63-2.48 8.19-2.7V.1h4.47v2.13c3.54.2 6.25 1.1 8.13 2.7 1.9 1.6 2.85 3.77 2.85 6.51Zm-10.98 5.4c2.12-.2 3.7-.74 4.74-1.62 1.04-.9 1.56-2.17 1.56-3.81 0-3.2-2.1-4.98-6.3-5.34v10.77Zm-10.77-5.4c0 3.16 2.1 4.96 6.3 5.4V6.07c-2.14.2-3.73.74-4.77 1.62-1.02.86-1.53 2.11-1.53 3.75Zm36.906 10.92c-2.18 0-4.15-.47-5.91-1.41-1.74-.94-3.11-2.23-4.11-3.87-.98-1.66-1.47-3.52-1.47-5.58s.49-3.91 1.47-5.55c1-1.66 2.37-2.96 4.11-3.9 1.76-.94 3.73-1.41 5.91-1.41s4.14.47 5.88 1.41c1.74.94 3.11 2.24 4.11 3.9 1 1.64 1.5 3.49 1.5 5.55 0 2.06-.5 3.92-1.5 5.58-1 1.64-2.37 2.93-4.11 3.87-1.74.94-3.7 1.41-5.88 1.41Zm0-4.14c1.24 0 2.36-.28 3.36-.84 1-.58 1.78-1.38 2.34-2.4.58-1.02.87-2.18.87-3.48 0-1.3-.29-2.46-.87-3.48a5.93 5.93 0 0 0-2.34-2.37c-1-.58-2.12-.87-3.36-.87-1.24 0-2.36.29-3.36.87-1 .56-1.79 1.35-2.37 2.37-.56 1.02-.84 2.18-.84 3.48 0 1.3.28 2.46.84 3.48a6.351 6.351 0 0 0 2.37 2.4c1 .56 2.12.84 3.36.84ZM220.868 1c1.86 0 3.47.31 4.83.93 1.38.62 2.44 1.5 3.18 2.64.74 1.14 1.11 2.49 1.11 4.05 0 1.54-.37 2.89-1.11 4.05-.74 1.14-1.8 2.02-3.18 2.64-1.36.6-2.97.9-4.83.9h-4.23V22h-4.86V1h9.09Zm-.27 11.25c1.46 0 2.57-.31 3.33-.93.76-.64 1.14-1.54 1.14-2.7 0-1.18-.38-2.08-1.14-2.7-.76-.64-1.87-.96-3.33-.96h-3.96v7.29h3.96Zm29.56-7.29h-6.72V22h-4.8V4.96h-6.69V1h18.21v3.96Z"
                class="last"></path>
            </svg>

            <p class="header__text">
              Производство покрытий из&nbsp;резиновой крошки
            </p>
          </div>

          <ul class="navigation-contacts">
            <li class="navigation-contacts__item">
              Звоните, обсудим:<a class="tel" href="tel:84951990621">8 (495) 199 06 21</a>
            </li>
            <li class="navigation-contacts__item">
              Вопросы и предложения:<a class="mail" href="mailto:mail@ecocom.ru">mail@ecocom.ru</a>
            </li>
          </ul>

          <div class="header__buttons">
            <a href="#" class="header__callback button"><span
                class="decorate"></span><span>Заказать звонок</span></a>

            <button class="menu-button" type="button">
              <svg width="50" height="50" viewBox="0 0 100 100">
                <path class="line line1"
                  d="M 20,29.000046 H 80.000231 C 80.000231,29.000046 94.498839,28.817352 94.532987,66.711331 94.543142,77.980673 90.966081,81.670246 85.259173,81.668997 79.552261,81.667751 75.000211,74.999942 75.000211,74.999942 L 25.000021,25.000058">
                </path>
                <path class="line line2" d="M 20,50 H 80"></path>
                <path class="line line3"
                  d="M 20,70.999954 H 80.000231 C 80.000231,70.999954 94.498839,71.182648 94.532987,33.288669 94.543142,22.019327 90.966081,18.329754 85.259173,18.331003 79.552261,18.332249 75.000211,25.000058 75.000211,25.000058 L 25.000021,74.999942">
                </path>
              </svg>
            </button>
          </div>
        </div>
      </div>
    </header>

    <nav class="main-navigation">
      <div class="wrapper">
        <ul class="main-navigation__list">
          <li class="main-navigation__item">
            <a class="main-navigation__link" href="#">Главная</a>
          </li>
          <li class="main-navigation__item">
            <a class="main-navigation__link" href="#">Каталог</a>
          </li>
          <li class="main-navigation__item">
            <a class="main-navigation__link" href="#">Услуги</a>
          </li>
          <li class="main-navigation__item">
            <a class="main-navigation__link" href="#">Цены</a>
          </li>
          <li class="main-navigation__item">
            <a class="main-navigation__link" href="#">О компании</a>
          </li>
          <li class="main-navigation__item">
            <a class="main-navigation__link" href="#">Контакты</a>
          </li>
        </ul>

        <ul class="navigation-contacts">
          <li class="navigation-contacts__item">
            Звоните, обсудим:<a class="phone" href="tel:84951990621">8 (495) 199 06 21</a>
          </li>
          <li class="navigation-contacts__item">
            Вопросы и предложения:<a class="mail" href="mailto:mail@ecocom.ru">mail@ecocom.ru</a>
          </li>
        </ul>
        <a href="#" class="main-navigation__callback button"><span
            class="decorate"></span><span>Заказать звонок</span></a>
      </div>
    </nav>
  </div>


  <script src="script.js"></script>
</body>

</html>

Для вашей шапки мы можете внести доработки в разметку, в зависимости от пожеланий. К примеру поставить свой логотип и контактные данные, изменить цвета фона и текста, или просто подключить другой шрифт. Это лишь пример, а дальше — всё зависит от вашей фантазии и требований по проекту, который вы разрабатываете.

CSS для стилизации шапки

Продолжаем работу над шапкой. Чтобы сделать шапку еще красивее, воспользуемся CSS:

@charset "UTF-8";
html {
  box-sizing: border-box;
  scroll-behavior: smooth;
}

html *,
html *::before,
html *::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-width: 375px;
  background-color: #6d6f68;
  line-height: 1.5;
  font-weight: 400;
  font-size: 16px;
  font-weight: 400;
  font-size: 16px;
  color: #616161;
  font-family: "Montserrat", sans-serif;
  font-style: normal;
  position: relative;
}

a {
  text-decoration: none;
  color: inherit;
}


.button {
  display: block;
  text-align: center;
  padding: 20px 24px;
  background-color: #99BD3D;
  border-radius: 10px;
  color: #ffffff;
  border: none;
  max-width: -moz-max-content;
  max-width: max-content;
  cursor: pointer;
  text-decoration: none;
  text-transform: uppercase;
  position: relative;
  overflow: hidden;
  transition: all 0.4s;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 16px;
  line-height: 1;
  text-align: center;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-shadow: 0px 2px 4px rgba(68, 49, 0, 0.2);
  /* Cтили для устройств с поддержкой hover эффекта (с курсором мыши) */
}
.button span {
  pointer-events: none;
  position: relative;
  z-index: 10;
}
.button svg {
  position: relative;
  z-index: 11;
  pointer-events: none;
}
.button .decorate {
  position: absolute;
  z-index: 4;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: #436F68;
  transform: translate(-50%, -50%);
  transition: width 0.6s, height 0.6s, color 0.3s, background-color 0.4s;
  pointer-events: none;
}
@media (hover: hover) {
  .button:hover .decorate, .button:active .decorate, .button:focus .decorate {
    width: 100px;
    height: 100px;
  }
}

.wrapper {
  max-width: 1390px;
  width: 100%;
  margin-inline: auto;
  padding-inline: 40px;
}
@media (max-width: 768px) {
  .wrapper {
    padding-inline: 20px;
  }
}

.menu-button {
  background-color: transparent;
  border: none;
  cursor: pointer;
  display: flex;
  padding: 0;
}
.menu-button .line {
  fill: none;
  stroke: #ffffff;
  stroke-width: 6;
  transition: stroke-dasharray 600ms cubic-bezier(0.4, 0, 0.2, 1), stroke-dashoffset 600ms cubic-bezier(0.4, 0, 0.2, 1);
}
.menu-button .line1 {
  stroke-dasharray: 60 207;
  stroke-width: 6;
}
.menu-button .line2 {
  stroke-dasharray: 60 60;
  stroke-width: 6;
}
.menu-button .line3 {
  stroke-dasharray: 60 207;
  stroke-width: 6;
}
.menu-button.isActive .line {
  stroke: #7A7A7A;
}
.menu-button.isActive .line1 {
  stroke-dasharray: 90 207;
  stroke-dashoffset: -134;
  stroke-width: 6;
}
.menu-button.isActive .line2 {
  stroke-dasharray: 1 60;
  stroke-dashoffset: -30;
  stroke-width: 6;
}
.menu-button.isActive .line3 {
  stroke-dasharray: 90 207;
  stroke-dashoffset: -134;
  stroke-width: 6;
}

.title {
  display: block;
  margin: 0;
  font-weight: 700;
  font-size: 40px;
  line-height: 1.2;
  text-align: center;
  color: #7A7A7A;
  margin-bottom: 50px;
  max-width: -moz-max-content;
  max-width: max-content;
  margin-inline: auto;
}
@media (max-width: 1024px) {
  .title {
    font-size: 32px;
    margin-bottom: 32px;
  }
}
@media (max-width: 600px) {
  .title {
    font-size: 24px;
    margin-bottom: 24px;
  }
}


.navigation-contacts {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 6px;
  grid-template-columns: repeat(auto-fill, minmax(200px, 220px));
}
.navigation-contacts a {
  position: relative;
  display: grid;
  gap: 10px;
  grid-template-columns: 15px 1fr;
  align-items: center;
  font-weight: 700;
  transition: color 0.3s;
}
.navigation-contacts a::before {
  content: "";
  display: block;
  width: 20px;
  height: 15px;
  background-repeat: no-repeat;
  background-position: center right;
  background-size: contain;
}
.navigation-contacts a.tel::before {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none'%3e%3cpath fill='%2399BD3D' d='M8.01 4.667H6.564v1.555h1.444V4.667Zm2.888 0H9.454v1.555h1.444V4.667Zm2.167 5.055c-.9 0-1.766-.155-2.578-.443a.689.689 0 0 0-.733.19l-1.59 1.715C6.117 10.061 4.45 8.268 3.406 6.063l1.589-1.715a.823.823 0 0 0 .177-.79 9.524 9.524 0 0 1-.412-2.78C4.76.346 4.438 0 4.037 0H1.51c-.4 0-.722.346-.722.778C.787 8.08 6.283 14 13.065 14c.4 0 .722-.346.722-.778V10.5c0-.432-.321-.778-.722-.778Zm-.722-5.055v1.555h1.444V4.667h-1.444Z'/%3e%3c/svg%3e");
}
.navigation-contacts a.mail::before {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='17' height='13' fill='none'%3e%3cpath fill='%2399BD3D' d='M13.899 0H3.101A2.314 2.314 0 0 0 .787 2.314v7.713a2.314 2.314 0 0 0 2.314 2.314h10.798a2.314 2.314 0 0 0 2.314-2.314V2.314A2.314 2.314 0 0 0 13.899 0Zm0 1.543L8.886 4.99a.771.771 0 0 1-.772 0L3.101 1.543h10.798Z'/%3e%3c/svg%3e");
}
.navigation-contacts a:hover, .navigation-contacts a:focus, .navigation-contacts a:active {
  color: #99BD3D;
}

.subtitle {
  margin: 0;
  font-weight: 500;
  font-size: 28px;
  line-height: 1.3;
  text-align: center;
  color: #616161;
}

.phone {
  position: relative;
  display: flex;
  align-items: center;
  max-width: -moz-max-content;
  max-width: max-content;
  font-weight: 700;
  font-size: 28px;
  line-height: 1;
  color: #616161;
  transition: color 0.3s;
}
.phone::before {
  content: "";
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='28' height='30' fill='none'%3e%3cpath fill='%2399BD3D' d='M15.556 10h-3.112v3.333h3.112V10Zm6.222 0h-3.111v3.333h3.11V10Zm4.666 10.833c-1.936 0-3.803-.333-5.553-.95a1.488 1.488 0 0 0-1.579.409l-3.422 3.675c-4.412-2.408-8-6.25-10.251-10.975L9.06 9.317a1.758 1.758 0 0 0 .381-1.692 20.311 20.311 0 0 1-.886-5.958C8.556.742 7.863 0 7 0H1.556C.692 0 0 .742 0 1.667 0 17.317 11.838 30 26.444 30c.864 0 1.556-.742 1.556-1.667V22.5c0-.925-.692-1.667-1.556-1.667ZM24.89 10v3.333H28V10h-3.111Z'/%3e%3c/svg%3e");
  display: block;
  width: 28px;
  height: 30px;
  background-repeat: no-repeat;
  margin-right: 16px;
}
.phone:hover, .phone:focus, .phone:active {
  color: #99bd3d;
}

.header {
  pointer-events: initial;
  color: #ffffff;
  padding: 20px 0;
}
.header__grid {
  display: grid;
  gap: 32px;
  align-items: center;
  grid-template-columns: 470px 1fr 240px;
}
.header__logo {
  display: grid;
  gap: 24px;
  align-items: center;
  grid-template-columns: 255px 1fr;
}
.header__logo img {
  display: block;
  width: 100%;
}
.header__text {
  margin: 0;
  display: block;
  font-weight: 600;
  font-size: 12px;
  line-height: 1.3;
  text-transform: uppercase;
  color: #FFFFFF;
  transition: color 0.3s;
}
.header__buttons {
  display: grid;
  gap: 16px;
  grid-template-columns: auto 50px;
  width: 100%;
  align-items: center;
}
.header__callback {
  font-size: 12px;
  padding: 12px 14px;
  margin-left: auto;
}
@media (max-width: 1440px) {
  .header__callback {
    display: none;
  }
  .header__grid {
    grid-template-columns: 1fr 1fr 50px;
  }
}
@media (max-width: 1200px) {
  .header {
    padding: 10px 0;
  }
  .header__grid {
    grid-template-columns: 1fr 50px;
    gap: 16px;
  }
  .header .navigation-contacts {
    display: none;
  }
  .header__logo {
    max-width: 500px;
  }
}
@media (max-width: 600px) {
  .header__text {
    display: none;
  }
  .header__logo {
    gap: 0;
    grid-template-columns: 1fr;
    max-width: 250px;
  }
}


.main-navigation {
  pointer-events: initial;
  opacity: 0;
  position: relative;
  transition-duration: 0.3s;
  transition: all 0.3s;
  top: -50px;
  margin: 4px 0;
  pointer-events: none;
  visibility: hidden;
  z-index: 2;
  visibility: hidden;
  pointer-events: none;
  height: 0;
  overflow: hidden;
  margin: 0;
}
.main-navigation::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 0;
  height: 2px;
  background-color: #7a7a7a;
  transition: width 2s;
  margin: 0 auto;
  opacity: 0.6;
  z-index: 1;
}
.main-navigation::after {
  content: "";
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  width: 0;
  height: 2px;
  background-color: #7a7a7a;
  transition: width 2s;
  margin: 0 auto;
  opacity: 0.6;
  z-index: 1;
}
.main-navigation__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(6, auto);
  justify-content: space-between;
}
.main-navigation__link {
  display: block;
  max-width: -moz-max-content;
  max-width: max-content;
  padding: 16px 10px;
  font-weight: 700;
  font-size: 14px;
  line-height: 1;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #ffffff;
  transition: color 0.3s;
}
.main-navigation__link:hover {
  color: #99bd3d !important;
}
.main-navigation .navigation-contacts {
  display: none;
}
.main-navigation__callback {
  display: none;
}
@media (max-width: 768px) {
  .main-navigation {
    top: initial;
    left: -100%;
  }
  .main-navigation .wrapper {
    padding-inline: 0;
  }
  .main-navigation__list {
    gap: 0;
    grid-template-columns: 1fr;
  }
  .main-navigation__link {
    padding: 20px;
    font-weight: 700;
    font-size: 20px;
    text-align: center;
    margin: 0 auto;
    width: 100%;
    max-width: 100%;
  }
  .main-navigation .navigation-contacts {
    display: grid;
    grid-template-columns: 1fr;
    margin: 0 auto;
    font-size: 20px;
    max-width: -moz-max-content;
    max-width: max-content;
    text-align: center;
  }
  .main-navigation .navigation-contacts a {
    margin: 0 auto;
    max-width: -moz-max-content;
    max-width: max-content;
  }
  .main-navigation__item {
    padding: 10px 20px;
    font-weight: 700;
    font-size: 20px;
    text-align: center;
    margin: 0 auto;
    transition: color 0.1s;
  }
  .main-navigation__callback {
    display: block;
    max-width: -moz-max-content;
    max-width: max-content;
    margin: 16px auto;
    color: #fff !important;
    text-shadow: none;
    padding: 20px 24px;
    margin-bottom: 64px;
  }
  .main-navigation::after, .main-navigation::before {
    display: none;
  }
}

.page__header {
  width: 100%;
  max-width: 100%;
  position: fixed;
  z-index: 99;
  transition: all 0.3s;
  color: #ffffff;
  pointer-events: none;
}

.widgets__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 32px;
  grid-template-columns: repeat(auto-fit, minmax(325px, 1fr));
}
.widgets__item {
  min-height: 100%;
}
.widgets__icon {
  border-radius: 50%;
  background-color: #99BD3D;
  width: 70px;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s;
}
.widgets__title {
  margin: 0;
  display: block;
  margin-bottom: 10px;
  font-weight: 700;
  font-size: 22px;
  line-height: 1.2;
  color: #616161;
}
.widgets__text {
  margin: 0;
  font-weight: 500;
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: 0.01em;
  color: #616161;
  max-width: 400px;
}
.widgets__link {
  display: block;
  background: #FFFFFF;
  box-shadow: 0px 15px 30px rgba(70, 70, 70, 0.15);
  border-radius: 20px;
  padding: 40px;
  display: grid;
  gap: 32px;
  grid-template-columns: 70px 1fr;
  align-items: center;
  transition: top ease 0.5s;
  top: 0;
  position: relative;
  min-height: 100%;
}
.widgets__link:hover, .widgets__link:active, .widgets__link:focus {
  top: -12px;
}
.widgets__link:hover .widgets__icon, .widgets__link:active .widgets__icon, .widgets__link:focus .widgets__icon {
  background-color: #436F68;
}
@media (max-width: 768px) {
  .widgets__link {
    top: 0 !important;
  }
}
@media (max-width: 600px) {
  .widgets__link {
    gap: 16px;
    padding: 20px;
  }
}

.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: none;
  z-index: 9999;
  padding: 20px;
  width: 100%;
  max-width: 1032px;
  max-height: 100vh;
  overflow: auto;
}
.modal__wrapper {
  position: relative;
  padding: 32px 40px 40px;
  color: rgba(79, 86, 97, 0.8);
  box-shadow: 0 10px 20px 0 rgba(4, 6, 6, 0.2);
  background-color: #FFFFFF;
  border-radius: 10px;
}
.modal .title {
  margin: 0;
  display: block;
  margin-bottom: 12px;
  font-weight: 700;
  font-size: 32px;
  line-height: 1.2;
  color: #7A7A7A;
}
.modal .subtitle {
  margin: 0;
  display: block;
  margin-bottom: 28px;
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  color: rgba(122, 122, 122, 0.7);
}
.modal .close-btn {
  position: absolute;
  top: -21px;
  right: 21px;
  padding: 10px;
}
.modal__form-item {
  font-style: normal;
  font-weight: 500;
  font-size: 16px;
  line-height: 1.5;
  color: #7A7A7A;
}
.modal label {
  display: block;
  font-style: normal;
  font-weight: 500;
  font-size: 16px;
  line-height: 1.5;
  color: #7A7A7A;
  margin-bottom: 10px;
}
.modal input,
.modal textarea {
  font-style: normal;
  font-weight: 400;
  font-size: 18px;
  line-height: 1.5;
  color: #909090;
  display: block;
  padding: 10px 25px;
  background: #FFFFFF;
  border: 1px solid #D9D9D9;
  max-width: 100%;
  width: 100%;
  border-radius: 10px;
}
.modal textarea {
  height: 256px;
}
.modal__grid {
  display: grid;
  gap: 20px 32px;
  grid-template-columns: 1fr 1fr;
}
.modal__form-item--textarea {
  grid-column: 2/3;
  grid-row: 1/4;
}
.modal__footer {
  margin-top: 32px;
  display: grid;
  gap: 20px 32px;
  grid-template-columns: 1fr 184px;
}
.modal__footer .button {
  max-width: 100%;
}
.modal__form-item--check {
  font-style: normal;
  font-weight: 400 !important;
  font-size: 16px;
  line-height: 1.5;
  color: #7A7A7A;
}
.modal__form-item--check label {
  margin: 0;
  position: relative;
  padding-left: 32px;
  font-weight: 400 !important;
}
.modal__form-item--check label a {
  color: #99BD3D;
}
@media (max-width: 720px) {
  .modal {
    padding: 40px 20px;
  }
  .modal__grid {
    grid-template-columns: 1fr;
  }
  .modal__form-item--textarea {
    grid-column: initial;
    grid-row: initial;
  }
  .modal__footer {
    grid-template-columns: 1fr;
  }
  .modal__wrapper {
    padding: 32px 20px 32px;
  }
  .modal .title {
    font-size: 25px;
  }
}
@media (max-width: 600px) {
  .modal input,
  .modal textarea {
    font-size: 14px;
    padding: 8px 20px;
  }
  .modal .subtitle {
    margin-bottom: 16px;
    font-size: 14px;
  }
  .modal label {
    font-size: 14px;
    margin-bottom: 0;
  }
  .modal textarea {
    height: 40px;
  }
}

input[type=checkbox] + label::before {
  position: absolute;
  left: 0;
  width: 24px;
  height: 24px;
  content: "";
  background-repeat: no-repeat;
  background-size: contain;
}

input[type=checkbox] + label::before {
  background-image: url(../img/icons/checkbox-off.svg);
}

input[type=checkbox]:checked + label::before {
  background-image: url(../img/icons/checkbox-on.svg);
}

.menu-open .page__header {
  background-color: #fff;
  color: #7a7a7a;
}
.menu-open .main-navigation {
  height: initial;
  overflow: visible;
  margin: 4px 0;
}
.menu-open .main-navigation a {
  color: #7a7a7a;
}
.menu-open .header,
.menu-open .header__text {
  color: #7a7a7a;
}
.menu-open .header__logo .first {
  fill: #7a7a7a;
}
.menu-open .header__logo .last {
  fill: #99bd3d;
}
.menu-open .main-navigation {
  top: 0;
  opacity: 1;
  pointer-events: initial;
  visibility: initial;
  pointer-events: initial;
}
.menu-open .main-navigation::before,
.menu-open .main-navigation::after {
  width: 100%;
  opacity: 1;
}
@media (max-width: 768px) {
  .menu-open {
    overflow: hidden;
  }
  .menu-open .header {
    border-bottom: 2px solid #7a7a7a;
  }
  .menu-open .main-navigation {
    top: initial;
    left: 0;
  }
}

.modal-show .modal {
  display: block;
  animation: bounce 0.6s;
}
.modal-show .overlay {
  opacity: 1;
  pointer-events: initial;
}

.header-sticky .page__header {
  background-color: #fff;
  color: #7a7a7a;
  box-shadow: 0px 15px 30px rgba(70, 70, 70, 0.15);
}
.header-sticky .header,
.header-sticky .header__text {
  color: #7a7a7a;
}
.header-sticky .menu-button .line {
  stroke: #7a7a7a;
}
.header-sticky .header__logo .first {
  fill: #7a7a7a;
}
.header-sticky .header__logo .last {
  fill: #99bd3d;
}

Эффекты для кнопок и меню в шапке: делаем взаимодействие с сайтом незабываемым

Теперь давайте погрузимся в детали и добавим интерактивные эффекты, которые сделают взаимодействие пользователя с вашим сайтом ещё более приятным и незабываемым.

Анимация кнопок на чистом JavaScript

В вашем коде уже присутствует прекрасный пример анимации кнопок. Давайте разберем, что делает каждая строка:

Выбор всех кнопок: var buttons = document.querySelectorAll(".button");
Эта строка выбирает все элементы с классом .button.
Обработка каждой кнопки:
В этом блоке для каждой кнопки добавляются обработчики событий mouseover и mouseout.
Расчеты и анимация:
В этой части происходят вычисления, которые определяют, как именно будет выглядеть анимация.

Эффективная анимация делает элементы интерфейса более заметными и улучшает взаимодействие пользователя с сайтом.

Адаптивное меню на JavaScript

Также в коде есть обработчик для адаптивного меню:

Находит кнопку меню и основную навигацию.
При клике на кнопку меню, добавляет или удаляет класс isActive для кнопки и навигации, что позволяет применить различные стили.
Добавляет или удаляет класс menu-open у тега body, что позволяет блокировать скроллинг страницы, когда меню открыто.

var buttons = document.querySelectorAll(".button");

buttons.forEach(function (button) {
  // Добавление обработчика события "mouseover" (курсор находится над элементом) для каждой кнопки.
  button.addEventListener("mouseover", function (e) {
    // Получение информации о положении кнопки на странице.
    var pos = button.getBoundingClientRect();
    var elem_left = pos.left;
    var elem_top = pos.top;

    // Определение позиции курсора относительно кнопки.
    var Xinner = e.clientX - elem_left;
    var Yinner = e.clientY - elem_top;

    // Вычисление максимального расстояния до углов кнопки.
    var maxDist = Math.max(
      Math.sqrt(Math.pow(Xinner, 2) + Math.pow(Yinner, 2)),
      Math.sqrt(Math.pow(button.clientWidth - Xinner, 2) + Math.pow(Yinner, 2)),
      Math.sqrt(
        Math.pow(Xinner, 2) + Math.pow(button.clientHeight - Yinner, 2)
      ),
      Math.sqrt(
        Math.pow(button.clientWidth - Xinner, 2) +
          Math.pow(button.clientHeight - Yinner, 2)
      )
    );

    // Выбор элемента для декорирования и задание его параметров в соответствии с координатами курсора.
    var decoration = button.querySelector(".decorate");
    decoration.style.left = Xinner + "px";
    decoration.style.top = Yinner + "px";
    decoration.style.width = maxDist * 2 + "px";
    decoration.style.height = maxDist * 2 + "px";
  });

  // Добавление обработчика события "mouseout" (курсор покидает элемент) для каждой кнопки.
  button.addEventListener("mouseout", function (e) {
    // Возвращение декоративного элемента к исходному размеру.
    var decoration = button.querySelector(".decorate");
    decoration.style.width = "0";
    decoration.style.height = "0";
  });
});

const buttonMenu = document.querySelector('.menu-button');
const mainNavigation = document.querySelector('.main-navigation');

buttonMenu.addEventListener('click', function () {
  buttonMenu.classList.toggle('isActive');
  mainNavigation.classList.toggle('isActive');
  document.body.classList.toggle('menu-open');
});

Вывод

Добавление интерактивных элементов и анимаций может существенно улучшить пользовательский опыт. Используя чистый JavaScript, вы имеете полный контроль над поведением и стилями ваших интерактивных элементов.

Заключение

Теперь у вас есть полноценная, красивая и функциональная шапка, включающая в себя все необходимые элементы: от логотипа до кнопки «Заказать звонок». Обратим ваше внимание, что шапка в нашем проекте — адаптивная. т е она меняет свой внешний вид в зависимости от ширины экрана устройства с которого просматривают сайт.

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

Как создать красивую и функциональную шапку на HTML