Hello World! (Branch 8210)
✨ Tiwat Parkpoompaisal
<html> <head> <title>จีน ทิวัตถ์ ภาคภูมิไพศาล (63070068)</title> <style> body{ background:#AADDE4; margin:0; font-family:sans-serif; transition: 1s; } svg{ width: 100%; } .day{ opacity: 0; } .pointer{ cursor: pointer; } .change{ fill:black; transition: 15s; } .change:hover{ fill:#743E6D; transition: 0.5s; } .change2{ fill:rgb(254,235,2); transition: 15s; } .change2:hover{ fill:#A3CB37; transition: 0.5s; } .change3{ fill:rgb(255,159,0); transition: 15s; } .change3:hover{ fill:rgb(253,102,3); transition: 0.5s; } .change4{ fill:#FEFECC; transition: 15s; } .change4:hover{ fill:rgb(214,234,147); transition: 0.5s; } .change5{ fill:#FFF775; transition: 15s; } .change5:hover{ fill:rgb(181,212,8); transition: 0.5s; } .change6{ fill:#DE5402; transition: 15s; } .change6:hover{ fill:rgb(58,134,1); transition: 0.5s; } .change7{ fill:#C34904; transition: 15s; } .change7:hover{ fill:rgb(5,138,202); transition: 0.5s; } .change8{ fill:#FC9100; transition: 15s; } .change8:hover{ fill:#FD6401; transition: 0.5s; } .change9{ fill:#FFDC4B; transition: 15s; } .change9:hover{ fill:rgb(186,211,8); transition: 0.5s; } .change10{ fill:#FFA503; transition: 15s; } .change10:hover{ fill:rgb(186,211,8); transition: 0.5s; } @keyframes cloudd{ 0%{ transform: translate(0px); } 50% { transform: translate(900px); } 100%{ transform: translate(0px); } } .cloud{ animation: cloudd 1s alternate infinite; } </style> </head> <body style="margin: 0;";background: #AADDE4> <svg viewbox="0 0 1300 1300"> <svg class="cloud" width="600px" height="600px"> <circle cx="200" cy="80" r="45" fill="#d4d4d4"/> <circle cx="180" cy="120" r="45" fill="#d4d4d4"/> <circle cx="140" cy="100" r="40" fill="#d4d4d4"/> <circle cx="230" cy="125" r="35" fill="#d4d4d4"/> <circle cx="270" cy="115" r="45" fill="#d4d4d4"/> </svg> <circle id="moon" class="pointer" onclick="night()" cx="590" cy="150" r="100" fill="#F29021" /> <circle id="sun" class="pointer" onclick="day()" cx="590" cy="150" r="100" fill="#F84A01" /> <path id="1" d="M -120 520 Q190 -200 800 500 z " fill="#7bb3b4" ></path> <path id="2" d="M 200 600 Q1100 -300 1400 600 z " fill="#3c857e" ></path> <path d="M -150 737 Q300 -100 900 737 z " fill="#306a5e" ></path> <path d="M 400 737 Q1100 -300 1700 737 z " fill="#254f43" ></path> <path class="change" d="M471 489 l60 5 l-1 60 l-80 41 l-65 79 l1 -95 z"/> <path d="M386 579 l59 -94 l98 -70 l-72 74 z" fill="rgb(253,64,40)"/> <path d="M471 489 l72 -74 l188 -83 l49 -2 l-61 13 l-139 58 z" fill="rgb(255,160,146)"/> <path class="change2"d="M471 489 l109 -88 l123 -21 l-19 42 l-153 72 z"/> <path class="change3"d="M530 554 l1 -60 l153 -72 l-49 86 z"/> <path class="change7"d="M385 674 l65 -79 l80 -41 l105 -46 l-23 53 l-141 51 z" fill=""/> <path class="change6"d="M612 561 l23 -53 l104 -38 l88 10 l-100 74 l-71 4 z" fill=""/> <path class="change8"d="M635 508 l49 -86 l107 -34 l36 92 l-88 -10 z" fill=""/> <path class="change10"d="M827 480 l-36 -92 l36 -43 z" fill=""/> <path class="change5" d="M703 380 l-19 42 l107 -34 l-16 -41 z" fill=""/> <path class="change4" d="M580 401 l139 -58 l56 4 l-72 33 z" fill=""/> <path class="change9"d="M780 330 l-61 13 l56 4 l16 41 l36 -43 z" fill=""/> <path d="M827 345 l0 135 l21 -107 z" fill="#576586"/> <path d="M780 330 l69 -11 l60 18 l37 34 l-75 1 l-23 1 l-21 -28 z" fill="#353A41"/> <path d="M946 371 l-75 1 l40 27 l4 44 l32 24 l4 51 l32 50 l-8 -130 z" fill="#030305"/> <path d="M915 443 l32 24 l4 51 l32 50 l-107 -31 l3 -23 l15 -16 l18 -29 l-25 -8 z" fill="#E4E9ED"/> <path d="M887 461 l25 8 l-18 29 l-61 7 l14 -27 l15 -12 z" fill="#DADADB"/> <path d="M848 373 l14 93 l-29 39 l-38 30 l-68 19 l100 -74 z" fill="#FEFCFD"/> <path d="M795 535 l38 -30 l61 -7 l-15 16 l-3 23 l-85 52 l-16 -27 l-48 -8 z" fill="#948868"/> <path d="M876 537 l-85 52 l-16 -27 l-48 -8 l3 44 l20 8 l68 71 z" fill="#C8CECC"/> <path d="M818 677 l58 -140 l107 31 l11 115 l-119 54 z" fill="#EEF4F2"/> <path d="M994 683 l6 21 l3 32 l-52 -3 z" fill="#010103"/> <path d="M994 683 l-43 50 l-76 4 z" fill="#BEC6BA"/> <path d="M727 554 l-71 4 l-122 82 l35 -3 l32 -7 l129 -32 z" fill="#46546A"/> <path d="M818 677 l-68 -71 l-20 -8 l-129 32 l-32 7 l-53 39 l20 -2 l54 2 l70 2 l112 -19 z" fill="#1E3646"/> <path d="M875 737 l-57 -60 l-46 -18 l-112 19 l-70 -2 l-54 -2 l-65 62 z" fill="#000104"/> <!-- eye --> <path d="M848 373 l23 -1 l40 27 l4 44 l-28 18 l-25 5 l-15 12 z" fill="#FBCC9B"/> <path d="M889 406 l12 7 l2 25 l-20 15 l-17 0 l-1 -41 z" fill="#053C91"/> <path d="M892 418 l-15 2 l-3 17 l15 -5 z" fill="#020200"/> </svg> <img src="https://image.freepik.com/free-vector/poly-art-animal-design_10250-4508.jpg"> <script> function day(){ document.getElementById('sun').classList.add('day'); document.body.style.backgroundColor='#001A33'; document.getElementById('sun').style.r='0'; } function night(){ document.getElementById('sun').classList.remove('day'); document.body.style.backgroundColor='#AADDE4'; document.getElementById('sun').style.r='100'; } </script> </body> </html>