Form by kennyotsu

Posted by

@kennyotsu

Theme:

Dark

#login#OTP#confirmation#form#phone

#212121

1.3K views

Add prefixes

1.design-container {
2  position: relative;
3  font-family: Arial, Helvetica, sans-serif;
4}
5
6.design-wrapper {
7  position: absolute;
8  display: -webkit-box;
9  display: -ms-flexbox;
10  display: flex;
11  -webkit-box-orient: vertical;
12  -webkit-box-direction: normal;
13  -ms-flex-direction: column;
14  flex-direction: column;
15  -webkit-box-align: center;
16  -ms-flex-align: center;
17  align-items: center;
18  -webkit-box-pack: center;
19  -ms-flex-pack: center;
20  justify-content: center;
21  gap: 0.8rem;
22  height: 100%;
23  width: 100%;
24}
25
26.call {
27  width: 280px;
28  height: 90px;
29  border-radius: 1.2rem;
30  background: rgba(19, 19, 19, 0.836);
31  overflow: hidden;
32  display: -webkit-box;
33  display: -ms-flexbox;
34  display: flex;
35  -webkit-box-orient: horizontal;
36  -webkit-box-direction: normal;
37  -ms-flex-direction: row;
38  flex-direction: row;
39  -webkit-box-pack: justify;
40  -ms-flex-pack: justify;
41  justify-content: space-between;
42  -webkit-box-align: center;
43  -ms-flex-align: center;
44  align-items: center;
45  -webkit-backdrop-filter: blur(15px);
46  backdrop-filter: blur(15px);
47  padding: 1rem;
48  color: #fff;
49  font-size: large;
50  font-weight: bold;
51  -webkit-box-shadow: 0px 0.2rem 0.5rem rgba(20, 20, 20, 0.322);
52  box-shadow: 0px 0.2rem 0.5rem rgba(20, 20, 20, 0.322);
53  -webkit-perspective: 800px;
54  perspective: 800px;
55  -webkit-animation: scale-out 10s infinite;
56  animation: scale-out 10s infinite;
57  position: relative;
58}
59
60.call::before {
61  content: '';
62  background-color: #111111e3;
63  -webkit-filter: blur(5px);
64  filter: blur(5px);
65  inset: 0;
66  position: absolute;
67  z-index: -1;
68  text-align: center;
69}
70
71.phone-number::after {
72  content: "1234";
73  background: -webkit-gradient(linear, left top, right top, color-stop(20%, rgb(206, 206, 206)), color-stop(40%, rgb(255, 255, 255)), color-stop(60%, rgb(255, 255, 255)), color-stop(80%, rgb(206, 206, 206)));
74  background: linear-gradient(to right, rgb(206, 206, 206) 20%, rgb(255, 255, 255) 40%, rgb(255, 255, 255) 60%, rgb(206, 206, 206) 80%);
75  background-size: 200% auto;
76  color: #000;
77  background-clip: text;
78  text-fill-color: transparent;
79  -webkit-background-clip: text;
80  -webkit-text-fill-color: transparent;
81  -webkit-animation: shine 1.5s linear infinite;
82  animation: shine 1.5s linear infinite;
83}
84
85.phone-desc {
86  font-weight: normal;
87  font-size: 14px;
88  color: #727272;
89}
90
91.button-wrapper {
92  display: -webkit-box;
93  display: -ms-flexbox;
94  display: flex;
95  -webkit-box-orient: horizontal;
96  -webkit-box-direction: reverse;
97  -ms-flex-direction: row-reverse;
98  flex-direction: row-reverse;
99  gap: 0.5rem;
100}
101
102.button {
103  height: 40px;
104  width: 40px;
105  max-width: 40px;
106  max-height: 40px;
107  position: relative;
108  border-radius: 100%;
109}
110
111.button:hover {
112  cursor: auto;
113}
114
115.button svg {
116  height: 20px;
117  width: 20px;
118  margin: auto;
119  transform: translateX(10px)translateY(10px);
120  fill: #fff;
121}
122
123.deny {
124  background-color: #ec5445;
125}
126
127.deny svg {
128  -webkit-transform: translateX(7px)translateY(10px) rotate(136deg) translate(-10%, -15%);
129  -ms-transform: translateX(7px)translateY(10px) rotate(136deg) translate(-10%, -15%);
130  transform: translateX(7px)translateY(10px) rotate(136deg) translate(-10%, -15%);
131}
132
133.allow {
134  background-color: #68cd66;
135}
136
137.form-card {
138  width: 280px;
139  height: 350px;
140  border-radius: 1.2rem;
141  background-color: #fff;
142  padding: 1.3rem;
143  color: #212121;
144  text-align: center;
145  position: relative;
146}
147
148.form-card-title {
149  font-size: 1.6rem;
150  margin-bottom: 0.6rem;
151  margin-top: 0.2rem;
152}
153
154.form-card-prompt {
155  margin-bottom: 2rem;
156  font-size: 14px;
157}
158/* hard reset */
159.form-card-input {
160  all: unset;
161}
162
163.form-card-input-wrapper {
164  position: relative;
165  width: 100%;
166  height: 3rem;
167  display: -webkit-box;
168  display: -ms-flexbox;
169  display: flex;
170  margin-bottom: 1rem;
171}
172
173.form-card-input {
174  font-size: 2rem;
175  font-weight: bold;
176  letter-spacing: 2rem;
177  text-align: start;
178  -webkit-transform: translateX(36px);
179  -ms-transform: translateX(36px);
180  transform: translateX(36px);
181  position: absolute;
182  z-index: 3;
183  background-color: transparent;
184}
185
186.form-card-input-bg {
187  content: '';
188  width: 240px;
189  height: 60px;
190  margin: auto;
191  inset: 0;
192  bottom: 10px;
193  position: absolute;
194  z-index: 1;
195  border-radius: 12px;
196  background-color: rgba(206, 206, 206, 0.664);
197}
198
199.call-again {
200  color: #5e5e5e;
201  font-size: 14px;
202}
203
204.call-again:hover {
205  cursor: pointer;
206}
207
208.underlined {
209  text-decoration: underline;
210}
211
212.form-card-submit {
213  position: absolute;
214  width: 180px;
215  margin: auto;
216  color: white;
217  border: none;
218  background-color: #212121;
219  font-size: 1.2rem;
220  border-radius: 0.8rem;
221  padding: 0.8rem 3.5rem;
222  bottom: 2rem;
223  left: 0;
224  right: 0;
225  -webkit-transition: 200ms ease-in-out;
226  transition: 200ms ease-in-out;
227}
228
229.form-card-submit:hover {
230  cursor: pointer;
231  opacity: 0.8;
232}
233
234.form-card-submit:active {
235  opacity: 0.9;
236  -webkit-transform: scale(95%);
237  -ms-transform: scale(95%);
238  transform: scale(95%);
239}
240
241#uuid-d8a0d861-3741-4013 {
242  width: auto;
243  height: 500px;
244}
245
246@-webkit-keyframes scale-out {
247  0%, 15%, 100% {
248    color: #fff;
249    -webkit-transform: scale(72%);
250    transform: scale(72%);
251  }
252
253  16%, 98% {
254    color: rgba(255, 255, 255, 0.295);
255    -webkit-transform: scale(100%);
256    transform: scale(100%);
257  }
258}
259
260@keyframes scale-out {
261  0%, 15%, 100% {
262    color: #fff;
263    -webkit-transform: scale(72%);
264    transform: scale(72%);
265  }
266
267  16%, 98% {
268    color: rgba(255, 255, 255, 0.295);
269    -webkit-transform: scale(100%);
270    transform: scale(100%);
271  }
272}
273
274@-webkit-keyframes shine {
275  to {
276    background-position: 200% center;
277  }
278}
279
280@keyframes shine {
281  to {
282    background-position: 200% center;
283  }
284}

