Updates

MarkZhangTW · Aug 11, 2024 · 08ca0c2 · 08ca0c2
1 parent f1d1ec0
commit 08ca0c2
Show file tree

Hide file tree

Showing 10 changed files with 1,440 additions and 0 deletions.
diff --git a/README.md b/README.md
@@ -4,3 +4,4 @@
 
 - Week1: [Task: Week1](https://markzhangtw.github.io/Hex-2024-React/task-week1/)
 - Week2: [Task: Week2](https://markzhangtw.github.io/Hex-2024-React/task-week2/)
+- Week2: [Task: Week3](https://markzhangtw.github.io/Hex-2024-React/task-week3/)
diff --git a/task-week3/assets/main.css b/task-week3/assets/main.css
diff --git a/task-week3/assets/main.js b/task-week3/assets/main.js
diff --git a/task-week3/blog.html b/task-week3/blog.html
@@ -0,0 +1,181 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <!-- Google Fonts: Preconnect -->
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <title>Task: Week3: 部落格</title>
+  <script type="module" crossorigin src="/Hex-2024-React/task-week3/assets/main.js"></script>
+  <link rel="stylesheet" crossorigin href="/Hex-2024-React/task-week3/assets/main.css">
+</head>
+
+<body>
+  <!-- NoFormat -->
+  <div class="header">
+    <div class="container">
+        <a href="." class="link-main-index">
+            <img src="https://raw.githubusercontent.com/hexschool/2022-web-layout-training/main/week3-4/logo-white.png" alt="Logo" class="logo">
+        </a>
+        <ul class="nav">
+            <li><a href="series.html" class="link-main-series">系列鏡框</a></li>
+            <li><a href="locations.html" class="link-main-locations">門市據點</a></li>
+            <li><a href="blog.html" class="link-main-blog">部落格</a></li>
+            <li><a href="faq.html" class="link-main-faq">常見問題</a></li>
+        </ul>
+    </div>
+</div>  <!-- NoFormat -->
+
+  <div class="wrap-blog">
+    <!-- Navigation Bar -->
+    <div class="nav-bar">
+      <div class="container">
+        <ul class="links">
+          <li class="link">
+            <a href="#">最新消息</a>
+          </li>
+          <li class="link">
+            <a href="#">特別企劃</a>
+          </li>
+          <li class="link">
+            <a href="#">新品上市</a>
+          </li>
+          <li class="link">
+            <a href="#">鏡框小知識</a>
+          </li>
+        </ul>
+        <div class="search">
+          <span class="material-symbols-outlined">search</span>
+        </div>
+      </div>
+    </div>
+    <!-- Blog -->
+    <div class="blog">
+      <div class="container">
+        <h1 class="title">部落格</h1>
+        <ul class="posts">
+          <li class="post">
+            <img src="https://raw.githubusercontent.com/hexschool/2022-web-layout-training/main/week3-4/blog-1.png" alt="Image of Post 01">
+            <div class="text">
+              <h2 class="title"><a href="post.html">情人特別企劃</a></h2>
+              <div class="info">
+                <h3 class="subtitle">2020 Valentine’s Special</h3>
+                <p class="date">2020/02/14</p>
+              </div>
+              <p class="preview">一年一度西洋情人節即將到來，我們推出最強「情人節企劃」，為這個甜蜜的節日加溫。偶爾跟另一半來個低調情侶單品，結合彼此喜好、找出合適框型款式，在這個春夏輕鬆搭出屬於你們的甜蜜默契！<br>即日起至2/16為止，不論是熱戀情侶、自由自在一個人或是老夫老妻，只要從未來過本店的新朋友，綁定官方LINE好友，都可享專屬優惠⋯⋯</p>
+              <a href="post.html" class="more">MORE</a>
+            </div>
+          </li>
+          <li class="post">
+            <img src="https://raw.githubusercontent.com/hexschool/2022-web-layout-training/main/week3-4/blog-2.png" alt="Image of Post 02">
+            <div class="text">
+              <h2 class="title"><a href="#">街頭潮人訪問</a></h2>
+              <div class="info">
+                <h3 class="subtitle">Street Interview</h3>
+                <p class="date">2020/02/02</p>
+              </div>
+              <p class="preview">炎熱的夏季裡，衣著選擇經常希望以簡潔的風格為主，但有時單純只穿搭 T 恤或短袖開襟襯衫，又覺得整體造型度有點不足嗎？那麼不妨可以透過「配件」，為穿搭點綴出與眾不同的視覺層次，而本季有哪些必備的配件系列呢？一起從以下推薦的 3 款單品，讓你瞬間帥氣爆棚散發型男品味⋯⋯</p>
+              <a href="#" class="more">MORE</a>
+            </div>
+          </li>
+          <li class="post">
+            <img src="https://raw.githubusercontent.com/hexschool/2022-web-layout-training/main/week3-4/blog-3.png" alt="Image of Post 03">
+            <div class="text">
+              <h2 class="title"><a href="#">春季新品上市</a></h2>
+              <div class="info">
+                <h3 class="subtitle">New Selection</h3>
+                <p class="date">2020/02/02</p>
+              </div>
+              <p class="preview">2020 年春季的光學眼鏡跳脫前幾季流行的復古框型，比起圓框與小方框等文青風格，偏向個性款式的眉框眼鏡成為這一季的耀眼之星。除了經典款式如黑色眉框落在長方形鏡面上，眉宇之間露出專業莊重的特殊氣質，包覆在圓形鏡框上的貓眼型眉框則是強調出特殊設計感，俐落時髦的造型搭配一件簡單的白襯衫就相當有型，是喜愛時尚質感人士絕不能錯過的必備款式⋯⋯</p>
+              <a href="#" class="more">MORE</a>
+            </div>
+          </li>
+          <li class="post">
+            <img src="https://raw.githubusercontent.com/hexschool/2022-web-layout-training/main/week3-4/blog-4.png" alt="Image of Post 04">
+            <div class="text">
+              <h2 class="title"><a href="#">設計師獨享鏡框優惠</a></h2>
+              <div class="info">
+                <h3 class="subtitle">Sales for Designer</h3>
+                <p class="date">2020/01/18</p>
+              </div>
+              <p class="preview">2020 年春季的光學眼鏡跳脫前幾季流行的復古框型，比起圓框與小方框等文青風格，偏向個性款式的眉框眼鏡成為這一季的耀眼之星。除了經典款式如黑色眉框落在長方形鏡面上，眉宇之間露出專業莊重的特殊氣質，包覆在圓形鏡框上的貓眼型眉框則是強調出特殊設計感，俐落時髦的造型搭配一件簡單的白襯衫就相當有型，是喜愛時尚質感人士絕不能錯過的必備款式⋯⋯</p>
+              <a href="#" class="more">MORE</a>
+            </div>
+          </li>
+          <li class="post">
+            <img src="https://raw.githubusercontent.com/hexschool/2022-web-layout-training/main/week3-4/blog-5.png" alt="Image of Post 05">
+            <div class="text">
+              <h2 class="title"><a href="#">抵抗夏日大作戰</a></h2>
+              <div class="info">
+                <h3 class="subtitle">Summer Special</h3>
+                <p class="date">2019/08/07</p>
+              </div>
+              <p class="preview">2020 年春季的光學眼鏡跳脫前幾季流行的復古框型，比起圓框與小方框等文青風格，偏向個性款式的眉框眼鏡成為這一季的耀眼之星。除了經典款式如黑色眉框落在長方形鏡面上，眉宇之間露出專業莊重的特殊氣質，包覆在圓形鏡框上的貓眼型眉框則是強調出特殊設計感，俐落時髦的造型搭配一件簡單的白襯衫就相當有型，是喜愛時尚質感人士絕不能錯過的必備款式⋯⋯</p>
+              <a href="#" class="more">MORE</a>
+            </div>
+          </li>
+        </ul>
+        <ul class="pagination">
+          <li>
+            <a href="#" class="prev">上一頁</a>
+          </li>
+          <li>
+            <a href="#" class="number">1</a>
+          </li>
+          <li>
+            <a href="#" class="number active">2</a>
+          </li>
+          <li>
+            <a href="#" class="number">3</a>
+          </li>
+          <li>
+            <a href="#" class="number">4</a>
+          </li>
+          <li>
+            <a href="#" class="number">5</a>
+          </li>
+          <li>
+            <a href="#" class="next">下一頁</a>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
+
+  <!-- NoFormat -->
+  <div class="footer">
+    <div class="container">
+        <div class="links">
+            <div class="nav">
+                <a href="." class="link-main-index">首頁</a>
+                <a href="series.html" class="link-main-series">系列鏡框</a>
+                <a href="locations.html" class="link-main-locations">門市據點</a>
+                <a href="blog.html" class="link-main-blog">部落格</a>
+                <a href="faq.html" class="link-main-faq">常見問題</a>
+            </div>
+            <div class="media">
+                <a href="#"><img src="https://raw.githubusercontent.com/hexschool/2022-web-layout-training/main/week3-4/ic-social-fb.png" alt="Facebook Icon"></a>
+                <a href="#"><img src="https://raw.githubusercontent.com/hexschool/2022-web-layout-training/main/week3-4/ic_social_ig.png" alt="Instagram Icon"></a>
+                <a href="#"><img src="https://raw.githubusercontent.com/hexschool/2022-web-layout-training/main/week3-4/ic_social_line.png" alt="LINE Icon"></a>
+            </div>
+        </div>
+        <div class="contact">
+            <a href="tel:0800 000 00"><span class="material-symbols-outlined">call</span>0800-000-00</a>
+            <a href="mailto:[email protected]"><span class="material-symbols-outlined">mail</span>[email protected]</a>
+        </div>
+        <hr>
+        <div class="policies">
+            <p>Copyright © 2020 Glasses.All rights reserved.</p>
+            <div class="links">
+                <a href="#">隱私權政策</a>
+                <a href="#">服務條款</a>
+            </div>
+        </div>
+    </div>
+</div>  <!-- NoFormat -->
+
+</body>
+
+</html>

diff --git a/task-week3/faq.html b/task-week3/faq.html
@@ -0,0 +1,96 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <!-- Google Fonts: Preconnect -->
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <title>Task: Week3: 常見問題</title>
+  <script type="module" crossorigin src="/Hex-2024-React/task-week3/assets/main.js"></script>
+  <link rel="stylesheet" crossorigin href="/Hex-2024-React/task-week3/assets/main.css">
+</head>
+
+<body>
+  <!-- NoFormat -->
+  <div class="header">
+    <div class="container">
+        <a href="." class="link-main-index">
+            <img src="https://raw.githubusercontent.com/hexschool/2022-web-layout-training/main/week3-4/logo-white.png" alt="Logo" class="logo">
+        </a>
+        <ul class="nav">
+            <li><a href="series.html" class="link-main-series">系列鏡框</a></li>
+            <li><a href="locations.html" class="link-main-locations">門市據點</a></li>
+            <li><a href="blog.html" class="link-main-blog">部落格</a></li>
+            <li><a href="faq.html" class="link-main-faq">常見問題</a></li>
+        </ul>
+    </div>
+</div>  <!-- NoFormat -->
+
+  <div class="wrap-faq">
+    <div class="faq">
+      <div class="container">
+        <h1 class="title">常見問題</h1>
+        <h2 class="subtitle">我想詢問配鏡問題</h2>
+        <ul>
+          <li>
+            <h3 class="question">Q1.請問可否自備鏡框單配鏡片？</h3>
+            <p class="answer">A1.我牌鏡框搭配薄型非球面鏡片 1480 元，搭配功能型鏡片則依鏡片種類加價購買。<br>當日購買JINS盒裝眼鏡，搭配薄型非球面鏡片 980 元（隔日後則為 1480 元），搭配功能型鏡片則依鏡片種類加價購買。<br>他牌鏡框，搭配薄型非球面鏡片 1980 元，搭配功能型鏡片則依鏡片種類加價購買。</p>
+          </li>
+          <li>
+            <h3 class="question">Q2.眼鏡都可以20分鐘取件嗎？</h3>
+            <p class="answer">A1.我牌鏡框搭配薄型非球面鏡片 1480 元，搭配功能型鏡片則依鏡片種類加價購買。<br>當日購買JINS盒裝眼鏡，搭配薄型非球面鏡片 980 元（隔日後則為 1480 元），搭配功能型鏡片則依鏡片種類加價購買。<br>他牌鏡框，搭配薄型非球面鏡片 1980 元，搭配功能型鏡片則依鏡片種類加價購買。</p>
+          </li>
+          <li>
+            <h3 class="question">Q3.散光鏡片需要額外加價嗎？</h3>
+            <p class="answer">A1.我牌鏡框搭配薄型非球面鏡片 1480 元，搭配功能型鏡片則依鏡片種類加價購買。<br>當日購買JINS盒裝眼鏡，搭配薄型非球面鏡片 980 元（隔日後則為 1480 元），搭配功能型鏡片則依鏡片種類加價購買。<br>他牌鏡框，搭配薄型非球面鏡片 1980 元，搭配功能型鏡片則依鏡片種類加價購買。</p>
+          </li>
+          <li>
+            <h3 class="question">Q4.我可以使用舊眼鏡的度數配鏡片嗎？</h3>
+            <p class="answer">A1.我牌鏡框搭配薄型非球面鏡片 1480 元，搭配功能型鏡片則依鏡片種類加價購買。<br>當日購買JINS盒裝眼鏡，搭配薄型非球面鏡片 980 元（隔日後則為 1480 元），搭配功能型鏡片則依鏡片種類加價購買。<br>他牌鏡框，搭配薄型非球面鏡片 1980 元，搭配功能型鏡片則依鏡片種類加價購買。</p>
+          </li>
+          <li>
+            <h3 class="question">Q5.請問可以單購買鏡框嗎？</h3>
+            <p class="answer">A1.我牌鏡框搭配薄型非球面鏡片 1480 元，搭配功能型鏡片則依鏡片種類加價購買。<br>當日購買JINS盒裝眼鏡，搭配薄型非球面鏡片 980 元（隔日後則為 1480 元），搭配功能型鏡片則依鏡片種類加價購買。<br>他牌鏡框，搭配薄型非球面鏡片 1980 元，搭配功能型鏡片則依鏡片種類加價購買。</p>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
+
+  <!-- NoFormat -->
+  <div class="footer">
+    <div class="container">
+        <div class="links">
+            <div class="nav">
+                <a href="." class="link-main-index">首頁</a>
+                <a href="series.html" class="link-main-series">系列鏡框</a>
+                <a href="locations.html" class="link-main-locations">門市據點</a>
+                <a href="blog.html" class="link-main-blog">部落格</a>
+                <a href="faq.html" class="link-main-faq">常見問題</a>
+            </div>
+            <div class="media">
+                <a href="#"><img src="https://raw.githubusercontent.com/hexschool/2022-web-layout-training/main/week3-4/ic-social-fb.png" alt="Facebook Icon"></a>
+                <a href="#"><img src="https://raw.githubusercontent.com/hexschool/2022-web-layout-training/main/week3-4/ic_social_ig.png" alt="Instagram Icon"></a>
+                <a href="#"><img src="https://raw.githubusercontent.com/hexschool/2022-web-layout-training/main/week3-4/ic_social_line.png" alt="LINE Icon"></a>
+            </div>
+        </div>
+        <div class="contact">
+            <a href="tel:0800 000 00"><span class="material-symbols-outlined">call</span>0800-000-00</a>
+            <a href="mailto:[email protected]"><span class="material-symbols-outlined">mail</span>[email protected]</a>
+        </div>
+        <hr>
+        <div class="policies">
+            <p>Copyright © 2020 Glasses.All rights reserved.</p>
+            <div class="links">
+                <a href="#">隱私權政策</a>
+                <a href="#">服務條款</a>
+            </div>
+        </div>
+    </div>
+</div>  <!-- NoFormat -->
+
+</body>
+
+</html>