#e8e8e8
1.card { 2 background-color: #fff; 3 border-radius: 10px; 4 padding: 20px; 5 width: 350px; 6 display: flex; 7 flex-direction: column; 8} 9 10.title { 11 font-size: 24px; 12 font-weight: 600; 13 text-align: center; 14} 15 16.form { 17 margin-top: 20px; 18 display: flex; 19 flex-direction: column; 20} 21 22.group { 23 position: relative; 24} 25 26.form .group label { 27 font-size: 14px; 28 color: rgb(99, 102, 102); 29 position: absolute; 30 top: -10px; 31 left: 10px; 32 background-color: #fff; 33 transition: all .3s ease; 34} 35 36.form .group input, 37.form .group textarea { 38 padding: 10px; 39 border-radius: 5px; 40 border: 1px solid rgba(0, 0, 0, 0.2); 41 margin-bottom: 20px; 42 outline: 0; 43 width: 100%; 44 background-color: transparent; 45} 46 47.form .group input:placeholder-shown+ label, .form .group textarea:placeholder-shown +label { 48 top: 10px; 49 background-color: transparent; 50} 51 52.form .group input:focus, 53.form .group textarea:focus { 54 border-color: #3366cc; 55} 56 57.form .group input:focus+ label, .form .group textarea:focus +label { 58 top: -10px; 59 left: 10px; 60 background-color: #fff; 61 color: #3366cc; 62 font-weight: 600; 63 font-size: 14px; 64} 65 66.form .group textarea { 67 resize: none; 68 height: 100px; 69} 70 71.form button { 72 background-color: #3366cc; 73 color: #fff; 74 border: none; 75 border-radius: 5px; 76 padding: 10px; 77 font-size: 16px; 78 cursor: pointer; 79 transition: all 0.3s ease; 80} 81 82.form button:hover { 83 background-color: #27408b; 84} 85 86
Comments
MIT License