Tantangan Rangkuman
Termasuk bagian Frontend Praktis dalam perjalanan HTML di Coddy. Pelajaran 16 dari 35.
Tantangan
MudahKamu diberi halaman HTML tentang investasi dan kebebasan finansial. Tugasmu adalah menggunakan hal yang telah kamu pelajari tentang tema:
- Warna Primer & Sekunder
- Definisikan
--primary-colordan--secondary-colordi:root. - Gunakan
--primary-coloruntuk warna latar header dan footer, serta--secondary-coloruntuk warna latar body.
- Definisikan
- Mode Gelap
- Buat class
.dark-modeyang mengubah warna latar, teks, dan judul. - Uji dengan menambahkan
class="dark-mode"secara manual ke<body>.
- Buat class
- Warna Aksen
- Definisikan
--accent-colordan gunakan untuk warna latar button serta warna teks tautan di footer (rgb(249, 168, 37)).
- Definisikan
- Tipografi
- Definisikan
--h1-sizedan--h2-size, lalu terapkan pada judul.
- Definisikan
Tujuan: Buat halaman terlihat konsisten, profesional, dan mudah dibaca dalam tema terang maupun gelap.
Coba sendiri
<!DOCTYPE html>
<html>
<head>
<title>Recap Challenge</title>
<style>
/* Theme variables */
:root {
--text-color: #333333;
--heading-color: #1a3a6d;
--primary-font: "Georgia", serif;
--secondary-font: "Arial", sans-serif;
}
body {
font-family: var(--primary-font);
color: var(--text-color);
margin: 0;
line-height: 1.6;
}
header {
color: white;
text-align: center;
padding: 2rem 1rem;
background-color: #000000;
}
h1 {
font-family: var(--secondary-font);
margin-bottom: 0.5rem;
}
h2 {
font-family: var(--secondary-font);
color: var(--heading-color);
}
main {
max-width: 800px;
margin: 2rem auto;
padding: 1rem;
}
section {
margin-bottom: 2rem;
background: #fff;
padding: 1.5rem;
border-radius: 8px;
box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}
ul li {
margin-bottom: 0.6rem;
}
button {
background-color: #000000;
color: white;
border: none;
padding: 0.75rem 1.5rem;
font-size: 1rem;
border-radius: 5px;
cursor: pointer;
transition: background 0.3s;
}
button:hover {
background: #c17900;
}
footer {
text-align: center;
padding: 1rem;
color: white;
background-color: #000000;
}
a {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<header>
<h1>Financial Freedom</h1>
<p>Smart habits for building wealth and living on your own terms.</p>
</header>
<main>
<section>
<h2>What is Financial Freedom?</h2>
<p>Financial freedom means having enough savings, investments, and cash on hand to afford the lifestyle you want, without worrying about money day-to-day.</p>
</section>
<section>
<h2>Timeless Investing Advice</h2>
<ul>
<li>Start early — the power of compounding works best with time.</li>
<li>Live below your means and save consistently.</li>
<li>Diversify your investments to reduce risk.</li>
<li>Stay patient — avoid emotional decisions during market ups and downs.</li>
</ul>
</section>
<section>
<h2>Money Mindset</h2>
<p>Money is less about numbers and more about behavior. Your mindset and habits matter more than chasing the highest returns.</p>
<button>Learn More</button>
</section>
</main>
<footer>
<p>More resources on <a href="#">Investing & Financial Freedom</a></p>
</footer>
</body>
</html>
Semua pelajaran di Frontend Praktis
3Tema dan Gaya Visual
Penerapan Tema di CSSDasar Mode Gelap dan TerangWarna Aksen dan PenyorotanTema TipografiTantangan RangkumanLatihan sendiri: Playground Web