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

1. Простой заголовок с логотипом и навигацией:

   <header>
   <div class="logo">Your Logo</div>
   <nav>
   <a href="#">Home</a>
   <a href="#">About</a>
   <a href="#">Services</a>
   <a href="#">Contact</a>
   </nav>
   </header>

2. Заголовок полноэкранного изображения:

   <header >
   <h1>Welcome to Our Website</h1>
   <p>Discover our amazing products and services.</p>
   <a href="#" class="btn">Learn More</a>
   </header>

3. Заголовок фона видео:

   <header>
   <video src="header-video.mp4" autoplay loop muted></video>
   <h1>Welcome to Our Website</h1>
   <p>Watch our video to learn more about us.</p>
   </header>

4. Прикрепленный заголовок с эффектом прокрутки:

   <header class="sticky">
   <nav>
   <a href="#">Home</a>
   <a href="#">About</a>
   <a href="#">Services</a>
   <a href="#">Contact</a>
   </nav>
   </header>
   <style>
   .sticky {
   position: fixed;
   top: 0;
   width: 100%;
   background-color: #fff;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
   }
   /* Add JavaScript to add or remove 'sticky' class on scroll */
   </style>

5. Прозрачный заголовок с перекрывающимся содержимым:

   <header class="transparent">
   <div class="overlay"></div>
   <h1>Welcome to Our Website</h1>
   <p>Discover our amazing products and services.</p>
   </header>
   <style>
   .transparent {
   background-color: transparent;
   color: #fff;
   }
   .overlay {
   background-color: rgba(0, 0, 0, 0.5);
   /* Adjust the opacity as desired */
   }
   </style>

6. Скользящий заголовок с меню навигации:

   <header>
   <div id="menu-toggle">&#9776;</div>
   <nav id="menu">
   <a href="#">Home</a>
   <a href="#">About</a>
   <a href="#">Services</a>
   <a href="#">Contact</a>
   </nav>
   </header>
   <style>
   #menu-toggle {
   cursor: pointer;
   }
   #menu {
   display: none;
   }
   /* Add JavaScript to show/hide the menu on click */
   </style>

7. Анимированный заголовок с текстовыми эффектами:

   <header>
   <h1 class="animated">Welcome to Our Website</h1>
   </header>
   <style>
   @keyframes fadeIn {
   0% {
   opacity: 0;
   transform: translateY(-20px);
   }
   100% {
   opacity: 1;
   transform: translateY(0);
   }
   }
   .animated {
   animation: fadeIn 1s ease-in-out;
   }
   </style>

8. Заголовок с параллаксной прокруткой:

   <header>
   <!-- Add parallax scrolling background image -->
   <h1>Welcome to Our Website</h1>
   <p>Discover our amazing products and services.</p>
   </header>
   <style>
   header {
   background-attachment: fixed;
   background-position: center;
   background-repeat: no-repeat;
   background-size: cover;
   }
   </style>

9. Заголовок со значками социальных сетей:

   <header>
   <div class="social-icons">
   <a href="#"><i class="fab fa-facebook"></i></a>
   <a href="#"><i class="fab fa-twitter"></i></a>
   <a href="#"><i class="fab fa-instagram"></i></a>
   </div>
   </header>
   <!-- Include relevant CSS and Font Awesome library -->

10. Заголовок разделенного экрана:

    
    <header>
    <div class="left-side">
    <h1>Welcome to Our Website</h1>
    <p>Discover our amazing products and services.</p>
    </div>
    <div class="right-side">
    <!-- Add relevant content -->
    </div>
    </header>