Как выровнять три деления? - PullRequest
Новая
       21

Как выровнять три деления?

0 голосов
/ 14 февраля 2020

Предположим, у меня есть два элемента div и один: after:

  • Элемент Div с фоновым изображением вверху страницы (давайте назовем это баннером)
  • баннер : after функция, которая вставляет кривую SVG внизу первого изображения div.
  • Элемент div после баннера: после которого тот же цвет, что и у кривой SVG (давайте назовем это еще одним div).

Как настроить SVG с другим div?

HTML: 

<!DOCTYPE html>
<html lang="en-GB">
  <head>
    <!-- Responsive and Backward Compatible Meta Design -->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- Style Sheets -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  </head>
  <body>
    <style>
    body { background-color: #4D405A; }
    </style>
    <header>
      <div class="container">
        <div class="header-content">
          <div class="col-lg-6">
            <div class="banner-overlay">
              <div class="overlay-wrapper">
                <div class="opaque-wrapper">
                  <h1>Insert Title Text</h1>
                  <p>Paragraph text is really good, i like my paragraph text.</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </header>
    <div class='somebox'>
      <div class="container"></div>
    </div>
    <div class='alternate-content'></div>
    <div class='more-content'></div>
 </body>
</html>

CSS: 

header {
  background: url(https://i.imgur.com/0V96mMN.jpg);
  height: 100vh;
  background-size: cover;
  position: relative;
  overflow: hidden;
}

header:after {
  content: '';
  position: absolute;
  bottom: 0;
  width: 100%;
  background-size: cover;
  height: 12em;
  background-image: url(https://i.imgur.com/bzS5zNh.png);
}

.header-content {
 z-index: 1;
 position: relative;
}

.banner-overlay {
  margin-top:6em;
}

.header-content h1 {
  font-size: 4em;
  font-weight: bold;
  text-align: center;
  text-transform: capitalize;
  color: black;
}

.header-content p {
  font-size: 3em;
  font-weight: bold;
  text-transform: capitalize;
  color: black;
}

.col-lg-6 {
  max-width: none;
  text-align: center;
}

.overlay-wrapper {
  width: 100%;
  height: 30%;
  background-color: rgba(232, 232, 232, 0.25)
}

.opaque-wrapper {
  z-index: 2;
  opacity: 100%;
}

@media (min-width:700px) and (max-width:1500px) {
  .banner-overlay {
    margin-top:12em;

  }
  .header-content h1 {
    font-size: 4em;
  }

  .header-content p {
    font-size: 2.5em;
  }
}

@media (min-width:300px) and (max-width:700px) {
  .banner-overlay {
    margin-top:6.5em;
  }
  .header-content h1 {
    font-size: 4em;
  }

  .header-content p {
    font-size: 2.5em;
  }
}

@media (min-width:0px) and (max-width:300px) {
  .banner-overlay {
    margin-top:6em;
  }
  .header-content h1 {
    font-size: 4em;
  }

  .header-content p {
    font-size: 2em;
  }
}

.somebox {
  height: 75vh;
  width: 100%;
}

.alternate-content {
  background-color:#E0E0E0;
  height: 75vh;
  width: 100%;
}

.more-content {
  height: 75vh;
  width: 100%;
}

Работает в Код-ручка отлично: https://codepen.io/kraggerz/pen/bGdEKxj

Когда я запускаю его локально, я получаю: enter image description here

РЕДАКТИРОВАТЬ: Проблема, кажется, происходит когда я уменьшаю ширину экрана (я работаю над адаптивным дизайном). В полноэкранном режиме это не проблема (опять же, это появляется только за пределами кодовой ручки)

...