Шапка на гридах и флексах с гэпами и БЭМ

index.html
<!DOCTYPE html>
<html class="page" lang="ru">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Шапка</title>
    <link rel="stylesheet" href="index.css">
</head>
<body class="page__body">
    <header class="header">
        <div class="logo"></div>
        <form class="search">
            <input class="search__input" type="text" placeholder="Лопата" aria-label="Поиск по сайту">
            <button class="search__button" type="submit">Найти</button>
        </form>
        <div class="options">
            <button class="options__button" type="button">Книга</button>
            <button class="options__button" type="button">Цветы</button>
            <button class="options__button" type="button">Мяч</button>
            <button class="options__button" type="button">Смысл</button>
        </div>
        <div class="login"></div>
    </header>
</body>
</html>
style.css
/* Page */

.page {
    font-family: sans-serif;
}

.page__body {
    margin: 0;
}

/* Header */

.header {
    display: grid;
    grid-template-columns:
        min-content
        1fr
        min-content;
    column-gap: 50px;
    row-gap: 25px;
    padding: 35px 50px;
    background-color: powderblue;
}

/* Logo */

.logo {
    width: 128px;
    height: 64px;
    background-color: mediumseagreen;
}

/* Search */

.search {
    display: grid;
    grid-template-columns: 1fr min-content;
}

.search__input {
    margin: 0;
    padding: 20px;
    border: none;
    font-size: 20px;
    font-family: inherit;
}

.search__button {
    margin: 0;
    padding: 20px;
    border: none;
    background-color: palevioletred;
    color: white;
    font-size: 20px;
    font-family: inherit;
}

/* Login */

.login {
    width: 128px;
    background-color: mediumpurple;
}

/* Options */

.options {
    display: grid;
    grid-auto-flow: column;
    justify-content: stretch;
    gap: 20px;
    grid-row-start: 2;
    grid-column: 2 / -2;
}

.options__button {
    padding: 10px 15px;
    border: none;
    background-color: steelblue;
    color: white;
    font-size: 16px;
    font-family: inherit;
}

style.css

1

Автор публикации

не в сети 12 часов

Brama

1 946
Комментарии: 0Публикации: 264Регистрация: 05-12-2019

Оставьте комментарий

Авторизация
*
*



Регистрация
*
*
*
Генерация пароля