.design-container {
  position: relative;
  font-family: Arial, Helvetica, sans-serif;
}

.design-wrapper {
  position: absolute;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  gap: 0.8rem;
  height: 100%;
  width: 100%;
}

.call {
  width: 280px;
  height: 90px;
  border-radius: 1.2rem;
  background: rgba(19, 19, 19, 0.836);
  overflow: hidden;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-backdrop-filter: blur(15px);
  backdrop-filter: blur(15px);
  padding: 1rem;
  color: #fff;
  font-size: large;
  font-weight: bold;
  -webkit-box-shadow: 0px 0.2rem 0.5rem rgba(20, 20, 20, 0.322);
  box-shadow: 0px 0.2rem 0.5rem rgba(20, 20, 20, 0.322);
  -webkit-perspective: 800px;
  perspective: 800px;
  -webkit-animation: scale-out 10s infinite;
  animation: scale-out 10s infinite;
  position: relative;
}

.call::before {
  content: '';
  background-color: #111111e3;
  -webkit-filter: blur(5px);
  filter: blur(5px);
  inset: 0;
  position: absolute;
  z-index: -1;
  text-align: center;
}

.phone-number::after {
  content: "1234";
  background: -webkit-gradient(linear, left top, right top, color-stop(20%, rgb(206, 206, 206)), color-stop(40%, rgb(255, 255, 255)), color-stop(60%, rgb(255, 255, 255)), color-stop(80%, rgb(206, 206, 206)));
  background: linear-gradient(to right, rgb(206, 206, 206) 20%, rgb(255, 255, 255) 40%, rgb(255, 255, 255) 60%, rgb(206, 206, 206) 80%);
  background-size: 200% auto;
  color: #000;
  background-clip: text;
  text-fill-color: transparent;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-animation: shine 1.5s linear infinite;
  animation: shine 1.5s linear infinite;
}

