body {
align-items: center;
background-color: #282828;
display: flex;
height: 100vh;
margin: -20px;
overflow: hidden;
justify-content: center;
}
.container {
align-items: flex-end;
display: flex;
height: 100vh;
justify-content: center;
width: 100vw;
}
.home {
position: absolute;
transform: translateX(-132px) translateY(-63px);
}
.email {
position: absolute;
transform: translateX(51px) translateY(-63px);
}
.fabs {
position: relative;
transform: translateX(-228px) translateY(-67px);
}
.fab {
height: 100px;
left: -22px;
margin: 0px -10px -10px 0;
position: absolute;
transition: clip-path 360ms, transform 360ms;
top: -22px;
width: 100px;
}
.fab .cut {
background: linear-gradient(-45deg, rgb(39, 14, 105) 0%, #526df5 100%);
height: 100%;
transition: clip-path 360ms;
width: 100%;
}
.fab .drop {
background-color: transparent;
border-radius: 50%;
box-shadow: none;
height: 56px;
left: 22px;
position: absolute;
top: 22px;
transition: box-shadow 360ms;
width: 56px;
}
.active .fab .drop {
box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2),
0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12);
}
.fab-drop {
background: linear-gradient(-45deg, rgb(106, 19, 78) 0%, #fb2d1d 100%);
border-radius: 50%;
box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2),
0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12);
height: 56px;
margin: 0 24px 24px 0;
width: 56px;
}
.fab1 {
transition-delay: 100ms;
}
.fab1 .cut {
clip-path: polygon(
22% 50%,
22.07228% 48.56858%,
22.14456% 47.13716%,
22.35671% 45.74709%,
22.56886% 44.35702%,
22.91384% 43.01534%,
23.25883% 41.67366%,
23.7296% 40.3874%,
24.20038% 39.10114%,
24.78991% 37.87734%,
25.37945% 36.65354%,
26.0807% 35.49923%,
26.78196% 34.34493%,
27.5879% 33.26717%,
28.39384% 32.1894%,
29.29742% 31.19521%,
30.20101% 30.20101%,
31.19521% 29.29742%,
32.1894% 28.39384%,
33.26717% 27.5879%,
34.34493% 26.78196%,
35.49923% 26.0807%,
36.65354% 25.37945%,
37.87734% 24.78991%,
39.10114% 24.20038%,
40.3874% 23.7296%,
41.67366% 23.25883%,
43.01534% 22.91384%,
44.35702% 22.56886%,
45.74709% 22.35671%,
47.13716% 22.14456%,
48.56858% 22.07228%,
50% 22%,
50.001% 23.75%,
50% 25.5%,
50.001% 27.25%,
50% 29%,
50.001% 30.75%,
50% 32.5%,
50.001% 34.25%,
50% 36%,
50.001% 37.75%,
50% 39.5%,
50.001% 41.25%,
50% 43%,
50.001% 44.75%,
50% 46.5%,
50.001% 48.25%,
50% 50%,
48.25% 50.001%,
46.5% 50%,
44.75% 50.001%,
43% 50%,
41.25% 50.001%,
39.5% 50%,
37.75% 50.001%,
36% 50%,
34.25% 50.001%,
32.5% 50%,
30.75% 50.001%,
29% 50%,
27.25% 50.001%,
25.5% 50%,
23.75% 50.001%
);
transition-delay: 100ms;
}
.fab1 .drop {
transition-delay: 100ms;
}
.restaurant {
left: 38px;
opacity: 0;
position: absolute;
top: 40px;
transition: opacity 360ms;
transition-delay: 100ms;
}
.active .restaurant {
opacity: 1;
transition-delay: 50ms;
}
.fab2 {
transition-delay: 50ms;
}
.fab2 .cut {
clip-path: polygon(
50.001% 22%,
51.43242% 22.07228%,
52.86384% 22.14456%,
54.25391% 22.35671%,
55.64398% 22.56886%,
56.98566% 22.91384%,
58.32734% 23.25883%,
59.6136% 23.7296%,
60.89986% 24.20038%,
62.12366% 24.78991%,
63.34746% 25.37945%,
64.50177% 26.0807%,
65.65607% 26.78196%,
66.73383% 27.5879%,
67.8116% 28.39384%,
68.8058% 29.29742%,
69.79999% 30.20101%,
70.70358% 31.19521%,
71.60716% 32.1894%,
72.4131% 33.26717%,
73.21904% 34.34493%,
73.92029% 35.49923%,
74.62155% 36.65354%,
75.21109% 37.87734%,
75.80062% 39.10114%,
76.2714% 40.3874%,
76.74218% 41.67366%,
77.08716% 43.01534%,
77.43214% 44.35702%,
77.64429% 45.74709%,
77.85644% 47.13716%,
77.92872% 48.56858%,
78.001% 50%,
76.251% 50.001%,
74.501% 50%,
72.751% 50.001%,
71.001% 50%,
69.251% 50.001%,
67.501% 50%,
65.751% 50.001%,
64.001% 50%,
62.251% 50.001%,
60.501% 50%,
58.751% 50.001%,
57.001% 50%,
55.251% 50.001%,
53.501% 50%,
51.751% 50.001%,
50.001% 50%,
50% 48.25%,
50.001% 46.5%,
50% 44.75%,
50.001% 43%,
50% 41.25%,
50.001% 39.5%,
50% 37.75%,
50.001% 36%,
50% 34.25%,
50.001% 32.5%,
50% 30.75%,
50.001% 29%,
50% 27.25%,
50.001% 25.5%,
50% 23.75%
);
transition-delay: 50ms;
}
.fab2 .drop {
transition-delay: 50ms;
}
.bar {
left: 38px;
opacity: 0;
position: absolute;
top: 40px;
transition: opacity 360ms;
transition-delay: 50ms;
}
.active .bar {
opacity: 1;
transition-delay: 100ms;
}
.fab3 {
transition-delay: 0ms;
}
.fab3 .cut {
clip-path: polygon(
78.001% 50.001%,
77.92872% 51.43242%,
77.85644% 52.86384%,
77.64429% 54.25391%,
77.43214% 55.64398%,
77.08716% 56.98566%,
76.74218% 58.32734%,
76.2714% 59.6136%,
75.80062% 60.89986%,
75.21109% 62.12366%,
74.62155% 63.34746%,
73.92029% 64.50177%,
73.21904% 65.65607%,
72.4131% 66.73383%,
71.60716% 67.8116%,
70.70358% 68.8058%,
69.79999% 69.79999%,
68.8058% 70.70358%,
67.8116% 71.60716%,
66.73383% 72.4131%,
65.65607% 73.21904%,
64.50177% 73.92029%,
63.34746% 74.62155%,
62.12366% 75.21109%,
60.89986% 75.80062%,
59.6136% 76.2714%,
58.32734% 76.74218%,
56.98566% 77.08716%,
55.64398% 77.43214%,
54.25391% 77.64429%,
52.86384% 77.85644%,
51.43242% 77.92872%,
50.001% 78.001%,
50% 76.251%,
50.001% 74.501%,
50% 72.751%,
50.001% 71.001%,
50% 69.251%,
50.001% 67.501%,
50% 65.751%,
50.001% 64.001%,
50% 62.251%,
50.001% 60.501%,
50% 58.751%,
50.001% 57.001%,
50% 55.251%,
50.001% 53.501%,
50% 51.751%,
50.001% 50.001%,
51.751% 50%,
53.501% 50.001%,
55.251% 50%,
57.001% 50.001%,
58.751% 50%,
60.501% 50.001%,
62.251% 50%,
64.001% 50.001%,
65.751% 50%,
67.501% 50.001%,
69.251% 50%,
71.001% 50.001%,
72.751% 50%,
74.501% 50.001%,
76.251% 50%
);
transition-delay: 0ms;
}
.fab3 .drop {
transition-delay: 0ms;
}
.ice-cream {
left: 38px;
opacity: 0;
position: absolute;
top: 40px;
transition: opacity 360ms;
transition-delay: 0ms;
}
.active .ice-cream {
opacity: 1;
transition-delay: 150ms;
}
.fab4 {
transition-delay: 150ms;
}
.fab4 .cut {
clip-path: polygon(
50% 78.001%,
48.56858% 77.92872%,
47.13716% 77.85644%,
45.74709% 77.64429%,
44.35702% 77.43214%,
43.01534% 77.08716%,
41.67366% 76.74218%,
40.3874% 76.2714%,
39.10114% 75.80062%,
37.87734% 75.21109%,
36.65354% 74.62155%,
35.49923% 73.92029%,
34.34493% 73.21904%,
33.26717% 72.4131%,
32.1894% 71.60716%,
31.19521% 70.70358%,
30.20101% 69.79999%,
29.29742% 68.8058%,
28.39384% 67.8116%,
27.5879% 66.73383%,
26.78196% 65.65607%,
26.0807% 64.50177%,
25.37945% 63.34746%,
24.78991% 62.12366%,
24.20038% 60.89986%,
23.7296% 59.6136%,
23.25883% 58.32734%,
22.91384% 56.98566%,
22.56886% 55.64398%,
22.35671% 54.25391%,
22.14456% 52.86384%,
22.07228% 51.43242%,
22% 50.001%,
23.75% 50%,
25.5% 50.001%,
27.25% 50%,
29% 50.001%,
30.75% 50%,
32.5% 50.001%,
34.25% 50%,
36% 50.001%,
37.75% 50%,
39.5% 50.001%,
41.25% 50%,
43% 50.001%,
44.75% 50%,
46.5% 50.001%,
48.25% 50%,
50% 50.001%,
50.001% 51.751%,
50% 53.501%,
50.001% 55.251%,
50% 57.001%,
50.001% 58.751%,
50% 60.501%,
50.001% 62.251%,
50% 64.001%,
50.001% 65.751%,
50% 67.501%,
50.001% 69.251%,
50% 71.001%,
50.001% 72.751%,
50% 74.501%,
50.001% 76.251%
);
transition-delay: 150ms;
}
.fab4 .drop {
transition-delay: 150ms;
}
.coffee {
left: 38px;
opacity: 0;
position: absolute;
top: 40px;
transition: opacity 360ms;
transition-delay: 150ms;
}
.active .coffee {
opacity: 1;
transition-delay: 0ms;
}
.active .fab1 {
transform: translateX(-34.2px) translateY(-93.97px);
transition-delay: 50ms;
}
.active .fab1 .cut {
clip-path: polygon(
22% 50%,
22.14456% 47.13716%,
22.56886% 44.35702%,
23.25883% 41.67366%,
24.20038% 39.10114%,
25.37945% 36.65354%,
26.78196% 34.34493%,
28.39384% 32.1894%,
30.20101% 30.20101%,
32.1894% 28.39384%,
34.34493% 26.78196%,
36.65354% 25.37945%,
39.10114% 24.20038%,
41.67366% 23.25883%,
44.35702% 22.56886%,
47.13716% 22.14456%,
50% 22%,
52.86284% 22.14456%,
55.64298% 22.56886%,
58.32634% 23.25883%,
60.89886% 24.20038%,
63.34646% 25.37945%,
65.65507% 26.78196%,
67.8106% 28.39384%,
69.79899% 30.20101%,
71.60616% 32.1894%,
73.21804% 34.34493%,
74.62055% 36.65354%,
75.79962% 39.10114%,
76.74117% 41.67366%,
77.43114% 44.35702%,
77.85544% 47.13716%,
78% 50%,
77.85544% 52.86284%,
77.43114% 55.64298%,
76.74117% 58.32634%,
75.79962% 60.89886%,
74.62055% 63.34646%,
73.21804% 65.65507%,
71.60616% 67.8106%,
69.79899% 69.79899%,
67.8106% 71.60616%,
65.65507% 73.21804%,
63.34646% 74.62055%,
60.89886% 75.79962%,
58.32634% 76.74117%,
55.64298% 77.43114%,
52.86284% 77.85544%,
50% 78%,
47.13716% 77.85544%,
44.35702% 77.43114%,
41.67366% 76.74117%,
39.10114% 75.79962%,
36.65354% 74.62055%,
34.34493% 73.21804%,
32.1894% 71.60616%,
30.20101% 69.79899%,
28.39384% 67.8106%,
26.78196% 65.65507%,
25.37945% 63.34646%,
24.20038% 60.89886%,
23.25883% 58.32634%,
22.56886% 55.64298%,
22.14456% 52.86284%
);
transition-delay: 50ms;
}
.active .fab1 .drop {
transition-delay: 50ms;
}
.active .fab2 {
transform: translateX(34.2px) translateY(-93.97px);
transition-delay: 100ms;
}
.active .fab2 .cut {
clip-path: polygon(
50% 22%,
52.86284% 22.14456%,
55.64298% 22.56886%,
58.32634% 23.25883%,
60.89886% 24.20038%,
63.34646% 25.37945%,
65.65507% 26.78196%,
67.8106% 28.39384%,
69.79899% 30.20101%,
71.60616% 32.1894%,
73.21804% 34.34493%,
74.62055% 36.65354%,
75.79962% 39.10114%,
76.74117% 41.67366%,
77.43114% 44.35702%,
77.85544% 47.13716%,
78% 50%,
77.85544% 52.86284%,
77.43114% 55.64298%,
76.74117% 58.32634%,
75.79962% 60.89886%,
74.62055% 63.34646%,
73.21804% 65.65507%,
71.60616% 67.8106%,
69.79899% 69.79899%,
67.8106% 71.60616%,
65.65507% 73.21804%,
63.34646% 74.62055%,
60.89886% 75.79962%,
58.32634% 76.74117%,
55.64298% 77.43114%,
52.86284% 77.85544%,
50% 78%,
47.13716% 77.85544%,
44.35702% 77.43114%,
41.67366% 76.74117%,
39.10114% 75.79962%,
36.65354% 74.62055%,
34.34493% 73.21804%,
32.1894% 71.60616%,
30.20101% 69.79899%,
28.39384% 67.8106%,
26.78196% 65.65507%,
25.37945% 63.34646%,
24.20038% 60.89886%,
23.25883% 58.32634%,
22.56886% 55.64298%,
22.14456% 52.86284%,
22% 50%,
22.14456% 47.13716%,
22.56886% 44.35702%,
23.25883% 41.67366%,
24.20038% 39.10114%,
25.37945% 36.65354%,
26.78196% 34.34493%,
28.39384% 32.1894%,
30.20101% 30.20101%,
32.1894% 28.39384%,
34.34493% 26.78196%,
36.65354% 25.37945%,
39.10114% 24.20038%,
41.67366% 23.25883%,
44.35702% 22.56886%,
47.13716% 22.14456%
);
transition-delay: 100ms;
}
.active .fab2 .drop {
transition-delay: 100ms;
}
.active .fab3 {
transform: translateX(86.6px) translateY(-50px);
transition-delay: 150ms;
}
.active .fab3 .cut {
clip-path: polygon(
78% 50%,
77.85544% 52.86284%,
77.43114% 55.64298%,
76.74117% 58.32634%,
75.79962% 60.89886%,
74.62055% 63.34646%,
73.21804% 65.65507%,
71.60616% 67.8106%,
69.79899% 69.79899%,
67.8106% 71.60616%,
65.65507% 73.21804%,
63.34646% 74.62055%,
60.89886% 75.79962%,
58.32634% 76.74117%,
55.64298% 77.43114%,
52.86284% 77.85544%,
50% 78%,
47.13716% 77.85544%,
44.35702% 77.43114%,
41.67366% 76.74117%,
39.10114% 75.79962%,
36.65354% 74.62055%,
34.34493% 73.21804%,
32.1894% 71.60616%,
30.20101% 69.79899%,
28.39384% 67.8106%,
26.78196% 65.65507%,
25.37945% 63.34646%,
24.20038% 60.89886%,
23.25883% 58.32634%,
22.56886% 55.64298%,
22.14456% 52.86284%,
22% 50%,
22.14456% 47.13716%,
22.56886% 44.35702%,
23.25883% 41.67366%,
24.20038% 39.10114%,
25.37945% 36.65354%,
26.78196% 34.34493%,
28.39384% 32.1894%,
30.20101% 30.20101%,
32.1894% 28.39384%,
34.34493% 26.78196%,
36.65354% 25.37945%,
39.10114% 24.20038%,
41.67366% 23.25883%,
44.35702% 22.56886%,
47.13716% 22.14456%,
50% 22%,
52.86284% 22.14456%,
55.64298% 22.56886%,
58.32634% 23.25883%,
60.89886% 24.20038%,
63.34646% 25.37945%,
65.65507% 26.78196%,
67.8106% 28.39384%,
69.79899% 30.20101%,
71.60616% 32.1894%,
73.21804% 34.34493%,
74.62055% 36.65354%,
75.79962% 39.10114%,
76.74117% 41.67366%,
77.43114% 44.35702%,
77.85544% 47.13716%
);
transition-delay: 150ms;
}
.active .fab3 .drop {
transition-delay: 150ms;
}
.active .fab4 {
transform: translateX(-86.6px) translateY(-50px);
transition-delay: 0ms;
}
.active .fab4 .cut {
clip-path: polygon(
50% 78%,
47.13716% 77.85544%,
44.35702% 77.43114%,
41.67366% 76.74117%,
39.10114% 75.79962%,
36.65354% 74.62055%,
34.34493% 73.21804%,
32.1894% 71.60616%,
30.20101% 69.79899%,
28.39384% 67.8106%,
26.78196% 65.65507%,
25.37945% 63.34646%,
24.20038% 60.89886%,
23.25883% 58.32634%,
22.56886% 55.64298%,
22.14456% 52.86284%,
22% 50%,
22.14456% 47.13716%,
22.56886% 44.35702%,
23.25883% 41.67366%,
24.20038% 39.10114%,
25.37945% 36.65354%,
26.78196% 34.34493%,
28.39384% 32.1894%,
30.20101% 30.20101%,
32.1894% 28.39384%,
34.34493% 26.78196%,
36.65354% 25.37945%,
39.10114% 24.20038%,
41.67366% 23.25883%,
44.35702% 22.56886%,
47.13716% 22.14456%,
50% 22%,
52.86284% 22.14456%,
55.64298% 22.56886%,
58.32634% 23.25883%,
60.89886% 24.20038%,
63.34646% 25.37945%,
65.65507% 26.78196%,
67.8106% 28.39384%,
69.79899% 30.20101%,
71.60616% 32.1894%,
73.21804% 34.34493%,
74.62055% 36.65354%,
75.79962% 39.10114%,
76.74117% 41.67366%,
77.43114% 44.35702%,
77.85544% 47.13716%,
78% 50%,
77.85544% 52.86284%,
77.43114% 55.64298%,
76.74117% 58.32634%,
75.79962% 60.89886%,
74.62055% 63.34646%,
73.21804% 65.65507%,
71.60616% 67.8106%,
69.79899% 69.79899%,
67.8106% 71.60616%,
65.65507% 73.21804%,
63.34646% 74.62055%,
60.89886% 75.79962%,
58.32634% 76.74117%,
55.64298% 77.43114%,
52.86284% 77.85544%
);
transition-delay: 0ms;
}
.active .fab4 .drop {
transition-delay: 0ms;
}
.activator {
border-radius: 50%;
cursor: pointer;
height: 56px;
position: absolute;
top: 0px;
width: 56px;
}
.plus {
pointer-events: none;
position: absolute;
transform: translateX(-40px) translateY(-90px);
transform-origin: 50%;
transition: transform 360ms;
}
.active .plus {
transform: translateX(-40px) translateY(-91px) rotate(45deg);
}