profile tinz

✨ T. Lazender

<html>
  <head>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
    <title>Lazender
    </title>
    <style>
      @import url('https://fonts.googleapis.com/css2?family=Pattaya&family=Sriracha&display=swap');
      body{
        background:#eee;
        font-family:sans-serif;
        margin:2em;
        font-family: 'Sriracha', cursive;
      }
      .card{
        background:blue;
        display:flex;
        height:270px;
        width:500px;
        border-radius:15px;
        overflow:hidden;
        box-shadow:10px 10px 10px #0232;
        margin:auto;
        margin-bottom:5em;
        transition:all .3s;
      }
      .side-left{
        background:linear-gradient(to bottom right, #a2886d , #B8BB8B);
        width:40%;
        justify-content:center;
        align-items:center;
        display:flex;
        text-align:center;
        color:white;
      }
      .side-right{
        background:white;
        color:#B8BB8B;
        width:60%;
        padding:1em;
        box-sizing:border-box;
        display:flex;
        align-items:center;
      }
      .card-name{
        color:#a2886d;
        text-shadow:0px 1px 1px #D500F955;
        font-family: 'Pattaya', sans-serif;
        font-size:2em;
        margin:0;
        text-shadow:0px 2px 0px white,0px 4px 1px #666a;
      }
      h5{
        color:#888;
        font-weight:500;
      }
      .card-pic{
        width:60%;
        overflow:hidden;
        border-radius: 50%;
        margin-top:2em;
        border:10px solid #fffa;
        transition:all .3s;
      }
      .title{
        text-align:center;
        margin-bottom:em;
        margin-top:1em;
        color:#B8BB8B;
        font-family: 'Pattaya', sans-serif;
        text-shadow:0px 2px 0px white,0px 4px 1px #666a;
      }
      .title2{
        text-align:center;
        margin-bottom:1em;
        margin-top:0em;
        color:#a2886d;
        font-family: 'Pattaya', sans-serif;
        text-shadow:0px 2px 0px white,0px 4px 1px #666a;
      }
      .card:hover{
        transform:scale(1.1) rotate(2deg) translatey(-5%);
        box-shadow:0px 30px 15px #0231;
      }
      .card:hover .card-pic{
        width:70%;
        transform:rotate(-10deg);
        border:5px solid #fffa;
      }
      .nickname{
        font-family: 'Pattaya', sans-serif;
      }
      a{
        color:#a2886d;
        font-size:1.5em;
        transition:all .2s;
        text-decoration:none;
      }
      a:hover{
        opacity:.5;
      }
      .social{
		  text-align:right;
      }
      h5{
		   color:#B8BB8B;
      }
      body{
			background-image: url("https://images.unsplash.com/photo-1556910103-587eed540238?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2070&q=80");
        	background-repeat: no-repeat;
      }
    </style>
  </head>
  <body>
    <h1 class="title">
      Multimedia 2021 
      <span style="color:#a2886d">All Party
      </span>
    </h1>
    <h1 class="title2">
      B-SSPIM
      <span style="color:#B8BB8B">GOD
      </span>
    </h1>
    <div class="card">
      <div class="side-left">
        <div>
          <img src="https://cdn.discordapp.com/attachments/855045300795080724/933057929354047508/6CEC1950-ACB2-4B44-A408-C0008948F939.jpg" class="card-pic">
          <h2 class="nickname">
            Lazender
          </h2>
        </div>
      </div>
      <div class="side-right">
        <div>
          <div class="social">
            <a href="https://www.instagram.com/znznitt._/">
              <i class="fab fa-instagram">
              </i>
            </a>
          </div>
          <h3>
            IT Student 
          </h3>
          <h3 class="card-name">
            Tinnaphoom Kird-in
          </h3>
          <h5>
            วันนึงฉันตื่นสาย เข้าเรียนไม่ทัน เป็นอะไรแน่ เพราะฉันเป็นนักเรียน
          </h5>
        </div>
      </div>
    </div>
   
  </body>
</html>