├── .gitignore
├── slider-1
├── index.html
└── styles.css
├── textbox-1
├── index.html
└── styles.css
├── textbox-2
├── index.html
└── styles.css
└── textbox-3
├── index.html
└── styles.css
/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_STORE
--------------------------------------------------------------------------------
/slider-1/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Slider 1
8 |
9 |
10 |
11 |
20 |
21 |
22 |
23 |
24 |
--------------------------------------------------------------------------------
/slider-1/styles.css:
--------------------------------------------------------------------------------
1 | * {
2 | box-sizing: border-box;
3 | }
4 |
5 | html,
6 | body {
7 | height: 100%;
8 | }
9 |
10 | body {
11 | margin: 0;
12 | display: grid;
13 | place-items: center;
14 | background: #1a1a1a;
15 | color: #f9f9f9;
16 | font-family: "Euclid Circular A";
17 | }
18 |
--------------------------------------------------------------------------------
/textbox-1/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Slider 1
8 |
9 |
10 |
11 |
12 |
18 |
19 |
20 |
21 |
22 |
--------------------------------------------------------------------------------
/textbox-1/styles.css:
--------------------------------------------------------------------------------
1 | * {
2 | box-sizing: border-box;
3 | }
4 |
5 | html,
6 | body {
7 | height: 100%;
8 | }
9 |
10 | body {
11 | margin: 0;
12 | display: grid;
13 | place-items: center;
14 | background: #1a1a1a;
15 | color: #f9f9f9;
16 | font-family: "Euclid Circular A";
17 | }
18 |
19 | .textbox {
20 | position: relative;
21 | }
22 |
23 | .textbox label {
24 | position: absolute;
25 | display: grid;
26 | place-items: center;
27 | transform-origin: 0% 0%;
28 | pointer-events: none;
29 | top: 4px;
30 | left: 4px;
31 | height: 52px;
32 | width: 110px;
33 | border-radius: 27px;
34 | background: #5071fa;
35 | transition: 0.3s;
36 | }
37 |
38 | .textbox input {
39 | width: 300px;
40 | height: 60px;
41 | border-radius: 30px;
42 | background: #313136;
43 | border: 0;
44 | padding-left: 126px;
45 | font-size: 16px;
46 | font-family: inherit;
47 | color: rgb(255 255 255 / 96%);
48 | outline: none;
49 | transition: 0.3s;
50 | }
51 |
52 | .textbox input::placeholder {
53 | color: rgb(255 255 255 / 50%);
54 | }
55 |
56 | .textbox :is(input:focus, input:valid) {
57 | padding-left: 20px;
58 | }
59 |
60 | .textbox :is(input:focus, input:valid) ~ label {
61 | translate: 0 -54px;
62 | scale: 0.825;
63 | }
64 |
--------------------------------------------------------------------------------
/textbox-2/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Textbox 2
8 |
9 |
10 |
14 |
18 |
19 |
20 |
21 |
22 |
23 | account_circle
24 | *
25 |
26 |
27 |
28 |
--------------------------------------------------------------------------------
/textbox-2/styles.css:
--------------------------------------------------------------------------------
1 | * {
2 | box-sizing: border-box;
3 | }
4 |
5 | html,
6 | body {
7 | height: 100%;
8 | }
9 |
10 | body {
11 | margin: 0;
12 | display: grid;
13 | place-items: center;
14 | background: #1a1a1a;
15 | color: #f9f9f9;
16 | font-family: "Euclid Circular A", "Poppins";
17 | }
18 |
19 | .textbox {
20 | position: relative;
21 | }
22 |
23 | .textbox input {
24 | width: 260px;
25 | height: 64px;
26 | border-radius: 6px;
27 | background: transparent;
28 | border: 1px solid #df2666;
29 | padding: 0 20px 0 56px;
30 | font-size: 17px;
31 | font-family: inherit;
32 | color: rgb(255 255 255 / 96%);
33 | outline: none;
34 | }
35 |
36 | .textbox input:focus ~ .icon {
37 | opacity: 1;
38 | }
39 |
40 | .textbox input::placeholder {
41 | color: rgb(255 255 255 / 50%);
42 | }
43 |
44 | .textbox input:valid {
45 | border-color: #26dfae;
46 | }
47 |
48 | .textbox input:valid,
49 | .textbox input:valid ~ :is(.asterix, .icon) {
50 | animation: none;
51 | }
52 |
53 | .textbox :is(input:valid) ~ .asterix {
54 | opacity: 0;
55 | }
56 |
57 | @keyframes shake {
58 | 0%,
59 | 100% {
60 | translate: 0;
61 | }
62 | 25% {
63 | translate: 8px 0;
64 | }
65 | 75% {
66 | translate: -8px 0;
67 | }
68 | }
69 |
70 | .textbox .asterix {
71 | position: absolute;
72 | top: 21px;
73 | right: 20px;
74 | font-size: 22px;
75 | pointer-events: none;
76 | color: #df2666;
77 | }
78 |
79 | .textbox .icon {
80 | position: absolute;
81 | top: 50%;
82 | left: 20px;
83 | margin-top: -12px;
84 | opacity: 0.5;
85 | }
86 |
87 | .textbox input,
88 | .textbox .icon,
89 | .textbox .asterix {
90 | animation: shake 0.1635s 0s 3;
91 | }
92 |
--------------------------------------------------------------------------------
/textbox-3/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Textbox 2
8 |
9 |
10 |
14 |
18 |
19 |
20 |
21 |
22 |
23 |
account_circle
24 |
* First name is required
25 |