Cara Membuat Hero Page

Reviewed by Sutiono S.Kom., M.Kom., M.T.I

by Hanifah Nurbaeti January 27, 2021

Di bawah ini kita akan mempelajari cara membuat Hero Page dengan CSS.

Hero Page adalah gambar besar dengan teks, sering kali ditempatkan di bagian atas halaman web, seperti ini :

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body, html {
  height: 100%;
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}

.hero-image {
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("https://dosenit.com/wp-content/uploads/2020/10/curious-george-11960-1680x1050-1.jpg");
  height: 50%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}

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

.hero-text button {
  border: none;
  outline: 0;
  display: inline-block;
  padding: 10px 25px;
  color: black;
  background-color: #ddd;
  text-align: center;
  cursor: pointer;
}

.hero-text button:hover {
  background-color: #555;
  color: white;
}
</style>
</head>
<body>

<div class="hero-image">
  <div class="hero-text">
    <h1 style="font-size:50px">Aku George</h1>
    <p>Aku adalah monyet terkenal</p>
    <button>Lihat Ceritaku</button>
  </div>
</div>

<p>Bagian Konten....</p>

</body>
</html>

Cara Membuat Hero Page

Langkah 1) Tambahkan HTML:
Contoh

<div class="hero-image">
  <div class="hero-text">
    <h1 style="font-size:50px">Aku George</h1>
    <p>Aku adalah monyet terkenal</p>
    <button>Lihat Ceritaku</button>
  </div>
</div>

Langkah 2) Tambahkan CSS:
Contoh

body, html {
    height: 100%;
}

/* Gambar yang digunakan */
.hero-image {
  /* Gunakan "gradien-linier" untuk menambahkan efek latar belakang yang lebih gelap ke gambar (https://dosenit.com/wp-content/uploads/2020/10/curious-george-11960-1680x1050-1.jpg). hal ini akan membuat teks lebih mudah dibaca */
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("https://dosenit.com/wp-content/uploads/2020/10/curious-george-11960-1680x1050-1.jpg");

  /* Tetapkan ketinggian tertentu */
  height: 50%;

  /* Posisikan dan pusatkan gambar untuk menskalakan dengan baik di semua layar */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}

/* Tempatkan teks di tengah gambar */
.hero-text {
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
}