Form by akshat-patel28
#e8e8e8
1.form-container { 2 width: 350px; 3 height: 550px; 4 background-color: #fff; 5 box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px; 6 border-radius: 10px; 7 box-sizing: border-box; 8 padding: 20px 30px; 9} 10 11.title { 12 text-align: center; 13 font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande", 14 "Lucida Sans Unicode", Geneva, Verdana, sans-serif; 15 margin: 10px 0 30px 0; 16 font-size: 28px; 17 font-weight: 800; 18} 19 20.sub-title { 21 margin: 0; 22 margin-bottom: 5px; 23 font-size: 9px; 24 font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande", 25 "Lucida Sans Unicode", Geneva, Verdana, sans-serif; 26} 27 28.form { 29 width: 100%; 30 display: flex; 31 flex-direction: column; 32 gap: 18px; 33 margin-bottom: 15px; 34} 35 36.input { 37 border-radius: 20px; 38 border: 1px solid #c0c0c0; 39 outline: 0 !important; 40 box-sizing: border-box; 41 padding: 12px 15px; 42} 43 44.form-btn { 45 padding: 10px 15px; 46 font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande", 47 "Lucida Sans Unicode", Geneva, Verdana, sans-serif; 48 border-radius: 20px; 49 border: 0 !important; 50 outline: 0 !important; 51 background: teal; 52 color: white; 53 cursor: pointer; 54 box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px; 55} 56 57.form-btn:active { 58 box-shadow: none; 59} 60 61.sign-up-label { 62 margin: 0; 63 font-size: 10px; 64 color: #747474; 65 font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande", 66 "Lucida Sans Unicode", Geneva, Verdana, sans-serif; 67} 68 69.sign-up-link { 70 margin-left: 1px; 71 font-size: 11px; 72 text-decoration: underline; 73 text-decoration-color: teal; 74 color: teal; 75 cursor: pointer; 76 font-weight: 800; 77} 78 79.buttons-container { 80 width: 100%; 81 display: flex; 82 flex-direction: column; 83 justify-content: flex-start; 84 margin-top: 20px; 85 gap: 15px; 86} 87 88.apple-login-button, 89 .google-login-button { 90 border-radius: 20px; 91 box-sizing: border-box; 92 padding: 10px 15px; 93 box-shadow: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px, 94 rgba(0, 0, 0, 0.06) 0px 0px 0px 1px; 95 cursor: pointer; 96 display: flex; 97 justify-content: center; 98 align-items: center; 99 font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande", 100 "Lucida Sans Unicode", Geneva, Verdana, sans-serif; 101 font-size: 11px; 102 gap: 5px; 103} 104 105.apple-login-button { 106 background-color: #000; 107 color: #fff; 108 border: 2px solid #000; 109} 110 111.google-login-button { 112 border: 2px solid #747474; 113} 114 115.apple-icon, 116 .google-icon { 117 font-size: 18px; 118 margin-bottom: 1px; 119}
2.1K views
Variation of aform
MIT License