Spaces:

Joey889
/

CubicWeb

Running

App Files Files Community

Joey889 commited on Nov 30, 2025

Commit

15d69ef

verified ·

1 Parent(s): 0135b4e

Update index.html

Browse files

Files changed (1) hide show

index.html +70 -19

index.html CHANGED Viewed

@@ -70,29 +70,68 @@
             color: var(--secondary-color);
         }
-        /* Hero Section */
         #home {
-            height: 100vh;
             background: linear-gradient(135deg, #e0f7fa 0%, #e8f5e9 100%);
             display: flex;
             align-items: center;
             justify-content: center;
-            text-align: center;
-            padding-top: 60px;
         }
-        .hero-content h1 {
             font-size: 3.5rem;
             margin-bottom: 1rem;
             color: var(--dark-bg);
         }
-        .hero-content p {
             font-size: 1.5rem;
             color: #666;
             margin-bottom: 2rem;
         }
         .btn {
             display: inline-block;
             background-color: var(--primary-color);
@@ -218,29 +257,36 @@
         /* Responsive */
         @media (max-width: 768px) {
-            .hero-content h1 {
                 font-size: 2.5rem;
             }
             .nav-links {
                 display: none;
             }
-            /* Add a simple hamburger menu logic if needed, omitted for single file simplicity */
         }
     </style>
 </head>
 <body>
-    <!-- Navigation -->
     <nav>
         <div class="container nav-container">
-        <!-- 修改開始：將圖片放進連結內，並加上 flex 樣式讓它們並排 -->
         <a href="#" class="logo" style="display: flex; align-items: center; gap: 10px;">
             <img src="robot1.jpg"
                  alt="Logo"
                  style="height: 50px; width: auto; border-radius: 8px;">
             <span>酷比克機器人</span>
         </a>
-        <!-- 修改結束 -->
         <div class="nav-links">
             <a href="#home">首頁</a>
@@ -252,16 +298,24 @@
         </div>
     </nav>
-    <!-- Hero Section -->
     <section id="home">
         <div class="container hero-content">
-            <h1>啟動未來的鑰匙<br>酷比克機器人</h1>
-            <p>結合 ScratchPi 與 電子積木，讓孩子在玩樂中學習 AI 與 IoT</p>
-            <a href="#contact" class="btn">立即洽詢</a>
         </div>
     </section>
-    <!-- Features Section -->
     <section id="features">
         <div class="container">
             <h2 class="section-title">為什麼選擇酷比克？</h2>
@@ -285,7 +339,6 @@
         </div>
     </section>
-    <!-- About Section -->
     <section id="about">
         <div class="container">
             <h2 class="section-title">關於蘋果樹發想科技</h2>
@@ -304,7 +357,6 @@
         </div>
     </section>
-    <!-- Contact Section -->
     <section id="contact">
         <div class="container">
             <h2 class="section-title">聯絡我們</h2>
@@ -329,7 +381,6 @@
         </div>
     </section>
-    <!-- Footer -->
     <footer>
         <p>&copy; 2024 蘋果樹發想科技有限公司 All Rights Reserved.</p>
     </footer>

             color: var(--secondary-color);
         }
+        /* Hero Section (修改重點區域) */
         #home {
+            min-height: 100vh; /* 改為 min-height 以適應內容 */
             background: linear-gradient(135deg, #e0f7fa 0%, #e8f5e9 100%);
             display: flex;
             align-items: center;
             justify-content: center;
+            padding-top: 80px; /* 增加一點頂部空間 */
+            padding-bottom: 40px;
+        }
+        /* 新增：Hero 區域改為左右排版 */
+        .hero-content {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            gap: 40px; /* 文字與圖片的間距 */
+            text-align: left; /* 文字靠左對齊 */
         }
+        /* 新增：左側文字區塊 */
+        .hero-text {
+            flex: 1; /* 佔據一半空間 */
+        }
+        .hero-text h1 {
             font-size: 3.5rem;
             margin-bottom: 1rem;
             color: var(--dark-bg);
+            line-height: 1.2;
         }
+        .hero-text p {
             font-size: 1.5rem;
             color: #666;
             margin-bottom: 2rem;
         }
+        /* 新增：右側圖片區塊 */
+        .hero-image {
+            flex: 1; /* 佔據另一半空間 */
+            display: flex;
+            justify-content: center;
+            position: relative;
+        }
+        /* 新增：右側圖片樣式 */
+        .hero-image img {
+            max-width: 100%;
+            height: auto;
+            border-radius: 15px;
+            box-shadow: 0 10px 20px rgba(0,0,0,0.1);
+            transition: transform 0.3s ease, box-shadow 0.3s ease;
+            cursor: pointer; /* 讓滑鼠游標變成手指形狀 */
+        }
+        /* 新增：圖片互動效果 */
+        .hero-image img:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 15px 30px rgba(0,0,0,0.15);
+        }
         .btn {
             display: inline-block;
             background-color: var(--primary-color);
         /* Responsive */
         @media (max-width: 768px) {
+            .hero-text h1 {
                 font-size: 2.5rem;
             }
             .nav-links {
                 display: none;
             }
+            /* 新增：手機版讓 Hero 區塊變成上下排列 */
+            .hero-content {
+                flex-direction: column;
+                text-align: center;
+            }
+            .hero-image {
+                margin-top: 30px;
+                width: 80%; /* 手機上圖片寬度稍微縮小 */
+            }
         }
     </style>
 </head>
 <body>
     <nav>
         <div class="container nav-container">
         <a href="#" class="logo" style="display: flex; align-items: center; gap: 10px;">
             <img src="robot1.jpg"
                  alt="Logo"
                  style="height: 50px; width: auto; border-radius: 8px;">
             <span>酷比克機器人</span>
         </a>
         <div class="nav-links">
             <a href="#home">首頁</a>
         </div>
     </nav>
     <section id="home">
         <div class="container hero-content">
+            <div class="hero-text">
+                <h1>啟動未來的鑰匙<br>酷比克機器人</h1>
+                <p>結合 ScratchPi 與 電子積木，讓孩子在玩樂中學習 AI 與 IoT</p>
+                <a href="#contact" class="btn">立即洽詢</a>
+            </div>
+            <div class="hero-image">
+                <a href="https://bettertree-scratch-pi-appletree.webnode.tw/" target="_blank">
+                    <img src="robot2.jpg" alt="酷比克機器人展示">
+                </a>
+            </div>
         </div>
     </section>
     <section id="features">
         <div class="container">
             <h2 class="section-title">為什麼選擇酷比克？</h2>
         </div>
     </section>
     <section id="about">
         <div class="container">
             <h2 class="section-title">關於蘋果樹發想科技</h2>
         </div>
     </section>
     <section id="contact">
         <div class="container">
             <h2 class="section-title">聯絡我們</h2>
         </div>
     </section>
     <footer>
         <p>&copy; 2024 蘋果樹發想科技有限公司 All Rights Reserved.</p>
     </footer>