iT邦幫忙

2021 iThome 鐵人賽
DAY 27
1
Modern Web

30天以設計＋切版實作（Adobe XD、Bootstrap 5）系列 第 27 篇

【設計+切版30天實作】｜Day27 - Plans區塊 - 怎麼做出背景陰影？原來陰影還可以調數據！

13th鐵人賽 ui bootstrap5 切版 網頁設計
1027 瀏覽

  • 分享至 

  • xImage
    •  

前面完成了「Reviews」區塊，今天來完成「Plans」的區塊。

https://ithelp.ithome.com.tw/upload/images/20211010/20139489iGYacft85c.png

數據收集

標題的樣式

https://ithelp.ithome.com.tw/upload/images/20211010/20139489kuKsKKaW1j.png

  • Font-weight：Bold
  • Font-size：32px
  • Text-color：$Primary
  • Margin-bottom：40px

淺色卡片的樣式

https://ithelp.ithome.com.tw/upload/images/20211010/20139489t1CjONyEp2.png

https://ithelp.ithome.com.tw/upload/images/20211010/20139489THRj4e2Olc.png

https://ithelp.ithome.com.tw/upload/images/20211010/20139489VPmaIQqGFg.png

  • Background-color：$primary-light（$Primary(#9B3C05) 8% ）
  • Padding：48px 40px 96px 40px

淺色卡片的內容樣式

｜標題

https://ithelp.ithome.com.tw/upload/images/20211010/20139489LpKiIHypE5.png

  • Font-weight：Bold

  • Font-size：24px

  • Text-color：$Primary

  • Margin-bottom：8px

｜價格

https://ithelp.ithome.com.tw/upload/images/20211010/20139489C9odZLqyqs.png

https://ithelp.ithome.com.tw/upload/images/20211010/20139489rszeXsSHzw.png

https://ithelp.ithome.com.tw/upload/images/20211010/201394894TCGS53efV.png

https://ithelp.ithome.com.tw/upload/images/20211010/20139489oLL8Uho8Xn.png

  • 「$399」Font-weight：Bold

  • 「$399」Font-size：48px

  • 「/月」Font-weight：Regular

  • 「/月」Font-size：16px

  • Text-color：$Primary

  • Spacer between「$399」、「/月」：16px

  • Margin-bottom：32px

｜內容

https://ithelp.ithome.com.tw/upload/images/20211010/201394895gHj4j308T.png

https://ithelp.ithome.com.tw/upload/images/20211010/20139489XNVLFrZ2kp.png

https://ithelp.ithome.com.tw/upload/images/20211010/20139489gkV3AWiOa3.png

  • Font-weight：Regular

  • Font-size：16px

  • Text-color：$dark

  • Spacer：16px

  • Icon：24px*24px

｜Button

https://ithelp.ithome.com.tw/upload/images/20211010/20139489TPDGXsjlFY.png

https://ithelp.ithome.com.tw/upload/images/20211010/20139489HqDGAx91RW.png

  • Border：$primary , 1px

  • Padding：12px 106px

  • Font-weight：Regular

  • Font-size：16px

  • Text-color：$Primary

深色卡片的樣式

https://ithelp.ithome.com.tw/upload/images/20211010/20139489wcmpBKcsNT.png

https://ithelp.ithome.com.tw/upload/images/20211010/20139489qer0HRFLVQ.png

  • Background-color：$primary
  • 陰影：Drop Shadow：X:4 Y:4 B:8 #792C00

深色卡片的內容樣式

｜標題

https://ithelp.ithome.com.tw/upload/images/20211010/20139489Bq93uKNgXn.png

  • Font-weight：Bold

  • Font-size：24px

  • Text-color：$Primary-light

  • Margin-bottom：8px

｜價格

https://ithelp.ithome.com.tw/upload/images/20211010/20139489O6s22kzCLP.png

https://ithelp.ithome.com.tw/upload/images/20211010/201394899DJB2G13yf.png

https://ithelp.ithome.com.tw/upload/images/20211010/2013948935Vz6oMDo4.png

  • 「$0」Font-weight：Bold

  • 「$0」Font-size：48px

  • 「/月」Font-weight：Regular

  • 「/月」Font-size：16px

  • Text-color：$Primary-light

  • Spacer between「$0」、「/月」：16px

  • Margin-bottom：32px

｜內容

https://ithelp.ithome.com.tw/upload/images/20211010/201394890rxA4lsoaI.png

https://ithelp.ithome.com.tw/upload/images/20211010/201394894JSZj7ff0c.png

https://ithelp.ithome.com.tw/upload/images/20211010/20139489bFkQN2b1cc.png

  • Font-weight：Regular

  • Font-size：16px

  • Text-color：$Primary-light

  • Spacer：16px

  • Icon：24px*24px

｜Button

https://ithelp.ithome.com.tw/upload/images/20211010/20139489CJfxPYdvoH.png

https://ithelp.ithome.com.tw/upload/images/20211010/20139489ReDI6yug4r.png

  • Background-color：$Secondary

  • Padding：12px 106px

  • Font-weight：Regular

  • Font-size：16px

  • Text-color：$Primary

步驟

先開一個新區塊 ，加入container

  1. 一樣先新增section
  2. Plans這個區塊是在container裡面，所以一樣要新增container

加入標題

  1. 新增一個row
  2. 在裡面加入<h2>和標題內容
  3. 標題是置中的，所以我們要加入text-center讓它置中
  4. 加上標題的顏色text-primary及margin-bottom mb-8
  5. 由於標題有兩行，所以加入<br>讓第二句換行
<div class="row">
  <div class="col">
    <h2 class="text-center text-primary mb-8">
      心動？不如直接行動吧！ 
      <br>
      現在立即註冊會員，享有免費試用一個月！
    </h2>        
  </div>
</div>

https://ithelp.ithome.com.tw/upload/images/20211010/20139489PIQhN8xN7o.png

設定每個plans的欄位

  1. 依照設計稿來看，每個plans各佔4欄
  2. 新增row和col-4

設定深色plan「免費試用」的樣式

  1. 在col-4裡新增一個div

  2. 在div裡加入背景色bg-primary 、flex讓裡面內容都置中，新增style去加入Padding padding:48px 40px 96px 40px

  3. 加入標題<h4>免費試用</h4>及文字顏色text-primary-light、字重fw-bold、Margin-bottommb-2

    <div class="row">
  <div class="col-4">
      <div class="bg-primary d-flex flex-column align-items-center" style="padding:48px 40px 96px 40px">
          <h4 class="text-primary-light fw-bold mb-2">免費試用</h4>
      </div>
  </div>
</div>

  4. 加入副標（$0/月），但因為「$0」和「/月」的字體是不同大小，且又是水平的，所以這邊幫它們加個div，並在裡面加入樣式的設定
    a. 在div加上d-flex ，讓裡面的東西的變成橫的
    b. 加上align-items-end 讓「$0」與「/月」能對齊底部
    c. 「$0」是48px，所以這邊直接加上display-5去呈現該大小
    d. 其它一樣是加上它的文字樣式和marign

     ```html
 <div class="d-flex align-items-end">
     <p class="display-5 text-primary-light fw-bold me-2">$299</p>
     <p class="text-primary-light">/月</p>
 </div>

 ```

  5. 新增plan裡面的內容
    a. 新增一個只是為了乘載下面內容的外框div，並加入my-7，讓上下margin=32px
    b. 再新增一個單一行內容的div，並加上 d-flex 的class

     ```html
 <div class="my-7">
 	<div class="d-flex">
 	</div>
 </div>
 ```

    c. 在裡面插入img，並加上class設定margin、style設定img的大小

     ```html
 <img src="style/PHOTO/ic_fitness_light.png" class="me-5" style="height: 24px;" alt="">
 ```

    d. 插入文字內容，加上文字顏色

     ```html
 <p class="text-primary-light">首次註冊，享首月免費</p>
 ```

    e. 複製貼上以上單一行的樣式，再修改文字內容

     ```html
 <div class="my-7">
 	  <div class="d-flex">
 	      <img src="style/PHOTO/ic_fitness_light.png" class="me-5" style="height: 24px;" alt="">
 	      <p class="text-primary-light">首次註冊，享首月免費</p>
 	  </div>
 	  <div class="d-flex">
 	      <img src="style/PHOTO/ic_fitness_light.png" class="me-5" style="height: 24px;" alt="">
 	      <p class="text-primary-light">拍胸脯保證，完全零抽成</p>
 	  </div>
 	  <div class="d-flex">
 	      <img src="style/PHOTO/ic_fitness_light.png" class="me-5" style="height: 24px;" alt="">
 	      <p class="text-primary-light">篩選機制，學員場地任您選</p>
 	  </div>
 	  <div class="d-flex">
 	      <img src="style/PHOTO/ic_fitness_light.png" class="me-5" style="height: 24px;" alt="">
 	      <p class="text-primary-light">時間彈性，讓您擁有自由身</p>
 	  </div>
 	  <div class="d-flex">
 	      <img src="style/PHOTO/ic_fitness_light.png" class="me-5" style="height: 24px;" alt="">
 	      <p class="text-primary-light">無論您在哪，隨時隨地都可預約</p>
 	  </div>
 	  <div class="d-flex">
 	      <img src="style/PHOTO/ic_fitness_light.png" class="me-5" style="height: 24px;" alt="">
 	      <p class="text-primary-light">邀請朋友註冊，享乙個月八折</p>
 	  </div>    
 </div>
 ```

  6. 加上btn
    a. 加入btn，設定成btn-secondary，並加入text-primary
    b. 加上w-100，讓btn呈現100%的寬度

  7. 成果會像下面一樣

https://ithelp.ithome.com.tw/upload/images/20211010/20139489EgZyNiIxuF.png

設定淺色plans的樣式

  1. 在col-4裡新增一個div

  2. 在div裡加入背景色bg-primary-light 、flex讓裡面內容都置中，新增style去加入Padding padding:48px 40px 96px 40px

  3. 加入標題<h4>斜桿方案</h4>及文字顏色text-primary、字重fw-bold、Margin-bottommb-2

    <div class="row">
  <div class="col-4">
      <div class="bg-primary-light d-flex flex-column align-items-center" style="padding:48px 40px 96px 40px">
          <h4 class="text-primary fw-bold mb-2">斜桿方案</h4>
      </div>
  </div>
</div>

  4. 加入副標（$299/月），但因為「$299」和「/月」的字體是不同大小，且又是水平的，所以這邊幫它們加個div，並在裡面加入樣式的設定
    a. 在div加上d-flex ，讓裡面的東西的變成橫的
    b. 加上align-items-end 讓「$299」與「/月」能對齊底部
    c. 「$299」是48px，所以這邊直接加上display-5去呈現該大小
    d. 其它一樣是加上它的文字樣式和marign

     ```html
 <div class="d-flex align-items-end">
     <p class="display-5 text-primary fw-bold me-2">$299</p>
     <p class="text-primary">/月</p>
 </div>

 ```

  5. 新增plan裡面的內容
    a. 新增一個只是為了乘載下面內容的外框div，並加入my-7，讓上下margin=32px
    b. 再新增一個單一行內容的div，並加上 d-flex 的class

     ```html
 <div class="my-7">
 	<div class="d-flex">
 	</div>
 </div>
 ```

    c. 在裡面插入img，並加上class設定margin、style設定img的大小

     ```html
 <img src="style/PHOTO/ic_fitness_dark.png" class="me-5" style="height: 24px;" alt="">
 ```

    d. 插入文字內容，加上文字顏色

     ```html
 <p class="text-dark">首次註冊，享首月免費</p>
 ```

    e. 複製貼上以上單一行的樣式，再修改文字內容?

     ```html
 <div class="my-7">
   <div class="d-flex">
 	    <img src="style/PHOTO/ic_fitness_dark.png" class="me-5" style="height: 24px;" alt="">
 	    <p class="text-dark">首次註冊，享首月免費</p>
   </div>
 	<div class="d-flex">
 	    <img src="style/PHOTO/ic_fitness_dark.png" class="me-5" style="height: 24px;" alt="">
 	    <p class="text-dark">拍胸脯保證，完全零抽成</p>
   </div>
 	<div class="d-flex">
       <img src="style/PHOTO/ic_fitness_dark.png" class="me-5" style="height: 24px;" alt="">
       <p class="text-dark">篩選機制，學員場地任您選</p>
   </div>
   <div class="d-flex">
       <img src="style/PHOTO/ic_fitness_dark.png" class="me-5" style="height: 24px;" alt="">
       <p class="text-dark">時間彈性，讓您擁有自由身</p>
   </div>
   <div class="d-flex">
       <img src="style/PHOTO/ic_fitness_dark.png" class="me-5" style="height: 24px;" alt="">
       <p class="text-dark">無論您在哪，隨時隨地都可預約</p>
   </div>
   <div class="d-flex">
       <img src="style/PHOTO/ic_fitness_dark.png" class="me-5" style="height: 24px;" alt="">
       <p class="text-dark">邀請朋友註冊，享乙個月八折</p>
   </div>
 </div>
 ```

  6. 加上btn
    a. 加入btn，並設定成btn-outline-primary
    b. 加上w-100，讓btn呈現100%的寬度

  7. 成果會呈現下面的樣子！

https://ithelp.ithome.com.tw/upload/images/20211010/20139489IqlaoZ1tXt.png

把剩下最後一個專業方案，也一樣複製「斜桿方案」，另外加上內容就可以了！

https://ithelp.ithome.com.tw/upload/images/20211010/20139489MIBFpW05AA.png

把「免費試用」方案的背景加上陰影

https://ithelp.ithome.com.tw/upload/images/20211010/201394899cFzyuLRkZ.png

  1. Drop Shadow：X:4 Y:4 B:8 #792C00

  2. 記得公式 → box-shadow: Xpx Ypx Bpx COLOR;

  3. 在「免費試用」的div裡，加上style=" box-shadow:4px 4px 8px #792C00;"

    <div style="box-shadow:4px 4px 8px #792C00;padding:48px 40px 96px 40px; "class="bg-primary d-flex flex-column align-items-center" ></div>

https://ithelp.ithome.com.tw/upload/images/20211010/20139489cowHuAGakL.png

登登登登，Plans的區塊就完成啦！明天繼續來切下一個區塊吧 (๑´ㅂ`๑)

https://ithelp.ithome.com.tw/upload/images/20211010/20139489vW1RYmG4OO.png

https://ithelp.ithome.com.tw/upload/images/20211010/201394896K67OPpACa.png


上一篇
【設計+切版30天實作】｜Day26 - Reviews區塊 - 卡片可以因應不同用途而千變萬化
下一篇
【設計+切版30天實作】｜Day28 - CTA區塊 - 超快速切出簡約CTA，讓使用者註冊起來！！
系列文
30天以設計＋切版實作（Adobe XD、Bootstrap 5） 共 30 篇
  1. 26
    【設計+切版30天實作】｜Day26 - Reviews區塊 - 卡片可以因應不同用途而千變萬化
  2. 27
    【設計+切版30天實作】｜Day27 - Plans區塊 - 怎麼做出背景陰影？原來陰影還可以調數據！
  3. 28
    【設計+切版30天實作】｜Day28 - CTA區塊 - 超快速切出簡約CTA，讓使用者註冊起來！！
  4. 29
    【設計+切版30天實作】｜Day29 - Footer區塊 - 切出最後一步，看似不起眼但必須存在的footer
  5. 30
    【設計+切版30天實作】｜Day30 - 最後一天了嗚嗚嗚的30天參賽心得
完整目錄
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言
iThome鐵人賽
參賽組數
1064 組
團體組數
40 組
累計文章數
22174 篇
完賽人數
597 人
iT+看影片追技術 看影片追技術 看更多
熱門tag 看更多
15th鐵人賽 16th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽 鐵人賽 2019鐵人賽 javascript 2018鐵人賽 python 2017鐵人賽 windows php c# windows server linux css react vue.js
熱門問題
熱門回答
熱門文章
IT邦幫忙