Помогите пожалуйста с версткой лого

26 апреля 2021, 20:30

Нужно сверстать такое лого.
Тут много проблем поскольку во-первых у двух слов разный размер 29pt 18pt.

Вопрос заключается в том как сделать чтобы блок в котором текст и картинка имел высоту которую задает текст а картинка растягивалась на эту высоту без деформации (иначе говоря нужно то, что на картинке)

Answer 1

Здесь с другой башней: https://codepen.io/topicstarter/pen/bXejGd

Картинки брал здесь :https://icon-icons.com/ru/

.logo { 
  display: flex; 
  align-items: center; 
} 
 
.fas { 
  font-size: 100px; 
} 
 
.touwer { 
  width: 100px; 
  height: 100px; 
} 
 
.logo span { 
  display: block; 
  text-transform: uppercase; 
  margin: 0; 
  padding: 0; 
  line-height: 1; 
} 
 
.logo p span:nth-of-type(1) { 
  font-size: 50px; 
} 
 
.logo p span:nth-of-type(2) { 
  font-size: 32px; 
}

<div class="logo"> 
  <p class="touwer"> 
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512"> 
<g> 
	<path d="M448,448V192l-32-32h-32V96h-64V64h-32V32c0-17.688-14.328-32-32-32s-32,14.313-32,32v32h-32v32h-64v64H96l-32,32v256 
		c-35.344,0-64,28.625-64,64h512C512,476.625,483.344,448,448,448z M192,416h-64v-32h64V416z M192,352h-64v-32h64V352z M192,288h-64 
		v-32h64V288z M192,224h-64v-32h64V224z M288,416h-64v-32h64V416z M288,352h-64v-32h64V352z M288,288h-64v-32h64V288z M288,224h-64 
		v-32h64V224z M384,416h-64v-32h64V416z M384,352h-64v-32h64V352z M384,288h-64v-32h64V288z M384,224h-64v-32h64V224z"/> 
</g> 
</svg> 
  </p> 
  <p> 
    <span>milan</span> 
    <span>holidays</span> 
  </p> 
</div>

Answer 2

Если правильно понял, то попробуйте что-то вроде:

.logo-container>.logo.logo-image+.logo.logo-text>p{text}*2
.logo-container 
   display:flex;
   ....

.logo 
   &-image 
    height: 100%;
    margin-right: ~n em