HTML Academy
Pseudo-Columns on Gradients
Linear Gradients11/23
Back to the list of tasks
  • 1. Hello, linear-gradient!
  • 2. Gradient Direction
  • 3. Diagonal Gradients
  • 4. Gradients at an Angle
  • 5. Diagonals vs. Degrees
  • 6. Challenge: Application Icons
  • 7. Uniform Multicolor Gradient
  • 8. Color Proportions and Color Stops
  • 9. Sharp Color Transitions
  • 10. Pseudo-Columns on Gradients
  • 11. Challenge: Flags
  • 12. Color Transitions in px
  • 13. Semi-Transparent Gradients
  • 14. Repeating Linear Gradient
  • 15. Creating a Complex Background – Part 1
  • 16. Creating a Complex Background – Part 2
  • 17. Creating a Complex Background – Part 3
  • 18. Let’s Create a Complex Background – Final Step
  • 19. Buttons – Part 1
  • 20. Buttons – Part 2
  • 21. Buttons – Part 3
  • 22. Challenge: Ornament Made of Shurikens
  • 23. Challenge: Satellites
Color Transitions in px
  • 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: Flags</title> <meta charset="utf-8"> <link rel="stylesheet" href="style.css"> </head> <body> <div class="flag ireland"></div> <div class="flag trinidad"></div> <div class="flag congo"></div> <div class="flag mauritius"></div> <div class="flag botswana"></div> <div class="flag madagaskar"></div> </body> </html>
CSS
html, body { margin: 0; padding: 0; } body { padding-top: 30px; padding-left: 15px; width: 505px; height: 260px; } .flag { float: left; margin-right: 15px; margin-bottom: 30px; width: 150px; height: 100px; border: 1px solid #aaaaaa; background-color: #ffffff; } .ireland { /* colors: #009b48, #ffffff, #ff7900 */ } .trinidad { /* colors: #ce1126, #ffffff, #000, #ce1126 */ } .congo { /* colors: #009543, #fbde4a, #dc241f */ } .mauritius { /* colors: #ea2839, #1a206d, #ffd500, #00a551 */ } .botswana { /* colors: #449ed3, #ffffff, #000000 */ } .madagaskar { /* colors: #fc3d32, #007e3a */ background-position: 50px 0; background-repeat: no-repeat; }

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