< Back to Frontend Friday Folks Index
< Back to Frontend Friday Folks Index
Tight Corner
Highlighted solution (513 characters)
1 | |
2 | |
3 | |
4 | |
5 | |
6 | |
7 | |
8 | |
9 | |
10 | |
11 | |
12 | |
13 | |
14 | |
15 | |
16 | |
17 | |
18 | |
19 | |
20 | |
21 | |
22 | |
23 | |
24 | |
25 | |
26 | |
27 | |
28 | |
29 | |
30 | |
31 | |
The first idea we had - I wanted to finish it, even though B Suraj came in and had the fantastic
idea to create it in a different way by stacking two divs on top of each other. So this solution
is basically using pseudo elements to make use of the full width and go a bit over the end of
the div.
Highlighted solution (371 characters)
1 | |
2 | |
3 | |
4 | |
5 | |
6 | |
7 | |
8 | |
9 | |
10 | |
11 | |
12 | |
13 | |
14 | |
15 | |
16 | |
17 | |
18 | |
19 | |
20 | |
21 | |
22 | |
As mentioned above, the second one was a cleaner version based on the idea that B Suraj had. I
think this could be used to make a fun animation as well...! 🤔
Highlighted solution (1107 characters)
1 | |
2 | |
3 | |
4 | |
5 | |
6 | |
7 | |
8 | |
9 | |
10 | |
11 | |
12 | |
13 | |
14 | |
15 | |
16 | |
17 | |
18 | |
19 | |
20 | |
21 | |
22 | |
23 | |
24 | |
25 | |
26 | |
27 | |
28 | |
29 | |
30 | |
31 | |
32 | |
33 | |
34 | |
35 | |
36 | |
37 | |
38 | |
39 | |
40 | |
41 | |
42 | |
43 | |
44 | |
45 | |
46 | |
47 | |
48 | |
49 | |
50 | |
51 | |
52 | |
53 | |
54 | |
55 | |
Well, here is an animation that came to my mind when working on the solution for the puzzle. I
guess this should go into some kind of animal. 😅