F2E合作社｜交錯漂浮版

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;
    }
    body {
        padding: 100px 0;
        background: linear-gradient(20deg, #3d5493, #1aa2a0) fixed center center / 100% 100%;
    }
    .wrap {
        width: 1200px;
        margin: auto;
    }
    .item {
        display: flex;
        align-items: center;
        margin-bottom: 70px;
        font-family: 'Noto Sans TC', sans-serif;
    }
    .item h2 {
        font-weight: 900;
    }
    .item p {font-weight: 500;}
    .item .pic {
        width: 55%;
        flex-shrink: 0;
    }
    .item .pic img {
        width: 100%;
        vertical-align: middle;
    }
    .item .txt {
        width: 55%;
        flex-shrink: 0;
        padding: 50px 30px;
        box-sizing: border-box;
        position: relative;
        z-index: 1;
    }
    .item > :first-child {
        margin-right: -10%;
    }
    .item:nth-child(1) .txt {
        background-color: rgba(240, 174, 193, .8);
    }
    .item:nth-child(2) .txt {
        background-color: rgba(42, 253, 208, .8);
    }
</style>

HTML

<div class="wrap">
    <div class="item">
        <div class="pic">
            <img src="https://picsum.photos/600/350?ramdom=10">
        </div>
        <div class="txt">
            <h2>Item 1</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">
        <div class="txt">
            <h2>Item 2</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 class="pic">
            <img src="https://picsum.photos/600/350?ramdom=20">
        </div>
    </div>
</div>

最後奉上 CSScoke 的影片教學