꒰𐔌 Kyo's CSS Collection

Made by @KyoCxt on JanitorAI

This is a Rentry Collection of some CSS codes that I use on my profile. Will be updated when I decide to change my profile again or find some of my old ones lol
Free to use, so credit is not needed but appreciated! ( ദ്ദി ˙ᗜ˙ )

Most of the codes hasn't been changed/edited since these were tailor-made for my profile, so if you want it to look in a specific way (color, width, height, etc.), you'll have to manually edit it yourself. There are some notes that will hopefully make editing easier :')

If you encounter any problems or need help, feel free to reach out to me on Discord kyo_cxt or on Zaqa

Credits to Border Resources for the Pixels and Background

Previews

Idk what to call these so bear with me ( •̯́ ₃ •̯̀)

Click on the title to navigate to the specific design of your choosing

› Three Boxes

Alt Tag

Hovering:
Alt Tag

› Status and Agenda

Alt Tag

Hovering:
Alt Tag

On Mobile:
Alt Tag

› Two Open/Closed Cards

Alt Tag

On Mobile:
Alt Tag

Alt Tag

Hovering:
Alt Tag

Alt Tag

Hovering + Hovering over Tag:
Alt Tag

Back to the Top ⤴︎

# Three Boxes

⎗
✓
  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
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
<style>
    .container {
        display: flex;
        flex-direction: row;
        gap: 10px;
        width: 100%;
        max-width: 800px;
        margin-bottom: 15px;
    }

    .section {
        background: #484034;
        border: 1px solid #d7c9af;
        padding: 10px;
        cursor: pointer;
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        position: relative;
        overflow: hidden;
        min-height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex: 1;
    }

    .section:hover {
        transform: translateY(-5px);
        box-shadow: 0 15px 40px rgba(206, 193, 169, 0.3);
        border-color: #cec1a9;
        background: linear-gradient(145deg, #484034, #282014);
        flex: 6; /* adjusts how wide the box is when hovered */
        z-index: 10;
    }

    .section-title {
        font-family: "Playfair Display", serif;
        font-size: 1.6em;
        font-weight: bold;
        text-align: center;
        color: #d9cab0;
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
        transition: all 0.4s ease;
    }

    .section-content {
        font-family: "Playfair Display", serif;
        font-size: 1em;
        line-height: 1.6;
        color: #d6c8ae;
        opacity: 0;
        max-height: 0;
        overflow: hidden;
        transition: all 0.4s ease;
        text-align: justify;
    }

    .section:hover .section-title {
        font-size: 1.5em;
        margin-bottom: 10px;
        color: #d9cab0;
    }

    .section:hover .section-content {
        opacity: 1;
        max-height: 900px;
        transition: all 0.6s ease 0.2s;
    }

    .section::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.1), transparent);
        transition: left 0.6s ease;
    }

    .section:hover::before {
        left: 100%;
    }

    /* Star animations */
    .stars {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        pointer-events: none;
        overflow: hidden;
    }

    .star {
        position: absolute;
        color: #ffffff7a;
        font-size: 12px;
        opacity: 0.7;
        animation-duration: 8s;
        animation-iteration-count: infinite;
        animation-timing-function: linear;
    }

    .star:nth-child(1) {
        top: 20%;
        left: 10%;
        animation-name: float1;
        animation-delay: 0s;
    }

    .star:nth-child(2) {
        top: 60%;
        left: 80%;
        animation-name: float2;
        animation-delay: 2s;
        font-size: 8px;
    }

    .star:nth-child(3) {
        top: 30%;
        left: 70%;
        animation-name: float3;
        animation-delay: 4s;
        font-size: 10px;
    }

    .star:nth-child(4) {
        top: 80%;
        left: 20%;
        animation-name: float4;
        animation-delay: 1s;
        font-size: 14px;
    }

    .star:nth-child(5) {
        top: 15%;
        left: 90%;
        animation-name: float5;
        animation-delay: 3s;
        font-size: 9px;
    }

    .star:nth-child(6) {
        top: 70%;
        left: 50%;
        animation-name: float6;
        animation-delay: 5s;
        font-size: 11px;
    }

    /* Animations for the stars */
    @keyframes float1 {
        0% {
        transform: translateY(0px) rotate(0deg);
        opacity: 0.7;
        }
        25% {
        transform: translateY(-15px) rotate(90deg);
        opacity: 1;
        }
        50% {
        transform: translateY(-8px) rotate(180deg);
        opacity: 0.6;
        }
        75% {
        transform: translateY(-20px) rotate(270deg);
        opacity: 0.9;
        }
        100% {
        transform: translateY(0px) rotate(360deg);
        opacity: 0.7;
        }
    }

    @keyframes float2 {
        0% {
        transform: translateX(0px) scale(1);
        opacity: 0.6;
        }
        33% {
        transform: translateX(-20px) scale(1.2);
        opacity: 1;
        }
        66% {
        transform: translateX(10px) scale(0.8);
        opacity: 0.8;
        }
        100% {
        transform: translateX(0px) scale(1);
        opacity: 0.6;
        }
    }

    @keyframes float3 {
        0% {
        transform: rotate(0deg) translateY(0px);
        opacity: 0.8;
        }
        50% {
        transform: rotate(180deg) translateY(-25px);
        opacity: 0.4;
        }
        100% {
        transform: rotate(360deg) translateY(0px);
        opacity: 0.8;
        }
    }

    @keyframes float4 {
        0% {
        transform: translateY(0px) translateX(0px) scale(1);
        opacity: 0.7;
        }
        25% {
        transform: translateY(-10px) translateX(15px) scale(1.1);
        opacity: 1;
        }
        50% {
        transform: translateY(-5px) translateX(-10px) scale(0.9);
        opacity: 0.5;
        }
        75% {
        transform: translateY(-18px) translateX(8px) scale(1.05);
        opacity: 0.9;
        }
        100% {
        transform: translateY(0px) translateX(0px) scale(1);
        opacity: 0.7;
        }
    }

    @keyframes float5 {
        0% {
        transform: scale(1) rotate(0deg);
        opacity: 0.6;
        }
        20% {
        transform: scale(1.3) rotate(72deg);
        opacity: 1;
        }
        40% {
        transform: scale(0.7) rotate(144deg);
        opacity: 0.8;
        }
        60% {
        transform: scale(1.1) rotate(216deg);
        opacity: 0.9;
        }
        80% {
        transform: scale(0.9) rotate(288deg);
        opacity: 0.7;
        }
        100% {
        transform: scale(1) rotate(360deg);
        opacity: 0.6;
        }
    }

    @keyframes float6 {
        0% {
        transform: translateY(0px) rotate(0deg) scale(1);
        opacity: 0.8;
        }
        30% {
        transform: translateY(-12px) rotate(108deg) scale(1.2);
        opacity: 0.6;
        }
        60% {
        transform: translateY(-20px) rotate(216deg) scale(0.8);
        opacity: 1;
        }
        100% {
        transform: translateY(0px) rotate(360deg) scale(1);
        opacity: 0.8;
        }
    }

    /* For Mobile */
    @media screen and (min-width: 800px) {
        .section {
        padding: 20px;
        }

        .section:hover .section-title {
        font-size: 1.5em;
        }

        .section-content {
        font-size: 1em;
        }
    }
