Form by AnthonyPreite
#212121
1#form { 2 display: grid; 3 place-items: center; 4 width: 300px; 5 height: 472px; 6 padding: 25px; 7 background-color: #161616; 8 box-shadow: 0px 15px 60px #00FF7F; 9 outline: 1px solid #2b9962; 10 border-radius: 10px; 11} 12 13#form-body { 14 position: absolute; 15 top: 50%; 16 right: 25px; 17 left: 25px; 18 width: 230px; 19 margin: -156px auto 0 auto; 20} 21 22#welcome-lines { 23 text-align: center; 24 line-height: 1; 25} 26 27#welcome-line-1 { 28 color: #00FF7F; 29 font-weight: 600; 30 font-size: 40px; 31} 32 33#welcome-line-2 { 34 color: #ffffff; 35 font-size: 18px; 36 margin-top: 17px; 37} 38 39#input-area { 40 margin-top: 40px; 41} 42 43.form-inp { 44 padding: 11px 25px; 45 background: transparent; 46 border: 1px solid #e3e3e3; 47 line-height: 1; 48 border-radius: 8px; 49} 50 51.form-inp:focus { 52 border: 1px solid #00FF7F; 53} 54 55.form-inp:first-child { 56 margin-bottom: 15px; 57} 58 59.form-inp input { 60 width: 100%; 61 background: none; 62 font-size: 13.4px; 63 color: #00FF7F; 64 border: none; 65 padding: 0; 66 margin: 0; 67} 68 69.form-inp input:focus { 70 outline: none; 71} 72 73#submit-button-cvr { 74 margin-top: 20px; 75} 76 77#submit-button { 78 display: block; 79 width: 100%; 80 color: #00FF7F; 81 background-color: transparent; 82 font-weight: 600; 83 font-size: 14px; 84 margin: 0; 85 padding: 14px 13px 12px 13px; 86 border: 0; 87 outline: 1px solid #00FF7F; 88 border-radius: 8px; 89 line-height: 1; 90 cursor: pointer; 91 transition: all ease-in-out .3s; 92} 93 94#submit-button:hover { 95 transition: all ease-in-out .3s; 96 background-color: #00FF7F; 97 color: #161616; 98 cursor: pointer; 99} 100 101#forgot-pass { 102 text-align: center; 103 margin-top: 10px; 104} 105 106#forgot-pass a { 107 color: #868686; 108 font-size: 12px; 109 text-decoration: none; 110} 111 112#bar { 113 position: absolute; 114 left: 50%; 115 bottom: -50px; 116 width: 28px; 117 height: 8px; 118 margin-left: -33px; 119 background-color: #00FF7F; 120 border-radius: 10px; 121} 122 123#bar:before, 124#bar:after { 125 content: ""; 126 position: absolute; 127 width: 8px; 128 height: 8px; 129 background-color: #ececec; 130 border-radius: 50%; 131} 132 133#bar:before { 134 right: -20px; 135} 136 137#bar:after { 138 right: -38px; 139} 140 141
3.2K views
3.2K views
MIT License