模仿推特卡片效果(附源码)

玄之 · 发表于 2025-1-3 22:37:20

[H1]图片预览[/H1]

[H2]源码html[/H2]

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <section>
        <div class="card green">
            <div class="card-header">
                <div class="date">
                    Feb 2, 2021
                </div>
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-6">
                    <path fill-rule="evenodd"
                        d="M10.5 6a1.5 1.5 0 1 1 3 0 1.5 1.5 0 0 1-3 0Zm0 6a1.5 1.5 0 1 1 3 0 1.5 1.5 0 0 1-3 0Zm0 6a1.5 1.5 0"
                        clip-rule="evenodd" />
                </svg>
            </div>
            <div class="card-body">
                <h3>web designing</h3>
                <p>Prototyping</p>
                <div class="progress">
                    <span>Progress</span>
                    <div class="progress-bar"></div>
                    <span>90%</span>
                </div>
            </div>
            <div class="card-footer">
                <ul>
                    <li> <img
                            src="https://images.pexels.com/photos/415829/pexels-photo-415829.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
                            alt=""></li>
                    <li> <img
                            src="https://images.pexels.com/photos/1043474/pexels-photo-1043474.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
                            alt=""></li>
                    <a href="#" class="btn-add"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
                            fill="currentColor" class="size-6">
                            <path fill-rule="evenodd"
                                d="M12 3.75a.75.75 0 0 1 .75.75v6.75h6.75a.75.75 0 0 1 0 1.5h-6.75v6.75a.75.75 0 0 1-1.5 0v-6.75H4.5a.75.75 0 0 1 0-1.5h6.75V4.5a.75.75 0 0 1 .75-.75Z"
                                clip-rule="evenodd" />
                        </svg>
                    </a>
                </ul>

                <a href="#" class="btn-countdown">2 days left</a>
            </div>
        </div>
        <div class="card orange">
            <div class="card-header">
                <div class="date">
                    Feb 05, 2021
                </div>
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-6">
                    <path fill-rule="evenodd"
                        d="M10.5 6a1.5 1.5 0 1 1 3 0 1.5 1.5 0 0 1-3 0Zm0 6a1.5 1.5 0 1 1 3 0 1.5 1.5 0 0 1-3 0Zm0 6a1.5 1.5 0"
                        clip-rule="evenodd" />
                </svg>
            </div>
            <div class="card-body">
                <h3>mobile app</h3>
                <p>Shopping</p>
                <div class="progress">
                    <span>Progress</span>
                    <div class="progress-bar"></div>
                    <span>30%</span>
                </div>
            </div>
            <div class="card-footer">
                <ul>
                    <li> <img
                            src="https://images.pexels.com/photos/614810/pexels-photo-614810.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
                            alt=""></li>
                    <li> <img
                            src="https://images.pexels.com/photos/874158/pexels-photo-874158.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
                            alt=""></li>
                    <a href="#" class="btn-add"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
                            fill="currentColor" class="size-6">
                            <path fill-rule="evenodd"
                                d="M12 3.75a.75.75 0 0 1 .75.75v6.75h6.75a.75.75 0 0 1 0 1.5h-6.75v6.75a.75.75 0 0 1-1.5 0v-6.75H4.5a.75.75 0 0 1 0-1.5h6.75V4.5a.75.75 0 0 1 .75-.75Z"
                                clip-rule="evenodd" />
                        </svg>
                    </a>
                </ul>

                <a href="#" class="btn-countdown">3 weeks left</a>
            </div>
        </div>
        <div class="card red">
            <div class="card-header">
                <div class="date">
                    March 03, 2021
                </div>
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-6">
                    <path fill-rule="evenodd"
                        d="M10.5 6a1.5 1.5 0 1 1 3 0 1.5 1.5 0 0 1-3 0Zm0 6a1.5 1.5 0 1 1 3 0 1.5 1.5 0 0 1-3 0Zm0 6a1.5 1.5 0"
                        clip-rule="evenodd" />
                </svg>
            </div>
            <div class="card-body">
                <h3>dashboard</h3>
                <p>Medical</p>
                <div class="progress">
                    <span>Progress</span>
                    <div class="progress-bar"></div>
                    <span>50%</span>
                </div>
            </div>
            <div class="card-footer">
                <ul>
                    <li> <img
                            src="https://images.pexels.com/photos/91227/pexels-photo-91227.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
                            alt=""></li>
                    <li> <img
                            src="https://images.pexels.com/photos/733872/pexels-photo-733872.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
                            alt=""></li>
                    <a href="#" class="btn-add"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
                            fill="currentColor" class="size-6">
                            <path fill-rule="evenodd"
                                d="M12 3.75a.75.75 0 0 1 .75.75v6.75h6.75a.75.75 0 0 1 0 1.5h-6.75v6.75a.75.75 0 0 1-1.5 0v-6.75H4.5a.75.75 0 0 1 0-1.5h6.75V4.5a.75.75 0 0 1 .75-.75Z"
                                clip-rule="evenodd" />
                        </svg>
                    </a>
                </ul>

                <a href="#" class="btn-countdown">3 weeks left</a>
            </div>
        </div>
        <div class="card blue">
            <div class="card-header">
                <div class="date">
                    March 08, 2021
                </div>
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-6">
                    <path fill-rule="evenodd"
                        d="M10.5 6a1.5 1.5 0 1 1 3 0 1.5 1.5 0 0 1-3 0Zm0 6a1.5 1.5 0 1 1 3 0 1.5 1.5 0 0 1-3 0Zm0 6a1.5 1.5 0"
                        clip-rule="evenodd" />
                </svg>
            </div>
            <div class="card-body">
                <h3>web designing</h3>
                <p>Wireframing</p>
                <div class="progress">
                    <span>Progress</span>
                    <div class="progress-bar"></div>
                    <span>20%</span>
                </div>
            </div>
            <div class="card-footer">
                <ul>
                    <li> <img
                            src="https://images.pexels.com/photos/2379005/pexels-photo-2379005.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
                            alt="Erik Longman"></li>
                    <li> <img
                            src="https://images.pexels.com/photos/1036623/pexels-photo-1036623.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
                            alt="Jane Doe"></li>
                    <a href="#" class="btn-add"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
                            fill="currentColor" class="size-6">
                            <path fill-rule="evenodd"
                                d="M12 3.75a.75.75 0 0 1 .75.75v6.75h6.75a.75.75 0 0 1 0 1.5h-6.75v6.75a.75.75 0 0 1-1.5 0v-6.75H4.5a.75.75 0 0 1 0-1.5h6.75V4.5a.75.75 0 0 1 .75-.75Z"
                                clip-rule="evenodd" />
                        </svg>
                    </a>
                </ul>

                <a href="#" class="btn-countdown">3 weeks left</a>
            </div>
        </div>
    </section>
</body>

</html>

[网站源码] 模仿推特卡片效果(附源码)

免责声明

相关帖子

回复

最佳新人

荣誉管理

灌水之王

宣传达人

2025蛇年限定

活跃会员

突出贡献

关于我们

热门板块

jiubbs2025@163.com