DC Camp (Copy 8964)
✨ Pimwaree Kromsuriyasak
<html> <head> <title>Let's Start </title> <style> body{ background:#eee; margin:0em; font-family:sans-serif; --block-size:calc(100vw / 19); } .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%); } .border-1{ /* s ต่ำๆ ต่ำสุด */ background:hsl(0,100%,100%); } .border-2{ background:hsl(0,100%,0%); } </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"> </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> <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 border-2"> </div> <div class="block border-2"> </div> <div class="block border-2"> </div> <div class="block border-2"> </div> <div class="block border-2"> </div> <div class="block border-2"> </div> <div class="block border-2"> </div> <div class="block border-2"> </div> <div class="block border-2"> </div> <div class="block border-2"> </div> <div class="block border-2"> </div> <div class="block border-2"> </div> <div class="block border-2"> </div> <div class="block border-2"> </div> <div class="block border-2"> </div> <div class="block border-2"> </div> <div class="block border-2"> </div> <div class="block border-2"> </div> </section> </body> </html>