Должно выглядеть так Макет Но получается так цвф <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Курсы косметологии по “Барофорезу” от профессионала</title> <link rel="preconnect" href="https://fonts.gstatic.com"> <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap" rel="stylesheet"> <link rel="stylesheet" type="text/css" href="css/style.css"> <link rel="stylesheet" type="text/css" href="css/bootstrap-grid.css"> </head> <body> <header class="header"> <div class="nav"> <div class="container"> <div class="row"> <div class="col-md-2"> <img src="files/logo.png" alt="Glamour.pro" class="logo"> </div> <div class="col-md-4"> <div class="navbar"> <ul> <li><a href="#">Главная</a></li> <li><a href="#">О себе</a></li> <li><a href="#">Курсы</a></li> <li><a href="#">Контакты</a></li> </ul> </div> </div> <div class="col-md-5 banner"> <img src="files/first.png" class="banner" alt="banner"> </div> </div> </div> </div> <div class="offer"> <div class="container"> <div class="row"> <div class="col-md-6"> <div class="h1">Курсы косметологии по “Барофорезу”<br>от профессионала</div> </div> </div> </div> </div> </header> </body> </html> HTML <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Курсы косметологии по “Барофорезу” от профессионала</title> <link rel="preconnect" href="https://fonts.gstatic.com"> <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap" rel="stylesheet"> <link rel="stylesheet" type="text/css" href="css/style.css"> <link rel="stylesheet" type="text/css" href="css/bootstrap-grid.css"> </head> <body> <header class="header"> <div class="nav"> <div class="container"> <div class="row"> <div class="col-md-2"> <img src="files/logo.png" alt="Glamour.pro" class="logo"> </div> <div class="col-md-4"> <div class="navbar"> <ul> <li><a href="#">Главная</a></li> <li><a href="#">О себе</a></li> <li><a href="#">Курсы</a></li> <li><a href="#">Контакты</a></li> </ul> </div> </div> <div class="col-md-5 banner"> <img src="files/first.png" class="banner" alt="banner"> </div> </div> </div> </div> <div class="offer"> <div class="container"> <div class="row"> <div class="col-md-6"> <div class="h1">Курсы косметологии по “Барофорезу”<br>от профессионала</div> </div> </div> </div> </div> </header> </body> </html> body { font-family: 'Montserrat', sans-serif; background-color: #F2F2F2; margin: 0; padding: 0; } ul li { display: inline-block; list-style-type: none; } ul li a { text-decoration: none; color: #402E1E; display: inline; padding: 25px 15px; } .navbar { font-family: Montserrat; font-style: normal; font-weight: normal; font-size: 14px; line-height: 17px color: #402E1E !important; margin-bottom: 0; } .banner { display: block; } .logo { padding-top: 10px; display: inline-block; vertical-align: top; } Код body { font-family: 'Montserrat', sans-serif; background-color: #F2F2F2; margin: 0; padding: 0; } ul li { display: inline-block; list-style-type: none; } ul li a { text-decoration: none; color: #402E1E; display: inline; padding: 25px 15px; } .navbar { font-family: Montserrat; font-style: normal; font-weight: normal; font-size: 14px; line-height: 17px color: #402E1E !important; margin-bottom: 0; } .banner { display: block; } .logo { padding-top: 10px; display: inline-block; vertical-align: top; }
Я конечно не супер мега программист , но тут должно быть weight и почему тут так сделано что половина кода это текст
TheWeeknd, ul li, чтобы убарть точки (декорации и т.д), а ul li a, чтобы задать падинги навигационныи элементам, цвет текста и т.д
Kinagura, .header{ margin-top: 50px; } CSS .header{ margin-top: 50px; } Рандомное значение поставил, смотри какое-то лучше подойдёт
Все оказалось куда проще, эту картинку мне надо было вставить в навбар, прописать ей position: absolute; и с помощью бутстрапа сделать отступы