Как совместить Div с изображением героя для Material-Design Look?

Question

Я пытаюсь, чтобы этот макет выглядел немного больше материала ( как этот сайт ), где первый div перекрывает изображение героя.Я попытался установить поле в .about-inner равным -100px, чтобы попытаться поднять его, но затем оно немного испортилось, когда сократилось до размера мобильного устройства.Есть ли простой способ сделать это, что мне не хватает?

Fiddle: https://jsfiddle.net/kq0x48fc/

<section class="hero">
      <div class="hero-inner">
        <h1>Lorem ipsum<br>dolor sit amet.</h1>
      </div>
</section>

<div class="main-outer">

        <div class="about-inner">
          <h3>「 About 」</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. </p>
        </div>

         <div class="clients-inner">
    <h3>「 Clients 」</h3>
    <div class="flex-container">
      <div>
        <img src="./Assets/Clients/logo.jpg" alt="1" />
      </div>
      <div>
        <img src="./Assets/Clients/logo.jpg" alt="2"  />
      </div>
      <div>
        <img src="./Assets/Clients/logo.jpg" alt="3"  />
      </div>
      <div>
        <img src="./Assets/Clients/logo.jpg" alt="4"  />
      </div>
      <div>
        <img src="./Assets/Clients/logo.jpg" alt="5"  />
      </div>
    </div>
  </div>

Answer 1

Вы можете установить section .hero на position: absolute, чем применить top: 0.Затем в классе main-outer вы можете добавить margin-top, чтобы получить желаемое расстояние.

Answer 2

Во-первых, вы применяете отрицательное поле к неправильному элементу.Вы должны применить его к первому ребенку после .hero.

К .about-inner.

Кроме того, ваша техника вертикального центрирования, используемая во втором разделе, которая центрирует два элемента в пространстве полной высоты области просмотра, влияет на это на более широких (и более высоких) экранах.Чтобы отключить его, просто удалите min-height из .main-outer:

body {
  margin: 0;
  font-family: 'Montserrat', serif;
}

h1 {
  font-size: 1.5em;
  font-weight: 600;
}

h6 {
  font-family: 'Montserrat', serif;
  font-size: 0.8em;
  font-weight: 200;
  display: block;
  text-align: center;
}

.header {
  height: 80px;
  display: flex;
  justify-content: left;
  /* align horizontal */
  align-items: center;
  /* align vertical */
}

.hero {
  /* Sizing */
  width: 100%;
  min-height: 60vh;
  /* Flexbox Stuff */
  display: flex;
  justify-content: center;
  align-items: center;
  padding-bottom: 50px;
  /* Text styles */
  text-align: center;
  /* Background styles */
  background-color: red;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

.flex-container {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  background: white;
  padding: 5px;
}

.flex-container>* {
  margin: auto;
}

.flex-container img {
  display: block;
  width: 150px;
  height: auto;
  margin: 5px;
}

.main-outer {
  display: flex;
  justify-content: center;
  flex-direction: column;
  justify-content: safe center;
  align-items: center;
  background-color: #eeeeee;
  position: relative;
  box-sizing: border-box;
  padding-bottom: 50px;
}

.main-outer>* {
  width: 80vw;
  box-shadow: 0 3px 5px -1px rgba(0, 0, 0, .1), 0 5px 8px 0 rgba(0, 0, 0, .07), 0 1px 14px 0 rgba(0, 0, 0, .06)
}

.about-inner {
  margin-top: -50px;
  margin-bottom: 10px;
  width: 80vw;
  background-color: white;
  display: inline-block;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.clients-inner {
  background-color: white;
  display: inline-block;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.about-inner h3,
.clients-inner h3 {
  font-size: 1.5em;
  font-weight: 600;
  padding-top: 10px;
  letter-spacing: 0.1em;
}

.about-inner p,
.clients-inner p {
  font-size: 1em;
  font-weight: 300;
  text-align: left;
  padding: 0 10vw 1em;
  line-height: 2em;
}

.hero h1 {
  /* Text styles */
  font-size: 3em;
  color: white;
  /* Margins */
  margin-bottom: 0.5em;
  padding: 20px;
}

<section class="hero">
  <div class="hero-inner">
    <h1>Lorem ipsum<br>dolor sit amet.</h1>
  </div>
</section>

<div class="main-outer">

  <div class="about-inner">
    <h3>「 About 」</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. </p>
  </div>

  <div class="clients-inner">
    <h3>「 Clients 」</h3>
    <div class="flex-container">
      <div>
        <img src="./Assets/Clients/logo.jpg" alt="1" />
      </div>
      <div>
        <img src="./Assets/Clients/logo.jpg" alt="2" />
      </div>
      <div>
        <img src="./Assets/Clients/logo.jpg" alt="3" />
      </div>
      <div>
        <img src="./Assets/Clients/logo.jpg" alt="4" />
      </div>
      <div>
        <img src="./Assets/Clients/logo.jpg" alt="5" />
      </div>
    </div>
  </div>
</div>

Я также применил еще несколько настроек:

• изменено 100px горизонтальное заполнение до 10vw
• добавил немного bottom-padding к hero, чтобы противостоять отрицательному полю следующего элемента
• использовал 100% как ширину .hero вместо 100vw, чтобы избавиться от горизонталиbar (что вызвано body наличием поля во фрагментах переполнения стека).
• применил мягкое box-shadow к элементам, подобным карточке

Answer 3

Вы можете использовать отрицательные поля, чтобы натянуть материал на элемент выше ...

.main-outer {
    margin-top: -100px;
}

Или вы можете использовать изображение героя в качестве фона тела с no-repeat и размещать контент как можно ниже.страница, которую вы хотите.

Вот пример более простого способа структурирования вашей страницы: .page div представляет ваше тело.

.page {
  height: 500px;
  width: 100%;
  position: relative;
  background: tan;
  }
  
.hero {
  width: 100%;
  height: 40%;
  background: blue url(https://images.unsplash.com/photo-1523575518836-9166d367179f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2534&q=80) top center no-repeat;
  background-size: cover;
}
.content {
  background-color: white;
  min-height: 600px;
  margin: -100px auto 0 auto;
  width: 80%;
  border-radius: 10px;
  padding: 20px;
}

<div class="page">
  <div class="hero"></div>
  <div class="content">
    Some content
  </div>
</div>