update image

css/style.css

@@ -14,7 +14,34 @@
   image-rendering: -webkit-optimize-contrast;
 }
 
+.container nav {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-pack: distribute;
+      justify-content: space-around;
+}
+
+.container nav .logo-box img:last-child {
+  width: 35%;
+  margin-left: 10px;
+}
+
+.container nav ul {
+  margin: 0;
+  padding: 0;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  list-style: none;
+}
+
+.container nav ul li {
+  margin: 20px;
+}
+
 .container header {
+  margin: 30px 0;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -34,27 +61,25 @@
   }
 }
 
-.container .logo a {
-  text-decoration: none;
-  font-weight: bold;
-}
-
-.container .logo a h2 {
-  margin: 0;
-  color: #4653a2;
-  font-size: 50px;
-  text-shadow: 0px 0px 3px #fde301;
+.container .logo {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  -webkit-box-pack: end;
+      -ms-flex-pack: end;
+          justify-content: end;
 }
 
-.container .logo a span {
-  color: #e7380d;
+.container .logo img:first-child {
+  width: 30%;
+  margin-right: 20px;
 }
 
-.container .logo a p {
-  margin: 0;
-  color: #009844;
-  font-size: 17px;
-  letter-spacing: 4px;
+.container .logo img:last-child {
+  width: 40%;
 }
 
 .container .banner {
@@ -115,17 +140,11 @@
 }
 
 .container .directions {
-  margin: 0 15%;
+  margin: 0 10%;
   max-width: 900px;
   font-weight: bold;
 }
 
-@media (max-width: 1200px) {
-  .container .directions {
-    margin: 0 10%;
-  }
-}
-
 @media (max-width: 767px) {
   .container .directions {
     margin: 0 5%;
@@ -165,13 +184,7 @@
 }
 
 .container .content {
-  padding: 0 15%;
-}
-
-@media (max-width: 1200px) {
-  .container .content {
-    padding: 0 10%;
-  }
+  padding: 0 10%;
 }
 
 @media (max-width: 767px) {
@@ -241,64 +254,11 @@
 
 .container footer {
   margin: auto;
+  margin-top: 30px;
 }
 
-.container footer h2 {
-  font-size: 70px;
-  color: #fff100;
-  text-shadow: 0px 0px 2px #000;
-}
-
-@media (max-width: 991px) {
-  .container footer h2 {
-    margin: 0;
-  }
-}
-
-.container footer .logo {
-  margin: 0 15px;
-}
-
-@media (max-width: 991px) {
-  .container footer .logo {
-    margin: 15px 0;
-  }
-}
-
-.container footer .logo a h2 {
-  font-size: 40px;
-}
-
-.container footer .text-box {
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
-}
-
-@media (max-width: 991px) {
-  .container footer .text-box {
-    -webkit-box-orient: vertical;
-    -webkit-box-direction: normal;
-        -ms-flex-direction: column;
-            flex-direction: column;
-  }
-}
-
-.container footer .text-box p {
-  margin: 0;
-}
-
-.container footer .text-box p:first-child {
-  color: #4553a3;
-  font-weight: bold;
-  font-size: 20px;
-}
-
-.container footer .text-box p:last-child {
-  font-weight: bold;
-  letter-spacing: 1px;
+.container footer img {
+  width: 100%;
+  margin-bottom: -15px;
 }
 /*# sourceMappingURL=style.css.map */

css/style.scss

@@ -5,7 +5,25 @@
   img {
     image-rendering: -webkit-optimize-contrast;
   }
+  nav {
+    display: flex;
+    justify-content: space-around;
+    .logo-box img:last-child {
+      width: 35%;
+      margin-left: 10px;
+    }
+    ul {
+      margin: 0;
+      padding: 0;
+      display: flex;
+      list-style: none;
+      li {
+        margin: 20px;
+      }
+    }
+  }
   header {
+    margin: 30px 0;
     display: flex;
     align-items: center;
     justify-content: space-around;
@@ -13,24 +31,36 @@
       flex-direction: column;
     }
   }
-  .logo a {
-    text-decoration: none;
-    font-weight: bold;
-    h2 {
-      margin: 0;
-      color: #4653a2;
-      font-size: 50px;
-      text-shadow: 0px 0px 3px #fde301;
-    }
-    span {
-      color: #e7380d;
-    }
-    p {
-      margin: 0;
-      color: #009844;
-      font-size: 17px;
-      letter-spacing: 4px;
-    }
+  .logo {
+    display: flex;
+    align-items: center;
+    justify-content: end;
+    img:first-child {
+      width: 30%;
+      margin-right: 20px;
+    }
+    img:last-child {
+      width: 40%;
+    }
+    // a {
+    //   text-decoration: none;
+    //   font-weight: bold;
+    //   h2 {
+    //     margin: 0;
+    //     color: #4653a2;
+    //     font-size: 50px;
+    //     text-shadow: 0px 0px 3px #fde301;
+    //   }
+    //   span {
+    //     color: #e7380d;
+    //   }
+    //   p {
+    //     margin: 0;
+    //     color: #009844;
+    //     font-size: 17px;
+    //     letter-spacing: 4px;
+    //   }
+    // }
   }
   .banner {
     display: flex;
@@ -42,7 +72,7 @@
       height: auto;
       @media (max-width: 991px) {
         width: 90%;
-       }
+      }
     }
     section {
       display: flex;
@@ -138,41 +168,46 @@
   }
   footer {
     margin: auto;
-    h2 {
-      font-size: 70px;
-      color: #fff100;
-      text-shadow: 0px 0px 2px #000;
-      @media (max-width: 991px) {
-       margin: 0;
-      }
-    }
-    .logo {
-      margin: 0 15px;
-      @media (max-width: 991px) {
-        margin: 15px 0;
-       }
-      a h2 {
-        font-size: 40px;
-      }
-    }
-    .text-box {
-      display: flex;
-      align-items: center;
-      @media (max-width: 991px) {
-        flex-direction: column;
-      }
-      p {
-        margin: 0;
-      }
-      p:first-child {
-        color: #4553a3;
-        font-weight: bold;
-        font-size: 20px;
-      }
-      p:last-child {
-        font-weight: bold;
-        letter-spacing: 1px;
-      }
-    }
+    margin-top: 30px;
+    img {
+      width: 100%;
+      margin-bottom: -15px;
+    }
+    // h2 {
+    //   font-size: 70px;
+    //   color: #fff100;
+    //   text-shadow: 0px 0px 2px #000;
+    //   @media (max-width: 991px) {
+    //     margin: 0;
+    //   }
+    // }
+    // .logo {
+    //   margin: 0 15px;
+    //   @media (max-width: 991px) {
+    //     margin: 15px 0;
+    //   }
+    //   a h2 {
+    //     font-size: 40px;
+    //   }
+    // }
+    // .text-box {
+    //   display: flex;
+    //   align-items: center;
+    //   @media (max-width: 991px) {
+    //     flex-direction: column;
+    //   }
+    //   p {
+    //     margin: 0;
+    //   }
+    //   p:first-child {
+    //     color: #4553a3;
+    //     font-weight: bold;
+    //     font-size: 20px;
+    //   }
+    //   p:last-child {
+    //     font-weight: bold;
+    //     letter-spacing: 1px;
+    //   }
+    // }
   }
 }

temporary.html

@@ -12,17 +12,14 @@
 <body>
   <div class="container">
     <header>
-      <img src="/img/基隆城市品牌 Logo-02.png" alt="">
+      <img src="/img/logo.png" alt="">
       <section class="logo">
-        <a href="">
-          <h2>元宇宙<span>線上觀展</span></h2>
-          <p>https://chuzmo.com/HxXfN9r</p>
-        </a>
+        <img src="/img/資產 2.png" alt="">
+        <img src="/img/資產 1.png" alt="">
       </section>
     </header>
-    <div style="display: flex; justify-content: center; margin-top: 30px;">
-      <iframe src="https://meta.chuzmo.com/fPc8PQN?embed_token=null" style="width: 1024px; height: 768px;"
-      allow="microphone; camera; vr; speaker; display-capture;"></iframe>
+    <div style="display: flex; justify-content: center;">
+      <iframe src="https://chuzmo.com/HxXfN9r?embed_token=null" style="width: 1024px; height: 768px;" allow="microphone; camera; vr; speaker;"></iframe>
     </div>
   </div>
 </body>