</style>

<div class="container">
    <div class="section">
        <div class="stars">
        <div class="star">★</div>
        <div class="star">✦</div>
        <div class="star">✧</div>
        <div class="star">★</div>
        <div class="star">✦</div>
        <div class="star">✧</div>
        </div>
        <div>
        <div class="section-title">TITLE HERE</div>
        <div class="section-content">
            DESCRIPTION HERE
        </div>
        </div>
    </div>
    <div class="section">
        <div class="stars">
        <div class="star">★</div>
        <div class="star">✦</div>
        <div class="star">✧</div>
        <div class="star">★</div>
        <div class="star">✦</div>
        <div class="star">✧</div>
        </div>
        <div>
        <div class="section-title">TITLE HERE</div>
        <div class="section-content">
            DESCRIPTION HERE
        </div>
        </div>
    </div>
    <div class="section">
        <div class="stars">
        <div class="star">★</div>
        <div class="star">✦</div>
        <div class="star">✧</div>
        <div class="star">★</div>
        <div class="star">✦</div>
        <div class="star">✧</div>
        </div>
        <div>
        <div class="section-title">TITLE HERE</div>
        <div class="section-content">
            DESCRIPTION HERE
        </div>
        </div>
    </div>
</div>

Back to the Top ⤴︎

# Status and Agenda

