卡片版面

在這個範例中要練習卡片版面的切版

整理幾個小重點如下方：

1.將section_card設為滿版
2.添加一個container，做為固定欄寬1200px的區塊，並設定display: flex讓資料橫排顯示
3.使用justify-content: space-around讓資料可以平均排列每個物件，讓每個物件周圍分配相同的空間
4.使用align-items: center讓圖片板塊及文字版塊對齊交錯軸線正中間
5. font-size調整文字大小，font-weight調整文字厚度，line-height調整行高，letter-spacing調整文字間距，text-align: center文字置中
6. 消除圖片的預設空白，使用vertical-align屬性設為top(頂部對齊)、middle(垂直居中)、bottom(底部對齊)擇一就可以解決
7.滑鼠游標移至卡片後，裡面的圖片會等比例放大1.5倍，使用transform: scale(1.5)，來製作此效果，scale指的是縮放比例(scale)，根據設定的數值顯示放大或縮小，只設定一個數值時，使用相同的比例縮放，如果設定兩個值，則分別為水平放大或垂直放大，大於1代表放大，小於1代表縮小
8.放大後的圖片會超過卡片的涵蓋範圍，在.item內使用overflow: hidden自動隱藏超出的文字或圖片
9.卡片的背景使用漸層來做，漸層軸為115度，從#FFEBF2開始漸層80%位置，接下來的顏色設為透明background-image: linear-gradient(115deg, #FFEBF2 80%, transparent calc(80% + 1px))
10.滑鼠游標移至卡片後右方的色彩會被延伸以及出現陰影的效果，在.item:hover內添加box-shadow，以及調整漸層的顏色及位置background-image: linear-gradient(115deg, #f7cfdd 90%, transparent calc(90% + 1px))

/ 漸層軸為60度，從粉色漸層到藍色 /
background-image: linear-gradient(角度, 起始色彩, 結束色彩);
background-image: linear-gradient(60deg, pink, blue);

/ 從右下漸層到左上、從粉色漸層到藍色 /
background-image: linear-gradient(方向, 起始色彩, 結束色彩);
background-image: linear-gradient(to left top, pink, blue);

/ 從左下漸層到右上，從紅色開始漸層、到高度30%位置是橘色層開始、最後以藍色結束 /
background-image: linear-gradient(方向, 起始色彩 , 中間色彩 位置結束色彩 結束色彩);
background-image: linear-gradient(to top right, red, orange 30%, blue);

/ 漸層軸為90度，從粉色開始漸層50%位置，到藍色漸層50%位置結束 /
background-image: linear-gradient(角度, 起始色彩 起始色彩位置, 結束色彩 結束色彩位置);
background-image: linear-gradient(60deg, pink 50%, blue 50%);

想直接看效果可以點擊連結>>>https://codepen.io/ocqyfixe/pen/ExLXgbP

HTML

<section class="section_card">
    <div class="container">
        <div class="item">
            <div class="text">
                <h2>Premium | 小白人早睡早起</h2>
                <p>可愛的小白人，進入你的日常生活</p>
            </div>
            <div class="pic">
                <img src="https://i.ibb.co/Ltb72Mf/mini-sleep.png" alt="">
            </div>                
        </div>
        <div class="item">
            <div class="text">
                <h2>Premium | 小白人無言薯條</h2>
                <p>可愛的小白人，進入你的日常生活</p>
            </div>
            <div class="pic">
                <img src="https://i.ibb.co/J5WCmrG/mini-speechless.png" alt="">
            </div>                
        </div>
        <div class="item">
            <div class="text">
                <h2>Premium | 小白人懷疑人生</h2>
                <p>可愛的小白人，進入你的日常生活</p>
            </div>
            <div class="pic">
                <img src="https://i.ibb.co/hH1TYqk/mini-confuse.png" alt="">
            </div>                
        </div>
    </div>
</section>

CSS

.section_card{
    width: 100%;
    margin: auto;
}
.container{
    width: 1200px;
    margin: auto;   
}
.item{
    width: 1200px;
    margin: 50px auto;
    background-image: linear-gradient(115deg, #FFEBF2 80%, transparent calc(80% + 1px));
    display: flex;
    justify-content: center;
    overflow: hidden;
    align-items: center;
    
}
.text{
    width: 500px;
    color: #333333;
}
h2{
    font-size: 28px;
}
p{
    font-size: 20px;
}
.pic{
    width: 150px;
}
img{
    width: 100%;
    aspect-ratio: 150/200;
    vertical-align: middle;
}
.item:hover{
    background-image: linear-gradient(115deg, #f7cfdd 90%, transparent calc(90% + 1px));
    box-shadow:-30px -10px 5px -10px rgba(173, 163, 163, 0.4);
    transition: .3s;
}
.item:hover .pic{
    transform: scale(1.5);
    transition: .5s;
}

參考資料:https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/linear-gradient