Skip to content

Commit 243abd9

Browse files
Kaif-AzmiLaurelineP
Kaif-Azmi
and
LaurelineP
authored
Added a card flipping interactive animation (#2848)
Co-authored-by: Laureline Paris <32878345+LaurelineP@users.noreply.github.com>
1 parent d4ea4e7 commit 243abd9

File tree

3 files changed

+114
-0
lines changed

3 files changed

+114
-0
lines changed

‎Art/Kaif-Azmi-Animation-Done/index.html

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
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>Enhanced Flipping Card with Circles</title>
7+
<link rel="stylesheet" href="styles.css">
8+
</head>
9+
<body>
10+
<div class="card">
11+
<div class="card-inner">
12+
<div class="card-front">
13+
<div class="circles">
14+
<div class="circle"></div>
15+
<div class="circle"></div>
16+
<div class="circle"></div>
17+
<div class="circle"></div>
18+
</div>
19+
</div>
20+
<div class="card-back">
21+
<h2>Description</h2>
22+
<p>We can add descriptions to the circles on the front side, creating an interactive card. This can also be modified so that clicking on a circle reveals the description for that specific content, enhancing interactivity and engagement.</p>
23+
</div>
24+
</div>
25+
</div>
26+
</body>
27+
</html>

‎Art/Kaif-Azmi-Animation-Done/meta.json

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
{
2+
"githubHandle": "Kaif-Azmi",
3+
"artName": "Card Animation"
4+
}

‎Art/Kaif-Azmi-Animation-Done/styles.css

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
5+
}
6+
7+
body {
8+
display: flex;
9+
justify-content: center;
10+
align-items: center;
11+
height: 100vh;
12+
background-color: #f0f0f0;
13+
font-family: Arial, sans-serif;
14+
}
15+
16+
.card {
17+
perspective: 1000px;
18+
}
19+
20+
.card-inner {
21+
width: 450px;
22+
height: 250px;
23+
position: relative;
24+
transform-style: preserve-3d;
25+
transition: transform 0.6s;
26+
}
27+
28+
.card:hover .card-inner {
29+
transform: rotateY(180deg);
30+
}
31+
32+
.card-front, .card-back {
33+
position: absolute;
34+
width: 100%;
35+
height: 100%;
36+
backface-visibility: hidden;
37+
display: flex;
38+
align-items: center;
39+
justify-content: center;
40+
color: #fff;
41+
border-radius: 8px;
42+
text-align: center;
43+
}
44+
45+
.card-front {
46+
background-color: #007bff;
47+
}
48+
49+
.card-back {
50+
background-color: #28a745;
51+
transform: rotateY(180deg);
52+
padding: 20px;
53+
}
54+
55+
.circles {
56+
display: grid;
57+
grid-template-columns: repeat(2, 50px);
58+
grid-gap: 40px;
59+
}
60+
61+
.circle {
62+
width: 50px;
63+
height: 50px;
64+
background-color: rgba(255, 255, 255, 0.3);
65+
border-radius: 50%;
66+
transition: transform 0.6s ease;
67+
}
68+
69+
.card:hover .circle {
70+
transform: scale(1.2);
71+
}
72+
73+
h2 {
74+
font-size: 1.5rem;
75+
margin-bottom: 10px;
76+
}
77+
78+
p {
79+
font-size: 1rem;
80+
line-height: 1.5;
81+
text-align: start;
82+
padding-left: 20px;
83+
}

0 commit comments

Comments
 (0)