Combo Intermediate · Lesson 7 of 10

Gold Badge

Lesson 7 · 🏅 Gold Badge

Make a shiny round badge. A box is as wide as the page, so give it a width first, then round it off.

0 / 7

1
Type this next
Type <div class="badge">Gold Star</div> - a box with the class badge
2
In the <style> box, type .badge { background: gold; } - colors the badge gold
3
In the <style> box, type .badge { width: 120px; } - makes the box 120 pixels wide
4
In the <style> box, type .badge { padding: 50px 0; } - adds space above and below the words, so it is as tall as it is wide
5
In the <style> box, type .badge { text-align: center; } - puts the words in the middle
6
In the <style> box, type .badge { border-radius: 50%; } - makes it a circle. 50% is the most you can round
7
In the <style> box, type .badge { box-shadow: 4px 4px 0 gray; } - adds a gray shadow behind it

Your code · HTML

Type <div class="badge">Gold Star</div> - a box with the class badge

Your page

📄 Untitled

🔒 www.my-codemoji-page.com