Week 1 (Branch 682) (Copy 686)
✨ PANAS CHAROENRUK
<html> <head> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <title>Let's Start </title> <style> @-webkit-keyframes card { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} } @-moz-keyframes card { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} } @keyframes card { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} } body{ background:skyblue; margin:2em; font-family:"Anuphan"; } @font-face { font-family: "Anuphan"; src: url('https://www.jabont.com/jayss/fonts/Anuphan/Anuphan-Regular.woff2') format('woff2'); font-weight: 500; } .namecard1{ width:100%; margin:auto; background:white; padding:2em; background: linear-gradient(93deg, #2C2E3E, #EE2B47, #2C2E3E); background-size: 600% 600%; -webkit-animation: card 7s ease infinite; -moz-animation: card 7s ease infinite; animation: card 7s ease infinite; } .namecard2{ width:100%; margin:auto; background:white; padding:2em; background: linear-gradient(93deg, #4D6DE3, #212121, #212121); background-size: 600% 600%; -webkit-animation: card 7s ease infinite; -moz-animation: card 7s ease infinite; animation: card 7s ease infinite; } .namecard3{ width:100%; margin:auto; background:white; padding:2em; background: linear-gradient(93deg, #FF5733, #FFBD33, #FFBD33); background-size: 600% 600%; -webkit-animation: card 7s ease infinite; -moz-animation: card 7s ease infinite; animation: card 7s ease infinite; } .namecard4{ width:100%; margin:auto; background:white; padding:2em; background: linear-gradient(93deg, #FD2EB3, #FB8D62, #FB8D62); background-size: 600% 600%; -webkit-animation: card 7s ease infinite; -moz-animation: card 7s ease infinite; animation: card 7s ease infinite; } .namecard5{ width:100%; margin:auto; background:white; padding:2em; background: linear-gradient(93deg, #D3D6DB, #415F9D , #415F9D ); background-size: 600% 600%; -webkit-animation: card 7s ease infinite; -moz-animation: card 7s ease infinite; animation: card 7s ease infinite; } .namecard6{ width:100%; margin:auto; background:white; padding:2em; background: linear-gradient(93deg, #FFFB85, #FA5B75 , #FA5B75 ); background-size: 600% 600%; -webkit-animation: card 7s ease infinite; -moz-animation: card 7s ease infinite; animation: card 7s ease infinite; } .namecard7{ width:100%; margin:auto; background:white; padding:2em; background: linear-gradient(93deg, #F6F6F6, #1E56A0 , #1E56A0 ); background-size: 600% 600%; -webkit-animation: card 7s ease infinite; -moz-animation: card 7s ease infinite; animation: card 7s ease infinite; } .namecard8{ width:100%; margin:auto; background:white; padding:2em; background: linear-gradient(93deg, #FBA834, #50C4ED , #50C4ED ); background-size: 600% 600%; -webkit-animation: card 7s ease infinite; -moz-animation: card 7s ease infinite; animation: card 7s ease infinite; } .title{ color:deeppink; } a{ color:red; } .social-icons li { display: inline-block; margin: 0.15em; position: relative; font-size: 1em; } .profile{ width: 100%; background-color: white; padding-top: 100%; background-size: cover; background-position: center; } </style> </head> <body> <!-- ให้แนะนำตัวเองพร้อมใส่ลิงค์ไปเฟสบุ๊คพี่ๆ --> <div class="row"> <div class="col-6"> <div class="namecard2" style="margin: 20px"> <div class="row"> <div class="col-6"> <div class="profile" style="background-image: url(https://media.discordapp.net/attachments/798210303846383676/798890182693879858/20210113_174107.jpg?width=636&height=585)"></div> <h4 style="color: white;">Contract</h4> <a href="https://www.facebook.com/profile.php?id=100014078888233"><img src="https://cdn.icon-icons.com/icons2/1826/PNG/512/4202110facebooklogosocialsocialmedia-115707_115594.png" style="width:50px"></a> </div> <div class="col-6"> <h1 class="title" style="color: #FF9900;"> Prenapat Pumjareon </h1> <p style="color: white;"> ดีจ้าาา ชื่อพัดนะ เป็นคนพูดน้อย(ไม่)นิด แต่ถ้าสนิทกันจะพูดมากเป็นพิเศษ ถ้าอยากคุยด้วย กรุณาเปิดประเด็นก่อนนาจาา //กราบ </p> </div> </div> </div> </div> <div class="col-6"> <div class="namecard5" style="margin: 20px"> <div class="row"> <div class="col-6"> <div class="profile" style="background-image: url(https://media.discordapp.net/attachments/798210303846383676/798890597607014450/FB_IMG_1610540757823.jpg)"></div> <h4>Contract</h4> <a href="https://www.facebook.com/profile.php?id=100002752237682"><img src="https://cdn.icon-icons.com/icons2/1826/PNG/512/4202110facebooklogosocialsocialmedia-115707_115594.png" style="width:50px"></a> </div> <div class="col-6"> <h1 class="title" style="color: #FF9900;"> Nanny Supsomboon </h1> <p> ดีจ้า ชื่อแนน เป็นคนพูดน้อย ฝากตัวด้วยน้า </p> </div> </div> </div> </div> </div> <div class="row"> <div class="col-6"> <div class="namecard7" style="margin: 20px"> <div class="row"> <div class="col-6"> <div class="profile" style="background-image: url(https://media.discordapp.net/attachments/798210303846383676/798906359990845500/128894700_2884913175057979_8919135108555632621_o.png?width=585&height=586)"></div> <h4>Contract</h4> <a href="https://www.facebook.com/supawat.usanon.77"><img src="https://cdn.icon-icons.com/icons2/1826/PNG/512/4202110facebooklogosocialsocialmedia-115707_115594.png" style="width:50px"></a> </div> <div class="col-6"> <h1 class="title" style="color: #FF9900;"> Supawat Usanon </h1> <p> สวัสดีชาวโลก </p> </div> </div> </div> </div> <div class="col-6"> <div class="namecard1" style="margin: 20px"> <div class="row"> <div class="col-6"> <div class="profile" style="background-image: url(https://scontent.fbkk21-1.fna.fbcdn.net/v/t1.15752-9/138912618_1575472106175766_3226016303719592300_n.jpg?_nc_cat=110&ccb=2&_nc_sid=ae9488&_nc_eui2=AeEryMz71MCUvFlDPukvE9GanX-BOUPStoqdf4E5Q9K2irKHOQJmOWwJMJKcF_GaBm7MZ15MuizTF3TzmORpDtxH&_nc_ohc=Uf6BvVxX8QAAX_u2la5&_nc_ht=scontent.fbkk21-1.fna&oh=7ccdf34b051b38ce9de449cf15f375df&oe=60240A9F)"></div> <h4>Contract</h4> <a href="https://www.facebook.com/profile.php?id=100010527858286"><img src="https://cdn.icon-icons.com/icons2/1826/PNG/512/4202110facebooklogosocialsocialmedia-115707_115594.png" style="width:50px"></a> </div> <div class="col-6"> <h1 class="title" style="color:#33FF33;"> Panas Charoenruk </h1> <p> สวัสดีนะเราเอง </p> </div> </div> </div> </div> </div> <div class="row"> <div class="col-6"> <div class="namecard4" style="margin: 20px"> <div class="row"> <div class="col-6"> <div class="profile" style="background-image: url(https://media.discordapp.net/attachments/798210303846383676/798891318034169876/image0.jpg?width=585&height=585)"></div> <h4>Contract</h4> <a href="https://www.facebook.com/jean.sinsuwan"><img src="https://cdn.icon-icons.com/icons2/1826/PNG/512/4202110facebooklogosocialsocialmedia-115707_115594.png" style="width:50px"></a> </div> <div class="col-6"> <h1 class="title" style="color:#333399;"> Hima Sinsuwan </h1> <p> สวัสดีครับ ชื่อหิมะ สินสุวรรณ ชื่อเล่นชื่อยีน จบจากเทพศิรินทร์ รุ่น134 งานอดิเรก เล่นเกม ฟังเพลง </p> </div> </div> </div> </div> <div class="col-6"> <div class="namecard6" style="margin: 20px"> <div class="row"> <div class="col-6"> <div class="profile" style="background-image: url(https://media.discordapp.net/attachments/798210303846383676/798894407851573268/IMG_20210105_162809_528.jpg?width=329&height=584)"></div> <h4>Contract</h4> <a href="https://www.facebook.com/issarapong.damp/"><img src="https://cdn.icon-icons.com/icons2/1826/PNG/512/4202110facebooklogosocialsocialmedia-115707_115594.png" style="width:50px"></a> </div> <div class="col-6"> <h1 class="title"> Itsaraphong Watcharaprateep </h1> <p> ชื่อ อิสระพงษ์ วัชรประทีป ชื่อเล่น ดามพ์ จบจากมารีย์วิทยา นครราชสีมา รุ่น 37 ว่างๆชอบฟังเพลง คุยกับเพื่อน เล่นเกม </p> </div> </div> </div> </div> </div> <div class="row"> <div class="col-6"> <div class="namecard3" style="margin: 20px"> <div class="row"> <div class="col-6"> <div class="profile" style="background-image: url(https://media.discordapp.net/attachments/798888479949324298/798889908776599553/4bf64a10684fe8ba.jpg?width=585&height=585)"></div> <h4>Contract</h4> <a href="https://www.facebook.com/profile.php?id=100004212908275"><img src="https://cdn.icon-icons.com/icons2/1826/PNG/512/4202110facebooklogosocialsocialmedia-115707_115594.png" style="width:50px"></a> </div> <div class="col-6"> <h1 class="title" style="color:white;"> Pornpawee sophonariyanon </h1> <p> สวัสดีชาวโลก </p> </div> </div> </div> </div> <div class="col-6"> <div class="namecard8" style="margin: 20px"> <div class="row"> <div class="col-6"> <div class="profile" style="background-image: url(https://media.discordapp.net/attachments/798210303846383676/798909902789017640/IMG_20200705_230557.jpg?width=439&height=585)"></div> <h4>Contract</h4> <a href=" https://www.facebook.com/0GuRockZaLnw0"><img src="https://cdn.icon-icons.com/icons2/1826/PNG/512/4202110facebooklogosocialsocialmedia-115707_115594.png" style="width:50px"></a> </div> <div class="col-6"> <h1 class="title"> Nattawit Rittidej </h1> <p> </p> </div> </div> </div> </div> </div> </body> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> </html>