Form by mi-series
#212121
1.container { 2 position: relative; 3 max-width: 500px; 4 width: 100%; 5 background: #FCEDDA; 6 padding: 25px; 7 border-radius: 8px; 8 box-shadow: 0 0 15px rgba(0, 0, 0, 0.1); 9} 10 11.container header { 12 font-size: 1.2rem; 13 color: #000; 14 font-weight: 600; 15 text-align: center; 16} 17 18.container .form { 19 margin-top: 15px; 20} 21 22.form .input-box { 23 width: 100%; 24 margin-top: 10px; 25} 26 27.input-box label { 28 color: #000; 29} 30 31.form :where(.input-box input, .select-box) { 32 position: relative; 33 height: 35px; 34 width: 100%; 35 outline: none; 36 font-size: 1rem; 37 color: #808080; 38 margin-top: 5px; 39 border: 1px solid #EE4E34; 40 border-radius: 6px; 41 padding: 0 15px; 42 background: #FCEDDA; 43} 44 45.input-box input:focus { 46 box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1); 47} 48 49.form .column { 50 display: flex; 51 column-gap: 15px; 52} 53 54.form .gender-box { 55 margin-top: 10px; 56} 57 58.form :where(.gender-option, .gender) { 59 display: flex; 60 align-items: center; 61 column-gap: 50px; 62 flex-wrap: wrap; 63} 64 65.form .gender { 66 column-gap: 5px; 67} 68 69.gender input { 70 accent-color: #EE4E34; 71} 72 73.form :where(.gender input, .gender label) { 74 cursor: pointer; 75} 76 77.gender label { 78 color: #000; 79} 80 81.address :where(input, .select-box) { 82 margin-top: 10px; 83} 84 85.select-box select { 86 height: 100%; 87 width: 100%; 88 outline: none; 89 border: none; 90 color: #808080; 91 font-size: 1rem; 92 background: #FCEDDA; 93} 94 95.form button { 96 height: 40px; 97 width: 100%; 98 color: #000; 99 font-size: 1rem; 100 font-weight: 400; 101 margin-top: 15px; 102 border: none; 103 border-radius: 6px; 104 cursor: pointer; 105 transition: all 0.2s ease; 106 background: #EE4E34; 107} 108 109.form button:hover { 110 background: #EE3E34; 111}
2.6K views
2.6K views
MIT License