Сообщество IT-специалистов
Ответы на любые вопросы об IT
Профессиональное развитие в IT
Обучение для смены профессии, роста в карьере и саморазвития
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous"> <link rel="stylesheet" type="text/css" href="css/style.css"> <link href="https://fonts.googleapis.com/css2?family=Pacifico&display=swap" rel="stylesheet"> <title>Document</title> </head> <body> <div class="header"> <div class="container"> <div class="head"> <div class="menu"> <div class="menu_logo"> <h1 class="logo">Brandi</h1> <p class="i_am_your_tag_line">I’am your tag line</p> </div> <nav class="menu_nav"> <a href="#" class="nav_link">Home</a> <a href="#" class="nav_link">Features</a> <a href="#" class="nav_link">Works</a> <a href="#" class="nav_link">Team</a> <a href="#" class="nav_link">Contact</a> </div> <div class="bg"> </div> </div> </div> </div> </body> </html> *{ margin: 0; padding: 0; } .container { max-width: 1170px; width: 100%; padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto; } .header{ background-image: url(../img/bg.png); background-size: cover; background-repeat: no-repeat; background-position: center; min-height: 800px; max-width: 1366px; width: 100%; } .head{ display: flex; flex-direction: column; } .menu{ display: flex; justify-content: space-between; align-items: center; width: 100%; min-height: 70px; } .menu_logo{ display: flex; align-items: center; } .logo{ font-size: 28px; font-family: "Pacifico"; line-height: 1.2; color: rgb(255, 255, 255); } .i_am_your_tag_line { font-size: 16px; font-family: "OpenSans"; color: #3b414d; line-height: 1.2; border-left: 1px solid rgba(50, 176, 238, 0.302); margin-left: 20px; padding-left: 20px; } .menu_nav{ } .nav_link{ text-decoration: none; color:#fff; margin-right: 30px; } .nav_link:last-child{ margin-right: 0; } .nav_link:hover{ border-top: 2px solid rgba(50, 176, 238, 0.302); padding-top: 23px; }
width: 100%; padding-right: 15px; padding-left: 15px;
min-width
