├── index.html
└── styles.css
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 | Document
9 |
10 |
11 |
12 | -
13 | HOME
14 |
15 | -
16 | ABOUT
17 |
18 | -
19 | WORK
20 |
21 | -
22 | CONTACT
23 |
24 |
25 |
26 |
--------------------------------------------------------------------------------
/styles.css:
--------------------------------------------------------------------------------
1 | :root {
2 | --background: linear-gradient(45deg, #02001F, #1F1B4E);
3 | --text-color: #FF2C75;
4 | }
5 |
6 | body {
7 | margin: 0;
8 | background: var(--background);
9 | color: var(--text-color);
10 | min-height: 100vh;
11 | display: flex;
12 | justify-content: center;
13 | }
14 |
15 | .list {
16 | margin: 0;
17 | padding: 0;
18 | padding-top: 25px;
19 | list-style: none;
20 | }
21 |
22 | .list-item {
23 | position: relative;
24 | font-weight: bold;
25 | font-size: 1.5rem;
26 | margin: 0 auto;
27 | width: max-content;
28 | }
29 |
30 | .list-item > .split-text {
31 | position: relative;
32 | display: flex;
33 | flex-direction: column;
34 | line-height: 1;
35 | transition: color 0ms 200ms;
36 | }
37 |
38 | .list-item:hover > .split-text {
39 | color: transparent;
40 | user-select: none;
41 | transition-delay: 0ms;
42 | }
43 |
44 | .list-item > .split-text::before,
45 | .list-item > .split-text::after {
46 | position: absolute;
47 | content: attr(data-text);
48 | height: calc(.5em);
49 | overflow: hidden;
50 | left: 0;
51 | right: 0;
52 | color: var(--text-color);
53 | transition: color 200ms ease-in-out, transform 200ms ease-in-out;
54 | user-select: none;
55 | }
56 |
57 | .list-item:hover > .split-text::before,
58 | .list-item:hover > .split-text::after {
59 | color: white;
60 | transform: skewX(15deg);
61 | }
62 |
63 | .list-item > .split-text::after {
64 | bottom: 0;
65 | display: flex;
66 | align-items: flex-end;
67 | }
68 |
69 | .list-item::before {
70 | content: "";
71 | position: absolute;
72 | width: 110%;
73 | left: -5%;
74 | top: calc(50% - 1px);
75 | height: 2px;
76 | transform: scale(0);
77 | background-color: var(--text-color);
78 | border-radius: 20px;
79 | z-index: 1;
80 | transition: transform 200ms ease-in-out;
81 | }
82 |
83 | .list-item:hover::before {
84 | transform: scale(1);
85 | }
--------------------------------------------------------------------------------