PvP1 Sec B – CODEBOX

PvP1 Sec B

✨ Jabont

<style>
  body{
    margin:1em;
    font-family:sans-serif;
    display:flex;
    justify-content:center;
    align-items:center;
    background-size:cover;
    background-position:center;
    background-image: 
      linear-gradient(to bottom right,violet, blue,
        cyan, green, yellow, orange, red),
      url(https://images.unsplash.com/photo-1642980074651-c936e060e3fe?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=774&q=80);
  }
  h1{
    text-align:center;
    font-size:10vw;
    color:hsl(180, 100%, 80%);
    background:hsl(180, 100%, 10%);
  }
  .box{
    width:7vw;
    height:7vw;
    display:inline-block;
    background:green;
    border:.5vw solid #fff8;
  }
  .box:nth-child(1){
    background:hsl(0, 100%, 50%);
  }
  .box:nth-child(2){
    background:hsl(36, 100%, 50%);
  }
  .box:nth-child(3){
    background:hsl(72, 100%, 50%);
  }
  .box:nth-child(4){
    background:hsl(108, 100%, 50%);
  }
  .box:nth-child(5){
    background:hsl(144, 100%, 50%);
  }
  .box:nth-child(6){
    background:hsl(180, 100%, 50%);
  }
  .box:nth-child(7){
    background:hsl(216, 100%, 50%);
  }
  .box:nth-child(8){
    background:hsl(252, 100%, 50%);
  }
  .box:nth-child(9){
    background:hsl(288, 100%, 50%);
  }
  .box:nth-child(10){
    background:hsl(324, 100%, 50%);
  }
  .box:nth-child(11){
    background:hsl(360, 100%, 50%);
  }
</style>
<div>
  <h1>
    ไอที ลาดกระบัง
  </h1>
  <div>
    <div class="box">
    </div>
    <div class="box">
    </div>
    <div class="box">
    </div>
    <div class="box">
    </div>
    <div class="box">
    </div>
    <div class="box">
    </div>
    <div class="box">
    </div>
    <div class="box">
    </div>
    <div class="box">
    </div>
    <div class="box">
    </div>
    <div class="box">
    </div>
  </div>
</div>