HTML Academy
The battle, part 3
2D Transforms12/32
Back to the list of tasks
  • 1. Moving objects horizontally
  • 2. Moving objects vertically
  • 3. Fireball training
  • 4. Increasing and decreasing the size
  • 5. Defending the city
  • 6. The beginning of the journey
  • 7. The maze
  • 8. The battle, part 1
  • 9. The battle, part 2
  • 10. Test: The mysterious card
  • 11. The battle, part 3
  • 12. Test: The shattered crystal
  • 13. The final battle
  • 14. Features of transform-origin, part 1
  • 15. Features of transform-origin, part 2
  • 16. Features of transform-origin, part 3
  • 17. Features of transform-origin, part 4
  • 18. Centering with transform: translate
  • 19. Rotating the text in blocks
  • 20. Rotating the text in the background
  • 21. Custom shadows
  • 22. On-hover effects: buttons, part 1
  • 23. On-hover effects: buttons, part 2
  • 24. On-hover effects: buttons, part 3
  • 25. On-hover effects: the gallery
  • 26. The “stack” of cards
  • 27. Preparing the round menu
  • 28. Round menu, step 1
  • 29. Round menu, step 2
  • 30. Round menu, step 3
  • 31. The round menu, final part
  • 32. Test: Arranging the cards
The final battle
  • 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>Test: The shattered crystal</title> <meta charset="utf-8"> <link rel="stylesheet" href="world.css"> <link rel="stylesheet" href="style.css"> </head> <body> <div class="content overflow"> <div class="crystal"> <div class="part-green"></div> <div class="part-maroon"></div> <div class="part-orange"></div> <div class="part-red"></div> <div class="part-yellow"></div> <div class="part-blue"></div> </div> </div> </body> </html>
CSS
body { width: 550px; height: 310px; margin: 0; padding: 0; } .part-green { } .part-maroon { } .part-orange { } .part-red { } .part-yellow { } .part-blue { }

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