.phone-desc {
  font-weight: normal;
  font-size: 14px;
  color: #727272;
}

.button-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
  -ms-flex-direction: row-reverse;
  flex-direction: row-reverse;
  gap: 0.5rem;
}

.button {
  height: 40px;
  width: 40px;
  max-width: 40px;
  max-height: 40px;
  position: relative;
  border-radius: 100%;
}

.button:hover {
  cursor: auto;
}

.button svg {
  height: 20px;
  width: 20px;
  margin: auto;
  transform: translateX(10px)translateY(10px);
  fill: #fff;
}

.deny {
  background-color: #ec5445;
}

.deny svg {
  -webkit-transform: translateX(7px)translateY(10px) rotate(136deg) translate(-10%, -15%);
  -ms-transform: translateX(7px)translateY(10px) rotate(136deg) translate(-10%, -15%);
  transform: translateX(7px)translateY(10px) rotate(136deg) translate(-10%, -15%);
}

.allow {
  background-color: #68cd66;
}

.form-card {
  width: 280px;
  height: 350px;
  border-radius: 1.2rem;
  background-color: #fff;
  padding: 1.3rem;
  color: #212121;
  text-align: center;
  position: relative;
}

.form-card-title {
  font-size: 1.6rem;
  margin-bottom: 0.6rem;
  margin-top: 0.2rem;
}

.form-card-prompt {
  margin-bottom: 2rem;
  font-size: 14px;
}
/* hard reset */
.form-card-input {
  all: unset;
}

.form-card-input-wrapper {
  position: relative;
  width: 100%;
  height: 3rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-bottom: 1rem;
}

.form-card-input {
  font-size: 2rem;
  font-weight: bold;
  letter-spacing: 2rem;
  text-align: start;
  -webkit-transform: translateX(36px);
  -ms-transform: translateX(36px);
  transform: translateX(36px);
  position: absolute;
  z-index: 3;
  background-color: transparent;
}

.form-card-input-bg {
  content: '';
  width: 240px;
  height: 60px;
  margin: auto;
  inset: 0;
  bottom: 10px;
  position: absolute;
  z-index: 1;
  border-radius: 12px;
  background-color: rgba(206, 206, 206, 0.664);
}

.call-again {
  color: #5e5e5e;
  font-size: 14px;
}

.call-again:hover {
  cursor: pointer;
}

.underlined {
  text-decoration: underline;
}

.form-card-submit {
  position: absolute;
  width: 180px;
  margin: auto;
  color: white;
  border: none;
  background-color: #212121;
  font-size: 1.2rem;
  border-radius: 0.8rem;
  padding: 0.8rem 3.5rem;
  bottom: 2rem;
  left: 0;
  right: 0;
  -webkit-transition: 200ms ease-in-out;
  transition: 200ms ease-in-out;
}

.form-card-submit:hover {
  cursor: pointer;
  opacity: 0.8;
}

.form-card-submit:active {
  opacity: 0.9;
  -webkit-transform: scale(95%);
  -ms-transform: scale(95%);
  transform: scale(95%);
}

#uuid-d8a0d861-3741-4013 {
  width: auto;
  height: 500px;
}

@-webkit-keyframes scale-out {
  0%, 15%, 100% {
    color: #fff;
    -webkit-transform: scale(72%);
    transform: scale(72%);
  }

  16%, 98% {
    color: rgba(255, 255, 255, 0.295);
    -webkit-transform: scale(100%);
    transform: scale(100%);
  }
}

@keyframes scale-out {
  0%, 15%, 100% {
    color: #fff;
    -webkit-transform: scale(72%);
    transform: scale(72%);
  }

  16%, 98% {
    color: rgba(255, 255, 255, 0.295);
    -webkit-transform: scale(100%);
    transform: scale(100%);
  }
}

@-webkit-keyframes shine {
  to {
    background-position: 200% center;
  }
}

@keyframes shine {
  to {
    background-position: 200% center;
  }
}

kennyotsu

kotsu

Fullstack MERN web developer from Saint-Petersburg, Russia. 1+ years of commercial developement. Lead of ongoing ATG LLC projects

MIT License

Copyright - 2023 kennyotsu (kotsu) 

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.