Form by TasneemHatem97
#e8e8e8
1.container { 2 max-width: 300px; 3 background-color: #F1F7FE; 4 border-radius: 15px; 5 overflow: hidden; 6} 7 8form { 9 display: flex; 10 align-items: center; 11 flex-direction: column; 12 padding: 32px 24px 24px; 13 gap: 16px; 14 text-align: center; 15} 16 17form .head { 18 display: flex; 19 flex-direction: column; 20 gap: 16px; 21} 22 23form .head span { 24 font-size: 1.6rem; 25 font-weight: bolder; 26 color: black; 27} 28 29form .head p { 30 font-size: 1.1rem; 31 color: #7C6666; 32} 33 34form .inputs { 35 overflow: hidden; 36 background-color: #fff; 37 width: 100%; 38 margin: 1rem 0.5rem; 39 border-radius: 8px; 40 border-bottom: none; 41 outline: 0; 42} 43 44form .inputs input { 45 border: none; 46 outline: none; 47 padding: 8px 15px; 48 /* علشان اقدر اخلي البلاس هولدر من اول الفورم بديله نفس الويدس */ 49 width: 100%; 50 height: 40px; 51 border-bottom: 1px solid rgba(128, 128, 128, 0.299); 52 font-weight: 200; 53} 54 55form button { 56 background-color: #4287ef; 57 color: white; 58 width: 100%; 59 height: 40px; 60 padding-top: 8px; 61 padding-bottom: 8px; 62 border: 0; 63 overflow: hidden; 64 border-radius: 25px; 65 font-size: 1rem; 66 font-weight: 600; 67 cursor: pointer; 68 transition: all 1s ease-in-out; 69} 70 71form button:hover { 72 background-color: #005ce6; 73} 74 75.form-footer { 76 background-color: #e0ecfb; 77 padding: 16px; 78 font-size: 1rem; 79 text-align: center; 80} 81 82.form-footer a { 83 font-weight: bolder; 84 color: #0066ff; 85 transition: all 3s ease-in-out; 86} 87 88.form-footer a:hover { 89 color: #005ce6; 90} 91
1.6K views
1.6K views
MIT License