Menu
CoddyTech

Variabel

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

challenge icon

Tantangan

Mudah

Kita memiliki halaman tentang Olahraga Ekstrem. Saat ini, tampilannya belum terlalu bagus atau rapi. Dalam beberapa pelajaran berikutnya, kita akan memperbaikinya langkah demi langkah dengan menerapkan hal-hal yang sudah kita pelajari: variabel CSS, strategi mobile-first, dan beberapa teknik theming.

Berikut tampilan halaman ini nantinya (warna dan gaya yang tepat terserah kamu):

Kita akan mulai dengan memperbaiki tampilan halaman Olahraga Ekstrem menggunakan variabel CSS.

Tugasmu:

  1. Di dalam :root, buat variabel berikut:

    • --primary-color
    • --secondary-color
    • --bg-color
    • --text-color
    • --card-bg

    Tetapkan nilai warna apa pun yang kamu suka.

  2. Terapkan variabel ini di seluruh style:
    • Tetapkan --bg-color dan --text-color untuk <body>.
    • Gunakan --primary-color sebagai warna latar belakang untuk <header>.
    • Terapkan --card-bg sebagai warna latar belakang untuk bagian deskripsi dan fakta menarik.
    • Gunakan --secondary-color untuk sorotan (misalnya: judul, tombol, atau teks aksen).

Coba sendiri

<!DOCTYPE html>
<html>
<head>
  <title>Extreme Sports Adventures</title>
  <style>
  /* === Variables === */

  body {
    margin: 0;
    line-height: 1.6;
  }

  header {
    text-align: center;
    padding: 2rem 1rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
  }

  header h1 {
    font-size: 2.2rem;
    margin-bottom: 0.5rem;
  }

  header p {
    margin: 0;
    font-size: 1.1rem;
  }

  main {
    max-width: 1200px;
    margin: 2rem auto;
    padding: 0 1rem;
    display: flex;
    flex-direction: column;
    gap: 2rem;
  }

  .hero {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  }

  .hero img {
    width: 100%;
    height: 350px;
    object-fit: cover;
  }

  .description, .facts {
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  }

  .description h2, .facts h2 {
    margin-top: 0;
  }

  .btn {
    display: inline-block;
    margin-top: 1rem;
    padding: 10px 20px;
    color: #fff;
    text-decoration: none;
    font-weight: bold;
    border-radius: 8px;
    transition: transform 0.3s, background-color 0.3s;
  }

  .btn:hover {
    transform: scale(1.05);
  }

  ul {
    padding-left: 20px;
  }
</style>
</head>
<body>
<header>
  <h1>Extreme Sports Adventures</h1>
  <p>Feel the adrenaline with the world's most thrilling sports!</p>
</header>

<main>
  <section class="hero">
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/32/Parachuting_sport.jpg/960px-Parachuting_sport.jpg" alt="Skydiving">
  </section>

  <section class="description">
    <h2>What is Extreme Sports?</h2>
    <p>Extreme sports are activities that involve high risks and adrenaline. From skydiving and rock climbing to snowboarding and bungee jumping, these sports push your limits and give an unforgettable thrill.</p>
    <a href="#" class="btn">Learn More</a>
  </section>

  <section class="facts">
    <h2>Fun Facts</h2>
    <ul>
      <li>Skydiving reaches speeds over 120 mph during free fall.</li>
      <li>Bungee jumping started as a ritual in Vanuatu called "land diving."</li>
      <li>Rock climbing requires both strength and strategy.</li>
      <li>Snowboarding evolved from surfing and skateboarding.</li>
    </ul>
  </section>
</main>
</body>
</html>

Semua pelajaran di Frontend Praktis

Latihan sendiri: Playground Web