1
2<div class="feedback-card animate">
3  <img src="https://i.pravatar.cc/60?img=3" alt="Avatar" class="avatar">
4  <div class="stars">★★★★☆</div>
5  <div class="author-name">John Doe</div>
6  <div class="author-title">Senior Developer</div>
7  <p class="feedback-text">This product exceeded my expectations. The team was very responsive and delivered high-quality work.</p>
8</div>
9

1
2.feedback-card {
3  background-color: #ffffff;
4  color: #333333;
5  border-radius: 8px;
6  padding: 20px;
7  font-size: 16px;
8  max-width: 400px;
9  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
10  transition: all 0.3s ease;
11}
12
13.feedback-card:hover {
14  transform: translateY(-5px);
15  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
16}
17
18.feedback-card .avatar {
19  width: 60px;
20  height: 60px;
21  border-radius: 50%;
22  margin-bottom: 10px;
23}
24
25.feedback-card .stars {
26  color: #ffd700;
27  font-size: 1.2em;
28  margin-bottom: 5px;
29}
30
31.feedback-card .author-name {
32  font-weight: bold;
33  margin-bottom: 2px;
34}
35
36.feedback-card .author-title {
37  font-size: 0.9em;
38  opacity: 0.7;
39  margin-bottom: 10px;
40}
41
42.feedback-card .feedback-text {
43  line-height: 1.6;
44  font-style: italic;
45}
46
47@keyframes fadeIn {
48  from { opacity: 0; }
49  to { opacity: 1; }
50}
51
52@keyframes slideIn {
53  from { transform: translateY(20px); opacity: 0; }
54  to { transform: translateY(0); opacity: 1; }
55}
56
57@keyframes scaleIn {
58  from { transform: scale(0.9); opacity: 0; }
59  to { transform: scale(1); opacity: 1; }
60}
61
62.feedback-card.animate {
63  animation: fadeIn 0.5s forwards;
64}
65