My CSSBattle profile: https://cssbattle.dev/player/fadyehabamer
| Target | Name | Solution | Screenshot |
|---|---|---|---|
| #1 | Simply Square | index.html | screenshot |
| #5 | Acid Rain | AcidRain.html | screenshot |
| #9 | Tesseract | index.html | screenshot |
| #11 | Eye of Sauron | EyeOfSauron.html | screenshot |
| #22 | Cloud | Cloud.html | screenshot |
| #26 | Smiley | Smiley.html | screenshot |
| #30 | Horizon | Horizon.html | screenshot |
| #42 | Baby | Baby.html | screenshot |
| #45 | Magical Tree | MagicalTree.html | screenshot |
| #47 | Corona Virus | index.html | screenshot |
| #48 | Wash Your Hands | WashYourHands.html | n/a |
| #51 | Wear a Mask | WearAMask.html | screenshot |
| #55 | Windmill | Windmill.html | screenshot |
| #59 | Earth | Earth.html | screenshot |
| #60 | Evil Triangles | EvilTriangles.html | screenshot |
| #63 | Command Key | index.html | screenshot |
| #64 | Door Knob | DoorKnob.html | screenshot |
| #67 | Video Reel | VideoReel.html | n/a |
| #68 | Bell | Bell.html | screenshot |
Each folder contains one self-contained solution (an HTML snippet with inline <style>). Open the target link, paste the file's contents into the CSSBattle editor and compare with the target.
To view a solution locally, open its .html file in a browser. The canvas on CSSBattle is 400×300, so local results may be laid out differently.
Note: don't add
<!DOCTYPE html>to these files. Several solutions use unitless lengths (e.g.width: 100;), which browsers only accept in quirks mode.