Week1 – แนะนำตัว Team SSPIM (Branch 722) (Co..
✨ นางสาวชุติมา ณะแก้ว
<html> <head> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"> <link rel="preconnect" href="https://fonts.gstatic.com"> <link href="https://fonts.googleapis.com/css2?family=Fredoka+One&family=Kanit:wght@100&family=Potta+One&display=swap" rel="stylesheet"> <title>Let's Start </title> <style> .banner:after { content: ""; top: 0; left: 0; width: 100%; height: 100%; background-image: linear-gradient(120deg,#eaee44,#33d0ff); opacity: .7; mix-blend-mode:hue; } .banner > * { z-index: 100; } .banner { background-image: url(https://cdn.discordapp.com/attachments/798209355266523216/798851629125206056/41-space-scrolling-background850-2.jpg); background-size: cover; } body{ background:#A1887F; margin:2em; font-family: 'Fredoka One', cursive; } .namecard{ width:30%; height:auto; margin:auto; text-align:center; background:#f5eceb; border-radius:10px; } .namecard:hover { animation-name: example; animation-duration: 1s; animation-iteration-count: 1; } @keyframes example { 0% {transform: rotate(0deg)} 25% {transform: rotate(15deg)} 50% {transform: rotate(0deg)} 75% {transform: rotate(-15deg)} 100% {transform: rotate(0deg)} } padding:70em; } .title{ font-size:31.5px; font-family: "Anuphan"; } a{ background: -webkit-linear-gradient(#de5050, #e386ab, #ad92f0, #6a91de); -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-family: 'Fredoka One', cursive; font-size: 48px; } </style> </head> <section class="banner"> <body> <div class="namecard"> <h1 class="title"> <a href="https://www.facebook.com/shin.kamex/" target="_blank">SHIN</a> </h1> <p> 63070036 </p> </div> <br> <div class="namecard"> <h1 class="title"> <a href="https://web.facebook.com/fahhh.chutima/" target="_blank">FAH</a> </h1> <p> 63070039 </p> </div> <br> <div class="namecard"> <h1 class="title"> <a href="https://www.facebook.com/paweena.tantisirisomboon.3/" target="_blank">JELL</a> </h1> <p> 63070108 </p> </div> <br> <div class="namecard"> <h1 class="title"> <a href="https://web.facebook.com/Zix.Zak1234" target="_blank">IZAAC</a> </h1> <p> 63070035 </p> </div> <br> <div class="namecard"> <h1 class="title"> <a href="https://www.facebook.com/profile.php?id=100008163844081" target="_blank">ICE</a> </h1> <p> 63070100 </p> </div> <br> <div class="namecard"> <h1 class="title"> <a href="https://www.facebook.com/Yutthasil.Butyojunto" target="_blank">VEE</a> </h1> <p> 63070144 </p> </div> <br> <div class="namecard"> <h1 class="title"> <a href="https://www.facebook.com/profile.php?id=100011580871172" target="_blank">RIA</a> </h1> <p> 63070154 </p> </div> <br> <div class="namecard"> <h1 class="title"> <a href="https://www.facebook.com/profile.php?id=100006268124727" target="_blank">FLUKE</a> </h1> <p> 63070166 </p> </div> <br> </body> </section> </html>