【设计+切版30天实作】｜Day29 - Footer区块 - 切出最後一步，看似不起眼但必须存在的footer

前面完成了「CTA」区块，今天来完成「Footer」的区块。

数据收集

Footer的样式

Background-color：$Secondary
Padding-y：96px
里面内容置中

Footer文字的样式

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

Footer的icon样式

LOGO大小：197px 49px
icon大小：24px 24px
icon的spacer：24px
连结的spacer：48px
Margin-bottom：16px

步骤

先开一个新区块，加入container

一样先新增section ，设定背景颜色为bg-secondary ，以及设定padding为p-10
内容物都在container里面，所以在section里新增container 、row，并加入置中

<section class="bg-secondary py-10">
	  <div class="container">
	    <div class="row justify-content-center align-items-center">
			</div>
	  </div>
</div>

加入Footer里的内容物

LOGO：加上一个a连结，里面包一个LOGO的img
Social media：加上一个div，里面包3个a>img
连结：加上一个div，里面包3个a>p
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，所以接下来要来调整它们的位置！）

各就各位，调整位置

在row里加上text-center，让里面的物件置中
调整第二行social media的spacer，直接在中间的a加上mx-6
调整第三行连结的文字颜色，加上text-primary ，并在中间的连结加上mx-9
在第三行连结外层的div加上d-flex、justify-content-center让里面的物件置中
在第四行copyright的p加上text-primary

在第一、二、三行的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>