Как правильно сверстать header

Люди добрые. Вчера начал изучать html/css

Параллельно с уроками сделал свой макет сайта в Figma и пытаюсь сверстать header

Как правильно написать код для адаптива?(

имеется данный код:

HTML

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <header class="header">
        <div class="container">            
            <div class="logo">
                <a href="#"><img src="img/svg/logo.svg" alt=""></a>
            </div>
            <div class="phone">
                <img src="img/svg/phone.svg" alt="">
                <p>+7 (937) 930-69-65</p>
            <div class="email">
                <img src="img/svg/email.svg" alt="">
                <p>heshteg12@mail.ru</p>                
            </div>
            <div class="menu">
                <img src="img/svg/menu.svg" alt="">                              
            </div>                    
        </div>                
    </header>
    </body>
</html>

CSS

body {
    font-family: Lato;
    font-style: normal;
    font-weight: normal;
    color: white;
    background-color: black
}

.container {
    margin-top: 10px;
    margin-left: 10px;
    justify-content: space-between;
    align-items: center;
    display: flex
}

.phone, .email {
    margin-right: 100px;
    display: flex;
    align-items: center;     
}

Урок 4.15.

ALEXANDER ROMANUK

4 years ago

Один ответ