DC Camp (Copy 8883)
✨ 18- Weerada Erbchokchai
<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; background:hsl(0,100%,100%); } /* มาใส่สีกัน */ .blink-1{ /* สีสดใส l กลางๆ*/ background:hsl(0,100%,100%); } .blink-2{ /* สีสดใส l กลางๆ*/ background:hsl(0,100%,100%); } .blink-3{ /* สีสดใส l กลางๆ*/ background:hsl(0,100%,100%); } .blink-4{ /* สีสดใส l กลางๆ*/ background:hsl(0,100%,100%); } .candle-1{ /* สีสดใส l กลางๆ*/ background:hsl(0,100%,100%); } .candle-2{ /* สีสดใส l กลางๆ*/ background:hsl(0,100%,100%); } .candle-3{ /* สีสดใส l กลางๆ*/ background:hsl(0,100%,100%); } .light{ /* สีเปลวไฟ l กลางๆ */ background:hsl(0,100%,100%); } /* ด้านล่างนี้พยายาใช้ hue เดียวกัน แก้แค่ค่า lightness */ .c1{ /* s 100% l กลางๆ */ background:hsl(0,100%,100%); } .c2{ /* s ต่ำๆ l กลางๆ */ background:hsl(0,100%,100%); } .c3{ /* s ต่ำๆ l สูงขึ้น */ background:hsl(0,100%,100%); } .c4{ /* s ต่ำๆ l สูงขึ้นอีก */ background:hsl(0,100%,100%); } .border{ /* s ต่ำๆ ต่ำสุด */ background:hsl(0,100%,100%); } </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>