Full Screen Hero

By Rafi

magellan hero content image layout flexbox

How do I use This?

A full screen hero that has horizontally and vertically centered content and a button to scroll to first section.

HTML

<div class="hero-full-screen">

  <div class="top-content-section">
    <div class="top-bar">
      <div class="top-bar-left">
        <ul class="menu">
          <li class="menu-text"><img src="https://placehold.it/75x30" alt="logo"></li>
          <li><a href="#">One</a></li>
          <li><a href="#">Two</a></li>
          <li><a href="#">Three</a></li>
        </ul>
      </div>
    </div>
  </div>

  <div class="middle-content-section">
    <h1>Super Compelling Headline</h1>
    <button class="button large">Button</button>
    <button class="button large">Button</button>
  </div>

  <div class="bottom-content-section" data-magellan data-threshold="0">
    <a href="#main-content-section"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M24 12c0-6.627-5.373-12-12-12s-12 5.373-12 12 5.373 12 12 12 12-5.373 12-12zm-18.005-1.568l1.415-1.414 4.59 4.574 4.579-4.574 1.416 1.414-5.995 5.988-6.005-5.988z"/></svg></a>
  </div>

</div>

<div id="main-content-section" data-magellan-target="main-content-section">
  <!-- your content goes here -->
</div>

$hero-full-screen-bg: url('https://images.pexels.com/photos/378273/pexels-photo-378273.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb') center center no-repeat;
$hero-full-screen-bg-size: cover;
$hero-full-screen-text-color: $white;

.hero-full-screen {
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  background: $hero-full-screen-bg;
  background-size: $hero-full-screen-bg-size;

  .middle-content-section {
    text-align: center;
    color: $hero-full-screen-text-color;
  }

  .top-content-section {
    width: 100%;
  }

  .bottom-content-section {
    padding: 1rem;

    svg {
      height: rem-calc(60);
      width: rem-calc(60);
      fill: $hero-full-screen-text-color;
    }
  }

  // optional demo styles
  .top-bar {
    background: transparent;

    .menu {
      background: transparent;
    }

    .menu-text {
      color: $hero-full-screen-text-color;
    }

    .menu li {
      display: flex;
      align-items: center;
    }

    .menu a {
      color: $hero-full-screen-text-color;
      font-weight: bold;
    }
  }
}

.hero-full-screen {
  height: 100vh;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
  background: url("https://images.pexels.com/photos/378273/pexels-photo-378273.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb") center center no-repeat;
  background-size: cover;
}

.hero-full-screen .middle-content-section {
  text-align: center;
  color: #fefefe;
}

.hero-full-screen .top-content-section {
  width: 100%;
}

.hero-full-screen .bottom-content-section {
  padding: 1rem;
}

.hero-full-screen .bottom-content-section svg {
  height: 3.75rem;
  width: 3.75rem;
  fill: #fefefe;
}

.hero-full-screen .top-bar {
  background: transparent;
}

.hero-full-screen .top-bar .menu {
  background: transparent;
}

.hero-full-screen .top-bar .menu-text {
  color: #fefefe;
}

.hero-full-screen .top-bar .menu li {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
}

.hero-full-screen .top-bar .menu a {
  color: #fefefe;
  font-weight: bold;
}

Full Screen Hero

By Rafi

Article Card Hover

Vertical Testimonial Block

Featured Testimonials

Full Screen Hero

By Rafi

Similar Building Blocks

Article Card Hover

Vertical Testimonial Block

Featured Testimonials