⎗
✓
  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
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
<style>
    .containerstatus {
        display: flex;
        gap: 15px;
        max-width: 1200px;
        width: 100%;
        position: relative;
        z-index: 1;
    }

    .status-panel {
        background: #484034;
        border: 1px solid #d7c9af;
        padding: 30px;
        position: relative;
        overflow: hidden;
        width: 200px;
    }

    .status-panel::before {
        content: '★';
        position: absolute;
        top: 15px;
        right: 20px;
        font-size: 24px;
        color: #d7c9af;
        animation: pulse 2s ease-in-out infinite;
    }

    @keyframes pulse {
        0%, 100% {
        transform: scale(1);
        opacity: 0.7;
        }
        50% {
        transform: scale(1.2);
        opacity: 1;
        }
    }

    .status-header {
        font-family: "Playfair Display", serif;
        font-size: 1.8em;
        font-weight: 600;
        color: #d7c9af;
        text-align: center;
        margin-bottom: 5px;
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
        letter-spacing: 2px;
    }

    .status-content {
        font-family: "Playfair Display", serif;
        color: #d7c9af;
        font-size: 18px;
        line-height: 1.6;
        text-align: center;
        font-weight: 600;
    }

    .agenda-panel {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 8px;
        max-height: 300px;
        overflow-y: auto;
        padding-right: 10px;
    }

    /* The scroll bar thingy */
    .agenda-panel::-webkit-scrollbar {
        width: 12px;
    }

    .agenda-panel::-webkit-scrollbar-track {
        background: rgba(42, 31, 21, 0.8);
        border-radius: 6px;
        border: 1px solid #d7c9af;
    }

    .agenda-panel::-webkit-scrollbar-thumb {
        background: #d7c8af;
        border-radius: 6px;
        box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.3);
    }

    .agenda-panel::-webkit-scrollbar-thumb:hover {
        background: #9b8c72;
    }

    /* agenda items/boxes */
    .agenda-item {
        background: #484034;
        border: 1px solid #d7c9af;
        padding: 25px;
        box-shadow: 
        0 8px 25px rgba(0, 0, 0, 0.4),
        inset 0 0 15px rgba(107, 68, 35, 0.2);
        transition: all 0.4s ease;
        position: relative;
        overflow: hidden;
        cursor: pointer;
    }

    .agenda-item::before {
        content: '';
        position: absolute;
        top: -2px;
        left: -2px;
        right: -2px;
        bottom: -2px;
        z-index: -1;
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    .agenda-item:hover {
        transform: translateY(-5px);
        height: auto;
        min-height: 140px;
        box-shadow: 
        0 15px 35px rgba(0, 0, 0, 0.6),
        0 0 25px rgba(218, 165, 32, 0.3);
    }

    .agenda-item:hover::before {
        opacity: 1;
    }

    .agenda-header {
        font-family: "Playfair Display", serif;
        font-size: 1.5em;
        font-weight: 600;
        color: #d7c9af;
        text-align: center;
        margin-bottom: 15px;
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
        letter-spacing: 1px;
        position: relative;
        bottom: 18px;
    }

    .agenda-header::after {
        content: '✦';
        position: absolute;
        right: -20px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 16px;
        color: #d7c9af;
    }

    .agenda-content {
        font-family: "Playfair Display", serif;
        color: #d7c9af;
        font-size: 16px;
        text-align: center;
        line-height: 1.5;
        opacity: 0;
        max-height: 0;
        overflow: hidden;
        transition: all 0.4s ease;
        margin-top: 0;
        position: relative;
        bottom: 25px;
    }

    .agenda-item:hover .agenda-content {
        opacity: 1;
        max-height: 200px;
        margin-top: 15px;
    }

    .agenda-item::after {
        content: '⟡';
        position: absolute;
        top: 1px;
        left: 6px;
        font-size: 14px;
        color: rgb(214 200 174);
    }

    /* the thin line on the left side of the agenda box,
    just change the number to the box you want to be highlighted */
    .agenda-item:nth-child(2) {
        border-left: 4px solid #d7c8af;
    }

    .agenda-item:nth-child(3) {
        border-left: 4px solid #d7c8af;
    }

    .agenda-item:nth-child(4) {
        border-left: 4px solid #d7c8af;
    }

    @media screen and (max-width: 799px) {
        .containerstatus {
        flex-direction: column;
        }

        .status-panel {
        width: 100%;
        padding: 15px;
        }

        .agenda-header {
        font-size: 20px;
        }

        .status-header {
        font-size: 24px;
        }
    }
</style>

<div class="containerstatus">
    <div class="status-panel">
        <div class="status-header">TITLE HERE</div>
        <div class="status-content">
        DESCRIPTION HERE
        </div>
    </div>
    <div class="agenda-panel">
        <div class="agenda-item">
        <div class="agenda-header">TITLE 1</div>
        <div class="agenda-content">
            DESCRIPTION HERE
        </div>
        </div>
        <div class="agenda-item">
        <div class="agenda-header">TITLE 2</div>
        <div class="agenda-content">
            DESCRIPTION HERE
        </div>
        </div>
        <div class="agenda-item">
        <div class="agenda-header">TITLE 3</div>
        <div class="agenda-content">
            DESCRIPTION HERE
        </div>
        </div>
        <div class="agenda-item">
        <div class="agenda-header">TITLE 4</div>
        <div class="agenda-content">
            DESCRIPTION HERE
        </div>
        </div>
        <div class="agenda-item">
        <div class="agenda-header">TITLE 5</div>
        <div class="agenda-content">
            DESCRIPTION HERE
        </div>
        </div>
        <div class="agenda-item">
        <div class="agenda-header">TITLE 6</div>
        <div class="agenda-content">
            DESCRIPTION HERE
        </div>
        </div>
    </div>
</div>

Just copy and paste this to add more to the agenda items

⎗
✓
1
2
3
4
5
6
<div class="agenda-item">
<div class="agenda-header">TITLE</div>
<div class="agenda-content">
    DESCRIPTION HERE
</div>
</div>

Back to the Top ⤴︎

# Two Open/Closed Cards

⎗
✓
  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
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
<style>
    .interface-container {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        position: relative;
        z-index: 10;
        margin-top: 15px;
    }

    .commission-card {
        width: auto;
        height: 170px;
        background: rgb(72 64 52);
        color: #d7c8af;
        position: relative;
        cursor: pointer;
        transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
        overflow: hidden;
        backdrop-filter: blur(10px);
        border: 1px solid rgb(215 200 175 / 55%);
        text-decoration: none;
        display: block;
    }

    .commission-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(215, 200, 175, 0.1), transparent);
        transition: left 0.8s;
    }

    .commission-card:hover::before {
        left: 100%;
    }

    .commission-card:hover {
        transform: translateY(-10px) scale(1.02);
        box-shadow: 
        0 30px 80px rgba(0, 0, 0, 0.3),
        0 0 40px rgba(215, 200, 175, 0.1),
        inset 0 1px 0 rgba(215, 200, 175, 0.2);
        border-color: rgb(215 200 175);
    }

    .commission-card:active {
        transform: translateY(-5px) scale(1.01);
    }

    .status-emblem {
        position: absolute;
        top: 20px;
        right: 20px;
        padding: 10px 20px;
        font-size: 10px;
        font-weight: bold;
        text-transform: uppercase;
        letter-spacing: 3px;
        border: 2px solid;
        background: rgba(0, 0, 0, 0.3);
        backdrop-filter: blur(5px);
    }

    /* The "Open" sign */
    .emblem-open {
        color: #a8d8a8;
        border-color: #a8d8a8;
        animation: emblem-pulse 3s infinite;
        box-shadow: 0 0 20px rgba(168, 216, 168, 0.3);
    }

    /* The "Closed" sign */
    .emblem-closed {
        color: #d8a8a8;
        border-color: #d8a8a8;
        opacity: 0.8;
    }

    .card-header {
        position: absolute;
        top: 30px;
        left: 30px;
        right: 30px;
    }

    .card-main {
        position: absolute;
        bottom: 40px;
        left: 30px;
        right: 30px;
    }

    .card-title {
        font-family: "Playfair Display", serif;
        font-size: 1.6em;
        font-weight: bold;
        text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.7);
        margin-bottom: 10px;
        letter-spacing: 1px;
        line-height: 1.2;
    }

    .card-description {
        font-family: "Playfair Display", serif;
        font-size: 14px;
        opacity: 0.9;
        font-style: italic;
        letter-spacing: 0.5px;
    }

    .mystic-symbol {
        position: absolute;
        color: rgba(215, 200, 175, 0.3);
        font-size: 20px;
        animation: mystic-rotation 20s infinite linear;
        pointer-events: none;
    }

    .symbol-1 {
        top: 25%;
        left: 15%;
        animation-delay: 0s;
    }

    .symbol-2 {
        top: 70%;
        right: 20%;
        animation-delay: -5s;
        font-size: 16px;
    }

    .symbol-3 {
        bottom: 30%;
        left: 25%;
        animation-delay: -10s;
        font-size: 24px;
    }

    .symbol-4 {
        top: 40%;
        right: 30%;
        animation-delay: -15s;
        font-size: 12px;
    }

    .commission-card:hover .mystic-symbol {
        color: rgba(215, 200, 175, 0.7);
        animation-duration: 8s;
        transform: scale(1.3);
    }

    @keyframes mystic-rotation {
        0% {
        transform: rotate(0deg) scale(1);
        opacity: 0.3;
        }
        25% {
        transform: rotate(90deg) scale(1.1);
        opacity: 0.5;
        }
        50% {
        transform: rotate(180deg) scale(0.9);
        opacity: 0.4;
        }
        75% {
        transform: rotate(270deg) scale(1.2);
        opacity: 0.6;
        }
        100% {
        transform: rotate(360deg) scale(1);
        opacity: 0.3;
        }
    }

    @keyframes emblem-pulse {
        0%, 100% {
        box-shadow: 0 0 20px rgba(168, 216, 168, 0.3);
        transform: scale(1);
        }
        50% {
        box-shadow: 0 0 30px rgba(168, 216, 168, 0.6);
        transform: scale(1.05);
        }
    }

    @media (max-width: 799px) {
        .interface-container {
        justify-items: center;
        }

        .commission-card {
        width: 100%;
        height: 200px;
        }

        .card-main {
        bottom: 20px;
        left: 30px;
        right: 10px;
        }
    }
