【设计+切版30天实作】｜Day21 - PainPoints - 怎麽切出标题底下的highlight 装饰?

大纲

昨天完成header的部分了，所以接下来就会进入main的部分，今天要完成的是「PainPoints」的区块。
（如下图）

数据收集

标题的样式

Font-weight：Bold
Font-size：40px
Text-color：$Primary

标题的highlight：Primary,16% → RGB(165,60,5,0.16)

card内文的样式

Font-weight：Normal
Font-size：16px
Text-color：$Text

标题的margin-bottom：40px

card与card之间的的margin：24px

card img的margin-bottom：24px

整体分析

大标题置中，所以晚点会使用 justify-content-center
三个卡片式，每个卡片表面上看起来不是占满4个栏位，但其实在设计时，我们是把它画成各占4栏，而card的内容物则是根据4栏里再去调整的唷！

步骤

先来完成标题

开啓<section> ，命名为pain-point
在section的class加入mt-10，它的margin-top是196px

<section class="pain-point mt-10">
</section>

加入标题和底部的highlight

回到html，新增一个div ，在class里新增d-flex justify-content-center让标题置中
新增标题h2，在外面包一层mark
＊mark是highlight喔！

<section class="pain-point mt-10">
	<div class="d-flex justify-content-center">
    <mark><h2 class="h1 text-primary">您是否遇到以下问题？</h2></mark>
  </div>
</section>

去bootstrap官网复制card的code

<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>

在标题下方新增container、row及col

每个卡片占4栏，所以写col-4

把卡片的code直接贴上

<div class="container">
  <div class="row">

		<!-- 第一个卡片 -->
    <div class="col-4">
      <div class="card" style="width: 18rem;">
        <img src="style/PHOTO/img_pain_1.png" class="card-img-top" alt="...">
        <div class="card-body">
          <p class="card-text">台湾的大型连锁健身房、社区的健身房或学校的健身房都不接受「私人教练」来教学，导致教练无法找到合适的场地去进行教学！</p>
        </div>
      </div>            
	  </div>

		<!-- 第二个卡片 -->
	  <div class="col-4">
	    <div class="card" style="width: 18rem;">
	      <img src="style/PHOTO/img_pain_2.png" class="card-img-top" alt="...">
	      <div class="card-body">
	        <p class="card-text">许多健身教练都选择先加入连锁健身房成为教练，但是加入後才发现不但没有底薪保障，连辛苦教学的收入也要被健身房默默地抽成！</p>
	      </div>
	    </div>            
	  </div>

		<!-- 第三个卡片 -->
	  <div class="col-4">
	    <div class="card" style="width: 18rem;">
	      <img src="style/PHOTO/img_pain_3.png" class="card-img-top" alt="...">
	      <div class="card-body">
	        <p class="card-text">每个教练的梦想都应该想成立属於自己的健身工作室，自行收学生进行教学。但对於资金不足的您们，是不是也只能无奈接受现实呢？</p>
	      </div>
	    </div>            
	  </div>

	</div>
</div>

修改卡片的code

新增卡片的margin-top
把卡片的border去掉
把卡片预设的width删掉

<div class="col-4">
  <div class="card border-0">
    <img src="style/PHOTO/img_pain_1.png" class="card-img-top" alt="...">
    <div class="card-body">
        <p class="card-text">台湾的大型连锁健身房、社区的健身房或学校的健身房都不接受「私人教练」来教学，导致教练无法找到合适的场地去进行教学！</p>
    </div>
  </div>            
</div>