Color (Copy 10492)

✨ Jabont

<html>
  <head>
    <title>Let's Start
    </title>
    <style>
      body{
        margin:1em;
        font-family:sans-serif;
        display:flex;
        justify-content:center;
        align-items:center;
        background-image:
          url(http://i63.photobucket.com/albums/h135/AorPunK-Icon/BG/77.gif),
          url(https://images.unsplash.com/photo-1522124624696-7ea32eb9592c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1769&q=80);
        background-size:cover;
        background-position:center;
        background-blend-mode: overlay;
      }
      h1{
        text-align:center;
        font-size:10vw;
        color:hsl(270,100%,70%,90%);
        background:white;
        color:black;
        padding:.5em;
        mix-blend-mode:soft-light;
      }
      .box{
        width:5vw;
        height:5vw;
        background:hsl(330,100%,100%);
        display:inline-block;
        border-radius: 50%;
      }
      .box:nth-child(2){
        background:hsl(270,100%,100%);
      }
      .box:nth-child(3){
        background:hsl(270,100%,90%);
      }
      .box:nth-child(4){
        background:hsl(270,100%,80%);
      }
      .box:nth-child(5){
        background:hsl(270,100%,70%);
      }
      .box:nth-child(6){
        background:hsl(270,100%,60%);
      }
      .box:nth-child(7){
        background:hsl(270,100%,50%);
      }
      .box:nth-child(8){
        background:hsl(270,100%,40%);
      }
      .box:nth-child(9){
        background:hsl(270,100%,30%);
      }
      .box:nth-child(10){
        background:hsl(270,100%,20%);
      }
      .box:nth-child(11){
        background:hsl(270,100%,10%);
      }
      .box:nth-child(12){
        background:hsl(270,100%,0%);
      }
    </style>
  </head>
  <body>
    <div>
      <h1>
        ไอที ลาดกระบัง
      </h1>
      <div class="box b1">
      </div>
      <div class="box b2">
      </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>
  </body>
</html>