How to create a responsive full-screen hero section for beautiful landing pages

Reading Time: 2 minutes

Creating beautiful landing pages is one of the most important tasks for web developers and web designers. In this tutorial, we show you a simple approach on how to create a responsive full-screen hero section that we use ourselves very often when creating landing pages that appeal to your site’s visitors.

Video Tutorial

Watch this tutorial on our Youtube-channel.

How it looks

Responsive full-screen hero section landing page on desktop view
Desktop view on extra-large screen.
Responsive full-screen hero section landing page on mobile view
Mobile view on small screen.

Source Code

If you just want to take a quick look at the source code of this little project or want to see if you made any mistakes when coding along to our tutorial.

Feel free to use this as the starting point for any of your projects 🙂

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      href="https://fonts.googleapis.com/css2?family=Roboto&display=swap"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="main.css" />
    <title>Hero Section</title>
  </head>
  <body>
    <div class="hero-bg">
      <div class="hero-text">
        <h1>Hero Section</h1>
        <p>
          A responsive hero section for astonishing landing pages that amaze
          your visitors.
        </p>
        <a href="#content-1" class="hero-btn">View Page!</a>
      </div>
    </div>
    <div id="content-1">
      <div class="container">
        <h2>Lorem Ipsum</h2>
        <p>
          Lorem ipsum ...
        </p>
      </div>
    </div>
    <div id="content-2">
      <div class="container">
        <h2>Lorem Ipsum</h2>
        <p>
          Lorem ipsum ...
        </p>
      </div>
    </div>
    <div class="placeholder"></div>
    <div class="footer">
      <p>&copy; 2020 Code Student</p>
    </div>
  </body>
</html>

main.css

* {
  margin: 0;
  padding: 0;
  font-family: 'Roboto', sans-serif;
  scroll-behavior: smooth;
}
.hero-bg {
  background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),
    url('https://images.pexels.com/photos/814499/pexels-photo-814499.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260');
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  height: 100vh;
}

.hero-text {
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 1.25rem;
}

h1 {
  font-size: 4rem;
}

.hero-btn {
  display: inline-block;
  color: black;
  background-color: greenyellow;
  text-align: center;
  text-decoration: none;
  padding: 0.7rem;
  margin-top: 1rem;
  border-radius: 5%;
}

.hero-btn:hover {
  color: white;
  background-color: black;
  transition: ease-in-out 0.3s;
}

#content-1 {
  background-color: greenyellow;
}

#content-2 {
  text-align: right;
}

h2,
p {
  padding: 1rem 0;
}

.container {
  width: 60%;
  margin: auto;
}

.placeholder {
  height: 50vh;
}

.footer {
  background-color: #333;
  text-align: center;
}

Closure

Thanks for checking us out! We hope you enjoyed this tutorial and learned something new. If you liked our tutorial on how to create a responsive full-screen hero section for your landing page, we’d appreciate it if you’d subscribe to our Youtube-channel.

We’d love to hear your feedback and see the cool projects you built using the stuff we teached today 😉

If you have any questions, just ask in the comments, on Instagram or Twitter or simply send us an email.

Leave a Reply

Your email address will not be published. Required fields are marked *