Apple.com Hero/Front Page Banner Area CSS

I am building a home page that has similar to the apple.com home page,

A hero banner with 4 promos at the bottom and when you scale the promos are set to the bottom and the hero banner seems like it has a max height.

I have tried to copy the code and mimic it with no luck.

Anyone know if theres a hero banner framework/library similar to this?

I know that this question may get downvotes but I cannot find a similar simple example.

Cheers

Solution

Here's a Pen reproducing the main aspects of apple.com homepage: http://codepen.io/PhilippeVay/pen/XjQwVv

The key is the height property used on the main product: height: calc(100vh - 200px) and each of the 4 links at bottom: height: 200px.
Total height is 100vh, the height of the viewport (window or device)

MDN documentation about vh and calc

* {
  box-sizing: border-box;
}
body {
  margin: 0;
}
/* Heights and layout */
main {
  max-width: 40rem;
  margin: auto; /* centering the demo*/
  background-color: #f0f0f0;
}
section {
  height: calc(100vh - 200px); /* <-- */
  padding-top: 2rem;
  text-align: center;
}
ul {
  display: flex;
  margin: 0;
  padding-left: 0;
}
li {
  list-style-type: none;
  width: 25%;
}
a {
  display: block;
  height: 200px; /* <-- */
  border: 1px solid violet;
  text-decoration: none;
  text-align: center;
  line-height: 200px;
  font-size: 3rem;
}

<main>
  <section>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A totam temporibus beatae veritatis ipsam, necessitatibus quibusdam dolorem molestias assumenda! Aut maiores magni ratione libero quisquam omnis, iure ab reprehenderit dolore.</section>
  <ul>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
  </ul>
</main>