</style>

<div class="interface-container">
    /* This shows the "Open" card */
    <a href="LINK HERE" class="commission-card">
        <div class="status-emblem emblem-open">Open!</div>
        <div class="mystic-symbol symbol-1">✦</div>
        <div class="mystic-symbol symbol-2">★</div>
        <div class="mystic-symbol symbol-3">✧</div>
        <div class="mystic-symbol symbol-4">✦</div>
        <div class="card-main">
        <div class="card-title">TITLE<br>HERE</div>
        <div class="card-description">DESCRIPTION HERE</div>
        </div>
    </a>
    /* This shows the "Closed" card */
    <a href="LINK HERE" class="commission-card">
        <div class="status-emblem emblem-closed">Closed</div>
        <div class="mystic-symbol symbol-1">★</div>
        <div class="mystic-symbol symbol-2">✧</div>
        <div class="mystic-symbol symbol-3">✦</div>
        <div class="mystic-symbol symbol-4">★</div>
        <div class="card-main">
        <div class="card-title">TITLE<br>HERE</div>
        <div class="card-description">DESCRIPTION HERE</div>
        </div>
    </a>
</div>

Back to the Top ⤴︎

⎗
✓
  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
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
<style>
    .containerlink {
        display: flex;
        gap: 10px;
        flex-wrap: nowrap;
        justify-content: center;
        max-width: 1200px;
        flex-direction: row;
        margin-top: 15px;
    }

    .cardlink {
        position: relative;
        width: 280px;
        height: 180px;
        background: #484034;
        border: 1px solid #d7c8af;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
        padding: 30px;
        text-decoration: none;
        color: #d7c8af;
        transition: all 0.3s ease;
        overflow: hidden;
    }

    .cardlink::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(45deg, transparent 30%, rgba(215, 200, 175, 0.1) 50%, transparent 70%);
        transform: translateX(-100%);
        transition: transform 0.6s ease;
    }

    .cardlink:hover::before {
        transform: translateX(100%);
    }

    .cardlink:hover {
        transform: translateY(-10px);
        box-shadow: 0 20px 40px rgba(215, 200, 175, 0.2);
        border-color: #f0e6d2;
        text-decoration-line: none;
    }

    .css-dydlef {
        font-family: "Playfair Display", serif;
    }

    .cardlink-title {
        font-family: "Playfair Display", serif;
        font-size: 1.7em;
        font-weight: bold;
        margin-bottom: 10px;
        letter-spacing: 2px;
        text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.7);
        z-index: 2;
        position: relative;
        line-height: 1;
    }

    .cardlink-description {
        font-family: "Playfair Display", serif;
        font-size: 14px;
        font-style: italic;
        line-height: 1.5;
        opacity: 0.9;
        z-index: 2;
        position: relative;
    }

    .cardlink:hover .cardlink-button {
        background: #d7c8af;
        color: #484034;
        transform: scale(1.05);
    }

    /* Decorative stars */
    .starlink {
        position: absolute;
        background: #d7c8af;
        clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
        animation: twinkle 3s infinite ease-in-out;
    }

    .starlink-1 {
        width: 8px;
        height: 8px;
        top: 20px;
        left: 30px;
        animation-delay: 0s;
    }

    .starlink-2 {
        width: 6px;
        height: 6px;
        top: 50px;
        right: 40px;
        animation-delay: 1s;
    }

    .starlink-3 {
        width: 10px;
        height: 10px;
        bottom: 30px;
        left: 20px;
        animation-delay: 2s;
    }

    .starlink-4 {
        width: 7px;
        height: 7px;
        bottom: 60px;
        right: 25px;
        animation-delay: 0.5s;
    }

    .starlink-5 {
        width: 5px;
        height: 5px;
        top: 80px;
        left: 50%;
        animation-delay: 1.5s;
    }

    .constellation {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        pointer-events: none;
    }

    .constellation-line {
        position: absolute;
        background: #d7c8af;
        opacity: 0.3;
        animation: pulse 4s infinite ease-in-out;
    }

    .line-1 {
        width: 60px;
        height: 1px;
        top: 25px;
        left: 35px;
        transform: rotate(25deg);
        animation-delay: 0s;
    }

    .line-2 {
        width: 45px;
        height: 1px;
        top: 55px;
        right: 30px;
        transform: rotate(-30deg);
        animation-delay: 1s;
    }

    .line-3 {
        width: 50px;
        height: 1px;
        bottom: 35px;
        left: 25px;
        transform: rotate(45deg);
        animation-delay: 2s;
    }

    .particle {
        position: absolute;
        width: 2px;
        height: 2px;
        background: #d7c8af;
        border-radius: 50%;
        animation: float 6s infinite ease-in-out;
    }

    .particle-1 {
        top: 40%;
        left: 10%;
        animation-delay: 0s;
    }

    .particle-2 {
        top: 70%;
        right: 15%;
        animation-delay: 2s;
    }

    .particle-3 {
        top: 25%;
        right: 30%;
        animation-delay: 4s;
    }

    /* Stars animations */
    @keyframes twinkle {
        0%, 100% {
        opacity: 0.3;
        transform: scale(1);
        }
        50% {
        opacity: 1;
        transform: scale(1.2);
        }
    }

    @keyframes pulse {
        0%, 100% {
        opacity: 0.2;
        }
        50% {
        opacity: 0.6;
        }
    }

    @keyframes float {
        0%, 100% {
        transform: translateY(0px) translateX(0px);
        opacity: 0.3;
        }
        33% {
        transform: translateY(-10px) translateX(5px);
        opacity: 0.8;
        }
        66% {
        transform: translateY(5px) translateX(-5px);
        opacity: 0.5;
        }
    }

    /* For Mobile */
    @media (max-width: 799px) {
        .containerlink {
        gap: 10px;
        }

        .cardlink {
        width: 100%;
        height: 250px;
        padding: 25px;
        }

        .cardlink-title {
        font-size: 1.8em;
        }

        .cardlink-description {
        font-size: 1em;
        }
    }
