0 added
0 removed
Original
2026-01-01
Modified
2026-03-09
1
<p>Your job is to create some CSS variables and give them values.</p>
1
<p>Your job is to create some CSS variables and give them values.</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>The values for the variables are in pixels and should be multiples of 10. Below are the possible variable names:</p>
3
<p>The values for the variables are in pixels and should be multiples of 10. Below are the possible variable names:</p>
4
container-width, container-padding, item-gap, border-radius<p>This is an extra challenge to help you practice and strengthen your skills with CSS Custom Properties.</p>
4
container-width, container-padding, item-gap, border-radius<p>This is an extra challenge to help you practice and strengthen your skills with CSS Custom Properties.</p>
5
<p><strong>Solution</strong></p>
5
<p><strong>Solution</strong></p>
6
<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
<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>
7
:root { --container-width: 300px; --container-padding: 20px; --item-gap: 30px; --border-radius: 10px; }
7
:root { --container-width: 300px; --container-padding: 20px; --item-gap: 30px; --border-radius: 10px; }