F2E合作社|人員介紹卡片|網頁切版


Posted by itiswonderfall on 2021-11-24

CSS

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100;300;400;500;700;900&display=swap" rel="stylesheet">
<style>
    * {
        margin: 0;
        padding: 0;
        list-style: none;
        font-family: 'Noto Sans TC', sans-serif;
    }
    html, body {
        height: 100%;
    }
    body {
        display: flex;
        align-content: center;
        background-color: #003;
    }
    .wrap {
        width: 1200px;
        display: flex;
        margin: auto;
    }
    .item {
        width: 370px;
        margin: 15px;
        text-align: center;
        background-color: #fff;
        border: 1px solid #ccc;
        transform: translateY(0px);
        transition: .5s;
    }
    .item img {
        width: 100%;
        vertical-align: middle;
    }
    .item h2 {
        border-bottom: 1px solid #888;
        padding-bottom: .3em;
        margin-bottom: .4em;
        font-weight: 900;
        transition: .25s;
    }
    .item p {
        line-height: 1.6;
        font-weight: 300;
        transition: .25s;
    }
    .item .txt {
        padding: 20px;
        position: relative;
    }
    .item .txt::before {
        content: '';
        width: 0;
        height: 0;
        position: absolute;
        top: 0;
        left: 0;
        border-top: 50px solid transparent;
        border-left: 184px solid #fff;
        border-right: 184px solid #fff;
        transform: translateY(-100%);
    }
    .item:hover {
        transform: translateY(-50px);
    }
    .item:hover .txt {
        background-image: linear-gradient(0deg, #fb8076, #feb85d);
    }
    .item:hover .txt::before {
        border-left: 184px solid #feb85d;
        border-right: 184px solid #feb85d;
    }
    .item:hover h2 {
        color: #fff;
        border-bottom-color: #fff;
    }
    .item:hover p {
        color: #fff;
    }
</style>

HTML

<div class="wrap">
    <div class="item">
        <img src="https://picsum.photos/300/300?ramdom=10">
        <div class="txt">
            <h2>校長</h2>
            <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Saepe ipsum ad consectetur dolorem dolores voluptatem odio provident, labore? Nobis, quibusdam. Cum, necessitatibus eos sit sunt doloribus. Natus praesentium beatae odit.</p>
        </div>
    </div>
    <div class="item">
        <img src="https://picsum.photos/300/300?ramdom=20">
        <div class="txt">
            <h2>主任</h2>
            <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Saepe ipsum ad consectetur dolorem dolores voluptatem odio provident, labore? Nobis, quibusdam. Cum, necessitatibus eos sit sunt doloribus. Natus praesentium beatae odit.</p>
        </div>
    </div>
    <div class="item">
        <img src="https://picsum.photos/300/300?ramdom=30">
        <div class="txt">
            <h2>老師</h2>
            <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Saepe ipsum ad consectetur dolorem dolores voluptatem odio provident, labore? Nobis, quibusdam. Cum, necessitatibus eos sit sunt doloribus. Natus praesentium beatae odit.</p>
        </div>
    </div>
</div>

最後奉上 CSScoke 的影片教學

 


 

資料來源

金魚都能懂的網頁切版 : 人員介紹卡片 NO003 | 切版教學 | HTML教學 | 網頁教學 | 網頁切版


#f2e #F2E合作社 #網頁切版 #人員介紹卡片







Related Posts

調用棧(Call Stack)

調用棧(Call Stack)

Vite系列# 部署 Vite 專案至 GitHub Pages

Vite系列# 部署 Vite 專案至 GitHub Pages

放圖片的方法, 定位

放圖片的方法, 定位


Comments