ITx Workshop (Copy 9215)

✨ PONGSIRI SUWANNASILP

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
        <title>ITx KMITL</title>
        <style>
            @import url('https://fonts.googleapis.com/css2?family=Prompt:wght@300&display=swap');
            * {
                box-sizing: border-box;
                font-family: 'Prompt', sans-serif;
            }
            body {
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                min-height: 100vh;
                margin: 0;
                background-image: url('https://clearvision.gitlab.io/images/sapphire.jpg');
                background-size: cover;
            
            }
            .card {
                width: 300px;
                height: 420px;
                box-shadow: 0px 0px 15px 0px hsla(0, 0%, 25%, .125);
                font-family: sans-serif;
                background-color: rgba(255, 255, 255,0.1);
                border-radius: 10px;
                text-align: center;
                padding: 30px;
                color: hsl(0, 0%, 20%);
                backdrop-filter: blur(100px);
            }
            .card > img {
                width: 150px;
                height: 150px;
                object-fit: cover;
                border-radius: 50%;
                margin-top: 30px;
                margin-bottom: 50px;
            }
            .box {
                background-color: rgba(255, 255, 255,0.1);
                width: 70px;
                height: 70px;
                padding: 18px;
                position: absolute;
                color: hsl(0, 0%, 20%);
                backdrop-filter: blur(100px);
                border-radius: 10px;
                clip-path: polygon(30% 0%, 50% 15%, 70% 0%, 90% 10%, 100% 35%, 80% 70%, 50% 100%, 20% 70%, 0% 35%, 10% 10%);
            }
            .bor {
                width: 100%;
                margin-top: -20px;
                background: rgba(255, 255, 255,0.2);
                border: none;
                padding: 5px 2px;
                outline: none;
                border-radius: 10px;
                box-shadow: inset 4px 4px 4px #555;
            }
            .q1 {
                top : 0;
                left: 0;
                transform: translate(-50%, -50%);
                animation: animate1 3s ease 0s infinite normal none;
            }
            .q2 {
                top : 0;
                right : 0;
                transform: translate(50%, -50%);
                animation: animate2 3s ease 0s infinite normal none;
            }
            .q3 {
                bottom : 0;
                left: 0;
                transform: translate(-50%, 50%);
                animation: animate3 3s ease 0s infinite normal none;
            }
            .q4 {
                bottom : 0;
                right: 0;
                transform: translate(50%, 50%);
                animation: animate4 3s ease 0s infinite normal none;
            }
            @keyframes animate1 {
            0.0%{
            }
            100%{
                transform: translate(270px, px) rotate(0);
            }
            75% {
                transform: translate(-35px, 385px) rotate(360deg);
            }
            50%{
                transform: translate(270px, 385px) rotate(0);
            }
            25% {
                transform: translate(270px, -25px) rotate(360deg);
                
            }
            
        }
            @keyframes animate2 {
            0.0%{
            }
            100%{
                transform: translate(270px, px) rotate(0);
            }
            75% {
                transform: translate(-270px, -25px) rotate(360deg);
            }
            25% {
                transform: translate(50%, 385px) rotate(360deg);
                
            }
        }
            @keyframes animate3 {
                0.0%{
            }
            100%{
                transform: translate(-40px, 40px);
            }
            75% {
                transform: translate(265px, 40px) rotate(360deg);
                
            }
            50%{
                transform: translate(265px, -385px);
                
            }
            25% {
                transform: translate(-50%, -385px) rotate(360deg);
                
            }
            }

@keyframes animate4{
                0.0%{
            }
            100%{
                transform: translate(40px, 50%);
                
            }
            75% {
                transform: translate(30px, -385px) rotate(360deg);
                
            }
        }
        </style>
    </head>
    <body>
        <div class="card">
            <div class="box q1"></div>
            <div class="box q2"></div>
            <div class="box q3"></div>
            <div class="box q4"></div>
            <img src="https://www.showaarowana.com/wp-content/uploads/2020/11/%E0%B8%AA%E0%B8%B2%E0%B8%A2%E0%B8%9E%E0%B8%B1%E0%B8%99%E0%B8%98%E0%B8%B8%E0%B9%8C%E0%B8%AB%E0%B8%99%E0%B8%B9%E0%B9%81%E0%B8%AE%E0%B8%A1%E0%B9%80%E0%B8%95%E0%B8%AD%E0%B8%A3%E0%B9%8C2.jpg" alt="#">
            <div class="bor">
                <h3>Pongsiri Suwannasilp</h3>
                <p>นักศึกษาชั้นปีที่ 1<br>คณะเทคโนโลยีสารสนเทศ สจล.</p>
            </div>
        </div>
    </body>
</html>