Menu
CoddyTech

Biến

Thuộc phần Thực hành frontend trong hành trình HTML của Coddy. Bài học 17 trên 35.

challenge icon

Thử thách

Dễ

Chúng ta có một trang về Thể thao mạo hiểm. Hiện tại, trang chưa trông đẹp mắt và chỉn chu. Trong vài bài học tiếp theo, chúng ta sẽ cải thiện trang từng bước bằng cách áp dụng những gì đã học: biến CSS, chiến lược ưu tiên thiết bị di động và một số kỹ thuật tạo giao diện theo chủ đề.

Đây là hình ảnh trang có thể trông như thế nào khi hoàn tất (bạn có thể tự chọn màu sắc và kiểu dáng):

Chúng ta sẽ bắt đầu cải thiện giao diện trang Thể thao mạo hiểm bằng cách sử dụng biến CSS.

Nhiệm vụ của bạn:

  1. Trong :root, hãy tạo các biến sau:

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

    Gán cho chúng bất kỳ giá trị màu nào bạn thích.

  2. Áp dụng các biến này trong toàn bộ kiểu dáng:
    • Đặt --bg-color và --text-color cho <body>.
    • Dùng --primary-color làm màu nền cho <header>.
    • Dùng --card-bg làm màu nền cho các phần mô tả và thông tin thú vị.
    • Dùng --secondary-color để làm nổi bật nội dung, chẳng hạn như tiêu đề, nút hoặc văn bản nhấn mạnh.

Tự làm thử

<!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>

Tất cả bài học trong Thực hành frontend

Tự luyện tập: Playground Web