iT邦幫忙

2021 iThome 鐵人賽

DAY 13
0
Modern Web

關於我快30歲的後端工程師,想轉職成全端工程師,在前端世界中尋求機會的那件事(前端篇)系列 第 13

[Day 13]每天前進一點應該也是進步吧?(前端篇)

挑戰目標: MockNative Camp


今天我們來整理昨天沒有弄好的footer右邊的部分,
這是我們的目標
https://ithelp.ithome.com.tw/upload/images/20210928/201403583PoqpYpmiC.png
昨天完成的
https://ithelp.ithome.com.tw/upload/images/20210928/20140358etoVJvY7aB.png
今天完成的
https://ithelp.ithome.com.tw/upload/images/20210928/20140358oGfFcHPmF8.png

今天決定另闢蹊徑到uxwing下載個社交平台icon然後在做調整,然後文字上改用text-xs,另外也有設定hover之後背景變灰色。
Footer.js

import Image from "next/image";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
import { faTwitter, faFacebook, faYoutube, faInstagram } from "@fortawesome/free-brands-svg-icons"
function Footer() {
    return (
        <div className="bg-nativeCamp-nav-text h-96">
            {/* Left */}
            <div className="flex flex-col items-center justify-center space-y-4 p-32">
                <div className="h-[31px] w-[160px] relative flex ">
                    <Image
                        src="https://nativecamp.net/user/images/common/logo_s-zh-tw.png?v=2.1"
                        layout="fill"
                        objectFit="cover"
                    />
                </div>
                <div>
                    <ul className="flex flex-row space-x-4">
                        <li className="bg-white rounded-full h-8 w-8 justify-center flex items-center hover:bg-gray-300">
                            <Image
                                src="/icon/twitter-color.svg"
                                width={20}
                                height={20}
                            />
                        </li>
                        <li className="bg-white rounded-full h-8 w-8 justify-center flex items-center hover:bg-gray-300">
                            <Image
                                src="/icon/facebook-color.svg"
                                width={20}
                                height={20}
                            /></li>
                        <li className="bg-white rounded-full h-8 w-8 justify-center flex items-center hover:bg-gray-300">
                            <Image
                                src="/icon/youtube-color.svg"
                                width={20}
                                height={20}
                            /></li>
                        <li className="bg-white rounded-full h-8 w-8 justify-center flex items-center hover:bg-gray-300">
                            <Image
                                src="/icon/black-instagram.svg"
                                width={20}
                                height={20}
                            /></li>
                    </ul>
                </div>
                <div className="flex flex-col">
                    <span className="text-white text-xs">Copyright © 2021 線上英語會話</span>
                    <span className="text-white text-xs">NativeCamp. All Rights Reserved.</span>
                </div>
            </div>
            {/* Right */}
            <div> </div>
        </div>
    )
}

export default Footer

Footer右邊部分,目前是將文字給儲存於next.config.js
next.config.js

module.exports = {
    images: {
        domains: ['nativecamp.net'],
        minimumCacheTTL: 60,
    },
    publicRuntimeConfig: {
        navTab: [
            { name: "首頁", image: "https://nativecamp.net/user/images/gnavi/ic_home.svg", imageHov: "https://nativecamp.net/user/images/gnavi/ic_home-h.svg" },
            { name: "指南", image: "https://nativecamp.net/user/images/gnavi/ic_guide.svg", imageHov: "https://nativecamp.net/user/images/gnavi/ic_guide-h.svg" },
            { name: "學習", image: "https://nativecamp.net/user/images/gnavi/ic_study.svg", imageHov: "https://nativecamp.net/user/images/gnavi/ic_study-h.svg" },
            { name: "搜尋・預約講師", image: "https://nativecamp.net/user/images/gnavi/ic_search.svg", imageHov: "https://nativecamp.net/user/images/gnavi/ic_search-h.svg" },
            { name: "其他", image: "https://nativecamp.net/user/images/gnavi/ic_etc.svg", imageHov: "https://nativecamp.net/user/images/gnavi/ic_etc-h.svg" },
        ],
        navDetails: {
            "首頁": [],
            "指南": [
                {
                    "name": "使用方法",
                    "list": ["致初次使用者", "使用方法", "關於上課不限堂數"]
                },
                {
                    "name": "收費・套餐",
                    "list": ["關於費用"]
                },
                {
                    "name": "使用環境",
                    "list": ["支援的瀏覽器", "關於英語會話APP"]
                }
            ], "學習": [
                {
                    "name": "教材",
                    "list": ["瀏覽教材", "課程及教材診斷", "線上商店 (教材購買)"]
                },
                {
                    "name": "精選教材",
                    "list": ["Callan Method(凱倫學習法)", "TOEIC®L&R TEST對策"]
                },
                {
                    "name": "自學內容",
                    "list": ["口說測驗", "口語訓練"]
                }
            ], "搜尋・預約講師": [{
                "name": "講師介紹",
                "list": ["講師一覽", "排名", "評論"]
            },
            {
                "name": "關於講師",
                "list": ["關於母語人士", "關於卡通人物講師"]
            },
            ], "其他": [{
                "name": "推薦內容",
                "list": ["問卷結果 / 會員的心聲"]
            },
            {
                "name": "其他",
                "list": ["上課環境測試", "FAQ (聯絡我們)", "網站導覽"]
            },
            ]
        }
    },
    footer: [
        { name: "NativeCamp.", list: ["首頁", "新用戶註冊", "登入", "重新加入", "FOR TUTORS"] },
        { name: "指南", list: ["致初次使用者", "使用方法", "關於上課不限堂數", "關於費用", "支援的瀏覽器", " 關於英語會話 App"] },
        { name: "學習", list: ["瀏覽教材", "課程及教材診斷", "線上商店 (教材購買)", "Callan Method(凱倫學習法)", "TOEIC®L&R TEST對策", "口說測驗", "口語訓練"] },
        { name: "搜尋講師・預約", list: ["講師一覽", " 排名", "評論", "關於母語人士", "關於卡通人物講師"] },
        { name: "其他", list: ["問卷結果 / 會員的心聲", "上課環境測試", "FAQ (聯絡我們)", "網站導覽"] },
        { name: "公司資訊", list: ["運營公司", "使用條款", "特別指定商業交易法", "關於個人資訊處理", "徵才訊息", "我們的展望"] },
    ]
}

明天再來繼續的排版,如何隨心所欲的排版真的是要多看多練,我學會使用Tailwind CSS後,覺得應該可以使用於大部分的設計中,但其實還是欠缺CSS的基本知識...還是需要找機會惡補一下


上一篇
[Day 12]我也好想成為時間管理大師(前端篇)
下一篇
[Day 14]現在真的履歷導向比較好嗎(前端篇)
系列文
關於我快30歲的後端工程師,想轉職成全端工程師,在前端世界中尋求機會的那件事(前端篇)18
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言