1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127
|
*{ font-family: "Noto Sans TC", sans-serif; } body{ display: flex; justify-content: center; align-items:center; min-height: 100vh; background-color: #ebcbbb ; } .container{ display: flex; justify-content: center; align-items: center; color: #0e2222; width: 540px; height: 450px ; background: #6c999a; padding: 20px; border-radius: 10px; box-shadow: 0 0 15px rgba(0, 0, 0, 0.6); position: relative; } .header{ text-align: center; font-size: 1.5em; margin-bottom: 35px; }
input{ margin-top: 30px; width: 450px; height: 40px ; font-size: 18px; background: transparent; transition: 0.1s ease; border: 1px solid #0e2222; border-radius: 5px; color: #212121; }
.labelline{ position: absolute; background: #6c999a; margin-top: -33px; margin-left: 5px;; transition: 0.2s ease; }
input:focus{ outline: none; }
input:focus + .labelline , input:valid + .labelline{ color: #DF3079; padding: 0.12px; transform: translate(1.5px, -21px) scale(0.9); z-index: 1111; }
.err{ visibility: hidden; color:#f00; font-size: 13px; }
.button-container { display: flex; justify-content:end; width: 100%; margin-top: 20px;
} button.submit { padding: 10px 20px; font-size: 16px; cursor: pointer; background-color: #0056b3 ; color: white; border: none; border-radius: 5px; transition: background-color 0.3s ease; }
button.submit:hover { background-color: #0e2222; }
.toast-success{ display:none; font-size:15px; position: absolute; background-color: #C6F6D5; color: #276749; border-radius: 15px; padding: 12px 15px; top:0; left: 20px;
}
.toast-success { animation: my_message 5s; opacity:0; }
@keyframes my_message{ from { top: -20px; opacity: 100;} to{ top: -80px; opacity: 0;} }
|