Skip to content

Commit 2d94c3d

Browse files
DDao19LaurelineP
DDao19
and
LaurelineP
authored
Added Tzuyu art (#3366)
* Added my art folder * Replaced style.css with styles.css * Replaced style.css with styles.css * removed image folder and gif * Fixed the href linking to the styles.css --------- Co-authored-by: Laureline Paris <laurelinedev@gmail.com>
1 parent 4ae0f2f commit 2d94c3d

3 files changed

Lines changed: 116 additions & 0 deletions

File tree

‎Art/ddao19-tzuyu/index.html‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<link rel="preconnect" href="https://fonts.googleapis.com">
7+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
8+
<link href="https://fonts.googleapis.com/css2?family=Google+Sans:ital,opsz,wght@0,17..18,400..700;1,17..18,400..700&family=Lily+Script+One&family=Manrope:wght@200..800&family=Raleway:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
9+
<link rel="stylesheet" type="text/css" href="styles.css">
10+
<title>Animated Borders Tzuyu</title>
11+
</head>
12+
<body>
13+
<div class="container">
14+
<div class="title">
15+
<h1>Animated Borders Tzuyu</h1>
16+
</div>
17+
<div class="frame">
18+
<img src="https://xkxqjlzvieat874751.gcdn.ntruss.com/2/2025/d4d4/2d4d465daa33922c25359c32bcacac8503d70767c0576a19ea76de71e0e88422e_o_mv.gif" alt="Tzuyu making hand heart sign">
19+
</div>
20+
</div>
21+
</body>
22+
</html>

‎Art/ddao19-tzuyu/meta.json‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
{
2+
"artName": "Animated Borders Tzuyu",
3+
"githubHandle": "ddao19"
4+
}

‎Art/ddao19-tzuyu/styles.css‎

Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
/* Base layout */
2+
body {
3+
margin: 0;
4+
padding: 0;
5+
background: #0e2136;
6+
height: 100vh;
7+
display: flex;
8+
justify-content: center;
9+
align-items: center;
10+
font-family: "Lily Script One", system-ui;
11+
}
12+
13+
/* Centered container with max width */
14+
.container {
15+
display: flex;
16+
flex-direction: column;
17+
align-items: center;
18+
width: 100%;
19+
max-width: 900px;
20+
padding: 0 20px;
21+
}
22+
23+
/* Responsive heading */
24+
.title h1 {
25+
color: #fff;
26+
text-align: center;
27+
font-size: clamp(2rem, 0.4194rem + 2.5806vw, 4rem);
28+
}
29+
30+
/* Media frame */
31+
.frame {
32+
position: relative;
33+
min-width: 0;
34+
width: 100%;
35+
cursor: pointer;
36+
border-radius: 16px;
37+
aspect-ratio: 16 / 9;
38+
display: flex;
39+
justify-content: center;
40+
align-items: center;
41+
}
42+
43+
/* Image styling */
44+
.frame img {
45+
max-width: 100%;
46+
height: auto;
47+
display: block;
48+
border-radius: inherit;
49+
aspect-ratio: 16 / 9;
50+
object-fit: cover;
51+
}
52+
53+
/* Animated gradient angle */
54+
@property --deg {
55+
syntax: '<angle>';
56+
inherits: true;
57+
initial-value: 0deg;
58+
}
59+
60+
/* Border and glow layers */
61+
.frame::before,
62+
.frame::after {
63+
content: "";
64+
position: absolute;
65+
height: 100%;
66+
width: 100%;
67+
background: conic-gradient(
68+
from var(--deg) at center,
69+
#00c3ff,
70+
#4d0199,
71+
#4d0199,
72+
#00c3ff
73+
);
74+
border-radius: inherit;
75+
z-index: -2;
76+
padding: 4px;
77+
animation: autoRotate 2s linear infinite;
78+
}
79+
80+
/* Glow effect */
81+
.frame::after {
82+
filter: blur(10px);
83+
}
84+
85+
/* Rotation animation */
86+
@keyframes autoRotate {
87+
to {
88+
--deg: 360deg;
89+
}
90+
}

0 commit comments

Comments
 (0)