更新

Ning-Home · Sep 16, 2024 · bb4f840 · bb4f840
1 parent b87ef3a
commit bb4f840
Show file tree

Hide file tree

Showing 3 changed files with 112 additions and 38 deletions.
diff --git a/css/index.css b/css/index.css
@@ -1,26 +1,68 @@
-@Import url('../css/normalize.css');
+@Import url('/css/normalize.css');
 
 body {
-    width: 70vw;
+    width: 100vw;
     height: 100%;
     margin: 0 auto;
     color: #787878;
-    font-family: Arial, Helvetica, sans-serif;
+    font-size: medium;
+    font-family: "Noto Sans TC", sans-serif;
+    font-optical-sizing: auto;
+    font-weight: 400;
+    font-style: normal;
+    letter-spacing: 1px;
+    /* <uniquifier>: Use a unique and descriptive class name*/
+    /* <weight>: Use a value from 100 to 900 */
 }
 
+
 .bar {
+    position: fixed;
+    top:0;
+    box-sizing: border-box;
+    box-shadow: 0px 0px 4px #c1c1c1;
     background-color: #fff;
-    height: 20em;
     width: 100%;
-    margin: 10vh auto;
     font-size: medium;
+    z-index: 1;
+
+    /*--- x 軸-位移 | y 軸-位移 | 模糊值 blur-radius｜ 顏色 ---*/
+}
+
+.bar ul{
+    width: 70%;
+    margin: 0 auto;
+}
+.bar li{
+    display: inline-block;
+    margin: 0 1em;
+}
+
+.bar a {
+    line-height: 2em;
+    color: #787878;
+}
+
+.container{
+    position: relative;
+    overflow: hidden;
+    width: 70%;
+    margin: 10em auto;
+}
+
+
+.type{
+    display: block;
+    height: 400px;
+    margin: 0 auto;
+
 }
 
 .gradient_line {
     width: 100%;
-    height: 3vh;
+    height: 1em;
     background-image: linear-gradient(rgb(237, 237, 237) 2%, transparent 10% );
-    margin: 1vh 0 10vh 0;
+    margin: .5vw 0 ;
     }
 
 
@@ -32,32 +74,32 @@ body {
 
 
 .list{
-    height: 250px;
-    width: 100%;
-    display: inline-block;
     white-space: nowrap;
+    box-sizing: border-box;
     overflow-y: auto;
-    padding: 1vw;
-
+    margin: 0 auto;
+    padding: 1em 0;
+    text-align:center;
+    margin: 5px;
 }
 
 .list::-webkit-scrollbar{
     height:0 ;
  }
 
 .card {
-    display: inline-block;
+    display: inline-flex;
     width: 200px;
     height: 200px;
     background-color: #000;
     color: #fff;
     border-radius: 5%;
-    text-align: center;
+    text-align: left;
 }
 
 .button {
     display: inline-flex;
-    background-color: #90c3a9;
+    background-color: #a2e5c2;
     margin: 0 auto;
     padding: .5em 1em;
     color: #fff;
@@ -81,3 +123,17 @@ body {
     transition: .1s;
     color: #2b6855;
 }
+
+.more {
+    width: 30%;
+    margin: 0 auto;
+    color: #787878;
+    font-size: .8em;
+    text-align: center;
+    line-height: 1.8em;
+    padding: 1em;
+}
+
+.more:hover { color: #333; cursor: pointer; }
+.more:active { color: #333;}
+.more:after { color: #333 ;}
diff --git a/css/normalize.css b/css/normalize.css
@@ -78,8 +78,14 @@ a {
   text-decoration: none;
 }
 
+ul {
+  padding-inline-start:0;
+  list-style-type: none;
+}
+
 li {
-  list-style: none;
+  list-style-type: none;
+  padding-inline-start:0;
 }
 
 

diff --git a/index.html b/index.html
@@ -4,25 +4,31 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="stylesheet" href="../css/index.css">
+    <link rel="stylesheet" href="/css/index.css">
     <title>Nice to meet you</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">
 </head>
 
 
 <body>
 
-<div>
+
     <div class="bar">
-        <a href="#">室內設計</a>
-        <a href="#">平面設計</a>
-        <a href="#">產品設計</a>
-        <div class="gradient_line"> <!--分隔--> </div>
+        <ul>
+            <li><a href="#">室內設計</a></li>
+            <li><a href="#">平面設計</a></li>
+            <li><a href="#">產品設計</a></li>
+            <li><a href="#">日常</a></li>
+        </ul>
     </div>
 
-    <div>
+
+    <div class="container">
         <!-----------------------Interior Design---------------------->
-        <div>室內空間</div>
+        <div class="type">
+        <div class="title">室內空間</div>
         <div class="gradient_line"> <!--分隔--> </div>
         <ul class="list">
                 <li class="card">
@@ -32,11 +38,14 @@
                 <li class="card">
                     <a href=""><img src="" alt=""></a></li>
                 <li class="card">
-                    <a href=""><img src="" alt=""></a></li>                 
-        </ul>
-            <div><a href="">more</a></div>
+                    <a href=""><img src="" alt=""></a></li>
+                <li class="card">
+                    <a href=""><img src="" alt=""></a></li>      
+                </ul>
+            <a class="more">MORE</a>
         </div>
         <!-----------------------Graphic Design--------------------->
+        <div class="type">
         <div>平面包裝</div>
         <div class="gradient_line"> <!--分隔--> </div>
         <ul class="list">
@@ -49,9 +58,10 @@
             <li class="card">
                 <a href=""><img src="" alt=""></a></li>                 
         </ul>
-        <div><a href="">more</a></div>
-    </div>
+        <a class="more" href="">MORE</a>
+        </div>
         <!-----------------------Industrial Design---------------------->
+        <div class="type">
         <div>產品物件</div> 
         <div class="gradient_line"> <!--分隔--> </div>    
         <ul class="list">
@@ -63,12 +73,14 @@
                 <a href=""><img src="" alt=""></a></li>
             <li class="card">
                 <a href=""><img src="" alt=""></a></li>                 
-    </ul>
-        <div><a href="">more</a></div>
-    </div>
-            <div><a href="">more</a></div>
+        </ul>
+        <a class="more" href="">MORE</a>
+
+        </div>
+
         <!-----------------------Others---------------------->
-        <div>愛好</div>   
+        <div class="type">
+        <div>日常</div>   
         <div class="gradient_line"> <!--分隔--> </div>  
         <div class="list">
             <div>
@@ -77,10 +89,10 @@
                 <a href=""></a><div class="button"><img src="" alt="">攝影</div></a>
                 <a href=""></a><div class="button"><img src="" alt="">占卜療癒</div></a>
             </div>  
-            <div><a href="">more</a></div>
+            <div class="more" href="">MORE</a>
         </div>
-
-</div>
+    </div>
+
 
 </body>
 </html>