├── .gitattributes
├── index.html
└── index.css
/.gitattributes:
--------------------------------------------------------------------------------
1 | # Auto detect text files and perform LF normalization
2 | * text=auto
3 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 | Document
9 |
10 |
11 |
12 |
13 |
14 |
19 |
22 |
25 |
26 |
27 |
--------------------------------------------------------------------------------
/index.css:
--------------------------------------------------------------------------------
1 | body {
2 | margin: 0;
3 | height: 100vh;
4 | display: grid;
5 | grid-template-columns: repeat(3, 1fr);
6 | grid-template-rows: 1fr;
7 | }
8 |
9 | .background-one {
10 | background-color: #151515;
11 | }
12 |
13 | .background-two {
14 | background-color: #151515;
15 | }
16 |
17 | .background-three {
18 | background-color: #151515;
19 | }
20 |
21 | .link-container {
22 | display: flex;
23 | flex-direction: column;
24 | justify-content: center;
25 | align-items: center;
26 | height: 100%;
27 | position: relative;
28 | z-index: 0;
29 | }
30 |
31 | a {
32 | font-family: "Bungee", cursive;
33 | font-size: 2.5em;
34 | }
35 |
36 | .link-one {
37 | color: #53d9d1;
38 | transition: color 1s cubic-bezier(0.32, 0, 0.67, 0);
39 | line-height: 1em;
40 | }
41 |
42 | .link-one:hover {
43 | color: #111;
44 | transition: color 1s cubic-bezier(0.33, 1, 0.68, 1);
45 | }
46 |
47 | .link-one::before {
48 | content: "";
49 | position: absolute;
50 | z-index: -1;
51 | width: 100%;
52 | height: 100%;
53 | top: 0;
54 | right: 0;
55 | background-color: #53d9d1;
56 | clip-path: circle(0% at 50% calc(50%));
57 | transition: clip-path 1s cubic-bezier(0.65, 0, 0.35, 1);
58 | }
59 |
60 | .link-one:hover::before {
61 | clip-path: circle(100% at 50% 50%);
62 | }
63 |
64 | .link-one::after {
65 | content: "";
66 | position: absolute;
67 | z-index: -1;
68 | width: 100%;
69 | height: 100%;
70 | top: 0;
71 | right: 0;
72 | background-color: #151515;
73 | clip-path: polygon( 40% 0%, 60% 0%, 60% 0%, 40% 0%, 40% 100%, 60% 100%, 60% 100%, 40% 100%);
74 | transition: clip-path 1s cubic-bezier(0.65, 0, 0.35, 1);
75 | }
76 |
77 | .link-one:hover::after {
78 | clip-path: polygon( 40% 10%, 60% 10%, 60% 35%, 40% 35%, 40% 90%, 60% 90%, 60% 65%, 40% 65%);
79 | }
80 |
81 | .link-two {
82 | color: #f27b9b;
83 | transition: color 1s cubic-bezier(0.32, 0, 0.67, 0);
84 | }
85 |
86 | .link-two:hover {
87 | color: #111;
88 | transition: color 1s cubic-bezier(0.33, 1, 0.68, 1);
89 | }
90 |
91 | .link-two::before {
92 | content: "";
93 | position: absolute;
94 | z-index: -2;
95 | width: 100%;
96 | height: 100%;
97 | top: 0;
98 | right: 0;
99 | clip-path: polygon( 0% -20%, 100% -30%, 100% -10%, 0% 0%, 0% 130%, 100% 120%, 100% 100%, 0% 110%);
100 | background-color: #f27b9b;
101 | transition: clip-path 1s cubic-bezier(0.25, 1, 0.5, 1);
102 | }
103 |
104 | .link-two:hover::before {
105 | clip-path: polygon( 0% 10%, 100% 0%, 100% 20%, 0% 30%, 0% 100%, 100% 90%, 100% 70%, 0% 80%);
106 | }
107 |
108 | .link-two::after {
109 | content: "";
110 | position: absolute;
111 | z-index: -1;
112 | width: 5ch;
113 | height: 5ch;
114 | top: 50%;
115 | right: 50%;
116 | transform: translate(50%, -50%) rotate(0deg) scale(0);
117 | transition: transform 1s ease;
118 | background-color: #f27b9b;
119 | }
120 |
121 | .link-two:hover::after {
122 | transform: translate(50%, -50%) rotate(135deg) scale(1);
123 | }
124 |
125 | .link-three {
126 | color: #eb7132;
127 | }
128 |
129 | .link-three::after {
130 | content: "";
131 | position: absolute;
132 | z-index: 2;
133 | width: 50%;
134 | height: 100%;
135 | top: 0%;
136 | left: 0%;
137 | transform: translate(0, -50%) scaleY(0);
138 | transition: transform 1s ease;
139 | mix-blend-mode: difference;
140 | clip-path: polygon( 20% 60%, 100% 60%, 100% 40%, 20% 40%, 20% 0%, 60% 0%, 60% 20%, 20% 20%);
141 | background-color: #eb7132;
142 | }
143 |
144 | .link-three:hover::after {
145 | transform: translate(0, 0%) scaleY(1);
146 | }
147 |
148 | .link-three::before {
149 | content: "";
150 | position: absolute;
151 | z-index: 2;
152 | width: 50%;
153 | height: 100%;
154 | bottom: 0%;
155 | right: 0%;
156 | transform: translate(0, 50%) scaleY(0);
157 | transition: transform 1s ease;
158 | mix-blend-mode: difference;
159 | clip-path: polygon( 80% 40%, 0% 40%, 0% 60%, 80% 60%, 80% 100%, 40% 100%, 40% 80%, 80% 80%);
160 | background-color: #eb7132;
161 | }
162 |
163 | .link-three:hover::before {
164 | transform: translate(0%, 0%) scaleY(1);
165 | }
--------------------------------------------------------------------------------