Week 1 (Branch 767)

✨ นายภานุวัฒน์ ก้องจันทร์สว่าง

<html>
  <head>
    <title>Let's Start
    </title>
    <style>
      body{
  font-family:"Anuphan";
}
@font-face {
	font-family: "Anuphan";
	src: url('https://www.jabont.com/jayss/fonts/Anuphan/Anuphan-Light.woff2') format('woff2');
	font-weight: 200;
}
@font-face {
	font-family: "Anuphan";
	src: url('https://www.jabont.com/jayss/fonts/Anuphan/Anuphan-Regular.woff2') format('woff2');
	font-weight: 500;
}
@font-face {
	font-family: "Anuphan";
	src: url('https://www.jabont.com/jayss/fonts/Anuphan/Anuphan-SemiBold.woff2') format('woff2');
	font-weight: 700;
}
@font-face {
	font-family: "Anuphan";
	src: url('https://www.jabont.com/jayss/fonts/Anuphan/Anuphan-Bold.woff2') format('woff2');
	font-weight: 900;
}
      body{
        background:linear-gradient(to right,#000046,#a33bf7);
        margin:3em;
       
      }
      .namewrap{
        width:400px;
        margin:2em auto;
      }
      .namecard1{
        width:100%;
        background:red;
        padding-top:100%;
        position:relative;
        border-radius:30px;
        box-shadow:0px 5px 15px #0003;
        border:15px solid #f6ed5d;
        background-image:url(https://i.imgur.com/Y2bsfSP.jpeg);
        background-size:cover;
        background-position:center;
      }
      .namecard2{
        width:100%;
        background:red;
        padding-top:100%;
        position:relative;
        border-radius:30px;
        box-shadow:0px 5px 15px #0003;
        border:15px solid #90d1ad;
        background-image:url(https://i.imgur.com/YBLKsph.jpg);
        background-size:cover;
        background-position:center;
      }
      .namecard3{
        width:100%;
        background:red;
        padding-top:100%;
        position:relative;
        border-radius:30px;
        box-shadow:0px 5px 15px #0003;
        border:15px solid #86d4de;
        background-image:url(https://i.imgur.com/PGpSVpA.jpg);
        background-size:cover;
        background-position:center;
      }
      .namecard4{
        width:100%;
        background:red;
        padding-top:100%;
        position:relative;
        border-radius:30px;
        box-shadow:0px 5px 15px #0003;
        border:15px solid #96b6df;
        background-image:url(https://i.imgur.com/9IH3bqi.jpeg);
        background-size:cover;
        background-position:center;
      }
      .namecard5{
        width:100%;
        background:red;
        padding-top:100%;
        position:relative;
        border-radius:30px;
        box-shadow:0px 5px 15px #0003;
        border:15px solid #f27ab0;
        background-image:url(https://i.imgur.com/y4V6MOI.jpeg);
        background-size:cover;
        background-position:center;
      }
      .namecard6{
        width:100%;
        background:red;
        padding-top:100%;
        position:relative;
        border-radius:30px;
        box-shadow:0px 5px 15px #0003;
        border:15px solid #ffdd9a;
        background-image:url(https://i.imgur.com/f0PPnX9.jpg);
        background-size:cover;
        background-position:center;
      }
      .namecard7{
        width:100%;
        background:red;
        padding-top:100%;
        position:relative;
        border-radius:30px;
        box-shadow:0px 5px 15px #0003;
        border:15px solid #0cb4e0;
        background-image:url(https://i.imgur.com/aUejdWP.jpg);
        background-size:cover;
        background-position:center;
      }
      .namecard8{
        width:100%;
        background:red;
        padding-top:100%;
        position:relative;
        border-radius:30px;
        box-shadow:0px 5px 15px #0003;
        border:15px solid #f1c9d2;
        background-image:url(https://i.imgur.com/AQ8vrCz.jpg);
        background-size:cover;
        background-position:center;
      }
      .namecard9{
        width:100%;
        background:red;
        padding-top:100%;
        position:relative;
        border-radius:30px;
        box-shadow:0px 5px 15px #0003;
        border:15px solid #9b9ed1;
        background-image:url(https://i.imgur.com/djtnYo3.jpg);
        background-size:cover;
        background-position:center;
      }
      .namecard10{
        width:100%;
        background:red;
        padding-top:100%;
        position:relative;
        border-radius:30px;
        box-shadow:0px 5px 15px #0003;
        border:15px solid #9b9ed1;
        background-image:url(https://scontent.fbkk22-6.fna.fbcdn.net/v/t1.0-9/56556943_2283316895022664_6641171530233413632_n.jpg?_nc_cat=104&ccb=2&_nc_sid=174925&_nc_eui2=AeFFRiR7tC32EG91DDXFnkYy-JYV5nYEQxr4lhXmdgRDGkb4sE0hXuX6DQJKAw9jdXJJDImbu-E9qN7qZkk-vMG7&_nc_ohc=i1Hq2dusIDIAX8b8gB9&_nc_ht=scontent.fbkk22-6.fna&oh=afdc0b9cc9f8673210844e0b5d1d490e&oe=6024B8FE);
        background-size:cover;
        background-position:center;
      }
      .label{
        background:#0005;
        position:absolute;
        bottom:1em;
        right:1em;
        width:calc(100% - 2em);
        padding:1em;
        box-sizing:border-box;
        text-align:center;
        border-radius:10px;
        background:linear-gradient(to right,#fe5487,#a33bf7)
      }
      .name{
        font-size:1.5rem;
      }
      .slogan{
      }
      .reset{
        padding:0;
        margin:0;
        color:white;
      }
      tag{
        display:block;
        width:3em;
        text-align:center;
        position:absolute;
        background:red;
        top:1em;
        color:white;
        padding:.5em 1.5em;
        font-weight:bold;
        border-radius:100px;
      }
      tag.a{
        left:1em;
        background:linear-gradient(to right,#654ea3,#eaafc8)
      }
      tag.b{
        right:1em;
        background:linear-gradient(to left,#654ea3,#eaafc8)
      }
    </style>
  </head>
  <body>
    <div class="namewrap">
      <div class="namecard10">
        <tag class="a">หล่อเท่
        </tag>
        <tag class="b">P'New
        </tag>
        <div class="label">
          <h2 class="name reset">
            Tanawat Kemwatcharalert
          </h2>
          <h5 class="slogan reset">
            พรี่หล่อเท่ประจำกรุ๊ป E
          </h5>
          <a href="https://www.facebook.com/tanawat.kemwatcharalert/photos_all"><img src="https://i.imgur.com/0lcNBA9.png" width="100px" class="row"></a>
          <a href="https://www.instagram.com/thw_nw/"><img src="https://i.imgur.com/cxKAGL0.png" width="100px" class="row"></a>
        </div>
      </div>
    </div>
    <div class="namewrap">
      <div class="namecard1">
        <tag class="a">Dev
        </tag>
        <tag class="b">Mek
        </tag>
        <div class="label">
          <h2 class="name reset">
            Panuwat Kongchansawang
          </h2>
          <h5 class="slogan reset">
            Aroi
          </h5>
          <a href="https://www.facebook.com/panuwat.kongjansawang.5/"><img src="https://i.imgur.com/0lcNBA9.png" width="100px" class="row"></a>
            <a href="https://www.instagram.com/mekatra_ralomkringlomtokbunny/"><img src="https://i.imgur.com/cxKAGL0.png" width="100px" class="row"></a>
        </div>
      </div>
    </div>
     <div class="namewrap">
      <div class="namecard2">
        <tag class="a">Design
        </tag>
        <tag class="b">Babe
        </tag>
        <div class="label">
          <h2 class="name reset">
            Supaphol Kodtom
          </h2>
          <h5 class="slogan reset">
            What goes around, comes around.
          </h5>
          <a href="https://www.facebook.com/profile.php?id=100007612094964"><img src="https://i.imgur.com/0lcNBA9.png" width="100px" class="row"></a>
            <a href="https://www.instagram.com/supaphol_k/"><img src="https://i.imgur.com/cxKAGL0.png" width="100px" class="row"></a>
        </div>
      </div>
    </div>
    <div class="namewrap">
      <div class="namecard3">
        <tag class="a">Design
        </tag>
        <tag class="b">Kaem
        </tag>
        <div class="label">
          <h2 class="name reset">
            Santhita Krajangwongpaisan
          </h2>
          <h5 class="slogan reset">
            with this pair of nike I still can't do it
          </h5>
          <a href="https://www.facebook.com/santhitaaa/"><img src="https://i.imgur.com/0lcNBA9.png" width="100px" class="row"></a>
            <a href="https://www.instagram.com/santhitaaa/"><img src="https://i.imgur.com/cxKAGL0.png" width="100px" class="row"></a>
        </div>
      </div>
    </div>
    <div class="namewrap">
      <div class="namecard4">
        <tag class="a">Design
        </tag>
        <tag class="b">Ing
        </tag>
        <div class="label">
          <h2 class="name reset">
            Santakorn Wongsiripa
          </h2>
          <h5 class="slogan reset">
            -uhgdup0giupo ;'g;upo.sPj เอ้าลืมเปลี่ยนภาษา
          </h5>
          <a href="https://www.facebook.com/ing.santakorn"><img src="https://i.imgur.com/0lcNBA9.png" width="100px" class="row"></a>
            <a href="https://www.instagram.com/ing.cr1ms/"><img src="https://i.imgur.com/cxKAGL0.png" width="100px" class="row"></a>
        </div>
      </div>
    </div>
    <div class="namewrap">
      <div class="namecard5">
        <tag class="a">Design
        </tag>
        <tag class="b">Por
        </tag>
        <div class="label">
          <h2 class="name reset">
            Aphatsara Moratsathian
          </h2>
          <h5 class="slogan reset">
            The future depends on what we do in the present.
          </h5>
          <a href="https://www.facebook.com/polove092"><img src="https://i.imgur.com/0lcNBA9.png" width="100px" class="row"></a>
            <a href="https://www.instagram.com/_porrr_/"><img src="https://i.imgur.com/cxKAGL0.png" width="100px" class="row"></a>
        </div>
      </div>
    </div>
    <div class="namewrap">
      <div class="namecard6">
        <tag class="a">Design
        </tag>
        <tag class="b">Neay
        </tag>
        <div class="label">
          <h2 class="name reset">
            Rujrawee Meela
          </h2>
          <h5 class="slogan reset">
            การลืมที่ยากที่สุดก็คือ"การลืมตาตื่นขึ้นมาในตอนเช้า"
          </h5>
          <a href="https://www.facebook.com/rujrawee.meela"><img src="https://i.imgur.com/0lcNBA9.png" width="100px" class="row"></a>
            <a href="https://www.instagram.com/neaynarak123"><img src="https://i.imgur.com/cxKAGL0.png" width="100px" class="row"></a>
        </div>
      </div>
    </div>
    <div class="namewrap">
      <div class="namecard7">
        <tag class="a">Dev
        </tag>
        <tag class="b">Ram
        </tag>
        <div class="label">
          <h2 class="name reset">
            Rammakorn Wongjun
          </h2>
          <h5 class="slogan reset">
            ถ้าเธอชอบเขา เราจะเผาป่า
          </h5>
          <a href="https://www.facebook.com/Rammakorn/"><img src="https://i.imgur.com/0lcNBA9.png" width="100px" class="row"></a>
            <a href="https://www.instagram.com/ramramkorn/"><img src="https://i.imgur.com/cxKAGL0.png" width="100px" class="row"></a>
        </div>
      </div>
    </div>
    <div class="namewrap">
      <div class="namecard8">
        <tag class="a">Design
        </tag>
        <tag class="b">Top
        </tag>
        <div class="label">
          <h2 class="name reset">
            Peerawit Kongkitkul
          </h2>
          <h5 class="slogan reset">
            เขียนโปรแกรมเจอแต่ bug แต่พอเจอเธอปั้บ อยากจะรักเธอจังเลย
          </h5>
          <a href="https://www.facebook.com/peerawit.kongkitkul/"><img src="https://i.imgur.com/0lcNBA9.png" width="100px" class="row"></a>
            <a href="https://www.instagram.com/peera_toppppp/"><img src="https://i.imgur.com/cxKAGL0.png" width="100px" class="row"></a>
        </div>
      </div>
    </div>
    <div class="namewrap">
      <div class="namecard9">
        <tag class="a">Dev
        </tag>
        <tag class="b">Folk
        </tag>
        <div class="label">
          <h2 class="name reset">
            Panithan Kongthong
          </h2>
          <h5 class="slogan reset">
            Fox Friends!!!
          </h5>
          <a href="https://www.facebook.com/profile.php?id=100002370433315"><img src="https://i.imgur.com/0lcNBA9.png" width="100px" class="row"></a>
        </div>
      </div>
    </div>
  </body>
</html>