updata

ranke96 · Feb 17, 2024 · 7191929 · 7191929
1 parent f2140d8
commit 7191929
Show file tree

Hide file tree

Showing 2 changed files with 120 additions and 0 deletions.
diff --git a/44goodrice/image/LOGO.png b/44goodrice/image/LOGO.png
diff --git a/44goodrice/index.html b/44goodrice/index.html
@@ -0,0 +1,120 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>仿拍賣網站</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+TC:[email protected]&display=swap" rel="stylesheet">
+    <style>
+        body {
+            font-family: 'Noto Sans TC', sans-serif; /* 使用 Noto Sans TC 字體 */
+            margin: 0;
+            padding: 0;
+            background-color: #fff; /* 將背景顏色改為白色 */
+            color: #8B0000; /* 將文字顏色改為紅色 */
+            min-height: 100vh; /* 設置 body 的最小高度為視窗高度 */
+            display: flex; /* 使用 Flexbox 來排列內容 */
+            flex-direction: column; /* 主軸方向設置為垂直方向 */
+        }
+
+        header {
+            background-color: #8B0000;
+            color: #fff;
+            padding: 20px;
+            display: flex; /* 使用 Flexbox 來排列內容 */
+            align-items: center; /* 垂直居中對齊 */
+        }
+
+        header img {
+            max-height: 40px; /* 最大高度設置為 40px */
+        }
+
+        .slogan {
+            margin-left: auto; /* 將標語推到 header 的右側 */
+        }
+
+        main {
+            flex: 1; /* 將 main 區域撐開填滿剩餘空間 */
+            padding: 20px;
+        }
+
+        #product {
+            border: 1px solid #8B0000; /* 將邊框顏色改為紅色 */
+            margin-right: 20px;
+            padding: 20px;
+            text-align: left;
+            display: flex; /* 使用 Flexbox 使內容水平排列 */
+        }
+
+        #product img {
+            max-width: 50%; /* 圖片寬度縮小為50% */
+            margin-right: 20px; /* 增加右邊距 */
+        }
+
+        #product .description {
+            flex: 1; /* 讓描述內容填滿剩餘空間 */
+        }
+
+        #product h2 {
+            font-size: 40px; /* h2 文字大小設置為 24px */
+            margin-bottom: 10px; /* 增加底部間距 */
+        }
+
+        #product p {
+            font-size: 24px; /* p 文字大小設置為 18px */
+        }
+
+        #product .price {
+            font-weight: bold;
+            color: #8B0000; /* 保持價格顏色為紅色 */
+        }
+
+        form {
+            margin-top: 10px;
+        }
+        form label {
+            font-size: 24px; /* 調整數量標籤文字大小 */
+        }
+        form input[type="number"],
+        form input[type="submit"] {
+            font-size: 24px; /* 調整數量和加入購物車部分文字大小 */
+        }
+
+        footer {
+            background-color: #8B0000;
+            color: #fff;
+            text-align: right; /* 文字右對齊 */
+            padding: 10px 20px; /* 增加內側間距 */
+            clear: both;
+        }
+    </style>
+</head>
+<body>
+    <header>
+        <img src="Image/logo.png" alt="Logo">
+        <div class="slogan">
+            陰間最好的米，四巳優米
+        </div>
+    </header>
+    <main>
+        <section id="product">
+            <img src="https://cdn.discordapp.com/attachments/1061783535448510464/1208423758101221376/image.png?ex=65e33b53&is=65d0c653&hm=176473454956cd586e0f2ee1e9b8b8de1b0af65e2c384df452ae1eb7df4599c6" alt="Product 1">
+            <div class="description">
+                <h2>四巳優米</h2>
+                <p>四巳優米自陰間池下鄉帶來了台灣最優質的台梗44號米。這款米粒飽滿、口感紮實，每一口都散發出淡淡的香氣。我們採用真空包裝技術，確保米飯的新鮮度和營養價值。四巳優米不僅適合烹煮各種美味料理，更是您餐桌上的必備之選。粒粒晶瑩，色澤自然，口感香滑。品嚐一口，您將感受到來自陰間的純淨美味，這是一款絕對令人愛不釋手的好米。</p>
+                <p class="price">NT$444</p>
+                <form action="https://www.youtube.com/watch?v=VYarGLTFNOU" method="post">
+                    <label for="quantity">數量：</label>
+                    <input type="number" id="quantity" name="quantity" min="1" value="1">
+                    <input type="submit" value="加入購物車">
+                </form>
+            </div>
+        </section>
+    </main>
+    <footer>
+        <p>&copy; 2024 四巳優米</p>
+    </footer>
+</body>
+</html>