Welcome to CODEBOX! (Copy 759) (Copy 761) (Copy 771)

Welcome to CODEBOX! (Copy 759) (Copy 761) (Copy 77..

✨ Santhita Krajangwongpaisan

<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:#eee;
        margin:1em;
       
      }
      .namewrap{
        width:400px;
        margin:auto;
      }
      .namecard{
        width:100%;
        background:red;
        padding-top:100%;
        position:relative;
        border-radius:30px;
        box-shadow:0px 5px 15px #0003;
        border:10px solid #fff;
        background-image:url(https://i.imgur.com/Y2bsfSP.jpeg);
        background-size:cover;
        background-position:center;
      }
      .namecardbabe{
        width:100%;
        background:red;
        padding-top:100%;
        position:relative;
        border-radius:30px;
        box-shadow:0px 5px 15px #0003;
        border:10px solid #fff;
        background-image:url(https://i.imgur.com/YBLKsph.jpg);
        background-size:cover;
        background-position:center;
      }
      .namecardkaem{
        width:100%;
        background:red;
        padding-top:100%;
        position:relative;
        border-radius:30px;
        box-shadow:0px 5px 15px #0003;
        border:10px solid #fff;
        background-image:url(https://i.imgur.com/PGpSVpA.jpg);
        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,#000428,#004e92);
      
      }
      .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;
        width:12em;
        background:linear-gradient(to right,#000428,#004e92)
      }
      tag.b{
        right:1em;
        background:linear-gradient(to right,#30fee1,#2bc51c)
      }
    </style>
  </head>
  <body>
    <div class="namewrap">
      <div class="namecard">
        <tag class="a">Developer and Designer
        </tag>
        <div class="label">
          <h2 class="name reset">
            Panuwat Kongchansawang (Mek)
          </h2>
          <h5 class="slogan reset">
            Aroi
          </h5>
        </div>
      </div>
    </div>
    
    <h2> </h2>
    
    <div class="namewrap">
      <div class="namecardbabe">
        <tag class="a">Developer and Designer
        </tag>
        <div class="label">
          <h2 class="name reset">
            Supaphol Kodtom (Babe)
          </h2>
          <h5 class="slogan reset">
            What goes around, comes around.
          </h5>
        </div>
      </div>
    </div>
    
    <h2> </h2>
    
    <div class="namewrap">
      <div class="namecardkaem">
        <tag class="a">Developer and Designer
        </tag>
        <div class="label">
          <h2 class="name reset">
            Santhita Krajangwongpaisan (Kaem)
          </h2>
          <h5 class="slogan reset">
            with this pair of nike I still can't do it
          </h5>
        </div>
      </div>
    </div>
    
  </body>
</html>