Warna Aksen dan Penyorotan

Termasuk bagian Frontend Praktis dalam perjalanan HTML di Coddy. Pelajaran 14 dari 35.

Warna aksen membantu elemen penting terlihat menonjol, seperti tombol, tautan, bagian ajakan bertindak, atau teks yang disorot. Kamu dapat mendefinisikannya sebagai variabel CSS (--primary-color, --accent-color, --highlight-color) dan menggunakannya secara konsisten di seluruh situsmu. Keadaan hover dan sorotan juga dapat menggunakan variabel ini, sehingga kamu dapat membuat tema yang menarik secara visual dan kohesif sambil menarik perhatian ke konten utama.

Buat variabel CSS untuk warna aksenmu:

:root {
  --accent-color: #ff6b6b;
}

Gunakan warna aksen untuk elemen interaktif penting seperti tombol:

.button-primary {
  background-color: var(--accent-color);
  color: white;
}

Sorot item navigasi yang aktif menggunakan warna aksen:

.nav-item.active {
  color: var(--accent-color);
  border-bottom: 2px solid var(--accent-color);
}

Tantangan

Mudah

Tugasmu:

Atur warna aksen menggunakan variabel CSS --accent-color.
Terapkan warna aksen ke semua tombol di halaman.
Ubah kondisi hover tombol menjadi warna utama.
Terapkan warna aksen ke tautan, teks yang disorot, dan tautan footer agar konsisten.

Coba sendiri

<!DOCTYPE html>
<html>
<head>
  <title>Accent Colors & Highlighting</title>
  <style>
    :root {
      --primary-color: #1e90ff;
      --text-color: #222;
      --bg-color: #f9f9f9;
      
    }

    body {
      font-family: sans-serif;
      margin: 0;
      padding: 0;
      background-color: var(--bg-color);
      color: var(--text-color);
    }

    header {
      background-color: var(--primary-color);
      color: white;
      padding: 1rem;
      text-align: center;
    }

    main {
      padding: 2rem;
      display: grid;
      gap: 1.5rem;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    }

    .card {
      background-color: white;
      padding: 1rem;
      border-radius: 8px;
      box-shadow: 0 4px 8px rgba(0,0,0,0.1);
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }

    .card h2 {
      margin-top: 0;
      color: var(--primary-color);
    }

    .card button {
      color: white;
      border: none;
      padding: 0.5rem 1rem;
      border-radius: 5px;
      cursor: pointer;
    }

    a {
      text-decoration: none;
    }

    a:hover {
      text-decoration: underline;
    }

    .highlight {
      color: white;
      padding: 0 4px;
      border-radius: 3px;
    }

    footer {
      background-color: #222;
      color: white;
      text-align: center;
      padding: 1rem;
      margin-top: 2rem;
    }

    footer a {
      margin: 0 0.5rem;
    }
  </style>
</head>
<body>
  <header>
    <h1>Summer Music Festival</h1>
    <p>Experience <span class="highlight">unforgettable</span> music and vibes all summer long!</p>
  </header>

  <main>
    <div class="card">
      <h2>Rock Stage</h2>
      <p>Join the rock legends for an unforgettable night of music! <a href="#">More info</a></p>
      <button>Learn More</button>
    </div>

    <div class="card">
      <h2>Jazz Stage</h2>
      <p>Relax with smooth jazz performances under the open sky. <a href="#">Schedule</a></p>
      <button>Learn More</button>
    </div>

    <div class="card">
      <h2>EDM Stage</h2>
      <p>Dance all night with top DJs spinning the hottest tracks. <a href="#">Lineup</a></p>
      <button>Learn More</button>
    </div>
  </main>

  <footer>
    <p>Follow us on <a href="#">Instagram</a> | <a href="#">Facebook</a> | <a href="#">Twitter</a></p>
  </footer>
</body>
</html>