觀摩原神的官方網站，並用已知的 HTML、CSS 與 JavaScript 知識做一個自己的版本。

網址: https://alex7008uk.github.io/Genshin-Offical-Web/html/home

主要實作功能如下：

• 導覽列
  1. 頁面連結功能
  2. 音樂功能
  3. 登入介面
  4. 下載介面
• 頁尾列
  1. icon圖標連結
  2. 版權文字
• 首頁頁面
  1. 社群連結側邊工具欄
  2. 下載區塊
  3. 新聞區塊
  4. 城市區塊
• 新聞頁面
  1. 標題新聞區塊
  2. 條列新聞區塊
  3. 篩選新聞類別功能
  4. 各別新聞頁面
• 角色頁面
  1. 各角色介紹介面
  2. 選取角色功能
  3. 選取城市功能

• CSS
• HTML
• JavaScript

• 2023/09/28
  1. 新增nav控制列
  2. 新增nav控制列排版
  3. 新增首頁第一區塊的背景影片
• 2023/09/30
  1. 修改nav列box-shadow樣式
  2. 完成nav列stick效果
  3. 新增首頁的新聞區塊與城市區塊HTML結構
  4. 修改第一區塊的背景影片為響應式
  5. 新增新聞區塊的響應式背景圖片
  6. 新增城市區塊的背景圖片
• 2023/10/04
  1. 新增footer樣式
  2. 新增演唱會連結
  3. 新增播放PV區塊與其邊框樣式
• 2023/10/05
  1. 新增playButton的動畫與連結
  2. 新增deviceArea裡的排版與連結
  3. 完成poster區塊
• 2023/10/09
  1. 新增news標題
  2. 完成news自動輪播圖功能
  3. 完成news手動輪播圖功能
  4. 新增news列表排版與樣式
• 2023/10/12
  1. 修改手動輪播圖效能
  2. 修改news區塊超連結
  3. 新增city字體背景
  4. 新增city區塊動畫
• 2023/10/16
  1. 修改city區塊動畫
  2. 修改news區塊加載更多選項鼠標圖示
• 2023/10/18
  1. 新增分類圖片資料夾
  2. 修改city區塊漏掉動畫
  3. 新增news頁面部分雛形
• 2023/10/19
  1. 修改home頁面city區塊動畫效果
  2. 完成news頁面poster區塊內容
• 2023/10/24
  1. 新增news頁面分類按鈕動畫
  2. 新增news頁面加載按鈕動畫
  3. 新增news頁面文章列表樣式
  4. 完成news頁面文章加載功能
  5. 完成news頁面文章分類功能
• 2023/10/27
  1. 新增新聞文章模板
• 2023/10/28
  1. 新增nav欄動畫
  2. 新增背景音樂
  3. 新增背景音樂按鈕功能
  4. 新增下載按鈕功能
  5. 新增登入按鈕功能
• 2023/10/29
  1. 完成10篇新聞文章頁面
  2. 修改nav欄音樂按鈕顯示錯誤
  3. 新增新聞頁面文章連結
• 2023/10/31
  1. 新增nav欄指示動畫
  2. 新增footer區塊
  3. 修改home頁面news區塊結構
  4. 新增home頁面news區塊連結與動畫
  5. 新增news頁面poster文章連結
• 2023/11/01
  1. 新增home頁面聯絡sidebar
  2. 新增news頁面返回頂部按鈕
• 2023/11/04
  1. 新增char頁面雛形
• 2023/11/05
  1. 完成char頁面排版
  2. 新增char頁面選取城市功能
  3. 新增char頁面選取角色功能
• 2023/11/06
  1. 新增nav欄資料擴展選單
  2. 新增nav欄資料擴展選單動畫
• 2023/11/12
  1. 完成home頁面城市跳轉功能
  2. 新增intro頁面連結
  3. 新增world頁面連結
  4. 新增note頁面連結
  5. 新增comic頁面連結
• 2023/12/02
  1. 新增intro頁面gamefeature部分
  2. 修改char頁面顯示城市bug
• 2024/01/18
  1. 刪除資料頁面連結

• https://genshin.hoyoverse.com/zh-tw/home
• https://developer.mozilla.org/en-US/