#e8e8e8
1.form { 2 display: flex; 3 flex-direction: column; 4 gap: 10px; 5 max-width: 350px; 6 background-color: #fff; 7 padding: 20px; 8 border-radius: 20px; 9 position: relative; 10} 11 12.title { 13 font-size: 28px; 14 color: royalblue; 15 font-weight: 600; 16 letter-spacing: -1px; 17 position: relative; 18 display: flex; 19 align-items: center; 20 padding-left: 30px; 21} 22 23.title::before,.title::after { 24 position: absolute; 25 content: ""; 26 height: 16px; 27 width: 16px; 28 border-radius: 50%; 29 left: 0px; 30 background-color: royalblue; 31} 32 33.title::before { 34 width: 18px; 35 height: 18px; 36 background-color: royalblue; 37} 38 39.title::after { 40 width: 18px; 41 height: 18px; 42 animation: pulse 1s linear infinite; 43} 44 45.message, .signin { 46 color: rgba(88, 87, 87, 0.822); 47 font-size: 14px; 48} 49 50.signin { 51 text-align: center; 52} 53 54.signin a { 55 color: royalblue; 56} 57 58.signin a:hover { 59 text-decoration: underline royalblue; 60} 61 62.flex { 63 display: flex; 64 width: 100%; 65 gap: 6px; 66} 67 68.form label { 69 position: relative; 70} 71 72.form label .input { 73 width: 100%; 74 padding: 10px 10px 20px 10px; 75 outline: 0; 76 border: 1px solid rgba(105, 105, 105, 0.397); 77 border-radius: 10px; 78} 79 80.form label .input + span { 81 position: absolute; 82 left: 10px; 83 top: 15px; 84 color: grey; 85 font-size: 0.9em; 86 cursor: text; 87 transition: 0.3s ease; 88} 89 90.form label .input:placeholder-shown + span { 91 top: 15px; 92 font-size: 0.9em; 93} 94 95.form label .input:focus + span,.form label .input:valid + span { 96 top: 30px; 97 font-size: 0.7em; 98 font-weight: 600; 99} 100 101.form label .input:valid + span { 102 color: green; 103} 104 105.submit { 106 border: none; 107 outline: none; 108 background-color: royalblue; 109 padding: 10px; 110 border-radius: 10px; 111 color: #fff; 112 font-size: 16px; 113 transform: .3s ease; 114} 115 116.submit:hover { 117 background-color: rgb(56, 90, 194); 118} 119 120@keyframes pulse { 121 from { 122 transform: scale(0.9); 123 opacity: 1; 124 } 125 126 to { 127 transform: scale(1.8); 128 opacity: 0; 129 } 130}
Comments
Variations
1 MIT License