card_ui/index.html at main · magicmarc/card_ui · GitHub

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Testimonial Cards with Avatars</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="card-container">
        <!-- 第一张卡片 -->
        <div class="card light">
            <div class="stars">★★★★★</div>
            <div class="card-header">
                <img src="images/profile1.jpg" alt="Bobby Jennings" class="avatar">
                <div>
                    <h3>Bobby Jennings</h3>
                    <p>Founder & CEO, <a href="#">Sketch App</a></p>
                </div>
            </div>
            <p class="content">
                All users on MySpace will know that there are millions of people out there. Every day besides so many people joining this community, there are many others who will be looking out for friends.
            </p>
        </div>
        <!-- 第二张卡片 -->
        <div class="card dark">
            <div class="stars">★★★★☆</div>
            <div class="card-header">
                <img src="images/profile2.jpg" alt="Donald Bridges" class="avatar">
                <div>
                    <h3>Donald Bridges</h3>
                    <p>Founder & CEO, <a href="#">Adobe</a></p>
                </div>
            </div>
            <p class="content">
                This platform has been a game-changer for our team. It’s intuitive, efficient, and has greatly improved our productivity. Highly recommended!
            </p>
        </div>
        <!-- 第三张卡片 -->
        <div class="card light">
            <div class="stars">★★★☆☆</div>
            <div class="card-header">
                <img src="images/profile3.jpg" alt="Alex Carter" class="avatar">
                <div>
                    <h3>Alex Carter</h3>
                    <p>Product Manager, <a href="#">TechX</a></p>
                </div>
            </div>
            <p class="content">
                The beauty of this community is that it connects people from all walks of life. It’s an opportunity to find friendships, partnerships, and support like never before.
            </p>
        </div>
    </div>
</body>
</html>