store/test.html at main · Yilan-PC/store · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
<!DOCTYPE html>
<html lang="zh-TW">
<head>
    <!--Start of Tawk.to Script-->
<script type="text/javascript">
    var Tawk_API=Tawk_API||{}, Tawk_LoadStart=new Date();
    (function(){
    var s1=document.createElement("script"),s0=document.getElementsByTagName("script")[0];
    s1.async=true;
    s1.src='https://embed.tawk.to/673dde104304e3196ae5abfc/1id4qms6b';
    s1.charset='UTF-8';
    s1.setAttribute('crossorigin','*');
    s0.parentNode.insertBefore(s1,s0);
    })();
    </script>
    <!--End of Tawk.to Script-->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>電獵者電腦 - 專業電腦維修與IT解決方案</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
</head>
<body>
    <header class="bg-gray-800 text-white">
        <nav class="container mx-auto px-6 py-3 flex justify-between items-center">
            <a href="index.html" class="text-xl font-bold">電獵者電腦</a>
            <div class="hidden md:flex items-center space-x-4">
                <a href="index.html" class="hover:text-gray-300">首頁</a>
                <a href="about.html" class="hover:text-gray-300">理念</a>
                <a href="service.html" class="hover:text-gray-300">服務</a>
                <a href="price.html" class="hover:text-gray-300">產品</a>
                <a href="contact.html" class="hover:text-gray-300">聯絡</a>
            </div>
            <div class="md:hidden">
                <button class="text-white focus:outline-none">
                    <i class="fas fa-bars"></i>
                </button>
            </div>
        </nav>
    </header>

    <main>
        <section class="bg-gray-100 py-20">
            <div class="container mx-auto px-6">
                <h1 class="text-4xl font-bold mb-4">快速 & 安全 愛鄉土的守護者</h1>
                <p class="text-xl mb-8">你有電腦問題嗎？我們能夠為您解決疑難雜症，小到 LINE 備份，大到防範駭客，15年以上服務經驗，各樣難題，迎刃而解。</p>
                <div class="space-x-4">
                    <a href="#" class="bg-blue-500 text-white px-6 py-3 rounded-lg hover:bg-blue-600 transition duration-300">閱讀更多</a>
                    <a href="#" class="bg-gray-800 text-white px-6 py-3 rounded-lg hover:bg-gray-700 transition duration-300">聯絡我們</a>
                </div>
            </div>
        </section>

        <!-- 其他部分的HTML代碼同樣可以進行優化 -->

    </main>

    <footer class="bg-gray-800 text-white py-10">
        <div class="container mx-auto px-6">
            <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
                <div>
                    <h3 class="text-lg font-semibold mb-4">聯絡資訊</h3>
                    <p>獵者來無影去無蹤</p>
                    <p>電話: +886 989136652</p>
                    <p>Email: demo@gmail.com</p>
                </div>
                <div>
                    <h3 class="text-lg font-semibold mb-4">常用連結</h3>
                    <ul class="space-y-2">
                        <li><a href="#" class="hover:text-gray-300">賽門鐵克</a></li>
                        <li><a href="about.html" class="hover:text-gray-300">關於我們</a></li>
                        <li><a href="service.html" class="hover:text-gray-300">服務</a></li>
                        <li><a href="price.html" class="hover:text-gray-300">價格</a></li>
                        <li><a href="contact.html" class="hover:text-gray-300">聯絡我們</a></li>
                    </ul>
                </div>
                <div>
                    <h3 class="text-lg font-semibold mb-4">關於我們</h3>
                    <p>準確的診斷是治癒疾病的一半。</p>
                </div>
                <div>
                    <h3 class="text-lg font-semibold mb-4">訂閱我們的最新消息</h3>
                    <form class="flex">
                        <input type="email" placeholder="您的電子郵件" class="px-4 py-2 w-full rounded-l-lg focus:outline-none">
                        <button type="submit" class="bg-blue-500 text-white px-4 py-2 rounded-r-lg hover:bg-blue-600 transition duration-300">訂閱</button>
                    </form>
                </div>
            </div>
            <div class="mt-8 text-center">
                <p>© 本網站由 Github 供電－電力十足 版權沒有 仿冒隨便</p>
            </div>
        </div>
    </footer>
</body>
</html>