@UnseeingQuality

Как сделать заголовок в две строки и логотип справа от первой строки?

<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;
}

Вот так получается:
647b05609a03c954868209.png
Вот так должно быть:
647b05698116b758419937.png
Пробовал и через grid b через flex, никак не получается
  • Вопрос задан
  • 130 просмотров
Решения вопроса 2
Ankhena
@Ankhena Куратор тега CSS
Нежно люблю верстку
<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>


.main-title__beautiful-string {
  display: block;
}

.main-title__beautiful-string::after {
  content: "";
  display: inline-block;
  vartical-align: middle;
  bg: иконка
}

Либо флексом.
Ответ написан
Комментировать
@v_i_kaisarov
Ну тут несколько вариантов
1. Переместить img внутрь заголовка
<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; // И тут подогнать сколько надо
  ...
}
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы