HTML5/CSS3众筹信息卡片界面设计

Crowdfunding Campaign Card

css3, card, template

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 1520
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

* {
    box-sizing: border-box;
}
body {
    font-family: "Montserrat", sans-serif;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    min-height: 100vh;
    background: linear-gradient(45deg, #60c5ba, #0089b3);
}
.card {
    width: 480px;
    box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.35);
    background: white;
    margin: 10px;
}
.card .funding {
    padding: 40px 20px;
    background: #004e66;
    color: white;
}
.card .funding p.raised {
    margin: 0;
    font-weight: 700;
}
.card .funding p.raised span {
    font-weight: 400;
    font-size: 12.5px;
}
.card .funding .funding-bar {
    width: 100%;
    height: 40px;
    background: #006280;
    border-radius: 5px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    overflow: hidden;
    margin-bottom: 20px;
}
.card .funding .funding-bar .inner-bar {
    background: #EFDC05;
    height: 40px;
    display: flex;
    align-items: center;
    padding: 0 20px;
}
.card .funding .funding-bar .inner-bar p {
    font-weight: 700;
}
.card .funding .funding-bar .inner-bar.funded {
    background: #60c5ba;
}
.card .thumbnail {
    width: 100%;
    max-width: 100%;
    box-shadow: 0px 1px 10px rgba(96, 197, 186, 0.75);
    position: relative;
}
.card .thumbnail img {
    width: 100%;
}
.card .thumbnail .play {
    width: 50px;
    height: 50px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
    border-radius: 50px;
    border: 2px solid white;
    color: white;
    transition: 0.15s ease-in-out;
    cursor: pointer;
}
.card .thumbnail .play:hover {
    color: #bde7e3;
    border-color: #bde7e3;
}
.card .btn {
    padding: 20px 40px;
    width: 100%;
    text-align: center;
    display: inline-block;
    background: #60c5ba;
    color: white;
    text-decoration: none;
    border-radius: 5px;
    box-shadow: 1px 1px 0px 1px #3a9f94;
    transition: 0.15s ease-in-out;
}
.card .btn:hover {
    transform: translate(1px, 1px);
}
.card .info {
    padding: 40px 20px;
}
.card .info .title {
    margin: 0;
}
.card .info .desc {
    position: relative;
    width: 100%;
    max-height: 75px;
    overflow: hidden;
    color: #999;
}
.card .info .desc:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.35), white);
}

HTML

<div class='card'>
    <div class='thumbnail'>
        <img src='https://ksr-ugc.imgix.net/assets/011/400/691/6f16b49b73b5df4e2ab3dcb747313f0e_original.jpg?w=1536&h=864&fit=fill&bg=FFFFFF&v=1463682143&auto=format&q=92&s=2d34c2958c1fd305a9a79760841a5ded' />
        <div class='play'>
            <i class="fa fa-play" aria-hidden="true"></i>
        </div>
    </div>
    <div class='info'>
        <h1 class='title'>Oculus Rift: Step Into the Game</h1>
        <div class='desc'>
            <p>Step inside your favorite game.</p>
            <p>Oculus Rift is a new virtual reality (VR) headset designed specifically for video games that will change the way you think about gaming forever. With an incredibly wide field of view, high resolution display, and ultra-low latency head tracking,
                the Rift provides a truly immersive experience that allows you to step inside your favorite game and explore new worlds like never before.
            </p>
        </div>
        <a href="#" class='btn'>Learn More</a>
    </div>
    <div class='funding'>
        <div class='funding-bar'>
            <div class='inner-bar funded' style='width: 100%'>
                <p>974% funded</p>
            </div>
        </div>
        <p class='raised'>$2,437,429 Plegded
            <br /><span>out of $250,000 goal</span>
        </p>
    </div>
</div>

Crowdfunding Campaign Card

css3, card, template

编辑器支持Emmet

快捷键

Crowdfunding Campaign Card

css3, card, template

HTML5/CSS3音乐会门票购买卡片界面模板

HTML5 CSS3树状（树形）评论列表界面设计

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：