Rectangle HTML Test

Testing your skills in placing html elements.

Clone the Repository

git clone https://github.com/Artasov/rectangle-html-test

Open index.html and css/style.css

Task

Just fill in the contents of the <div class="o"> tag(red square) in index.html , so that it looks like in the picture below.
Do not delete or change anything that is already in the index.html and style.css, just add your code to them.
You can write new tags only inside a div with an o class tag.
Use only the div tags.
Do as much as you can, it's just a test 🙄

Difficulty Levels

• 1 🤓 Very simple

  Just make it like the image below.

• 2 😐 A bit complicated

  Do not use
  • justify-content
  • padding

• 3 🧐 Average

  When the width and height of the .o class are proportionally changed, its contents should not be distorted or change their proportions.
  Do not use
  • px em rem vh vw... only % allowed
  • margin
  • padding

• 4 😎 Difficult Not really

  When the width and height of the .o class are proportionally changed, its contents should not be distorted or change their proportions.
  Do not use
  • px em rem vh vw... only % allowed
  • padding
  • justify-content
  • align-items
  • position
  • flex

Result

Good Luck