【设计+切版30天实作】｜Day24 - Steps区块 - 如何做出渐层背景？

前面完成了「Pros」区块，今天来完成「Steps」的区块。

数据收集

标题的样式

• Font-weight：Medium
• Font-size：24px
• Text-color：Secondary

副标Step的样式

• Font-weight：Bold
• Font-size：48px
• Text-color：Secondary,40% → RGB(255,255,255,0.4)

Step小标的样式

• Font-weight：Bold
• Font-size：16px
• Text-color：Secondary

内文的样式

• Font-weight：Normal
• Font-size：16px
• Text-color：Secondary

Background-color：渐层的Primary色 → bg-grandient

标题的margin-bottom : 24px

副标题Step的margin-bottom : 16px

Step小标的margin-bottom : 8px

整个Step的margin-top : 96px

整体分析

这次内容主要可以分成4个小区块去切，各占3栏。原理就像上一篇所说的，在设计时会有一个border作为辅助，因此我们切的时候就把它想像成四个小方块喔！

（如下图:D ）

步骤

先开一个新区块

1. 开啓<section> ，命名为steps
2. 因为上下的padding为96px，所以在section的class同时加入py-10
3. 另外在class插入背景颜色bg-primary ，稍後再来改成渐层

<section class="steps bg-primary py-10"></section>

新增container、row及col

共分成4个小区块，各占3栏（col-3）

<section class="steps bg-primary py-10">
  <div class="container">
    <div class="row">
      <div class="col-3">
          
      </div>
      <div class="col-3">

      </div>
      <div class="col-3">
          
      </div>
      <div class="col-3">
          
      </div>
    </div>
  </div>
</section>

新增标题及btn

1. 因为它们和旁边Steps的高度不一样，但又要有水平置中的感觉，所以要帮它包一个div
2. 在col-3 div的class命名水平置中的设定

<div class="col-3 d-flex align-items-center">
  <div>
    <h4 class="text-secondary fw-normal mb-6">
        想把兴趣当工作吗？ <br>
        赶快加入会员吧！
    </h4>
    <button class="btn btn-outline-secondary">免费试用</button>    
  </div>
</div>

新增Step的内容

1. 由於标题Step 1／2 / 3的大小是display-5的大小，所以给它一个div，命名为display-5
2. 另外Step 1的字体颜色是透明，所以要加style上去style="color: rgba(255,255,255,0.4);
3. 加入h5小标、内容文字，以及一些字体、margin的设定

<div class="col-3">
  <div class="display-5 fw-bold mb-5" style="color: rgba(255,255,255,0.4);">Step 1</div>
  <h5 class="fs-6 text-secondary mb-2">注册会员，免费试用</h5>
  <p class="text-secondary fw-light">首先，进入GYMATE官网注册会员，填写基本资料後，选取「首月免费试用」之方案。帐号开通後，即可开始罗！</p>
</div>

把3个Steps的内容都填上去

<div class="col-3">
  <h4 class="text-secondary">想把兴趣当工作吗？ 赶快加入会员吧！</h4>
  <button class="btn btn-outline-secondary">免费试用</button>
</div>

调整渐层背景色

还记得一开始设定渐层的variables吗？其实只要把bg-primary改成bg-gradient就可以了，是不是很简单XD!!!

<section class="steps bg-gradient py-10">
</section>

Before：

After：

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