Form by micaelgomestavares
#212121
1.form { 2 display: flex; 3 flex-direction: column; 4 gap: 10px; 5 background-color: #ffffff; 6 padding: 30px; 7 width: 450px; 8 border-radius: 20px; 9 font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; 10} 11 12::placeholder { 13 font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; 14} 15 16.form button { 17 align-self: flex-end; 18} 19 20.flex-column > label { 21 color: #151717; 22 font-weight: 600; 23} 24 25.inputForm { 26 border: 1.5px solid #ecedec; 27 border-radius: 10px; 28 height: 50px; 29 display: flex; 30 align-items: center; 31 padding-left: 10px; 32 transition: 0.2s ease-in-out; 33} 34 35.input { 36 margin-left: 10px; 37 border-radius: 10px; 38 border: none; 39 width: 85%; 40 height: 100%; 41} 42 43.input:focus { 44 outline: none; 45} 46 47.inputForm:focus-within { 48 border: 1.5px solid #2d79f3; 49} 50 51.flex-row { 52 display: flex; 53 flex-direction: row; 54 align-items: center; 55 gap: 10px; 56 justify-content: space-between; 57} 58 59.flex-row > div > label { 60 font-size: 14px; 61 color: black; 62 font-weight: 400; 63} 64 65.span { 66 font-size: 14px; 67 margin-left: 5px; 68 color: #2d79f3; 69 font-weight: 500; 70 cursor: pointer; 71} 72 73.button-submit { 74 margin: 20px 0 10px 0; 75 background-color: #151717; 76 border: none; 77 color: white; 78 font-size: 15px; 79 font-weight: 500; 80 border-radius: 10px; 81 height: 50px; 82 width: 100%; 83 cursor: pointer; 84} 85 86.button-submit:hover { 87 background-color: #252727; 88} 89 90.p { 91 text-align: center; 92 color: black; 93 font-size: 14px; 94 margin: 5px 0; 95} 96 97.btn { 98 margin-top: 10px; 99 width: 100%; 100 height: 50px; 101 border-radius: 10px; 102 display: flex; 103 justify-content: center; 104 align-items: center; 105 font-weight: 500; 106 gap: 10px; 107 border: 1px solid #ededef; 108 background-color: white; 109 cursor: pointer; 110 transition: 0.2s ease-in-out; 111} 112 113.btn:hover { 114 border: 1px solid #2d79f3; 115 ; 116} 117 118
11K views
Variation of aform
MIT License