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

✨ PANITHAN KONGTHONG

<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://scontent.fbkk4-3.fna.fbcdn.net/v/t1.0-9/118255072_10157771666897532_8589664537457620282_n.jpg?_nc_cat=100&ccb=2&_nc_sid=09cbfe&_nc_eui2=AeE21laa27VjkI4iZwAczqqwfimy52aGjMB-KbLnZoaMwFaFb6xRABbAlvMkJnIPLdg&_nc_ohc=UL7_RFP7jkoAX-35Ur3&_nc_ht=scontent.fbkk4-3.fna&oh=ea8d0e3cd16b3625232e52feaf30d277&oe=60261F6D);
        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,#f0ab00,#f0cf00)
      }
      tag.b{
        right:1em;
        background:linear-gradient(to right,#30fee1,#2bc51c)
      }
    </style>
  </head>
  <body>
    <div class="namewrap">
      <div class="namecard">
        <tag class="a">หล่อเท่
        </tag>
        <tag class="b">น่ารัก
        </tag>
        <div class="label">
          <h2 class="name reset">
            Jabont Chamikorn
          </h2>
          <h5 class="slogan reset">
            สวยไม่มาก แต่ท่ายาก CSS เยอะ
          </h5>
        </div>
      </div>
    </div>
  </body>
</html>