Как разместить элементы как в макете?

Question

Подскажите как правильно разместить телефоны?

html {
  box-sizing: border-box;
}

body {
  font-family: 'Signika';
  font-style: normal;
  font-size: 16px;
  line-height: 1.2;
  font-weight: normal;
  color: #260041;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

.wrapper {
  max-width: 950px;
  margin: 0 auto;
}


/*  Header styles start*/

.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
}

.header__wrapper {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  padding-top: 45px;
}

.header__list {
  display: flex;
  flex-wrap: wrap;
}

.header__item {
  margin-right: 50px;
}

.header__item:last-child {
  margin-right: 0;
}

.header__item:first-child {
  font-weight: 500;
  color: #4A99D3;
}

.header__link {
  font-size: 18px;
  line-height: 19px;
  color: #0F001A;
  text-decoration: none;
}

.header__link:hover,
.header__link :focus,
.header__link :active {
  opacity: 0.5;
}


/* Header styles end*/


/* Intro styles start*/

.intro {
  min-height: 100vh;
  background: url(../img/intro_bg.jpg) no-repeat center;
  background-size: cover;
  padding-top: 233px;
}

.intro__title {
  font-weight: 500;
  font-size: 50px;
  line-height: 70px;
  letter-spacing: 0.02em;
  color: #260041;
  max-width: 500px;
  margin-bottom: 14px;
}

.intro__subtitle {
  font-weight: 400;
  font-size: 20px;
  line-height: 36px;
  max-width: 550px;
  color: #260041;
  margin-bottom: 60px;
}

.intro__button {
  width: 180px;
  height: 60px;
  border-radius: 5px;
}

.intro__button-apple {
  background: url(../img/Group\ 52.jpg) no-repeat bottom left;
}

.intro__button-google {
  background: url(../img/Group\ 51.jpg) no-repeat bottom left;
  margin-right: 20px;
}

<header class="header">
  <div class="wrapper">
    <div class="header__wrapper">
      <div class="header__logo">
        <a href="/" class="header__logo-link">
          <img src="img/svg/logo.svg" alt="image description" class="header_logo-pic">
        </a>
      </div>

      <nav class="header__nav">
        <ul class="header__list">
          <li class="header__item">
            <a href="#!" class="header__link">Home</a>
          </li>
          <li class="header__item">
            <a href="#!" class="header__link">About</a>
          </li>
          <li class="header__item">
            <a href="#!" class="header__link">Contact Us</a>
          </li>
        </ul>
      </nav>
    </div>

  </div>
</header>

<main class="main">
  <section class="intro">
    <div class="wrapper">
      <h1 class="intro__title">
        New E-commerce App best for You
      </h1>
      <p class="intro__subtitle">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Amet sed vulputate vitae velit dictum cursus amet. Turpis donec ut velit quis. Cursus commodo, eget urna, sapien amet.
      </p>
      <button type="submit" class="intro__button intro__button-google"></button>
      <button type="submit" class="intro__button intro__button-apple"></button>
    </div>
  </section>
</main>

Answer 1

Если предполагается, что в телефонах, вместо белого фона с надписью будет что-то другое, то я бы использовал например такой вариант:

.phone-block {
  display: inline-flex;
  justify-content: flex-start;
  align-items: flex-end;
  max-width: 100%;
  max-height: 100%;
}

.phone-block img {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 100%;
}

.phone-block__small {
  margin-right: -10%;
  position: relative;
  z-index: 1;
}

<div class="phone-block">
  <div class="phone-block__small">
    <img src="//i.imgur.com/i4vJQ6M.png" width="157" height="321"/>
  </div>
  <div class="phone-block__big">
    <img src="//i.imgur.com/SDgP773.png" width="181" height="362"/>
  </div>
</div>

Если же там ничего не планируется, то вставьте картинку как есть.

БЛОГ НА HUSL

Как разместить элементы как в макете?

Ответы (1 шт):