</style>

<div class="containerlink">
    <a href="LINK HERE" class="cardlink">
        <div class="constellation">
        <div class="constellation-line line-1"></div>
        <div class="constellation-line line-2"></div>
        <div class="constellation-line line-3"></div>
        </div>
        <div class="starlink starlink-1"></div>
        <div class="starlink starlink-2"></div>
        <div class="starlink starlink-3"></div>
        <div class="starlink starlink-4"></div>
        <div class="starlink starlink-5"></div>
        <div class="particle particle-1"></div>
        <div class="particle particle-2"></div>
        <div class="particle particle-3"></div>
        <div class="cardlink-title">TITLE HERE</div>
        <div class="cardlink-description">DESCRIPTION HERE</div>
    </a>
    <a href="LINK HERE" class="cardlink">
        <div class="constellation">
        <div class="constellation-line line-1"></div>
        <div class="constellation-line line-2"></div>
        <div class="constellation-line line-3"></div>
        </div>
        <div class="starlink starlink-1"></div>
        <div class="starlink starlink-2"></div>
        <div class="starlink starlink-3"></div>
        <div class="starlink starlink-4"></div>
        <div class="starlink starlink-5"></div>
        <div class="particle particle-1"></div>
        <div class="particle particle-2"></div>
        <div class="particle particle-3"></div>
        <div class="cardlink-title">TITLE HERE</div>
        <div class="cardlink-description">DESCRIPTION HERE</div>
    </a>
    <a href="LINK HERE" class="cardlink">
        <div class="constellation">
        <div class="constellation-line line-1"></div>
        <div class="constellation-line line-2"></div>
        <div class="constellation-line line-3"></div>
        </div>
        <div class="starlink starlink-1"></div>
        <div class="starlink starlink-2"></div>
        <div class="starlink starlink-3"></div>
        <div class="starlink starlink-4"></div>
        <div class="starlink starlink-5"></div>
        <div class="particle particle-1"></div>
        <div class="particle particle-2"></div>
        <div class="particle particle-3"></div>
        <div class="cardlink-title">TITLE HERE</div>
        <div class="cardlink-description">DESCRIPTION HERE</div>
    </a>
