diff --git a/css/index.css b/css/index.css index a8610ee..5a400a3 100644 --- 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; + /* : Use a unique and descriptive class name*/ + /* : 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,13 +74,13 @@ 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{ @@ -46,18 +88,18 @@ body { } .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 ;} \ No newline at end of file diff --git a/css/normalize.css b/css/normalize.css index ef490e6..2e6060f 100644 --- 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 index 8e8cd2a..a9f3a57 100644 --- a/index.html +++ b/index.html @@ -4,25 +4,31 @@ - + Nice to meet you - + + + -
+
- 室內設計 - 平面設計 - 產品設計 -
+
-
+ +
-
室內空間
+
+
室內空間
  • @@ -32,11 +38,14 @@
  • -
    • -
- + +
  • +
    • + + MORE
    +
    平面包裝
      @@ -49,9 +58,10 @@
    - -
    + MORE +
    +
    產品物件
      @@ -63,12 +73,14 @@
      • -
    - -
    -
    more
    + + MORE + +
    + -
    愛好
    +
    +
    日常
    @@ -77,10 +89,10 @@
    攝影
    占卜療癒
    - +
    MORE
    - -
    +
    +