Как сверстать/разметь такую шапку?

Question

Как сверстать/разметь такую шапку?

Рейтинг: 0Ответов: 1Опубликовано: 21.06.2023

Подскажите пожалуйста, как правильно разметить такую шапку по БЭМ? А если будет не трудно, как её слилизовать? Как я понимаю, такие шапки вообще делаются на 100vh высоту.

css html

Источник: Stack Overflow на русском

Answer 1

▲ 2

Можно на bootstrap такую шапку сверстать. Например, вот так:

.header {
    background-image: url(https://bogatyr.club/uploads/posts/2023-03/1679131302_bogatyr-club-p-rassvet-gori-fon-foni-vkontakte-1.jpg);
    background-position: center;
    background-size: 100%;
    background-attachment: fixed;
    background-repeat: no-repeat;
}
h1, h5 {
    font-family: Arial;
}

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Главная</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="style3.css">
</head>
<body>
    <div class="container">
        <div class="header">
        <div class="row">
            <div class="col-2">
                <nav class="navbar bg-body-white">
                    <a class="navbar-brend ms-3" href="#">
                        <img src="https://pngimg.com/uploads/car_logo/car_logo_PNG1666.png" alt="logo" width="150px" height="40px;">
                    </a>
                </nav>
            </div>
            <div class="col-10">
                <ul class="nav justify-content-end me-3">
                    <li class="nav-item">
                        <a class="nav-link text-white" href="#">Главная</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link text-white" href="#">О нас</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link text-white" href="#">Контакты</a>
                    </li>
                </ul>
            </div>
        </div>
        <div class="row">
            <div class="col-6">
                <h1 class="text-white ms-3 mt-5">Заголовок</h1>
            </div>
        </div>
        <div class="row">
            <div class="col-6">
                <h5 class="text-white ms-3">Подзаголовок</h5>
            </div>
        </div>
        <div class="row">
            <div class="col-12">
                <div class="text-end">
                    <button type="button" class="btn btn-light btn-lg m-4">Кнопка</button>
                </div>
            </div>
        </div>
    </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.min.js" integrity="sha384-fbbOQedDUMZZ5KreZpsbe1LCZPVmfTnH7ois6mU1QK+m14rQ1l2bGBq41eYeM/fS" crossorigin="anonymous"></script>
</body>
</html>

Как сверстать/разметь такую шапку?

Ответы