#212121
1.card { 2 width: 190px; 3 padding: 1.9rem 1.2rem; 4 text-align: center; 5 background: #2a2b38; 6} 7 8/*Inputs*/ 9.field { 10 margin-top: .5rem; 11 display: flex; 12 align-items: center; 13 justify-content: center; 14 gap: .5em; 15 background-color: #1f2029; 16 border-radius: 4px; 17 padding: .5em 1em; 18} 19 20.input-icon { 21 height: 1em; 22 width: 1em; 23 fill: #ffeba7; 24} 25 26.input-field { 27 background: none; 28 border: none; 29 outline: none; 30 width: 100%; 31 color: #d3d3d3; 32} 33 34/*Text*/ 35.title { 36 margin-bottom: 1rem; 37 font-size: 1.5em; 38 font-weight: 500; 39 color: #f5f5f5; 40} 41 42/*Buttons*/ 43.btn { 44 margin: 1rem; 45 border: none; 46 border-radius: 4px; 47 font-weight: bold; 48 font-size: .8em; 49 text-transform: uppercase; 50 padding: 0.6em 1.2em; 51 background-color: #ffeba7; 52 color: #5e6681; 53 box-shadow: 0 8px 24px 0 rgb(255 235 167 / 20%); 54 transition: all .3s ease-in-out; 55} 56 57.btn-link { 58 color: #f5f5f5; 59 display: block; 60 font-size: .75em; 61 transition: color .3s ease-out; 62} 63 64/*Hover & focus*/ 65.field input:focus::placeholder { 66 opacity: 0; 67 transition: opacity .3s; 68} 69 70.btn:hover { 71 background-color: #5e6681; 72 color: #ffeba7; 73 box-shadow: 0 8px 24px 0 rgb(16 39 112 / 20%); 74} 75 76.btn-link:hover { 77 color: #ffeba7; 78} 79
Comments
MIT License