iT邦幫忙

2021 iThome 鐵人賽

DAY 27
1
Modern Web

30天以設計+切版實作(Adobe XD、Bootstrap 5)系列 第 27

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

前面完成了「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. 新增rowcol-4

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

  1. col-4裡新增一個div

  2. 在div裡加入背景色bg-primaryflex讓裡面內容都置中,新增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-lightflex讓裡面內容都置中,新增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

尚未有邦友留言

立即登入留言