</div>

Back to the Top ⤴︎

⎗
✓
  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
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
<style>
    .containertags {
        max-width: 1000px;
        margin: 0 auto;
        position: relative;
        z-index: 10;
        margin-top: 15px;
    }

    .sectiontags {
        margin-bottom: 10px;
        background: linear-gradient(145deg, rgba(215, 200, 175, 0.05), rgba(215, 200, 175, 0.02));
        border: 2px solid rgba(215, 200, 175, 0.2);
        backdrop-filter: blur(10px);
        position: relative;
        overflow: hidden;
    }

    .sectiontags::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(215, 200, 175, 0.1), transparent);
        transition: left 0.8s ease;
    }

    .sectiontags:hover::before {
        left: 100%;
    }

    .sectiontags-header {
        font-family: "Playfair Display", serif;
        background: #484034;
        color: #cbba9f;
        padding: 10px 40px;
        cursor: pointer;
        font-size: 1.5em;
        font-weight: bold;
        text-align: center;
        transition: all 0.4s ease;
        position: relative;
        letter-spacing: 2px;
        border: 1px solid #d7c8af;
        text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.7);
    }

    .sectiontags-header::before {
        content: '✦';
        position: absolute;
        left: 30px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 24px;
        transition: all 0.6s ease;
    }

    .sectiontags-header::after {
        content: '✦';
        position: absolute;
        right: 30px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 24px;
        transition: all 0.6s ease;
    }

    .sectiontags:hover .sectiontags-header {
        background: linear-gradient(135deg, #e8d9c2 0%, #dac7a8 100%);
        color: #484034;
        transform: translateY(-3px);
        box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4);
        text-shadow: none;
    }

    .sectiontags:hover .sectiontags-header::before,
    .sectiontags:hover .sectiontags-header::after {
        animation: constellation-spin 2s linear infinite;
        color: #5a5042;
    }

    /* Star animation when hovered */
    @keyframes constellation-spin {
        0% {
        transform: translateY(-50%) rotate(0deg) scale(1);
        }
        50% {
        transform: translateY(-50%) rotate(180deg) scale(1.3);
        }
        100% {
        transform: translateY(-50%) rotate(360deg) scale(1);
        }
    }

    .tags-containertags {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.8s cubic-bezier(0.4, 0, 0.2, 1);
        background: rgba(72, 64, 52, 0.3);
        backdrop-filter: blur(15px);
    }

    .sectiontags:hover .tags-containertags {
        max-height: 400px;
    }

    .tags-wrapper {
        padding: 10px 10px;
        max-height: 340px;
        overflow-y: auto;
        opacity: 0;
        transform: translateY(-30px);
        transition: all 0.8s ease 0.3s;
    }

    .sectiontags:hover .tags-wrapper {
        opacity: 1;
        transform: translateY(0);
    }

    /* Scroll bar */
    .tags-wrapper::-webkit-scrollbar {
        width: 8px;
    }

    .tags-wrapper::-webkit-scrollbar-track {
        background: rgba(72, 64, 52, 0.3);
        border-radius: 4px;
    }

    .tags-wrapper::-webkit-scrollbar-thumb {
        background: linear-gradient(180deg, #d7c8af, #c9b89d);
        border-radius: 4px;
        border: 1px solid rgba(72, 64, 52, 0.2);
    }

    .tags-wrapper::-webkit-scrollbar-thumb:hover {
        background: linear-gradient(180deg, #e8d9c2, #dac7a8);
    }

    /* container when hovered*/
    .tags-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
        gap: 10px;
    }

    .tag {
        font-family: "Playfair Display", serif;
        background: linear-gradient(135deg, #d7c8af 0%, #c9b89d 100%);
        color: #484034;
        padding: 10px 5px;
        text-decoration: none;
        font-size: 17px;
        font-weight: 600;
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        position: relative;
        overflow: hidden;
        display: block;
        text-align: center;
        border: 2px solid rgba(72, 64, 52, 0.1);
    }

    .tag::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
        transition: left 0.6s ease;
    }

    .tag::after {
        content: '★';
        position: absolute;
        right: 3px;
        transform: translateY(-50%) scale(0);
        font-size: 14px;
        color: #5a5042;
        transition: all 0.3s ease;
    }

    .tag:hover {
        background: linear-gradient(135deg, #e8d9c2 0%, #dac7a8 100%);
        transform: translateY(-5px) scale(1.02);
        box-shadow: 0 12px 35px rgba(0, 0, 0, 0.3);
        border-color: rgba(72, 64, 52, 0.3);
        color: #484034;
    }

    .tag:hover::before {
        left: 100%;
    }

    .tag:hover::after {
        transform: translateY(-50%) scale(1) rotate(360deg);
    }

    /* Decorative stars */
    .comet {
        position: fixed;
        width: 3px;
        height: 3px;
        background: #d7c8af;
        border-radius: 50%;
        animation: comet-flight 12s linear infinite;
        z-index: 5;
    }

    .comet::after {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        width: 50px;
        height: 2px;
        background: linear-gradient(90deg, #d7c8af, transparent);
        border-radius: 2px;
    }

    /* Star animations */
    @keyframes comet-flight {
        0% {
        top: -20px;
        left: 110%;
        opacity: 1;
        }
        70% {
        opacity: 1;
        }
        100% {
        top: 110%;
        left: -20px;
        opacity: 0;
        }
    }

    .comet:nth-child(1) {
        animation-delay: 0s;
    }

    .comet:nth-child(2) {
        animation-delay: 6s;
    }

    /* For mobile */
    @media screen and (max-width: 799px) {
        .main-title {
        font-size: 28px;
        }

        .sectiontags-header {
        padding: 10px 30px;
        }

        .tags-grid {
        grid-template-columns: 1fr;
        }

        .sectiontags-header::before,
        .sectiontags-header::after {
        font-size: 18px;
        }
    }
</style>

<div class="containertags">
    <div class="sectiontags">
        <div class="sectiontags-header">TITLE HERE</div>
        <div class="tags-containertags">
        <div class="tags-wrapper">
            <div class="tags-grid">
            <a href="LINK HERE" class="tag">TITLE HERE</a>
            <a href="LINK HERE" class="tag">TITLE HERE</a>
            <a href="LINK HERE" class="tag">TITLE HERE</a>
            <a href="LINK HERE" class="tag">TITLE HERE</a>
            <a href="LINK HERE" class="tag">TITLE HERE</a>
            <a href="LINK HERE" class="tag">TITLE HERE</a>
            <a href="LINK HERE" class="tag">TITLE HERE</a>
            <a href="LINK HERE" class="tag">TITLE HERE</a>
            <a href="LINK HERE" class="tag">TITLE HERE</a>
            <a href="LINK HERE" class="tag">TITLE HERE</a>
            <a href="LINK HERE" class="tag">TITLE HERE</a>
            <a href="LINK HERE" class="tag">TITLE HERE</a>
            </div>
        </div>
        </div>
    </div>
</div>

Back to the Top ⤴︎

Warning

LINK

You are about to visit a link which has been flagged with the above content warnings. Do you wish to continue?

Cancel
Edit
Raw PDF PNG WebP JPG

Pub: 27 Jul 2025 13:46 UTC

Edit: 21 Aug 2025 11:53 UTC

Views: 318

new· what· how· langs· contacts· login