【设计+切版30天实作】｜Day23 - Pros区块 - 看似无边框的三栏式卡片，到底要对准哪条栏位？

前面完成了小广告区块，今天来完成「平台好处 - pros」的区块。

数据收集

card标题的样式

• Font-weight：Bold
• Font-size：24px
• Text-color：$Primary

card内文的样式

• Font-weight：Regular
• Font-size：16px
• Text-color：$Text

card的margin

• margin-y：96px
• margin-left：125（代表在container里面）

card img的margin-bottom：16px

card标题的margin-bottom：16px

整体分析

在设计的时候，由於要在12栏里做3个卡片，所以理所当然的，每个卡片则是占据4栏。而设计时，通常会先用一个border框好框架，待卡片里所有东西都排好位置後，再把border隐藏掉。因此在切版时，每个卡片就会占4栏（col-4）唷！

（如下图，会有一个border来辅助设计 :D）

步骤

先开一个新区块

1. 开啓<section> ，命名为pros
2. 在section的class同时加入mt-10
3. 在後方插入背景img

<section class="pros" style="background-image: url(style/PHOTO/bg_pros.png);">
</section>

新增_pros.scss的客制scss，用於设定背景图

1. 在style的资料夹里新增_pros.scss ，并去新增客制化的css

   由於中间内容区块是水平排列的，所以这边要记得下flex 喔！

   .pros{
     background-size: cover;
     background-repeat: no-repeat;
     padding: 96px 125px;
     display: flex;
   }
   

2. 去all.scss ，importpros ，不然会读不到喔！

新增pros的卡片

1. 回到html，新增一个container、row及col

2. 每一个卡片各占col-4

3. 由於col-4里面的东西是置中，因此要加入置中的设定 → justift-content-center align-items-center

4. 在col里面新增pros里的内容物：img、标题、内容

   <div class="container">
     <div class="row">
       <div class="col-4 d-flex flex-column justift-content-center align-items-center">
         <img class="mb-5" src="style/PHOTO/img_pros_weightlifter.png" alt="">
         <h4 class="text-primary mb-5">配对合适的学员及场地！</h4>
         <p>透过GYMATE，您可以於平台自行筛选符合条件的学员，并共同选择训练之健身场地，时间、地点、收费，完全掌握在您手中，让您轻松享受教学的乐趣！</p>
       </div>
     </div>
   </div>
   

把另外两个卡片也一同新增就完成了 ?

登登登登，Pros的区块就完成啦！明天继续来做下一个区块吧 (๑´ㅂ`๑)