HTML Academy
Challenge: Why So Serious?
Text Formatting26/26
Back to the list of tasks
  • 1. Unicode Characters
  • 2. The text-shadow Property
  • 3. Horizontal Text Shadow Offset
  • 4. Vertical Text Shadow Offset
  • 5. Text Shadow Feathering
  • 6. The Text Shadow Color
  • 7. Embedded Effect for Text
  • 8. Decorative Retro Shadow
  • 9. Challenge: Psychedelic Shadows
  • 10. Logo: Custom Font
  • 11. Logo: Icon Font
  • 12. Logo: Size Alignment
  • 13. Applying Decorative Styling to the Line, Step 1
  • 14. Applying Decorative Styling to the Line, Step 2
  • 15. The text-indent Property
  • 16. The: first-letter Pseudo Element
  • 17. : first-line Pseudo Element
  • 18. Column Markup: The column-count Property
  • 19. Column Markup: The column-width Property
  • 20. Column Markup: The column-gap Property
  • 21. Text Direction
  • 22. Text Direction and Tables
  • 23. Overflowing Text
  • 24. Spacing Between Words
  • 25. Challenge: Why So Serious?
  • 26. Challenge: Play With Fonts
List of tasks
  • Sign up
  • Log in

Register to take up challenges

Registration will only take a minute and let you save your study progress. You can register with your email and password or login via social networks.

or
Log in and continue
  • index.html
  • style.css
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>Challenge: Play With Fonts</title> <meta charset="utf-8"> <link rel="stylesheet" href="style.css"> </head> <body> <h1>Muffidas</h1> </body> </html>
CSS
body { margin: 0; width: 570px; height: 300px; background: url("football.jpg") -120px -60px no-repeat; color: #ffffff; font-family: "Courier New", monospace; } h1 { position: relative; margin: 0; padding-left: 40px; width: 320px; } h1::before { position: relative; content: "●"; font-size: 90px; color: #ffffff; }

What didn’t you like in this task?

Thanks! We’ll fix everything at once!

100%
  • Goal
  • Result
  • Overlay
  • Differences
  • ?

Press Compare to send your code for review.

Failed to load the goal. Try later.

Goal — the interface you need to get.

Result — the way the server sees your code. Can differ from what you see in the mini-browser. The comparison is made between this result and the goal.

Overlay — semi-transparent result is shown above the goal.

Differences — the map of differences between the goal and the result.

Done 0%.
The code has been changed

Cookies ∙ Privacy ∙ License Agreement ∙ About ∙ Contacts ∙ © HTML Academy OÜ, 2019−2025

VISAMastercard