#e8e8e8
1.form { 2 display: flex; 3 flex-direction: column; 4 gap: 10px; 5 padding-top: 3em; 6 padding-left: 2.8em; 7 padding-right: 2.8em; 8 padding-bottom: 2.1em; 9 border: 2px dashed #DAA06D; 10 border-radius: 15px; 11 background-color: #EADDCA; 12 box-shadow: 0 0 0 4px #EADDCA, 2px 2px 4px 2px rgba(0, 0, 0, 0.5); 13 transition: .4s ease-in-out; 14} 15 16::placeholder { 17 color: #DAA06D; 18 text-align: center; 19} 20 21.form .heading { 22 padding-left: 0.8em; 23 color: #DAA06D; 24 background-color: transparent; 25 letter-spacing: .5em; 26 text-align: center; 27 padding-top: 1em; 28 padding-bottom: 3em; 29 text-shadow: inset -1px -1px 1px #DAA06D; 30} 31 32.form .input { 33 outline: none; 34 padding: 0.5em; 35 border: 1px solid #DAA06D; 36 color: #DAA06D; 37 width: 14em; 38 height: 3em; 39 border-radius: 10px; 40 background-color: #EADDCA; 41 text-align: center; 42} 43 44.form .btn { 45 align-self: center; 46 margin-top: 2em; 47 border-radius: 10px; 48 outline: none; 49 border: none; 50 color: white; 51 background-color: #E5AA70; 52 font-weight: bold; 53 letter-spacing: 0.1em; 54 transition: .4s ease-in-out opacity,.1s ease-in-out active; 55 padding: 1em; 56 box-shadow: 0.5px 0.5px 0.5px 0.5px rgba(0, 0, 0, 0.5); 57} 58 59.form .btn:hover { 60 opacity: 0.8; 61} 62 63.form .btn:active { 64 transform: translateX(0.1em) translateY(0.1em); 65 box-shadow: none; 66}
Comments
MIT License