卡片版面1

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

整理幾個小重點如下方：

1.將section設為滿版
2.添加一個container，做為固定欄寬1200px的區塊，並設定display: flex讓資料橫排顯示
3.將item寬度設為400px，剛好平均分配三個卡片寬度
4.每個卡片的背景顏色要不一樣，需要分開設定每一塊地色票，這時候可以使用:nth-child()，括號內填入項目的順序即可完成指定，就可以在不改變HTML結構下分別修改好效果
5.:hover後的效果也是要一同設定，在摸到item後才改變顏色，如果我們是要改變第一個item的顏色，css寫法為.item:nth-child(1):hover
6. font-size調整文字大小，font-weight調整文字厚度
7.line-height調整行高，letter-spacing調整文字間距
8.icon的部分可以使用Font Awesome來製作，使用方式可以觀看這一篇 [DAY15]網頁切版入門及版面實作_ Font Awesome

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

HTML

<section>
    <div class="container">
        <div class="item">
            <i class="fa-solid fa-desktop"></i>
            <h2>第一塊</h2>
            <p>第一塊的文字第一塊的文字第一塊的文字第一塊的文字第一塊的文字第一塊的文字第一塊的文字第一塊的文字</p>
        </div>
        <div class="item">
            <i class="fa-solid fa-table"></i>     
            <h2>第二塊</h2>
            <p>第二快的文字第二快的文字第二快的文字第二快的文字第二快的文字</p>
        </div>
        <div class="item">
            <i class="fa-solid fa-rocket"></i>        
            <h2>第三塊</h2>
            <p>第三塊的文字第三塊的文字第三塊的文字第三塊的文字第三塊的文字第三塊的文字</p>
        </div>
    </div>
</section>

CSS

section{
    width: 100%;
    margin: auto;
}
.container{
    width: 1200px;
    margin: auto;
    padding: 80px 100px;
    background-color:#f7b1b1;;
    display: flex;
    color: #ffffff;
}
.item{
    width: 400px;
    padding: 60px;
}
.item i {
    font-size: 40px;
    margin-bottom: 20px;
}
.item h2{
    font-size: 20px;
    font-weight: 400;
    line-height: 2;
    letter-spacing: 3px;
}
.item p{
    font-size: 14px;
    font-weight: 100;
    line-height: 2;
    letter-spacing: 1.5px;
}
.container .item:nth-child(1){
    background-color: #f3c1c5;
}
.container .item:nth-child(2){
    background-color: #f8c1c9;
}
.container .item:nth-child(3){
    background-color: #e6b1b8;
}
.container .item:nth-child(1):hover{
    background-color: #dfa4a9;
    transition: .3s;
}
.container .item:nth-child(2):hover{
    background-color: #e4a4ad;
    transition: .3s;
}
.container .item:nth-child(3):hover{
    background-color: #cc9595;
    transition: .3s;
}