Skip to content

Commit b79eb6f

Browse files
DEmosusLaurelineP
DEmosus
and
LaurelineP
authored
Added Cozy Latte Art animation (#3175)
* Add my animation contribution * Fix heart animation alignment add natural steam drift * Fix: Removed :hover on joke --------- Co-authored-by: Laureline Paris <[email protected]>
1 parent 12572c3 commit b79eb6f

File tree

3 files changed

+286
-0
lines changed

3 files changed

+286
-0
lines changed

‎Art/DEmosus-Latte-Art/index.html‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
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+
<title>Cozy Latte Art</title>
7+
<link rel="stylesheet" href="styles.css" />
8+
</head>
9+
<body>
10+
<h1 class="title">Cozy Latte Art</h1>
11+
12+
<div class="cup-wrap">
13+
<div class="cup">
14+
<div class="heart-wrap">
15+
<div class="heart"></div>
16+
</div>
17+
<div class="steam steam1"></div>
18+
<div class="steam steam2"></div>
19+
<div class="steam steam3"></div>
20+
</div>
21+
<div class="handle"></div>
22+
</div>
23+
24+
<p class="joke">
25+
AI won’t replace you… <br />
26+
but <code>git push --force</code> just might 😉
27+
</p>
28+
</body>
29+
</html>

‎Art/DEmosus-Latte-Art/meta.json‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
{
2+
"artName": "Latte-Art",
3+
"githubHandle": "DEmosus"
4+
}

‎Art/DEmosus-Latte-Art/styles.css‎

Lines changed: 253 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,253 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
5+
}
6+
7+
body {
8+
display: flex;
9+
flex-direction: column;
10+
justify-content: center;
11+
align-items: center;
12+
min-height: 100vh;
13+
background: linear-gradient(135deg, #3e2723 0%, #6d4c41 100%);
14+
color: #f8fafc;
15+
font-family: "Courier New", monospace;
16+
overflow: hidden;
17+
}
18+
19+
/* Title styling */
20+
.title {
21+
font-size: 2.5rem;
22+
color: #f8e1d9;
23+
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
24+
margin-bottom: 20px;
25+
animation: fadeIn 1.5s ease-in-out;
26+
}
27+
28+
.cup-wrap {
29+
position: relative;
30+
width: 280px;
31+
height: 280px;
32+
margin-bottom: 30px;
33+
}
34+
35+
/* Cup styling */
36+
.cup {
37+
width: 280px;
38+
height: 280px;
39+
border-radius: 50%;
40+
background: #d7ccc8;
41+
display: flex;
42+
justify-content: center;
43+
align-items: center;
44+
position: absolute;
45+
left: 0;
46+
top: 0;
47+
overflow: hidden;
48+
box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.4), 0 8px 16px rgba(0, 0, 0, 0.3);
49+
border: 5px solid #fff3e0;
50+
z-index: 2;
51+
}
52+
53+
/* Handle styling */
54+
.handle {
55+
position: absolute;
56+
width: 120px;
57+
height: 120px;
58+
border: 12px solid #fff3e0;
59+
border-left: none;
60+
border-radius: 50%;
61+
right: -70px;
62+
top: 50%;
63+
transform: translateY(-50%);
64+
background: transparent;
65+
box-shadow: inset -4px -4px 8px rgba(0, 0, 0, 0.15),
66+
4px 4px 8px rgba(0, 0, 0, 0.2);
67+
z-index: 1;
68+
}
69+
70+
.heart-wrap {
71+
display: inline-block;
72+
animation: beatWobble 2.5s infinite ease-in-out;
73+
}
74+
75+
/* Heart styling */
76+
.heart {
77+
position: relative;
78+
width: 110px;
79+
height: 100px;
80+
background: #fff;
81+
transform: rotate(-45deg);
82+
z-index: 1;
83+
}
84+
85+
.heart::before,
86+
.heart::after {
87+
content: "";
88+
position: absolute;
89+
width: 110px;
90+
height: 100px;
91+
background: #fff;
92+
border-radius: 50%;
93+
}
94+
95+
.heart::before {
96+
top: -55px;
97+
left: 0;
98+
}
99+
.heart::after {
100+
left: 55px;
101+
top: 0;
102+
}
103+
104+
/* Steam effect */
105+
.steam {
106+
position: absolute;
107+
width: 20px;
108+
height: 20px;
109+
background: rgba(255, 255, 255, 0.3);
110+
border-radius: 50%;
111+
animation: rise 3s infinite ease-in-out;
112+
z-index: 3; /* above cup */
113+
}
114+
115+
/* steam positions relative to cup */
116+
.steam1 {
117+
left: 30%;
118+
animation-delay: 0s;
119+
animation-duration: 3.5s;
120+
}
121+
122+
.steam2 {
123+
left: 50%;
124+
animation-delay: 1s;
125+
animation-duration: 4s;
126+
}
127+
128+
.steam3 {
129+
left: 70%;
130+
animation-delay: 2s;
131+
animation-duration: 3s;
132+
}
133+
134+
/* Animations */
135+
@keyframes beatWobble {
136+
0%,
137+
100% {
138+
transform: scale(1) translate(0, 0);
139+
}
140+
20% {
141+
transform: scale(1.15) translate(0, -2px);
142+
}
143+
40% {
144+
transform: scale(0.9) translate(0, 2px);
145+
}
146+
60% {
147+
transform: scale(1.1) translate(0, -1px);
148+
}
149+
80% {
150+
transform: scale(1.05) translate(0, 1px);
151+
}
152+
}
153+
154+
@keyframes rise {
155+
0% {
156+
transform: translate(0, 0) scale(1);
157+
opacity: 0.3;
158+
}
159+
25% {
160+
transform: translate(-10px, -25px) scale(1.1);
161+
opacity: 0.25;
162+
}
163+
50% {
164+
transform: translate(10px, -50px) scale(1.2);
165+
opacity: 0.2;
166+
}
167+
75% {
168+
transform: translate(-5px, -75px) scale(1.35);
169+
opacity: 0.15;
170+
}
171+
100% {
172+
transform: translate(5px, -100px) scale(1.5);
173+
opacity: 0;
174+
}
175+
}
176+
177+
178+
@keyframes fadeIn {
179+
0% {
180+
opacity: 0;
181+
transform: translateY(-20px);
182+
}
183+
100% {
184+
opacity: 1;
185+
transform: translateY(0);
186+
}
187+
}
188+
189+
/* Joke styling */
190+
.joke {
191+
font-size: 1.1rem;
192+
text-align: center;
193+
color: #f1f5f9;
194+
background: rgba(30, 41, 59, 0.7);
195+
padding: 15px 25px;
196+
border-radius: 8px;
197+
transition: transform 0.3s ease, box-shadow 0.3s ease;
198+
}
199+
200+
.joke code {
201+
background: #1e293b;
202+
padding: 3px 6px;
203+
border-radius: 4px;
204+
color: #38bdf8;
205+
font-weight: bold;
206+
}
207+
208+
/* Responsive design */
209+
@media (max-width: 480px) {
210+
.title {
211+
font-size: 1.8rem;
212+
}
213+
214+
.cup-wrap {
215+
width: 220px;
216+
height: 220px;
217+
}
218+
219+
.cup {
220+
width: 220px;
221+
height: 220px;
222+
}
223+
224+
.handle {
225+
width: 90px;
226+
height: 90px;
227+
right: -55px;
228+
border-width: 10px;
229+
}
230+
231+
.heart {
232+
width: 90px;
233+
height: 80px;
234+
}
235+
236+
.heart::before,
237+
.heart::after {
238+
width: 90px;
239+
height: 80px;
240+
}
241+
242+
.heart::before {
243+
top: -45px;
244+
}
245+
.heart::after {
246+
left: 45px;
247+
}
248+
249+
.joke {
250+
font-size: 0.9rem;
251+
padding: 10px 15px;
252+
}
253+
}

0 commit comments

Comments
 (0)