เหลือเปลื่ยน background ทำไม่เป็นอะ (Copy 11673) (Branch 11704) (Copy 11729) (Branch 11733) (Copy 11781)

เหลือเปลื่ยน background ทำไม่เป็นอะ (Copy 11673) (..

✨ PONGSIRI SUWANNASILP

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Qe</title>
    <style>
		@import url('https://fonts.googleapis.com/css2?family=Mochiy+Pop+P+One&display=swap');
		@import url('https://fonts.googleapis.com/css2?family=Mitr:wght@400&display=swap');
      @import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:wght@500&display=swap');
        * {
            margin: 0;
            padding: 0;
        }
        .pic{
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .container{
            position: relative;
            margin-top: 250px;
            max-width: 700px;
            transform: skewY(-10deg);
        }
        .container .nametag{
          margin-left:100px;
            position: relative;
            height: 180px;
            width: 400px;
            display: flex;
            align-items: center;
            justify-content: center;
            transform-origin: bottom;
            transform: skewX(45deg);
            border: 5px solid black;
            font-size: 1em;
          	font-family: 'Source Serif 4', sans-serif;
          	font-weight:1000;
        }
        .container .nametag .tryhover{
            transition: 1s;
            text-transform: uppercase;

}
        .container .nametag:hover .tryhover:nth-child(1){
            transform: translate(150px, -150px);
            border: 5px solid black;
            height: 180px;
            width: 400px;
          margin-bottom:150px;
            position: absolute;
            display:flex;
            align-items: center;
            justify-content: center;
        z-index:1;
        }
        .container .nametag:hover .tryhover:nth-child(2){
            transform: translate(75px, -75px);
            border: 3.5px solid black;
          	margin-bottom:75px;
            height: 180px;
            width: 400px;
            position: absolute;
            display:flex;
            align-items: center;
            justify-content: center;
        	z-index:1;
        }
        h2{
            position: relative;
            font-size: 3.5em;
          font-family: 'Mochiy Pop P One', sans-serif;
        }
      
      .contact{
            transform-origin: top;
            transform: skewX(45deg);
        }
        .ppp {
           	width:500px;
            font-size: 1.6em;
          font-family: 'Mochiy Pop P One', sans-serif;
          font-family: 'Mitr', sans-serif;
        }
        .container .contact .button{
            transform-origin: top;
            background: transparent;
            display: inline-block;
            transform: skewX(-45deg);
            position: relative;
            margin-top: 10px;
            padding: 10px 30px;
            border: 2px solid black;
            text-decoration: none;
            letter-spacing: 2px;
            font-size: 1em;
          
          
        }
    </style>

</head>

<body>
    <div class='pic' style="margin-bottom:20px;">
        <div class='container'>
            <div class='nametag'>
                <a class='tryhover' style="margin-right: 15px;">64070231</a>
                <a class='tryhover' style="margin-right: 15px;">WIRANYUPA</a>
                <a class='tryhover'>PETCH-IN</a>
            </div>
            <h2>NIEW</h2>
            <div class='contact'>
                <p class='ppp'>ขอโทษที่นอนดึก เลยตื่นมารักเธอในวันที่สายเกินไป</p>
                <a class='button' href=''>click here</a>
            </div>
        </div>
    </div>

<div class='pic' style="margin-bottom:20px;">
        <div class='container'>
            <div class='nametag'>
                <a class='tryhover' style="margin-right: 15px;">64070232</a>
                <a class='tryhover' style="margin-right: 15px;">WIWAT</a>
                <a class='tryhover'>LIANGKOBKIT</a>
            </div>
            <h2>WIN</h2>
            <div class='contact'>
                <p class='ppp'>สวยงามเเต่ไม่เติบโต.</p>
                <a class='button' href=''>click here</a>
            </div>
        </div>
    </div>

<div class='pic' style="margin-bottom:20px;">
        <div class='container'>
            <div class='nametag'>
                <a class='tryhover' style="margin-right: 15px;">64070193</a>
                <a class='tryhover' style="margin-right: 15px;">Pongsiri</a>
                <a class='tryhover'>Suwannasilp</a>
            </div>
            <h2>PALM</h2>
            <div class='contact'>
                <p class='ppp'>Don’t give up on your dreams. Keep sleeping.</p>
                <a class='button' href=''>click here</a>
            </div>
        </div>
    </div>

<div class='pic' style="margin-bottom:20px;">
        <div class='container'>
            <div class='nametag'>
                <a class='tryhover' style="margin-right: 15px;">64070255</a>
                <a class='tryhover' style="margin-right: 15px;">Anthicha</a>
                <a class='tryhover'>Prapasrikavin</a>
            </div>
            <h2>INGFAH</h2>
            <div class='contact'>
                <p class='ppp'>แรกๆคิมิโนะโต๊ะ หลังๆใจผมสลายฮะมุง</p>
                <a class='button' href=''>click here</a>
            </div>
        </div>
    </div>

<div class='pic' style="margin-bottom:20px;">
        <div class='container'>
            <div class='nametag'>
                <a class='tryhover' style="margin-right: 15px;">64070195</a>
                <a class='tryhover' style="margin-right: 15px;">Pornpinit</a>
                <a class='tryhover'>Nongna</a>
            </div>
            <h2>MACK</h2>
            <div class='contact'>
                <p class='ppp'>เพราะรักมันทำร้ายเลยย้ายมาทำรถ เพราะรักมันรันทดเลยทำรถประชดรัก</p>
                <a class='button' href=''>click here</a>
            </div>
        </div>
    </div>
  
  
  
  	<div class='pic' style="margin-bottom:20px;">
        <div class='container'>
            <div class='nametag'>
                <a class='tryhover' style="margin-right: 15px;">64070207</a>
                <a class='tryhover' style="margin-right: 15px;">Pakin</a>
                <a class='tryhover'>Kaophuthai</a>
            </div>
            <h2>TA</h2>
            <div class='contact'>
                <p class='ppp'>หล่อเท่สมาร์ทปราดเปรียวเสียอย่างเดียวเยี่ยวม่วง</p>
                <a class='button' href=''>click here</a>
            </div>
        </div>
    </div>
  
  
  
  
  
  
  <div class='pic' style="margin-bottom:20px;">
        <div class='container'>
            <div class='nametag'>
                <a class='tryhover' style="margin-right: 15px;">64070189</a>
                <a class='tryhover' style="margin-right: 15px;">Punnawich</a>
                <a class='tryhover'>Sittisue</a>
            </div>
            <h2>PLANKTON</h2>
            <div class='contact'>
                <p class='ppp'>อยากชูนิ้วกลางให้ทุกเรื่อง แต่ทำได้แค่ชูมือขึ้นแล้วหมุนๆชูมือขึ้นโบกไปมา กางแขนขึ้นและลง</p>
                <a class='button' href=''>click here</a>
            </div>
        </div>
    </div>
  
  
  
  
  <div class='pic' style="margin-bottom:20px;">
        <div class='container'>
            <div class='nametag'>
                <a class='tryhover' style="margin-right: 15px;">64070252</a>
                <a class='tryhover' style="margin-right: 15px;">Aphisara</a>
                <a class='tryhover'>Sonthi</a>
            </div>
            <h2>NAMNGERN</h2>
            <div class='contact'>
                <p class='ppp'>ใจเราไม่ดำหรอก ขอบตาต่างหากที่ดำ</p>
                <a class='button' href=''>click here</a>
            </div>
        </div>
    </div>
  
  
  
  
  <div class='pic' style="margin-bottom:20px;">
        <div class='container'>
            <div class='nametag'>
                <a class='tryhover' style="margin-right: 15px;">64070233</a>
                <a class='tryhover' style="margin-right: 15px;">Weerawit</a>
                <a class='tryhover'>Monlao</a>
            </div>
            <h2>PHUM</h2>
            <div class='contact'>
                <p class='ppp'>ไม่หล่อให้สาวเหลียวแต่กินเตี๋ยวให้สาวเลี้ยง</p>
                <a class='button' href=''>click here</a>
            </div>
        </div>
    </div>
  
  
  
  
  
  <div class='pic' style="margin-bottom:20px;">
        <div class='container'>
            <div class='nametag'>
                <a class='tryhover' style="margin-right: 15px;">64070214</a>
                <a class='tryhover' style="margin-right: 15px;">Metanuch</a>
                <a class='tryhover'>Boonthai</a>
            </div>
            <h2>PRO</h2>
            <div class='contact'>
                <p class='ppp'>ปากไม่แดงไม่มีแรงเรียน</p>
                <a class='button' href=''>click here</a>
            </div>
        </div>
    </div>
  
  
  <div class='pic' style="margin-bottom:20px;">
        <div class='container'>
            <div class='nametag'>
                <a class='tryhover' style="margin-right: 15px;">64070212</a>
                <a class='tryhover' style="margin-right: 15px;">Phuri</a>
                <a class='tryhover'>Siripool</a>
            </div>
            <h2>Q</h2>
            <div class='contact'>
                <p class='ppp'>คำพูดต้มยำการกระทำต้มจืด</p>
                <a class='button' href=''>click here</a>
            </div>
        </div>
    </div>
  
  
  
  <div class='pic' style="margin-bottom:20px;">
        <div class='container'>
            <div class='nametag'>
                <a class='tryhover' style="margin-right: 15px;">64070240</a>
                <a class='tryhover' style="margin-right: 15px;">Suphanat</a>
                <a class='tryhover'>Anumat</a>
            </div>
            <h2>GET</h2>
            <div class='contact'>
                <p class='ppp'>It just a bad day not a bad life</p>
                <a class='button' href=''>click here</a>
            </div>
        </div>
    </div>
  
  
  
  
  <div class='pic' style="margin-bottom:20px;">
        <div class='container'>
            <div class='nametag'>
                <a class='tryhover' style="margin-right: 15px;">64070186</a>
                <a class='tryhover' style="margin-right: 15px;">Piya</a>
                <a class='tryhover'>Chaiyanit</a>
            </div>
            <h2>SUNNY</h2>
            <div class='contact'>
                <p class='ppp'>ไม่มีสติ แต่มีสะตัง</p>
                <a class='button' href=''>click here</a>
            </div>
        </div>
    </div>
</body>

</html>