Welcome to Codebox! (Copy 8858)
✨ Jabont
<html> <head> <title>Let's Start </title> <style> body{ background:#eee; margin:0em; font-family:sans-serif; --block-size:calc(100vw / 14); } .picture{ display:flex; flex-flow:row wrap; width:calc(100vw - ( var(--block-size) *2) ); margin:var(--block-size); } .block{ width:var(--block-size); height:var(--block-size); box-shadow:0px 0px 20px inset #0002; } /* มาใส่สีกัน */ .blink-1{ /* สีสดใส*/ background:hsl(190,100%,50%); } .blink-2{ /* สีสดใส*/ background:hsl(330,100%,50%); } .blink-3{ /* สีสดใส*/ background:hsl(60,100%,50%); } .blink-4{ /* สีสดใส*/ background:hsl(30,100%,50%); } .candle-1{ background:hsl(70,100%,50%); } .candle-2{ background:hsl(20,100%,50%); } .candle-3{ background:hsl(110,100%,50%); } .light{ /* สีเปลวไฟ */ background:hsl(10,100%,50%); } /* ด้านล่างนี้พยายาใช้ hue เดียวกัน แก้แค่ค่า lightness */ .c1{ /* s 100% l กลางๆ */ background:hsl(280,100%,50%); } .c2{ /* s ต่ำๆ l กลางๆ */ background:hsl(280,10%,50%); } .c3{ /* s ต่ำๆ l สูงขึ้น */ background:hsl(280,10%,80%); } .c4{ /* s ต่ำๆ l สูงขึ้นอีก */ background:hsl(280,10%,90%); } .border{ /* s ต่ำๆ ต่ำสุด */ background:hsl(280,10%,20%); } </style> </head> <body> <section class="picture"> <!-- row 1--> <div class="block"> </div> <div class="block"> </div> <div class="block"> </div> <div class="block"> </div> <div class="block blink-3"> </div> <div class="block"> </div> <div class="block"> </div> <div class="block"> </div> <div class="block"> </div> <div class="block"> </div> <div class="block"> </div> <div class="block"> </div> <!-- row 2--> <div class="block"> </div> <div class="block blink-1"> </div> <div class="block"> </div> <div class="block"> </div> <div class="block"> </div> <div class="block"> </div> <div class="block border"> </div> <div class="block"> </div> <div class="block"> </div> <div class="block blink-1"> </div> <div class="block"> </div> <div class="block"> </div> <!-- row 3--> <div class="block"> </div> <div class="block"> </div> <div class="block"> </div> <div class="block blink-2"> </div> <div class="block"> </div> <div class="block border"> </div> <div class="block light"> </div> <div class="block border"> </div> <div class="block"> </div> <div class="block"> </div> <div class="block"> </div> <div class="block blink-2"> </div> <!-- row 4--> <div class="block blink-4"> </div> <div class="block"> </div> <div class="block"> </div> <div class="block"> </div> <div class="block border"> </div> <div class="block border"> </div> <div class="block candle-1"> </div> <div class="block border"> </div> <div class="block border"> </div> <div class="block"> </div> <div class="block"> </div> <div class="block"> </div> <!-- row 5--> <div class="block"> </div> <div class="block"> </div> <div class="block border"> </div> <div class="block border"> </div> <div class="block light"> </div> <div class="block border"> </div> <div class="block candle-1"> </div> <div class="block border"> </div> <div class="block light"> </div> <div class="block border"> </div> <div class="block border"> </div> <div class="block"> </div> <!-- row 6--> <div class="block"> </div> <div class="block border"> </div> <div class="block c2"> </div> <div class="block c3"> </div> <div class="block candle-2"> </div> <div class="block c4"> </div> <div class="block candle-1"> </div> <div class="block c4"> </div> <div class="block candle-3"> </div> <div class="block c3"> </div> <div class="block c2"> </div> <div class="block border"> </div> <!-- row 7--> <div class="block"> </div> <div class="block border"> </div> <div class="block c4"> </div> <div class="block c4"> </div> <div class="block candle-2"> </div> <div class="block c4"> </div> <div class="block c4"> </div> <div class="block c4"> </div> <div class="block candle-3"> </div> <div class="block c4"> </div> <div class="block c4"> </div> <div class="block border"> </div> <!-- row 8--> <div class="block"> </div> <div class="block border"> </div> <div class="block c4"> </div> <div class="block c4"> </div> <div class="block c4"> </div> <div class="block c4"> </div> <div class="block c4"> </div> <div class="block c4"> </div> <div class="block c4"> </div> <div class="block c4"> </div> <div class="block c4"> </div> <div class="block border"> </div> <!-- row 9--> <div class="block"> </div> <div class="block border"> </div> <div class="block c1"> </div> <div class="block c3"> </div> <div class="block c3"> </div> <div class="block c3"> </div> <div class="block c3"> </div> <div class="block c3"> </div> <div class="block c3"> </div> <div class="block c3"> </div> <div class="block c1"> </div> <div class="block border"> </div> <!-- row 10--> <div class="block"> </div> <div class="block border"> </div> <div class="block c2"> </div> <div class="block c1"> </div> <div class="block c1"> </div> <div class="block c1"> </div> <div class="block c1"> </div> <div class="block c1"> </div> <div class="block c1"> </div> <div class="block c1"> </div> <div class="block c2"> </div> <div class="block border"> </div> <!-- row 11--> <div class="block"> </div> <div class="block border"> </div> <div class="block c3"> </div> <div class="block c3"> </div> <div class="block c3"> </div> <div class="block c3"> </div> <div class="block c3"> </div> <div class="block c3"> </div> <div class="block c3"> </div> <div class="block c3"> </div> <div class="block c3"> </div> <div class="block border"> </div> <!-- row 12--> <div class="block"> </div> <div class="block"> </div> <div class="block border"> </div> <div class="block border"> </div> <div class="block border"> </div> <div class="block border"> </div> <div class="block border"> </div> <div class="block border"> </div> <div class="block border"> </div> <div class="block border"> </div> <div class="block border"> </div> <div class="block"> </div> </section> </body> </html>