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 Team P'Arin
 </h1>
 
 สวัสดีครับท่านผู้ชม ขอต้อนรับสู่อรินแลนด์
 
 <a class="hover-5" href="https://www.facebook.com/mjayzs">มด-ยมลพร</a> 
 <a class="hover-5" href="https://www.facebook.com/NJ.Kamolchet">เจ-วีรวัต</a> 
 <a class="hover-5" href="https://www.facebook.com/kim254410">คิม-ศรัณย์</a> 
 <a class="hover-5" href="https://www.facebook.com/apirat.jumnongrat">ปาล์ม-อภิรัฐ</a> 
 <a class="hover-5" href="https://www.facebook.com/thpvrs">ต้นหอม-ปวริศา</a> 
 <a class="hover-5" href="https://www.facebook.com/ohmzasa203">โอม-ปวิตร</a> 
 <a class="hover-5" href="https://www.facebook.com/notchanon.phuengphong">ดนย์-พีรดนย์</a> 
 <a class="hover-5" href="https://www.facebook.com/pisitphuu">ภู-พิสิฐพงศ์</a> 
 <a class="hover-5" href="https://www.facebook.com/rosjana.pangkris/">แป้ง-รจนา</a> 
 </div>
 </body>
</html>