0 added
0 removed
Original
2026-01-01
Modified
2026-03-09
1
<p>Your job is to fix the mistakes in how the CSS variables are declared.</p>
1
<p>Your job is to fix the mistakes in how the CSS variables are declared.</p>
2
<p>The styles for this component are<em>purposely</em>placed inside the style tag in the HTML editor. The editor is locked, so you can only edit the styles where the CSS variables are set up.</p>
2
<p>The styles for this component are<em>purposely</em>placed inside the style tag in the HTML editor. The editor is locked, so you can only edit the styles where the CSS variables are set up.</p>
3
<p>This is an extra challenge to help you practice and strengthen your skills with CSS Custom Properties.</p>
3
<p>This is an extra challenge to help you practice and strengthen your skills with CSS Custom Properties.</p>
4
<p><strong>Solution</strong></p>
4
<p><strong>Solution</strong></p>
5
<p>The solution to the challenge will be available in a few minutes. Use it if you encounter difficulties. In the meantime, try to complete the challenge on your own.</p>
5
<p>The solution to the challenge will be available in a few minutes. Use it if you encounter difficulties. In the meantime, try to complete the challenge on your own.</p>
6
:root { /* Colors */ --background-color: #f5f7fa; --card-background-color: #ffffff; --text-color-primary: #fff; --text-color-secondary: #eee; --progress-bg-color: #ffffff; --bg-dream-car: #a99eff; --bg-house-saving: #ffb572; --bg-laptop: #ff98c8; --icon-dream-car: #e4d7fc; --icon-house-saving: #fde4cf; --icon-laptop: #fcd3e1; /* Sizes */ --card-border-radius: 16px; --icon-size: 40px; --progress-height: 8px; --gap-size: 20px; --padding-size: 20px; /* Font parameters */ --font-family: Arial, sans-serif; --font-size-title: 16px; --font-size-progress: 14px; --font-weight-title: bold; }
6
:root { /* Colors */ --background-color: #f5f7fa; --card-background-color: #ffffff; --text-color-primary: #fff; --text-color-secondary: #eee; --progress-bg-color: #ffffff; --bg-dream-car: #a99eff; --bg-house-saving: #ffb572; --bg-laptop: #ff98c8; --icon-dream-car: #e4d7fc; --icon-house-saving: #fde4cf; --icon-laptop: #fcd3e1; /* Sizes */ --card-border-radius: 16px; --icon-size: 40px; --progress-height: 8px; --gap-size: 20px; --padding-size: 20px; /* Font parameters */ --font-family: Arial, sans-serif; --font-size-title: 16px; --font-size-progress: 14px; --font-weight-title: bold; }