From 689aa363c7509e9f0e7af7e65b4cdccc6a75e80f Mon Sep 17 00:00:00 2001
From: Joy Cheng <joy.cheng97324@gmail.com>
Date: Thu, 19 Aug 2021 00:07:58 +0800
Subject: [PATCH] [edit] layout nav header

---
 app/index.html |  46 ++--
 app/info.html  | 191 ++++++++---------
 app/layout.ejs | 566 +++++++++++++++++++++++++++----------------------
 3 files changed, 436 insertions(+), 367 deletions(-)

diff --git a/app/index.html b/app/index.html
index 1043abf..82fd7f3 100644
--- a/app/index.html
+++ b/app/index.html
@@ -3,12 +3,17 @@
 layout: ./app/layout.ejs
 engine: ejs
 current: index
-menubar: ' d-none '
-display: ' '
+menubar: " d-none "
+display: " "
 ---
 
 <!-- exhibition banner -->
-<div class="exhibition-banner bg-img h-480 pb-80 pb-md-0" style="background-image: url(https://images.unsplash.com/photo-1506846540181-347008948fff?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1193&q=80);">
+<div
+  class="exhibition-banner bg-img h-480 pb-80 pb-md-0"
+  style="
+    background-image: url(https://images.unsplash.com/photo-1506846540181-347008948fff?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1193&q=80);
+  "
+>
   <div class="container-md h-100">
     <div
       class="
@@ -33,9 +38,7 @@ <h2 class="fw-bold text-white | mb-2">台北當代藝術展</h2>
           class="w-50 w-md-25 btn btn-secondary btn-lg | me-2"
           >購買票券</a
         >
-        <a
-          href="info.html"
-          class="w-50 w-md-25 btn btn-outline-light btn-lg"
+        <a href="info.html" class="w-50 w-md-25 btn btn-outline-light btn-lg"
           >詳細資訊</a
         >
       </div>
@@ -140,7 +143,7 @@ <h3 class="h3 fw-bold mb-2 mb-md-7">熱門特展</h3>
         <li class="card border-0 bg-light | py-7 px-5 mb-5 | p-md-0 mb-md-6">
           <div class="row g-0 gx-7">
             <!-- 不同圖片縮放效果 -->
-            
+
             <!-- 整張等比例放大縮小 -->
             <!--  <div class="col-md-4 h-md-350">
               <img
@@ -150,12 +153,20 @@ <h3 class="h3 fw-bold mb-2 mb-md-7">熱門特展</h3>
               />
             </div> -->
 
-
             <!-- 多加一個外框 圖片在方筐內放大縮小-->
-            <div class="col-md-5 col-lg-4
-              position-relative overflow-hidden
-              h-345 h-md-auto">
-                <img src="https://images.unsplash.com/photo-1545987796-b199d6abb1b4?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1500&q=80" alt="展覽圖片" class="card-img h-345 w-100">
+            <div
+              class="
+                col-md-5 col-lg-4
+                position-relative
+                overflow-hidden
+                h-345 h-md-auto
+              "
+            >
+              <img
+                src="https://images.unsplash.com/photo-1545987796-b199d6abb1b4?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1500&q=80"
+                alt="展覽圖片"
+                class="card-img h-345 w-100"
+              />
             </div>
 
             <div class="col-md-5 col-lg-6 h-md-350 py-md-12">
@@ -383,7 +394,12 @@ <h2 class="h6 fw-bold mb-0 me-2">高雄設計節</h2>
   <section>
     <div class="container-md mb-7 mb-md-13">
       <h3 class="fw-bold mb-2 mb-md-7">直播回顧</h3>
-      <div class="bg-img | card border-0" style="background-image: url(https://github.com/hexschool/webLayoutTraining1st/blob/master/exhibition-week6/people2.png?raw=truehttps://images.unsplash.com/photo-1511368466880-3ea5d800152c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1500&q=80); ">
+      <div
+        class="bg-img | card border-0"
+        style="
+          background-image: url(https://github.com/hexschool/webLayoutTraining1st/blob/master/exhibition-week6/people2.png?raw=truehttps://images.unsplash.com/photo-1511368466880-3ea5d800152c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1500&q=80);
+        "
+      >
         <div class="row g-0">
           <!-- 顏色本身有透明度，不需要另外做調整 -->
           <div class="col-lg-5 | bg-primary-dark text-white | py-12 px-7">
@@ -395,7 +411,7 @@ <h3 class="fw-bold mb-2 mb-md-7">直播回顧</h3>
               alt="user"
               class="w-128 h-128 img-fluid mb-2"
             />
-  
+
             <p class="h6 fw-bold mt-1 mb-2">臺北現代聯合總監｜Ken Hsu</p>
             <p class="h6 fw-normal mt-1 mb-5">
               獨家由藝術家、策展人、畫廊總監帶您欣賞台
@@ -406,7 +422,5 @@ <h3 class="fw-bold mb-2 mb-md-7">直播回顧</h3>
         </div>
       </div>
     </div>
-
   </section>
-
 </main>
diff --git a/app/info.html b/app/info.html
index a2f5fb6..c5e2bfb 100644
--- a/app/info.html
+++ b/app/info.html
@@ -3,118 +3,115 @@
 layout: ./app/layout.ejs
 engine: ejs
 current: exhibition
-menubar: ' '
-display: ' '
+menubar: " "
+display: " "
 ---
+
 <main>
   <section>
     <div class="container-md py-44 pt-md-80">
-
-        <!-- 票券購買 修改版本 -->
-        <div class="row">
-          <!-- exhibition info -->
-          <div class="col-lg-6 mb-13">
-            <div class="card border-0 bg-transparent">
-              <!-- pc card img of exhibition & date  -->
-              <div class="card border-0 bg-transparent | mb-2">
-                <img
-                  class="h-256 | card-img"
-                  src="https://images.unsplash.com/photo-1545987796-b199d6abb1b4?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1500&q=80"
-                  alt="exhibition img"
-                />
-                <div class="card-img-overlay d-none d-md-block p-0">
-                  <div
-                    class="d-flex justify-content-end align-items-center h-100"
-                  >
-                    <p class="h6 text-white fw-bold mb-0 w-65">
-                      01 JUN
-                      <br />
-                      |
-                      <br />
-                      31 OCT
-                    </p>
-                  </div>
-                </div>
-              </div>
-              <!-- exibition info -->
-              <div class="d-flex flex-column justify-content-between h-100">
+      <!-- 票券購買 修改版本 -->
+      <div class="row">
+        <!-- exhibition info -->
+        <div class="col-lg-6 mb-13">
+          <div class="card border-0 bg-transparent">
+            <!-- pc card img of exhibition & date  -->
+            <div class="card border-0 bg-transparent | mb-2">
+              <img
+                class="h-256 | card-img"
+                src="https://images.unsplash.com/photo-1545987796-b199d6abb1b4?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1500&q=80"
+                alt="exhibition img"
+              />
+              <div class="card-img-overlay d-none d-md-block p-0">
                 <div
-                  class="
-                    d-flex
-                    justify-content-between
-                    align-items-center
-                    |
-                    mb-1
-                    |
-                    mb-md-1
-                  "
+                  class="d-flex justify-content-end align-items-center h-100"
                 >
-                  <div class="d-flex align-items-center">
-                    <h2 class="h6 fw-bold mb-0 me-2">2020 台味設計展</h2>
-                    <a href="#" class="link-black p-0">
-                      <i class="fs-6 fab fa-facebook align-middle"></i>
-                    </a>
-                  </div>
-                  <p class="mb-0 | d-md-none">01 JUN — 31 OCT</p>
+                  <p class="h6 text-white fw-bold mb-0 w-65">
+                    01 JUN
+                    <br />
+                    |
+                    <br />
+                    31 OCT
+                  </p>
                 </div>
-                <p class="h6 mb-0">
-                  一年一度的台味設計展由經濟部工業局主辦、台灣創意設計中心執行，每年，針對在地生活、文化及產業發展特色，運用設計思考詮釋新時代的意涵，並以展覽呈現在地設計。
-                </p>
               </div>
             </div>
-      </div>
-          <!-- tickets  -->
-          <div class="col-lg-6">
-            <div class="row">
-               <div class="col-md-6 h-md-256 pt-md-80 border-0 border-end-md">
-                 <div class="d-flex justify-content-center align-items-center mb-7">
-                  <a class="d-block link-black" type="button">
-                    <span class="material-icons-outlined">
-                      remove
-                      </span>
-                  </a>
-                 <p class="h1 fw-bold mx-5 mb-0">01</p>
-                 <a class="d-block link-black" type="button">
-                    <span class="material-icons-outlined">
-                      add
-                      </span>
+            <!-- exibition info -->
+            <div class="d-flex flex-column justify-content-between h-100">
+              <div
+                class="
+                  d-flex
+                  justify-content-between
+                  align-items-center
+                  |
+                  mb-1
+                  |
+                  mb-md-1
+                "
+              >
+                <div class="d-flex align-items-center">
+                  <h2 class="h6 fw-bold mb-0 me-2">2020 台味設計展</h2>
+                  <a href="#" class="link-black p-0">
+                    <i class="fs-6 fab fa-facebook align-middle"></i>
                   </a>
                 </div>
-                 <p class="text-dark text-center w-100 mb-12">張</p>
-      </div>
-               <div class="col-md-6 h-md-256 pt-md-80">
-                <div class="mb-12">
-                  <p class="h1 fw-bold text-center mb-7">NT $350</p>
-                  <p class="text-dark text-center mb-2">票種</p>
-                  <div class="input-group justify-content-center">
-                    <a href="#" class="btn-hover-secondary px-2" type="button"
-                      >學生</a
-                    >
-                    <a href="#" class="btn-hover-secondary px-2" type="button"
-                      >全票</a
-                    >
-                    <a href="#" class="btn-hover-secondary px-2" type="button"
-                      >愛心</a
-                    >
-                                </div>
-               </div>
-      </div>
-              <!-- 超過的部分會自動換行 -->
-               <div class="col-6 pt-md-11">
-                <a
-                      href="#"
-                      class=" btn btn-outline-primary w-100 py-2"
-                      type="button"
-                      >收藏展覽</a
-                    >
+                <p class="mb-0 | d-md-none">01 JUN — 31 OCT</p>
+              </div>
+              <p class="h6 mb-0">
+                一年一度的台味設計展由經濟部工業局主辦、台灣創意設計中心執行，每年，針對在地生活、文化及產業發展特色，運用設計思考詮釋新時代的意涵，並以展覽呈現在地設計。
+              </p>
+            </div>
+          </div>
+        </div>
+        <!-- tickets  -->
+        <div class="col-lg-6">
+          <div class="row">
+            <div class="col-md-6 h-md-256 pt-md-80 border-0 border-end-md">
+              <div
+                class="d-flex justify-content-center align-items-center mb-7"
+              >
+                <a class="d-block link-black" type="button">
+                  <span class="material-icons-outlined"> remove </span>
+                </a>
+                <p class="h1 fw-bold mx-5 mb-0">01</p>
+                <a class="d-block link-black" type="button">
+                  <span class="material-icons-outlined"> add </span>
+                </a>
               </div>
-               <div class="col-6 pt-md-11">
-                  <a href="#" class="btn btn-secondary w-100 py-2">購買票券</a>
+              <p class="text-dark text-center w-100 mb-12">張</p>
+            </div>
+            <div class="col-md-6 h-md-256 pt-md-80">
+              <div class="mb-12">
+                <p class="h1 fw-bold text-center mb-7">NT $350</p>
+                <p class="text-dark text-center mb-2">票種</p>
+                <div class="input-group justify-content-center">
+                  <a href="#" class="btn-hover-secondary px-2" type="button"
+                    >學生</a
+                  >
+                  <a href="#" class="btn-hover-secondary px-2" type="button"
+                    >全票</a
+                  >
+                  <a href="#" class="btn-hover-secondary px-2" type="button"
+                    >愛心</a
+                  >
+                </div>
               </div>
+            </div>
+            <!-- 超過的部分會自動換行 -->
+            <div class="col-6 pt-md-11">
+              <a
+                href="#"
+                class="btn btn-outline-primary w-100 py-2"
+                type="button"
+                >收藏展覽</a
+              >
+            </div>
+            <div class="col-6 pt-md-11">
+              <a href="#" class="btn btn-secondary w-100 py-2">購買票券</a>
+            </div>
           </div>
-        </div>         
+        </div>
       </div>
-
     </div>
   </section>
   <section>
diff --git a/app/layout.ejs b/app/layout.ejs
index db13844..fe327d2 100644
--- a/app/layout.ejs
+++ b/app/layout.ejs
@@ -15,7 +15,10 @@
       href="https://fonts.googleapis.com/icon?family=Material+Icons"
       rel="stylesheet"
     />
-    <link href="https://fonts.googleapis.com/icon?family=Material+Icons+Outlined" rel="stylesheet">
+    <link
+      href="https://fonts.googleapis.com/icon?family=Material+Icons+Outlined"
+      rel="stylesheet"
+    />
     <link
       rel="stylesheet"
       href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css"
@@ -25,7 +28,7 @@
       rel="stylesheet"
       href="https://unpkg.com/swiper/swiper-bundle.min.css"
     />
-    <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
+    <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet" />
 
     <link rel="stylesheet" href="./assets/style/bootstrap.css" />
     <link rel="stylesheet" href="./assets/style/all.css" />
@@ -33,73 +36,88 @@
 
   <body>
     <!-- 修改後的nav -->
-    <nav class="navbar navbar-expand-lg navbar-light w-100 py-0 border-bottom align-items-center">
+    <nav
+      class="
+        navbar navbar-expand-lg navbar-light
+        w-100
+        py-0
+        border-bottom
+        align-items-center
+      "
+    >
       <div class="container">
         <!-- 排列要從md 斷點後再做設置，要不然漢堡選單下拉的位置無法定位 -->
         <!-- flex grow 展開區域寬度 -->
-        <h1 class="text-center mb-0 p-0 flex-grow-1 | order-lg-first"><a href="index.html" class="navbar-brand | d-block fs-5 text-primary | py-18 me-0 | py-md-8" href="#">EXHIBINECTION</a></h1>
-        
+        <h1 class="text-center mb-0 p-0 flex-grow-1 | order-lg-first">
+          <a
+            href="index.html"
+            class="
+              navbar-brand
+              d-block
+              fs-5
+              text-primary
+              py-18
+              me-0
+              py-md-8
+            "
+            href="#"
+            >EXHIBINECTION</a
+          >
+        </h1>
+
         <!-- cart -->
         <a
-        href="#"
-        class="d-block position-relative order-lg-last"
-        type="button"
-        data-bs-toggle="offcanvas"
-        data-bs-target="#cart-offcanvas"
-        aria-controls="cart-offcanvas"
-        >
-        <span
-        class="material-icons | notification-circle | text-black align-middle"
+          href="#"
+          class="d-block position-relative order-lg-last"
+          type="button"
+          data-bs-toggle="offcanvas"
+          data-bs-target="#cart-offcanvas"
+          aria-controls="cart-offcanvas"
         >
-        confirmation_number
-      </span>
-    </a>
-    <!-- Navbar -->
-    <a class="navbar-toggler border-0 p-0 | order-first" type="button" data-bs-toggle="collapse" data-bs-target="#navbarList" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
-      <span class="navbar-toggler-icon"></span>
-    </a>
-    <!-- Sign in up  -->
-    <!-- flex grow 0 清空延伸空間 -->
-    <div class="collapse navbar-collapse text-center flex-grow-0" id="navbarList">
-      <ul class="navbar-nav">
-        <li class="nav-item">
-          <a href="#" class="nav-link text-nowrap py-3 px-5 | py-lg-0" aria-current="page" >Sign in</a>
-        </li>
-        <li class="nav-item">
-          <a href="#" class="nav-link text-nowrap py-3 px-5 | py-lg-0">Sign up</a>
-        </li>
-      </ul>
-    </div>
-  </div>
-</nav>
-    <!-- ！！記得新增漢堡選單功能 -->
-    <!-- navbar  -->
-    <nav class="border-bottom bg-white position-relative" style="z-index: 1080;">
-      <div class="py-18 | container-md py-md-8 | position-relative">
-        <h1 class="position-absolute top-50 start-50 translate-middle">
-          <a href="index.html" class="text-indent-101 h5 link-primary | text-nowrap"
-            >EXHIBINECTION</a
+          <span
+            class="
+              material-icons
+              notification-circle
+              text-black
+              align-middle
+            "
           >
-        </h1>
-        <div class="d-flex justify-content-end">
-          <div class="d-flex">
-            <a href="#" class="d-none d-md-block | link-dark | px-5">Sign in</a>
-            <a href="#" class="d-none d-md-block | link-dark px-5">Sign up</a>
-            <a
-              href="#"
-              class="d-block position-relative"
-              type="button"
-              data-bs-toggle="offcanvas"
-              data-bs-target="#cart-offcanvas"
-              aria-controls="cart-offcanvas"
-            >
-              <span
-                class="material-icons | notification-circle | text-black align-middle"
+            confirmation_number
+          </span>
+        </a>
+        <!-- Navbar -->
+        <a
+          class="navbar-toggler border-0 p-0 | order-first"
+          type="button"
+          data-bs-toggle="collapse"
+          data-bs-target="#navbarList"
+          aria-controls="navbarNav"
+          aria-expanded="false"
+          aria-label="Toggle navigation"
+        >
+          <span class="navbar-toggler-icon"></span>
+        </a>
+        <!-- Sign in up  -->
+        <!-- flex grow 0 清空延伸空間 -->
+        <div
+          class="collapse navbar-collapse text-center flex-grow-0"
+          id="navbarList"
+        >
+          <ul class="navbar-nav">
+            <li class="nav-item">
+              <a
+                href="#"
+                class="nav-link text-nowrap py-3 px-5 | py-lg-0"
+                aria-current="page"
+                >Sign in</a
               >
-                confirmation_number
-              </span>
-            </a>
-          </div>
+            </li>
+            <li class="nav-item">
+              <a href="#" class="nav-link text-nowrap py-3 px-5 | py-lg-0"
+                >Sign up</a
+              >
+            </li>
+          </ul>
         </div>
       </div>
     </nav>
@@ -113,45 +131,76 @@
             justify-content-start
             flex-nowrap
             text-nowrap
-            |
             overflow-x-scroll
             position-sticky
             top-0
-            |
             overflow-md-auto
             justify-content-sm-center
-            |
             py-4
           "
         >
           <li class="nav-item">
-            <a href="#" class="btn-hover-secondary nav-link link-dark | py-0 px-18">音樂</a>
+            <a
+              href="#"
+              class="btn-hover-secondary nav-link link-dark | py-0 px-18"
+              >音樂</a
+            >
           </li>
           <li class="nav-item">
-            <a href="#" class="btn-hover-secondary | nav-link link-dark | py-0 px-18">戲劇</a>
+            <a
+              href="#"
+              class="btn-hover-secondary | nav-link link-dark | py-0 px-18"
+              >戲劇</a
+            >
           </li>
           <li class="nav-item">
-            <a href="design.html" class="btn-hover-secondary | nav-link link-dark | py-0 px-18"
+            <a
+              href="design.html"
+              class="btn-hover-secondary | nav-link link-dark | py-0 px-18"
               >設計</a
             >
           </li>
           <li class="nav-item">
-            <a href="#" class="btn-hover-secondary | nav-link link-dark | py-0 px-18">藝術</a>
+            <a
+              href="#"
+              class="btn-hover-secondary | nav-link link-dark | py-0 px-18"
+              >藝術</a
+            >
           </li>
           <li class="nav-item">
-            <a href="#" class="btn-hover-secondary | nav-link link-dark | py-0 px-18">美食</a>
+            <a
+              href="#"
+              class="btn-hover-secondary | nav-link link-dark | py-0 px-18"
+              >美食</a
+            >
           </li>
           <li class="nav-item">
-            <a href="#" class="btn-hover-secondary | nav-link link-dark | py-0 px-18">旅遊</a>
+            <a
+              href="#"
+              class="btn-hover-secondary | nav-link link-dark | py-0 px-18"
+              >旅遊</a
+            >
           </li>
           <li class="nav-item">
-            <a href="#" class="btn-hover-secondary | nav-link link-dark | py-0 px-18">電影</a>
+            <a
+              href="#"
+              class="btn-hover-secondary | nav-link link-dark | py-0 px-18"
+              >電影</a
+            >
           </li>
           <li class="nav-item">
-            <a href="#" class="btn-hover-secondary | nav-link link-dark | py-0 px-18">親子</a>
+            <a
+              href="#"
+              class="btn-hover-secondary | nav-link link-dark | py-0 px-18"
+              >親子</a
+            >
           </li>
           <li class="nav-item">
-            <a href="#" class="btn-hover-secondary | nav-link link-dark | py-0 px-18">期間限定</a>
+            <a
+              href="#"
+              class="btn-hover-secondary | nav-link link-dark | py-0 px-18"
+              >期間限定</a
+            >
           </li>
         </ul>
       </div>
@@ -165,61 +214,81 @@
         <h2 class="h3 fw-bold mb-2 mb-md-7">猜你也喜歡...</h2>
         <!-- Swiper for PC-->
         <div class="swiper-container swiper | swiper-js | offset-md-1">
-        <ul class="swiper-wrapper | d-flex flex-wrap list-unstyled  ps-0 | flex-md-nowrap  "
-        style="cursor: grab;">
-        <li class="swiper-slide">
-          <div class="card border-0">
-            <div class="ratio ratio-1x1 mb-1">
-              <img
-                class="card-img"
-                src="https://images.unsplash.com/photo-1492087368735-957f2d176504?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1320&q=80"
-                alt="exhibition images"
-              />
-            </div>
+          <ul
+            class="
+              swiper-wrapper
+              d-flex
+              flex-wrap
+              list-unstyled
+              ps-0
+              flex-md-nowrap
+            "
+            style="cursor: grab"
+          >
+            <li class="swiper-slide">
+              <div class="card border-0">
+                <div class="ratio ratio-1x1 mb-1">
+                  <img
+                    class="card-img"
+                    src="https://images.unsplash.com/photo-1492087368735-957f2d176504?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1320&q=80"
+                    alt="exhibition images"
+                  />
+                </div>
 
-            <h3 class="h6 fw-bold mb-0 mb-1">No.22 線上設計展</h3>
-            <p class="h6 mb-1">$350</p>
-          </div>
-        </li>
-        <li class="swiper-slide">
-          <div class="card border-0">
-            <div class="ratio ratio-1x1 mb-1">
-              <img
-                class="card-img"
-                src="https://images.unsplash.com/photo-1567722681579-c671cabd2810?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxjb2xsZWN0aW9uLXBhZ2V8MXw2MjI0ODIyMHx8ZW58MHx8fHw%3D&auto=format&fit=crop&w=800&q=60"
-                alt="exhibition images"
-              />
-            </div>
+                <h3 class="h6 fw-bold mb-0 mb-1">No.22 線上設計展</h3>
+                <p class="h6 mb-1">$350</p>
+              </div>
+            </li>
+            <li class="swiper-slide">
+              <div class="card border-0">
+                <div class="ratio ratio-1x1 mb-1">
+                  <img
+                    class="card-img"
+                    src="https://images.unsplash.com/photo-1567722681579-c671cabd2810?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxjb2xsZWN0aW9uLXBhZ2V8MXw2MjI0ODIyMHx8ZW58MHx8fHw%3D&auto=format&fit=crop&w=800&q=60"
+                    alt="exhibition images"
+                  />
+                </div>
 
-            <h3 class="h6 fw-bold mb-0 mb-1">No.22 線上設計展</h3>
-            <p class="h6 mb-1">$350</p>
-          </div>
-        </li>
-        <li class="swiper-slide">
-          <div class="card border-0">
-            <div class="ratio ratio-1x1 mb-1">
-              <img
-                class="card-img"
-                src="https://images.unsplash.com/photo-1578402025217-920675beb3c3?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1365&q=80"
-                alt="exhibition images"
-              />
-            </div>
+                <h3 class="h6 fw-bold mb-0 mb-1">No.22 線上設計展</h3>
+                <p class="h6 mb-1">$350</p>
+              </div>
+            </li>
+            <li class="swiper-slide">
+              <div class="card border-0">
+                <div class="ratio ratio-1x1 mb-1">
+                  <img
+                    class="card-img"
+                    src="https://images.unsplash.com/photo-1578402025217-920675beb3c3?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1365&q=80"
+                    alt="exhibition images"
+                  />
+                </div>
 
-            <h3 class="h6 fw-bold mb-0 mb-1">No.22 線上設計展</h3>
-            <p class="h6 mb-1">$350</p>
-          </div>
-        </li>
-            
-        </ul>
-      </div>
+                <h3 class="h6 fw-bold mb-0 mb-1">No.22 線上設計展</h3>
+                <p class="h6 mb-1">$350</p>
+              </div>
+            </li>
+          </ul>
+        </div>
       </div>
-        
     </section>
     <!-- subscribe  -->
-    <section >
-      <div class="bg-img h-400 |  <%- display %>" style=" background-image: url(https://images.unsplash.com/photo-1536768767433-cc552f38def9?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80);">
-
-        <div class=" container-md pb-11 h-100 | d-flex flex-column justify-content-end">
+    <section>
+      <div
+        class="bg-img h-400 | <%- display %>"
+        style="
+          background-image: url(https://images.unsplash.com/photo-1536768767433-cc552f38def9?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80);
+        "
+      >
+        <div
+          class="
+            container-md
+            pb-11
+            h-100
+            d-flex
+            flex-column
+            justify-content-end
+          "
+        >
           <h4 class="h3 text-white | mb-0">想收到最新消息嗎？</h4>
           <h4 class="h3 text-white | mb-2">快訂閱我們！</h4>
           <div class="input-group | mt-1">
@@ -234,7 +303,7 @@
                 bg-light
                 w-60
                 py-2
-                |
+
                 w-md-30 w-lg-20
               "
             />
@@ -245,8 +314,7 @@
             />
           </div>
         </div>
-
-    </div>
+      </div>
     </section>
 
     <footer class="py-5 | container-md py-md-8 <%- display %>">
@@ -272,11 +340,20 @@
       id="cart-offcanvas"
       aria-labelledby="cart-offcanvas-label"
       data-bs-scroll="true"
-      data-bs-backdrop="false" 
+      data-bs-backdrop="false"
       roll="dialog"
     >
       <!-- offcanvas header -->
-      <div class="offcanvas-header justify-content-between p-0 mt-6 mb-2 | mt-md-10">
+      <div
+        class="
+          offcanvas-header
+          justify-content-between
+          p-0
+          mt-6
+          mb-2
+          mt-md-10
+        "
+      >
         <h3 id="offcanvasRightLabel" class="text-white mb-0">Cart List</h3>
         <button
           type="button"
@@ -285,187 +362,168 @@
           aria-label="Close"
         ></button>
       </div>
-      
+
       <!-- tickets list -->
       <ul class="scroll-bar | flex-grow-1 overflow-auto ps-0 | pe-2 pe-md-5">
         <li class="card border-0 mb-2 card-close">
           <button
-          type="button"
-          class="btn-close text-reset p-2"
-          data-bs-dismiss="card-close"
-          aria-label="Close"
-        ></button>
-        
+            type="button"
+            class="btn-close text-reset p-2"
+            data-bs-dismiss="card-close"
+            aria-label="Close"
+          ></button>
+
           <div class="card-body d-flex px-10 pt-0 pb-5 mb-2">
             <div class="d-flex justify-content-between w-100">
-              
               <div class="d-flex w-100">
-                
                 <img
                   src="https://images.unsplash.com/photo-1545987796-b199d6abb1b4?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1500&q=80"
                   alt="exhibition img"
                   class="card-img h-120 w-120"
                 />
-              <div class="d-flex flex-column justify-content-between ms-5">
-                <div class="title flex-grow-1">
-                  <h4 class="fs-7 fw-bold mb-0">2020 台味設計展</h4>
-                  <p class="mb-0">01 JUN — 31 OCT</p>
-                  <p class="link-dark">全票</p>
+                <div class="d-flex flex-column justify-content-between ms-5">
+                  <div class="title flex-grow-1">
+                    <h4 class="fs-7 fw-bold mb-0">2020 台味設計展</h4>
+                    <p class="mb-0">01 JUN — 31 OCT</p>
+                    <p class="link-dark">全票</p>
+                  </div>
+                  <p class="h6 fw-bold mb-0">NT$350</p>
                 </div>
-                <p class="h6 fw-bold mb-0">NT$350</p>
               </div>
-                
-            </div>
-            <!-- - 01 + -->
-            <div
-              class="
-                d-flex
-                flex-column flex-md-row
-                justify-content-center
-                align-items-center
-                w-30
-              "
-            >
-              <a href="#" class="link-black mb-1 mb-md-0 p-0 pe-md-1"
-                ><span class="material-icons-outlined">
-                  remove
-                  </span></a
-              >
-              <a href="#" class="link-black mb-1 mb-md-0 p-0 mx-md-2">
-                <p class="h1 fw-bold mb-0">01</p>
-              </a>
-              <a href="#" class="link-black mb-1 mb-md-0 p-0 ps-md-1"
-                ><span class="material-icons-outlined">
-                  add
-                  </span></a
+              <!-- - 01 + -->
+              <div
+                class="
+                  d-flex
+                  flex-column flex-md-row
+                  justify-content-center
+                  align-items-center
+                  w-30
+                "
               >
-            </div>
+                <a href="#" class="link-black mb-1 mb-md-0 p-0 pe-md-1"
+                  ><span class="material-icons-outlined"> remove </span></a
+                >
+                <a href="#" class="link-black mb-1 mb-md-0 p-0 mx-md-2">
+                  <p class="h1 fw-bold mb-0">01</p>
+                </a>
+                <a href="#" class="link-black mb-1 mb-md-0 p-0 ps-md-1"
+                  ><span class="material-icons-outlined"> add </span></a
+                >
+              </div>
             </div>
           </div>
         </li>
         <li class="card border-0 mb-2 card-close">
           <button
-          type="button"
-          class="btn-close text-reset p-2"
-          data-bs-dismiss="card-close"
-          aria-label="Close"
-        ></button>
-        
+            type="button"
+            class="btn-close text-reset p-2"
+            data-bs-dismiss="card-close"
+            aria-label="Close"
+          ></button>
+
           <div class="card-body d-flex px-10 pt-0 pb-5 mb-2">
             <div class="d-flex justify-content-between w-100">
-              
               <div class="d-flex w-100">
                 <img
                   src="https://images.unsplash.com/photo-1510520001634-6af954f45759?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1506&q=80"
                   alt="exhibition img"
                   class="card-img h-120 w-120"
                 />
-              <div class="d-flex flex-column justify-content-between ms-5">
-                <div class="title flex-grow-1">
-                  <h4 class="fs-7 fw-bold mb-0">No.22 線上設計展</h4>
-                  <p class="mb-0">01 JUN — 31 OCT</p>
-                  <p class="link-dark">全票</p>
+                <div class="d-flex flex-column justify-content-between ms-5">
+                  <div class="title flex-grow-1">
+                    <h4 class="fs-7 fw-bold mb-0">No.22 線上設計展</h4>
+                    <p class="mb-0">01 JUN — 31 OCT</p>
+                    <p class="link-dark">全票</p>
+                  </div>
+                  <p class="h6 fw-bold mb-0">NT$350</p>
                 </div>
-                <p class="h6 fw-bold mb-0">NT$350</p>
               </div>
-                
-            </div>
-            <!-- - 01 + -->
-            <div
-              class="
-                d-flex
-                flex-column flex-md-row
-                justify-content-center
-                align-items-center
-                w-30
-              "
-            >
-            <a href="#" class="link-black mb-1 mb-md-0 p-0 pe-md-1"
-            ><span class="material-icons-outlined">
-              remove
-              </span></a
-          >
-          <a href="#" class="link-black mb-1 mb-md-0 p-0 mx-md-2">
-            <p class="h1 fw-bold mb-0">01</p>
-          </a>
-          <a href="#" class="link-black mb-1 mb-md-0 p-0 ps-md-1"
-            ><span class="material-icons-outlined">
-              add
-              </span></a
-          >
-            </div>
+              <!-- - 01 + -->
+              <div
+                class="
+                  d-flex
+                  flex-column flex-md-row
+                  justify-content-center
+                  align-items-center
+                  w-30
+                "
+              >
+                <a href="#" class="link-black mb-1 mb-md-0 p-0 pe-md-1"
+                  ><span class="material-icons-outlined"> remove </span></a
+                >
+                <a href="#" class="link-black mb-1 mb-md-0 p-0 mx-md-2">
+                  <p class="h1 fw-bold mb-0">01</p>
+                </a>
+                <a href="#" class="link-black mb-1 mb-md-0 p-0 ps-md-1"
+                  ><span class="material-icons-outlined"> add </span></a
+                >
+              </div>
             </div>
           </div>
         </li>
         <li class="card border-0 card-close">
           <button
-          type="button"
-          class="btn-close text-reset p-2"
-          data-bs-dismiss="card-close"
-          aria-label="Close"
-        ></button>
-        
+            type="button"
+            class="btn-close text-reset p-2"
+            data-bs-dismiss="card-close"
+            aria-label="Close"
+          ></button>
+
           <div class="card-body d-flex px-10 pt-0 pb-5 mb-2">
             <div class="d-flex justify-content-between w-100">
-              
               <div class="d-flex w-100">
                 <img
                   src="https://images.unsplash.com/photo-1545178803-4056771d60a3?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1500&q=80"
                   alt="exhibition img"
                   class="card-img h-120 w-120"
                 />
-              <div class="d-flex flex-column justify-content-between ms-5">
-                <div class="title flex-grow-1">
-                  <h4 class="fs-7 fw-bold mb-0">高雄設計節</h4>
-                  <p class="mb-0">01 JUN — 31 OCT</p>
-                  <p class="link-dark">全票</p>
+                <div class="d-flex flex-column justify-content-between ms-5">
+                  <div class="title flex-grow-1">
+                    <h4 class="fs-7 fw-bold mb-0">高雄設計節</h4>
+                    <p class="mb-0">01 JUN — 31 OCT</p>
+                    <p class="link-dark">全票</p>
+                  </div>
+                  <p class="h6 fw-bold mb-0">NT$350</p>
                 </div>
-                <p class="h6 fw-bold mb-0">NT$350</p>
               </div>
-                
-            </div>
-            <!-- - 01 + -->
-            <div
-              class="
-                d-flex
-                flex-column flex-md-row
-                justify-content-center
-                align-items-center
-                w-30
-              "
-            >
-            <a href="#" class="link-black mb-1 mb-md-0 p-0 pe-md-1"
-            ><span class="material-icons-outlined">
-              remove
-              </span></a
-          >
-          <a href="#" class="link-black mb-1 mb-md-0 p-0 mx-md-2">
-            <p class="h1 fw-bold mb-0">01</p>
-          </a>
-          <a href="#" class="link-black mb-1 mb-md-0 p-0 ps-md-1"
-            ><span class="material-icons-outlined">
-              add
-              </span></a
-          >
-            </div>
+              <!-- - 01 + -->
+              <div
+                class="
+                  d-flex
+                  flex-column flex-md-row
+                  justify-content-center
+                  align-items-center
+                  w-30
+                "
+              >
+                <a href="#" class="link-black mb-1 mb-md-0 p-0 pe-md-1"
+                  ><span class="material-icons-outlined"> remove </span></a
+                >
+                <a href="#" class="link-black mb-1 mb-md-0 p-0 mx-md-2">
+                  <p class="h1 fw-bold mb-0">01</p>
+                </a>
+                <a href="#" class="link-black mb-1 mb-md-0 p-0 ps-md-1"
+                  ><span class="material-icons-outlined"> add </span></a
+                >
+              </div>
             </div>
           </div>
         </li>
-        
       </ul>
       <!-- bottom btn -->
       <div class="bg-black py-8">
-      <div class="d-flex justify-content-between align-items-center">
-        <div class="d-flex align-items-center">
-          <p class="h6 mb-0 text-white mb-0 me-7">小計</p>
-          <p class="h6 mb-0 text-white mb-0 ">NT$1050</p>
+        <div class="d-flex justify-content-between align-items-center">
+          <div class="d-flex align-items-center">
+            <p class="h6 mb-0 text-white mb-0 me-7">小計</p>
+            <p class="h6 mb-0 text-white mb-0">NT$1050</p>
+          </div>
+          <a href="ticket.html" class="a btn btn-white btn-lg link-primary"
+            >前往結帳</a
+          >
         </div>
-        <a href="ticket.html" class="a btn btn-white btn-lg link-primary">前往結帳</a>
       </div>
     </div>
-        
-    </div>
-    
+
     <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
     <script src="https://unpkg.com/swiper/swiper-bundle.js"></script>
     <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>