Welcome to CODEBOX! (Branch 2036) (Copy 2047)
✨ NATTAPONG WAIJAREE
<html> <head> <title>Let's Start </title> <style> body { background:#eee; margin:1em; font-family:sans-serif; overflow: hidden } .grid { background:#eee; display: flex; flex-wrap: wrap; border: solid 1px; width: 800px; height: 500px; } @keyframes kraprib { 0%{opacity:.2;} 5%{opacity:1;} 10%{opacity:.2;} 15%{opacity:1;} 20%{opacity:.2;} 25%{opacity:1;} 30%{opacity:.2;} 35%{opacity:1;} 40%{opacity:.2;} 45%{opacity:1;} 50%{opacity:.2;} 55%{opacity:1;} 60%{opacity:.2;} 65%{opacity:1;} 70%{opacity:.2;} 75%{opacity:1;} 80%{opacity:.2;} 85%{opacity:1;} 90%{opacity:.2;} 95%{opacity:1;} 100%{opacity:.2;} } .box1 /* Toey */ { background-image:url('https://scontent.fbkk2-6.fna.fbcdn.net/v/t1.0-9/77124318_1401060160062741_278862270795087872_o.jpg?_nc_cat=109&ccb=3&_nc_sid=09cbfe&_nc_eui2=AeFxG6Kjmwbxevi2dBIQerDbvcWV1-jzgDq9xZXX6POAOncO3sPThjlP8WmoK7uz02cSxTmMgRMSepxE6FIl0Nmd&_nc_ohc=4yMC-oh-5F8AX_aFBTU&_nc_ht=scontent.fbkk2-6.fna&oh=4ae390a777b79cc09432ada20bc92ac6&oe=6048640D'); background-size:cover; width:50px; height:50px; position:relative; top:350px; left:247px; border-radius:10px; box-shadow:0px 0px 0px 2px red; margin:3px; animation: kraprib alternate; animation-duration: 5s; animation-delay:8s; z-index:2; } .box2 /* Save */ { background-image:url('https://cdn.discordapp.com/attachments/809327422989926431/809331291945435136/7583D0C7-658F-4318-BDF7-1C35351EBECF.jpg'); background-size:cover; width:50px; height:50px; position:relative; top:350px; left:247px; border-radius:10px; box-shadow:0px 0px 0px 2px red; margin:3px; animation: kraprib alternate; animation-duration: 5s; animation-delay:14s; z-index:2; } .box3 /* Pae */ { background-image:url('https://cdn.discordapp.com/attachments/809327422989926431/809331914099654656/IMG20210211145508.jpg'); background-size:cover; width:50px; height:50px; position:relative; top:350px; left:247px; border-radius:10px; box-shadow:0px 0px 0px 2px red; margin:3px; animation: kraprib alternate; animation-duration: 5s; animation-delay:20s; z-index:2; } .box4 /* Jit */ { background-image:url('https://cdn.discordapp.com/attachments/809327422989926431/809330564670816276/135201594_3605230476212893_7071914341693562105_n.jpg'); background-size:cover; width:50px; height:50px; position:relative; top:350px; left:247px; border-radius:10px; box-shadow:0px 0px 0px 2px red; margin:3px; animation: kraprib alternate; animation-duration: 5s; animation-delay:26s; z-index:2; } .box5 /* Jabont */ { background-image:url('https://scontent.fbkk2-7.fna.fbcdn.net/v/t1.0-9/93520242_10219841843149529_6244240891939127296_n.jpg?_nc_cat=106&ccb=3&_nc_sid=09cbfe&_nc_eui2=AeFiZfefyWf3bjTX-CYiqca2DL73xLjREmQMvvfEuNESZHKCSAZtmEso4W7DGaVTIPvITolIK1q75KrHaj0816Z3&_nc_ohc=MdHPvKNL3XsAX_Nmn7M&_nc_ht=scontent.fbkk2-7.fna&oh=5d3dd842c737abdad8f144c126d4750b&oe=604A34A1'); background-size:cover; width:50px; height:50px; position:relative; top:410px; left:-90px; border-radius:10px; box-shadow:0px 0px 0px 2px purple; margin:3px; animation: kraprib alternate; animation-duration: 5s; animation-delay:32s; z-index:2; } .box6 /* Tong */ { background-image:url('https://cdn.discordapp.com/attachments/756177447896088577/809332623729754172/20210211_145621.jpg'); background-size:cover; width:50px; height:50px; position:relative; top:410px; left:-90px; border-radius:10px; box-shadow:0px 0px 0px 2px red; margin:3px; animation: kraprib alternate; animation-duration: 5s; animation-delay:26s; z-index:2; } .box7 /* Mon */ { background-image:url('https://cdn.discordapp.com/attachments/809327422989926431/809333112311250964/my_photo.jpg'); background-size: cover; width:50px; height:50px; position:relative; top:410px; left:-90px; border-radius:10px; box-shadow:0px 0px 0px 2px red; margin:3px; animation: kraprib alternate; animation-duration: 5s; animation-delay:20s; z-index:2; } .box8 /* Pink */ { background-color:pink; width:50px; height:50px; position:relative; top:410px; left:-90px; border-radius:10px; box-shadow:0px 0px 0px 2px red; margin:3px; animation: kraprib alternate; animation-duration: 5s; animation-delay:14s; z-index:2; } .box9 /* Earth */ { background-image:url('https://cdn.discordapp.com/attachments/809327422989926431/809333901042253854/unknown.png'); background-size:cover; width:50px; height:50px; position:relative; top:410px; left:-90px; border-radius:10px; box-shadow:0px 0px 0px 2px red; margin:3px; animation: kraprib alternate; animation-duration: 5s; animation-delay:8s; z-index:2; } .box10 /* P'Ae */ { background-image:url('https://cdn.discordapp.com/attachments/809327422989926431/809337271894933554/unknown.png'); background-size:cover; width:50px; height:50px; position:relative; top:410px; left:-90px; border-radius:10px; box-shadow:0px 0px 0px 2px gold; margin:3px; animation: kraprib alternate; animation-duration: 5s; animation-delay: 2s; z-index:2; } .box11 /* T.Muna */ { background-image:url('https://scontent.fbkk2-8.fna.fbcdn.net/v/t1.0-9/102466793_10158094575126590_7416939879325592566_n.jpg?_nc_cat=102&ccb=3&_nc_sid=09cbfe&_nc_eui2=AeFHaczNirmygOTUIL0kHCd3eYDMacJ32Wd5gMxpwnfZZwIeGjDuMpNRD4DG8uTxFdQ5rNu5dYNJ9AoE4c8aOcMs&_nc_ohc=KYj7U7gOSSMAX_nNYwF&_nc_ht=scontent.fbkk2-8.fna&oh=4b4123c839a8f0095d3a3fc400447539&oe=604B6FF2'); background-size:cover; width:50px; height:50px; position:relative; top:350px; left:247px; border-radius:10px; box-shadow:0px 0px 0px 2px gold; margin:3px; animation: kraprib alternate; animation-duration: 5s; animation-delay: 2s; z-index:2; } .box12 /* Arin */ { background-image:url('https://scontent.fbkk2-5.fna.fbcdn.net/v/t1.0-9/134372666_2851472108421234_1650577855754040748_n.jpg?_nc_cat=110&ccb=3&_nc_sid=09cbfe&_nc_eui2=AeG0WnY0UC8_QvuRSNzVrzgx9PpBrx_88of0-kGvH_zyh-zvu052qCgmWyq_OkjwHMYbiCGiXRzrfF8jWRI0oArC&_nc_ohc=PLpg4Dx15PEAX-ghNN6&_nc_ht=scontent.fbkk2-5.fna&oh=91dd025e66c6fa30c124aaff37e494b1&oe=604A9CB8'); background-size:cover; width:50px; height:50px; position:relative; top:350px; left:247px; border-radius:10px; box-shadow:0px 0px 0px 2px purple; margin:3px; animation: kraprib alternate; animation-duration: 5s; animation-delay:32s; z-index:2; } @keyframes matangsai { 100% {left:300px;} } .PAe { background-image:url('https://cdn.discordapp.com/attachments/809327422989926431/809338920038301716/dr.png'); background-size:cover; background-repeat: no-repeat; height:500px; width:500px; position:relative; bottom: 100px; left:1400px; animation: matangsai 2s; animation-duration: 5s; animation-delay:2s; } .Professor { background:red; background-size:cover; background-repeat: no-repeat; height:400px; width:400px; position:relative; bottom:500px; left:1400px; animation: matangsai1 3s; animation-duration: 5s; animation-delay:7s; } @keyframes matangsai1 { 100% {left:400px;} } .teay { background-image:url('https://scontent.fbkk9-2.fna.fbcdn.net/v/t1.0-9/77124318_1401060160062741_278862270795087872_o.jpg?_nc_cat=109&ccb=3&_nc_sid=09cbfe&_nc_eui2=AeFxG6Kjmwbxevi2dBIQerDbvcWV1-jzgDq9xZXX6POAOncO3sPThjlP8WmoK7uz02cSxTmMgRMSepxE6FIl0Nmd&_nc_ohc=4yMC-oh-5F8AX8Mxixq&_nc_ht=scontent.fbkk9-2.fna&oh=f33ed9d02f46af29aa21c9d1e19bef82&oe=604C588D'); background-size:cover; background-repeat: no-repeat; height:400px; width:400px; position:relative; bottom:500px; left:1400px; animation: matangsai2 3s; animation-duration: 5s; animation-delay:11.5s; } @keyframes matangsai2 { 100% {left:0px;} } .Earth { background-image:url('https://media.discordapp.net/attachments/809327422989926431/809341464264966184/2.png?width=473&height=473'); background-size:cover; background-repeat: no-repeat; height:400px; width:400px; position:relative; bottom:900px; left:1400px; animation: matangsai3 3s; animation-duration: 5s; animation-delay:17s; } @keyframes matangsai3 { 100% {left:430px;} } </style> </head> <body> <!-- เขียนเว็บง่ายๆ และดูการแสดงผลด้านซ้ายมือได้เลย --> <center> <div class="grid"> <div class="box11"></div> <div class="box1"></div> <div class="box2"></div> <div class="box3"></div> <div class="box4"></div> <div class="box12"></div> <div class="box5"></div> <div class="box6"></div> <div class="box7"></div> <div class="box8"></div> <div class="box9"></div> <div class="box10"></div> <div class="PAe"></div> <div class="Professor"></div> <div class="teay"></div> <div class="Earth"></div> </div> </center> </body> </html>