Как сделать заголовок в две строки и логотип справа от первой строки?
<div class="header main"> <div class="site-title"> <div class="big-logo"> <img class="graficlogo" src="assets/img/Logo.png" alt="Logo"> </div> <h1 class="main-title"> мои <br> достижения </h1> </div> <p> онлайн-платформа централизации достижений и развития активной деятельности </p> </div> |
<div class="header main"> <div class="site-title"> <div class="big-logo"> <img class="graficlogo" src="assets/img/Logo.png" alt="Logo"> </div> <h1 class="main-title"> мои <br> достижения </h1> </div> <p> онлайн-платформа централизации достижений и развития активной деятельности </p> </div>
.header.main{ margin-top: 10%; } .site-title{ display: flex; } .big-logo{ float: right; margin-left: 300px; width: 141px; height: 136px; max-width: 100%; height: auto; } .graficlogo{ width: 100%; height: auto; object-fit: contain; } h1.main-title{ position: relative; font-family: 'Neue Machina'; font-style: normal; font-weight: 800; font-size: 128px; line-height: 95.36px; color: #EDFB3A; } p{ font-family: 'Montserrat'; font-style: normal; font-weight: 400; font-size: 16px; line-height: 100%; text-transform: lowercase; color: #FFFFFF; } |
.header.main{ margin-top: 10%; } .site-title{ display: flex; } .big-logo{ float: right; margin-left: 300px; width: 141px; height: 136px; max-width: 100%; height: auto; } .graficlogo{ width: 100%; height: auto; object-fit: contain; } h1.main-title{ position: relative; font-family: 'Neue Machina'; font-style: normal; font-weight: 800; font-size: 128px; line-height: 95.36px; color: #EDFB3A; } p{ font-family: 'Montserrat'; font-style: normal; font-weight: 400; font-size: 16px; line-height: 100%; text-transform: lowercase; color: #FFFFFF; }
Вот так получается:
Вот так должно быть:
Пробовал и через grid b через flex, никак не получается
Дополнительно:
<h1 class="main-title"> мои <span class="big-logo"><img class="graficlogo" src="assets/img/Logo.png" alt="Logo"></span><br> достижения </h1> |
<h1 class="main-title"> мои <span class="big-logo"><img class="graficlogo" src="assets/img/Logo.png" alt="Logo"></span><br> достижения </h1>
<h1 class="main-title"> мои <span class="big-logo"><img class="graficlogo" src="assets/img/Logo.png" alt="Logo"></span><br> достижения </h1> |
<h1 class="main-title"> мои <span class="big-logo"><img class="graficlogo" src="assets/img/Logo.png" alt="Logo"></span><br> достижения </h1>
А, поскольку, это скорее украшение строки, а нормальный логотип уже есть наверху слева, то нет смысла его дублировать как img и можно сократить до:
<h1 class="main-title"> <span class="main-title__beautiful-string">мои </span> достижения </h1> |
<h1 class="main-title"> <span class="main-title__beautiful-string">мои </span> достижения </h1>
.main-title__beautiful-string { display: block; } .main-title__beautiful-string::after { content: ""; display: inline-block; vartical-align: middle; bg: иконка } |
.main-title__beautiful-string { display: block; } .main-title__beautiful-string::after { content: ""; display: inline-block; vartical-align: middle; bg: иконка }
Либо флексом.
Ну тут несколько вариантов
1. Переместить img внутрь заголовка
<h1 class="main-title"> <span> мои <img class="graficlogo" src="assets/img/Logo.png" alt="Logo"> </span> <span>достижения</span> </h1> |
<h1 class="main-title"> <span> мои <img class="graficlogo" src="assets/img/Logo.png" alt="Logo"> </span> <span>достижения</span> </h1>
2. Если нельзя менять HTML
.site-title { ... position: relative; ... } .big-logo { ... position: absolute; left: 100px; // И тут подогнать сколько надо ... } |
.site-title { ... position: relative; ... } .big-logo { ... position: absolute; left: 100px; // И тут подогнать сколько надо ... }
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для создания заголовка в две строки и размещения логотипа справа от первой строки, вы можете использовать следующий код:
.header { display: flex; justify-content: space-between; align-items: center; } .title { font-size: 24px; font-weight: bold; } .logo { width: 50px; height: 50px; } <div class="header"> <div class="title"> Заголовок первой строки <br> Заголовок второй строки </div> <img src="логотип.jpg" alt="Логотип" class="logo"> </div>.header { display: flex; justify-content: space-between; align-items: center; } .title { font-size: 24px; font-weight: bold; } .logo { width: 50px; height: 50px; } <div class="header"> <div class="title"> Заголовок первой строки <br> Заголовок второй строки </div> <img src="логотип.jpg" alt="Логотип" class="logo"> </div>
Этот код создаст блок заголовка, который будет разделен на две строки. Заголовок первой строки идет внутри элемента с классом "title", а логотип будет находиться справа от заголовка. Класс "header" используется для создания флексбокс контейнера, который выравнивает элементы по горизонтали и вертикали. Классы "title" и "logo" определяют стили для заголовка и логотипа соответственно.
Вы можете изменить размеры шрифта, цвет текста, размеры логотипа и другие стили в соответствии с вашим дизайном. Надеюсь, этот ответ поможет вам создать желаемый дизайн заголовка на вашем сайте.