區塊卡片

今天要練習第四區塊卡片的切版

整理幾個小重點如下方：

1.將section_part2設為滿版
2.添加一個container，做為固定欄寬1200px的區塊
3.排版方式為左文右圖，因此在container設定display: flex讓資料橫排顯示
4.使用align-items: center讓資料可以置中對齊
5.使用justify-content: space-around讓資料可以平均排列每個物件，讓每個物件周圍分配相同的空間
6.將卡片外框設定border，並添加border-radius設定導圓角尺寸
7.由於按鈕的外觀是設定在超連結a上面，而a是inline物件，寬度大小是由內容撐開去決定的，設定尺寸會沒有效果，因此這邊需要添加black的設定，這樣尺寸的設定才會有效果，並且超連結所覆蓋的範圍才是正確的
8.在超連結a添加text-decoration: none的設定，目的是消除一個超連結預設的底線
8.排版方式與之前練習的圖文版面架構是一樣的，比較特別的是添加了外框以及一個陰影效果，讓他有像區塊卡片的樣子
9.需要在卡片的外層加上box-shadow即可添加陰影效果，使用的方式有幾種如下方:

/* 水平距離| 垂直距離 | color */
box-shadow: 60px -16px teal;

/* 水平距離 | 垂直距離 | blur-radius | color */
box-shadow: 10px 5px 5px black;

/* 水平距離 | 垂直距離| blur-radius | spread-radius | color */
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);

/* inset | 水平距離 | offset-y | color */
box-shadow: inset 5em 1em gold;

提供格線圖如下方所示:

可參考程式碼如下方:

HTML

<section class="section_part2">
    <div class="container">
        <div class="txt">
            <h2>小白人的生活 第二彈</h2>
            <p>第二彈的小白人著重在職場生活，常常遇到很多哭笑不得的事情，異想天開的上司，患難見真情的同事，不知道要改幾次的稿件，只想準時下班的小白人，一起來看看吧。</p>
            <div class="btn_more">
                <a href="#">了解更多</a>
            </div>
        </div>
        <div class="pic">
            <img src="https://i.ibb.co/S59kSH9/mini-work.png" alt="mini-work">
        </div>
    </div>
</section>

CSS

.section_part2{
    width: 100%;
    margin:auto;
}
.section_part2 .container{
    width: 1200px;
    margin:auto;
    display: flex;
    align-items: center;
    justify-content: space-around;
    background-color: #ffffff;
    border: 2px solid #FFEBF2;
    border-radius: 15px;
    box-shadow: 2px 3px 5px #edc9d772;
    padding: 20px 0;
}

.section_part2 .txt{
    width: 600px;
}
.section_part2 .pic{
    padding: 20px;
}
.section_part2 img{
    width: 100%;
    vertical-align: bottom;
}
.section_part2 h2{
    font-size: 24px;
}
.section_part2 p{
    margin-top: 30px;
    font-size: 14px;
    line-height: 1.5;
}

.btn_more a{
    font-size: 16px;
    color: #f2f2f2;
    padding: 10px 15px;
    background-color: #f7b1b1;
    border-radius: 30px;
    display: block;
    width: 80px;
    position: relative;
    border: 1px solid #f7b1b1;
    text-decoration: none;
}
.btn_more a::after{
    content: '';
    width: 8px;
    height: 8px;
    display: block;
    background-color: #ffffff;
    border-radius: 8px;
    position: absolute;
    right: 15px;
    top: 15px;
    opacity: 1;
}
.btn_more a:hover{
    background-color: #ffffff;
    color: #f7b1b1;
    transition: .5s;
    border: 1px solid #f7b1b1;
}
.btn_more a:hover::after{
    content: '';
    opacity: 0;

}
.btn_more a:hover::before{
    content: '';
    width: 0;
    height: 0;
    border: 6px solid;
    border-color: transparent transparent transparent #f7b1b1;
    position: absolute;
    right: 9px;
    top: 13px;
}

參考資料
https://developer.mozilla.org/zh-TW/docs/Web/CSS/box-shadow