Week 1 – A-Arin (Branch 637)
✨ นางสาวรจนา หอมประสิทธิ์
<html> <head> <title>Let's Start </title> <style> @import url('https://fonts.googleapis.com/css2? family=Sriracha&display=swap'); body{ background: linear-gradient(to bottom right, #ffa751, #ffe259); margin:2em; } .namecard{ width:75%; margin:auto; text-align:center; background-image:url(https://i.imgur.com/3EFpA2r.jpeg); background-size: cover; padding:2em; border-radius: 10px; box-shadow: 5px 5px graytext; } .title{ color:black; } a, a > span { position: relative; font-family: 'Sriracha', cursive; color: inherit; text-decoration: none; line-height: 10px; } a:before, a:after, a > span:before, a > span:after { content: ''; position: absolute; transition: transform .5s ease; } .hover-5 { display: inline-block; overflow: hidden; } .hover-5:before, .hover-5:after { right: 0; bottom: 0; background: #492059; } .hover-5:before { width: 100%; height: 2px; transform: translateX(-100%); } .hover-5:after { width: 2px; height: 100%; transform: translateY(100%); } .hover-5 > span { display: flex; padding: 10px; } .hover-5 > span:before, .hover-5 > span:after { left: 0; top: 0; background: #492059; } .hover-5 > span:before { width: 100%; height: 2px; transform: translateX(100%); } .hover-5 > span:after { width: 2px; height: 100%; transform: translateY(-100%); } .hover-5:hover:before, .hover-5:hover:after, .hover-5:hover > span:before, .hover-5:hover > span:after { transform: translate(0, 0); } p{ font-family: 'Sriracha', cursive; } .rainbow { /* Font options */ font-family: 'Pacifico', cursive; text-shadow: 2px 2px 4px #000000; font-size:35px; /* Chrome, Safari, Opera */ -webkit-animation: rainbow 5s infinite; /* Internet Explorer */ -ms-animation: rainbow 5s infinite; /* Standar Syntax */ animation: rainbow 5s infinite; } /* Chrome, Safari, Opera */ @-webkit-keyframes rainbow{ 0%{color: orange;} 10%{color: purple;} 20%{color: red;} 30%{color: CadetBlue;} 40%{color: yellow;} 50%{color: coral;} 60%{color: green;} 70%{color: cyan;} 80%{color: DeepPink;} 90%{color: DodgerBlue;} 100%{color: orange;} } /* Internet Explorer */ @-ms-keyframes rainbow{ 0%{color: orange;} 10%{color: purple;} 20%{color: red;} 30%{color: CadetBlue;} 40%{color: yellow;} 50%{color: coral;} 60%{color: green;} 70%{color: cyan;} 80%{color: DeepPink;} 90%{color: DodgerBlue;} 100%{color: orange;} } /* Standar Syntax */ @keyframes rainbow{ 0%{color: orange;} 10%{color: purple;} 20%{color: red;} 30%{color: CadetBlue;} 40%{color: yellow;} 50%{color: coral;} 60%{color: green;} 70%{color: cyan;} 80%{color: DeepPink;} 90%{color: DodgerBlue;} 100%{color: orange;} } </style> </head> <body> <!-- ให้แนะนำตัวเองพร้อมใส่ลิงค์ไปเฟสบุ๊คพี่ๆ --> <div class="namecard"> <h1 class="title, rainbow"> Group-D <br> Team P'Arin </h1> <p> สวัสดีครับท่านผู้ชม ขอต้อนรับสู่อรินแลนด์ </p> <a class="hover-5" href="https://www.facebook.com/mjayzs"><span>มด-ยมลพร</span></a><br> <a class="hover-5" href="https://www.facebook.com/NJ.Kamolchet"><span>เจ-วีรวัต</span></a><br> <a class="hover-5" href="https://www.facebook.com/kim254410"><span>คิม-ศรัณย์</span></a><br> <a class="hover-5" href="https://www.facebook.com/apirat.jumnongrat"><span>ปาล์ม-อภิรัฐ</span></a><br> <a class="hover-5" href="https://www.facebook.com/thpvrs"><span>ต้นหอม-ปวริศา</span></a><br> <a class="hover-5" href="https://www.facebook.com/ohmzasa203"><span>โอม-ปวิตร</span></a><br> <a class="hover-5" href="https://www.facebook.com/notchanon.phuengphong"><span>ดนย์-พีรดนย์</span></a><br> <a class="hover-5" href="https://www.facebook.com/pisitphuu"><span>ภู-พิสิฐพงศ์</span></a><br> <a class="hover-5" href="https://www.facebook.com/rosjana.pangkris/"><span>แป้ง-รจนา</span></a><br> </div> </body> </html>