CLONE IT is a learning game based on challenges in CSS styling.
You have to make the site preview in the bottom right look the same (and animate the same) as the page above. To do this, you should use CSS editor (bottom left) or even write page structure in HTML editor (top left).
Instructions and tips:
Click on labels or adjust the slider to select game mode.
Use ctrl - z or button to undo.
To reverse your last undo click ctrl - alt - z.
If you have disabled auto-refresh in menu, use ctrl-s or to update preview.
In certain modes, if you are pro, you can disable hints.
Values showed on results page comes from computedStyle, but You should use relative (%, em, vw...) units.
To cancel dragging just drop block outside editor.
Remember to not declare the same selector twice.
In some levels, text is displayed as rectangles. This is because I'm bored by Lorem ipsum...
You can choose how do you want to play:
-
Selector
As the name suggests, your task is to complete CSS selectors. You can read page structure, but you can't modify it.
-
Junior
You have to drag blocks of CSS selectors, properties and values in to right place. Just like a puzzles.
-
Easy
Finally, you can write your own CSS without hints, but you can use the given ones. Writing HTML is beyond your duties. You should take a look at it.
-
Normal
Like in real life. Write page structure and stylesheet from scratch. We will give you some values to put in right places (ex. color, paddings...).
-
Pro
All is up to you. Level checking will propably broke. Use your creativity and share the solution with your friends.