simple boxes

by ShaCP

HTML

<section class="main">
  <a href="#one">GO TO ONE</a>
  <div class="spacer">
  </div>
  <div class="container overlay-grid" id="one">
    <p class="text sizer">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin in antes viverra, rutrum erat rutrum, consectetur mi. Proin at maximus est. Nullam purus ex, iaculis sed erat sed, blandit tincidunt quam. Cras scelerisque id quam sed dignissim Pellentesque urna nunc, gravida quis hendrerit ac, tristique ut quam. Vivamus suscipit dignissim tortor nec congue.</p>
    <div class="background">
      <img class="background-image" src="https://lumiere-a.akamaihd.net/v1/images/sa_pixar_virtualbg_toystory_16x9_8461039f.jpeg" />
    </div>
  </div>
</section>

CSS

* {
  box-sizing: border-box;
}

body {
  margin: 0;
}

.main {
  width: 1600px;
  max-width: 100%;
  display: grid;
  overflow: hidden;
}

.text {
  font-size: 32px;
  color: white;
  position: relative;
  z-index: 1;
}

.overlay-grid {
  display: grid;
  grid-auto-columns: 100%;
  max-width: 100%;
  position: relative;
}

.text, .background {
  grid-column: 1 / -1;
  grid-row: 1 / -1;
}

.sizer {
  width: 700px;
  max-width: 100%;
  margin: 0 auto;
}

.background {
  max-width: 100%;
}

/* .spacer {
  height: 100vh;
} */

.background-image {
  display: block;
  max-width: 140vw;
  margin-left: 50%;
  transform: translate(-50%);
}