Form by Smit-Prajapati
#e8e8e8
1.orange { 2 color: #ff7a01; 3} 4 5.form-container { 6 max-width: 700px; 7 margin: 30px; 8 background-color: #001925; 9 padding: 30px; 10 border-left: 5px solid #ff7a01; 11 clip-path: polygon(0 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%); 12} 13 14.heading { 15 display: block; 16 color: white; 17 font-size: 1.5rem; 18 font-weight: 800; 19 margin-bottom: 20px; 20} 21 22.form-container .form .input { 23 color: #87a4b6; 24 width: 100%; 25 background-color: #002733; 26 border: none; 27 outline: none; 28 padding: 10px; 29 margin-bottom: 20px; 30 font-weight: bold; 31 transition: all 0.2s ease-in-out; 32 border-left: 1px solid transparent; 33} 34 35.form-container .form .input:focus { 36 border-left: 5px solid #ff7a01; 37} 38 39.form-container .form .textarea { 40 width: 100%; 41 padding: 10px; 42 border: none; 43 outline: none; 44 background-color: #013747; 45 color: #ff7a01; 46 font-weight: bold; 47 resize: none; 48 max-height: 150px; 49 margin-bottom: 20px; 50 border-left: 1px solid transparent; 51 transition: all 0.2s ease-in-out; 52} 53 54.form-container .form .textarea:focus { 55 border-left: 5px solid #ff7a01; 56} 57 58.form-container .form .button-container { 59 display: flex; 60 gap: 10px; 61} 62 63.form-container .form .button-container .send-button { 64 flex-basis: 70%; 65 background: #ff7a01; 66 padding: 10px; 67 color: #001925; 68 text-align: center; 69 font-weight: bold; 70 border: 1px solid transparent; 71 transition: all 0.2s ease-in-out; 72} 73 74.form-container .form .button-container .send-button:hover { 75 background: transparent; 76 border: 1px solid #ff7a01; 77 color: #ff7a01; 78} 79 80.form-container .form .button-container .reset-button-container { 81 filter: drop-shadow(1px 1px 0px #ff7a01); 82 flex-basis: 30%; 83} 84 85.form-container .form .button-container .reset-button-container .reset-button { 86 position: relative; 87 text-align: center; 88 padding: 10px; 89 color: #ff7a01; 90 font-weight: bold; 91 background: #001925; 92 clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%); 93 transition: all 0.2s ease-in-out; 94} 95 96.form-container .form .button-container .reset-button-container .reset-button:hover { 97 background: #ff7a01; 98 color: #001925; 99}
2.4K views
2.4K views
MIT License