iT邦幫忙

2021 iThome 鐵人賽

DAY 29
1
Modern Web

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

【設計+切版30天實作】|Day29 - Footer區塊 - 切出最後一步,看似不起眼但必須存在的footer

前面完成了「CTA」區塊,今天來完成「Footer」的區塊。

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

數據收集

Footer的樣式

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

  • Background-color:$Secondary
  • Padding-y:96px
  • 裡面內容置中

Footer文字的樣式

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

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

  • Font-weight:Normal
  • Font-size:16px
  • Text-color:$Primary
  • Spacer:48px
  • Margin-bottom:16px

Footer的icon樣式

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

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

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

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

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

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

  • LOGO大小:197px 49px
  • icon大小:24px 24px
  • icon的spacer:24px
  • 連結的spacer:48px
  • Margin-bottom:16px

步驟

先開一個新區塊 ,加入container

  1. 一樣先新增section ,設定背景顏色為bg-secondary ,以及設定padding為p-10
  2. 內容物都在container裡面,所以在section裡新增containerrow,並加入置中
<section class="bg-secondary py-10">
	  <div class="container">
	    <div class="row justify-content-center align-items-center">
			</div>
	  </div>
</div>

加入Footer裡的內容物

  1. LOGO:加上一個a連結,裡面包一個LOGO的img
  2. Social media:加上一個div,裡面包3個a>img
  3. 連結:加上一個div,裡面包3個a>p
  4. Copyright:一個p
<div class="row justify-content-center align-items-center">

    <!-- LOGO -->
    <a href="#">
        <img src="style/PHOTO/logo_footer.png" alt="">
    </a>

    <!-- socialMedia -->
    <div>
        <a href="#">
            <img src="style/PHOTO/ic_social_fb.png" alt="">
        </a>
        <a href="#">
            <img src="style/PHOTO/ic_social_ig.png" alt="">
        </a>
        <a href="#">
            <img src="style/PHOTO/ic_social_line.png" alt="">
        </a>
    </div>

    <!-- 連結 -->
    <div>
        <a href="#">
            <p>隱私權政策</p>
        </a>
        <a href="#">
            <p>服務條款</p>
        </a>
        <a href="#">
            <p>網站地圖</p>
        </a>
    </div>

    <!-- copyright -->
    <p>© 2021 GYMATE All Rights Reserved.</p>

</div>

(*目前會變這個樣子XDD,所以接下來要來調整它們的位置!)

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

各就各位,調整位置

  1. row裡加上text-center,讓裡面的物件置中

  2. 調整第二行social media的spacer,直接在中間的a加上mx-6

  3. 調整第三行連結的文字顏色,加上text-primary ,並在中間的連結加上mx-9

  4. 在第三行連結外層的div加上d-flexjustify-content-center讓裡面的物件置中

  5. 在第四行copyright的p加上text-primary

  6. 在第一、二、三行的class加上mb-5,讓每行都有16px的spacer

    <div class="row text-center">
    
        <!-- LOGO -->
        <a class="mb-5" href="#">
            <img src="style/PHOTO/logo_footer.png" alt="">
        </a>
    
        <!-- socialMedia -->
        <div class="mb-5">
            <a href="#">
                <img src="style/PHOTO/ic_social_fb.png" alt="">
            </a>
            <a class="mx-6" href="#">
                <img src="style/PHOTO/ic_social_ig.png" alt="">
            </a>
            <a href="#">
                <img src="style/PHOTO/ic_social_line.png" alt="">
            </a>
        </div>
    
        <!-- 連結 -->
        <div class="d-flex justify-content-center" >
            <a class="text-primary" href="#">
                <p>隱私權政策</p>
            </a>
            <a class="text-primary mx-9" href="#">
                <p>服務條款</p>
            </a>
            <a class="text-primary" href="#">
                <p>網站地圖</p>
            </a>
        </div>
    
        <!-- copyright -->
        <p class="text-primary">© 2021 GYMATE All Rights Reserved.</p>
    
    </div>
    

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

登登登登,最後的Footer區塊就完成啦!看看下面的對比照,至少有99%像吧!(๑´ㅂ`๑)

  • 設計稿

https://ithelp.ithome.com.tw/upload/images/20211010/20139489KJdZ6VnVo3.jpg

  • 切版成果

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


上一篇
【設計+切版30天實作】|Day28 - CTA區塊 - 超快速切出簡約CTA,讓使用者註冊起來!!
下一篇
【設計+切版30天實作】|Day30 - 最後一天了嗚嗚嗚的30天參賽心得
系列文
30天以設計+切版實作(Adobe XD、Bootstrap 5)30

尚未有邦友留言

立即登入留言