the wood
✨ Jabont
<html> <head> <title>My House </title> <style> body{ background:#eee; margin:1em; font-family:sans-serif; /* font-size:12px; */ animation:ani 3s infinite alternate; } @keyframes ani{ from{font-size:1em} to{font-size:1.2em;} } .lumton{ position:absolute; bottom:0%; left:calc((100% - 2em)/2); background:brown; width:2em; height:8em; border-radius:3em 0em; z-index:2 } .poom{ --w: 4em; background:hsl(80,100%,45%,80%); width:var(--w); height:4em; border-radius:100%; position:absolute; } .poom1{ left:calc((100% - var(--w))/2); transform: scale(1.2); z-index:4; } .poom2{ right:0; top:calc((100% - var(--w))/2); z-index:3; } .poom3{ top:calc((100% - var(--w))/2); transform: scale(.9); } .tree{ width:8em; height:10em; position:relative; float:left; } </style> </head> <body> <div class="tree"> <div class="lumton"> </div> <div class="poom poom1"> </div> <div class="poom poom2"> </div> <div class="poom poom3"> </div> </div> <div class="tree" style="font-size:.9em;"> <div class="lumton"> </div> <div class="poom poom1"> </div> <div class="poom poom2"> </div> <div class="poom poom3"> </div> </div> <div class="tree" style="font-size:1.5em;"> <div class="lumton"> </div> <div class="poom poom1"> </div> <div class="poom poom2"> </div> <div class="poom poom3"> </div> </div> <div class="tree" style="font-size:1.3em;"> <div class="lumton"> </div> <div class="poom poom1"> </div> <div class="poom poom2"> </div> <div class="poom poom3"> </div> </div> </body> </html>