jeter20131220 пре 3 година
родитељ
комит
33aa8ed10d
8 измењених фајлова са 381 додато и 134 уклоњено
  1. BIN
      img/649061294.658407_x264.mp4
  2. BIN
      img/service/service1.jpg
  3. BIN
      img/service/service2.jpg
  4. BIN
      img/service/service3.jpg
  5. 142 31
      index2.html
  6. 115 35
      style.css
  7. 0 0
      style.css.map
  8. 124 68
      style.scss

BIN
img/649061294.658407_x264.mp4


BIN
img/service/service1.jpg


BIN
img/service/service2.jpg


BIN
img/service/service3.jpg


+ 142 - 31
index2.html

@@ -19,7 +19,83 @@
 </head>
 
 <body>
-    <section id="sec-works" class="container-fluid pb-5">
+    <section id="Navigation" class="container-fluid px-0 mx-0">
+        <div id="nav" class="row" style="padding:0;margin:0">
+            <div id="logo" class=" col-md-2 col-lg-6">
+                <a href=""> <img src="./img/LOGO.png" alt=""></a>
+            </div>
+            <div  class="link3 col-md-10 col-lg-4">
+                <a target="_blank" href="./index.html">首頁</a>
+                <a data-gt-target="#sec-service" data-gt-duration="800" data-gt-offset="60">服務介紹</a>
+                <a data-gt-target="#sec-works" data-gt-duration="800" data-gt-offset="60">成功案例</a>
+                <a data-gt-target="#sec13" data-gt-duration="800" data-gt-offset="60">聯絡我們</a>
+
+            </div>
+            <img id="menu-btn1" src="./img/menu.png" alt="">
+            
+            <div id="socail-link" class="col-md-10 col-lg-2 mx-0">
+                <a target="_blank" href="https://www.facebook.com/nftboard"><img src="./img/facebook (2).png"
+                        alt=""></a>
+                <a target="_blank" href="https://www.instagram.com/nftboard.info/"><img src="./img/instagram.png"
+                        alt=""></a>
+            </div>
+        </div>
+    </section>
+   
+    <div style="padding-top:8vw;" class="wrap container-fluid px-0 mx-0">
+        <div class="adv-banner">
+            <video autoplay muted loop playsinline>
+                <source src="./img/649061294.658407_x264.mp4" type="video/mp4">
+            </video>
+        </div>
+    </div>
+    <!-- ip代理服務介紹 -->
+    <section id="sec-service" class="py-5">
+     <div>
+       <h1><img style="width: 200px; margin-bottom: 24px;" class="me-3" src="./img/LOGO.png" alt="">IP X NFT</h1>
+     </div>
+       
+        <div class="container-fluid py-5">
+            
+            <div class="row">
+            <div class="col-lg-4">
+                <div class="card bg-dark text-white">
+                    <img class="img-fluid" src="./img/service/service1.jpg" class="card-img" alt="...">
+                    <div class="card-img-overlay d-flex align-items-end pb-5">
+                        <div>
+                            <h5 class="card-title">發行NFT作品:</h5>
+                            <p class="card-text">藝術遊戲、音樂、攝影、虛擬、與真實IP以創新形式發行對接全球渠道。</p>
+                        </div>
+                    </div>
+                  </div>
+            </div>
+            <div class="col-lg-4">
+                <div class="card bg-dark text-white">
+                    <img class="img-fluid" src="./img/service/service2.jpg" class="card-img" alt="...">
+                    <div class="card-img-overlay d-flex align-items-end pb-5">
+                        <div>
+                            <h5 class="card-title">策展活動:</h5>
+                            <p class="card-text">線上直播與線下實體展覽場地策畫,創造流量與實境體驗。</p>
+                        </div>
+                    </div>
+                  </div>
+            </div>
+            <div class="col-lg-4">
+                <div class="card bg-dark text-white">
+                    <img class="img-fluid" src="./img/service/service3.jpg" class="card-img" alt="...">
+                    <div class="card-img-overlay d-flex align-items-end pb-5">
+                        <div>
+                            <h5 class="card-title">運營與行銷</h5>
+                            <p class="card-text">專業諮詢與營運服務,透過創新模式的呈現打造客製化行銷。</p>
+                        </div>
+                    </div>
+                  </div>
+            </div>
+            </div>
+        </div>
+        
+    </section>
+    <section id="sec-works" class="container-fluid pb-5 pt-5">
         <div class="sec-work-title">
             <h1>NFTBoard 成功案例</h1>
         </div>
@@ -27,36 +103,71 @@
             <div id="sec-work-box" class="row"></div>
         </div>
     </section>
-    <section id="sec13">      
-        <form class="ip-service" action="">
-            <img  src="./img/LOGO.png" alt="">
-            <h1 class="my-4">聯繫我們</h1>
-            <label for="name">您的國家區域</label>
-            <input type="text" id="loc" placeholder="請留下您的所在區域" required>
-        
-            <label for="name">姓名</label>
-            <input type="text" id="name" placeholder="請留下您的姓名" required>
-        
-            <label for="eamil">聯絡Email</label>
-            <input type="email" id="email" placeholder="請留下您的Email" required>
-        
-            <label  for="name">聯絡手機</label>
-            <input type="phone" id="phone" placeholder="請留下您的聯繫方式" required>
-        
-            <label for="name">合作方式</label>
-        
-           <label for="checkbox" id="selector1"><input type="checkbox" style="width:15px;height:15px; margin:10px;">異業合作</label>
-           <label for="checkbox" id="selector1"><input type="checkbox" style="width:15px;height:15px; margin:10px;">廣告刊登</label>
-           <label for="checkbox" id="selector1"><input type="checkbox" style="width:15px;height:15px; margin:10px;">創作者IP x NFT代理發行(將您的音樂、美術、攝影、3D等作品對接到全球NFT平台)</label>
-           <label for="checkbox" id="selector1"><input type="checkbox" style="width:15px;height:15px; margin:10px;">創作者IP x NFT知識產權聯動行銷(透過IP授權與營銷聯動,創造版權新收入)</label>
-        
-           <label class="mt-4" for="name">您的作品網址:(無則免填)</label>
-           <input type="text" id="work" placeholder="請留下您的作品網址" required>
-        
-           <input class="btn" style="opacity: 1;" type="submit" value="提交">
-        </form>
+    <section id="sec13" class="py-5 mx-0">
+        <div class="row mx-0 px-0">
+         
+            <div class="right col-lg-5 px-0">
+                <div>
+                    <img style="width: 200px; margin-bottom: 24px;"  src="./img/LOGO.png" alt="">
+                    <h1>IP代理發行服務</h1>
+                    <div>
+                        <h2>發行NFT作品</h2>
+                        <p>讓您的作品被全世界看見</p>
+                    </div>
+                   
+                    <h2>策展活動</h2>
+                    <h2>運營與行銷</h2>
+                    <!-- <ul>
+                        <li>發行NFT作品</li>
+                        <li>策展活動</li>
+                        <li>運營與行銷</li>
+                    </ul> -->
+                  </div>
+            </div>
+            <div class="left col-lg-7">
+                <form class="ip-service" action="">
+                    <img  src="./img/LOGO.png" alt="">
+                    <h1 class="my-4">聯繫我們</h1>
+                    <label for="name">您的國家區域</label>
+                    <input type="text" id="loc" placeholder="請留下您的所在區域" required>
+                
+                    <label for="name">姓名</label>
+                    <input type="text" id="name" placeholder="請留下您的姓名" required>
+                
+                    <label for="eamil">聯絡Email</label>
+                    <input type="email" id="email" placeholder="請留下您的Email" required>
+                
+                    <label  for="name">聯絡手機</label>
+                    <input type="phone" id="phone" placeholder="請留下您的聯繫方式" required>
+                
+                    <label for="name">合作方式</label>
+                
+                   <label for="checkbox" id="selector1"><input type="checkbox" style="width:15px;height:15px; margin:10px;">異業合作</label>
+                   <label for="checkbox" id="selector1"><input type="checkbox" style="width:15px;height:15px; margin:10px;">廣告刊登</label>
+                   <label for="checkbox" id="selector1"><input type="checkbox" style="width:15px;height:15px; margin:10px;">創作者IP x NFT代理發行(將您的音樂、美術、攝影、3D等作品對接到全球NFT平台)</label>
+                   <label for="checkbox" id="selector1"><input type="checkbox" style="width:15px;height:15px; margin:10px;">創作者IP x NFT知識產權聯動行銷(透過IP授權與營銷聯動,創造版權新收入)</label>
+                
+                   <label class="mt-4" for="name">您的作品網址:(無則免填)</label>
+                   <input type="text" id="work" placeholder="請留下您的作品網址" required>
+                
+                   <input class="btn" style="opacity: 1;" type="submit" value="提交">
+                </form>
+            </div>
+        </div>      
     </section>
-   
+    <footer id="footer" class="container-fluid mt-5" style="padding:0;margin:0">
+        <div class="text" style="padding-right:0;">
+            <a target="_blank" href="mailto:nftboard.info@gmail.com">
+                <h2>客服信箱:nftboard.info@gmail.com</h2>
+            </a>
+            <h2>公司名稱:微生活知識科技公司</h2>
+            <a target="_blank" href="https://www.facebook.com/nftboard">
+                <img src="./img/facebook (2).png" alt=""></a>
+            <a target="_blank" href="https://www.instagram.com/nftboard.info/"><img src="./img/instagram.png"
+                    alt=""></a>
+            <p>NFTBoard &copy; All Rights Reserved.</p>
+        </div>
+    </footer>
 
     <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"
         integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p"
@@ -86,7 +197,7 @@
                     const limit = 7;
                     for (var i = 0; i < limit; i++) {
                         secwork += ' \
-                            <div  class="work-box col-12 col-lg-4 p-3  h-100 d-inline-block">\
+                            <div  class="work-box col-12 col-lg-4 h-100 d-inline-block">\
                                 <div class="card">\
                                     <a href="' + msg[i].website + '" " target="_blank"><img class="img-fluid" src="' + msg[i].workimg + '" alt=""></a> \
                                     <div class="card-body">\

+ 115 - 35
style.css

@@ -77,19 +77,22 @@ body .learn-more:hover {
 }
 
 #Navigation #link,
-#Navigation .link2 {
+#Navigation .link2,
+#Navigation .link3 {
   padding: 4vw 1vw 2vw 1vw;
 }
 
 @media screen and (max-width: 767px) {
   #Navigation #link,
-  #Navigation .link2 {
+  #Navigation .link2,
+  #Navigation .link3 {
     display: none;
   }
 }
 
 #Navigation #link a,
-#Navigation .link2 a {
+#Navigation .link2 a,
+#Navigation .link3 a {
   text-decoration: none;
   color: #fff;
   letter-spacing: 1px;
@@ -101,12 +104,14 @@ body .learn-more:hover {
 }
 
 #Navigation #link a :hover,
-#Navigation .link2 a :hover {
+#Navigation .link2 a :hover,
+#Navigation .link3 a :hover {
   opacity: 0.8;
 }
 
 #Navigation #link a:after,
-#Navigation .link2 a:after {
+#Navigation .link2 a:after,
+#Navigation .link3 a:after {
   content: "";
   display: block;
   width: 80%;
@@ -122,20 +127,23 @@ body .learn-more:hover {
 
 @media screen and (max-width: 767px) {
   #Navigation #link a:after,
-  #Navigation .link2 a:after {
+  #Navigation .link2 a:after,
+  #Navigation .link3 a:after {
     display: none;
   }
 }
 
 #Navigation #link a:hover:after,
-#Navigation .link2 a:hover:after {
+#Navigation .link2 a:hover:after,
+#Navigation .link3 a:hover:after {
   width: 80%;
   opacity: 1;
 }
 
 @media screen and (max-width: 1024px) {
   #Navigation #link a,
-  #Navigation .link2 a {
+  #Navigation .link2 a,
+  #Navigation .link3 a {
     padding: 5px;
     padding-top: 2vw;
   }
@@ -151,6 +159,10 @@ body .learn-more:hover {
   }
 }
 
+#Navigation .link3 {
+  padding: 4vw 1vw 1vw 0.5vw;
+}
+
 #Navigation #socail-link {
   padding: 4vw 5vw 2vw 1vw;
   text-align: right;
@@ -844,7 +856,7 @@ body .learn-more:hover {
 
 .wrap .adv-banner {
   width: 100%;
-  height: 90vh;
+  height: 55vw;
   position: relative;
   overflow: hidden;
   display: -webkit-box;
@@ -867,19 +879,35 @@ body .learn-more:hover {
 .wrap .adv-banner video {
   position: absolute;
   width: 100%;
-  height: 90%;
+  height: 100%;
   top: 0;
   left: 0;
   -o-object-fit: cover;
      object-fit: cover;
 }
 
+@media screen and (max-width: 767px) {
+  #sec-works {
+    margin: 10px;
+  }
+}
+
 #sec-works .sec-work-container {
   width: 85vw;
 }
 
+@media screen and (max-width: 767px) {
+  #sec-works .sec-work-container {
+    width: 80vw;
+  }
+}
+
+#sec-works #sec-work-box .work-box {
+  margin: 10px;
+}
+
 #sec-works #sec-work-box .work-box .card {
-  height: 800px;
+  height: 850px;
   text-align: center;
   display: inline-block !important;
   -webkit-transition: 0.3s;
@@ -1269,14 +1297,14 @@ body .learn-more:hover {
 }
 
 #sec04 #sec04-container {
-  background: -webkit-gradient(linear, left top, left bottom, color-stop(15%, #414141), color-stop(0%, #eee));
-  background: linear-gradient(180deg, #414141 15%, #eee 0%);
+  background: -webkit-gradient(linear, left top, left bottom, color-stop(30%, #414141), color-stop(0%, #fff));
+  background: linear-gradient(180deg, #414141 30%, #fff 0%);
   padding: 20px;
   padding-bottom: 50px;
 }
 
 #sec04 #sec04-container .card {
-  border: none;
+  padding: 5px;
   border-radius: 0%;
 }
 
@@ -2242,7 +2270,7 @@ body .learn-more:hover {
 
 #sec08 #sec08-title .col-lg-9 #OUR-PARTNER {
   position: absolute;
-  top: -10px;
+  top: 20px;
   right: 0vw;
 }
 
@@ -2253,7 +2281,7 @@ body .learn-more:hover {
 }
 
 #sec08 #sec08-title .col-lg-9 #OUR-PARTNER h5 {
-  font-size: 5em;
+  font-size: 48px;
   opacity: 0.8;
   /*  文字的距離  */
   /*  通常搭配內距左邊  */
@@ -2274,7 +2302,7 @@ body .learn-more:hover {
 #sec08 #sec08-title h1 {
   padding: 10px;
   color: #fff;
-  font-size: 45px;
+  font-size: 48px;
   font-weight: 900;
 }
 
@@ -2357,8 +2385,8 @@ body .learn-more:hover {
 
 #sec09 .col-lg-9 #TRADING {
   position: absolute;
-  right: -10px;
-  top: -180px;
+  right: -1px;
+  top: -50px;
 }
 
 @media screen and (max-width: 767px) {
@@ -2375,7 +2403,7 @@ body .learn-more:hover {
 }
 
 #sec09 .col-lg-9 #TRADING h5 {
-  font-size: calc(7rem + (1.3-1.2) * ((100vw - 600px) / (1200 - 600)));
+  font-size: 48px;
   opacity: 0.8;
   /*  文字的距離  */
   /*  通常搭配內距左邊  */
@@ -2399,12 +2427,12 @@ body .learn-more:hover {
 }
 
 #sec09 #sec09-title {
-  padding-top: 15vw;
+  padding-top: 10vw;
 }
 
 #sec09 #sec09-title h1 {
   color: #fff;
-  font-size: 45px;
+  font-size: 48px;
   font-weight: 900;
   padding: 5px 10px;
 }
@@ -2672,10 +2700,15 @@ body .learn-more:hover {
   font-size: 24px;
 }
 
-.ip-service {
+#sec13 {
+  background-image: url(./img/sec04banner.jpg);
+  background-size: cover;
+}
+
+#sec13 .left .ip-service {
   width: 50vw;
   padding: 30px;
-  margin: 30px auto 0;
+  margin: 0px auto;
   background: #252628;
   -webkit-box-shadow: 5px 10px 10px rgba(0, 0, 0, 0.5);
           box-shadow: 5px 10px 10px rgba(0, 0, 0, 0.5);
@@ -2685,36 +2718,38 @@ body .learn-more:hover {
 }
 
 @media screen and (max-width: 767px) {
-  .ip-service {
+  #sec13 .left .ip-service {
     width: 100vw;
+    margin: 0;
   }
 }
 
-.ip-service img {
+#sec13 .left .ip-service img {
   width: 200px;
 }
 
-.ip-service #name,
-.ip-service #email,
-.ip-service #phone,
-.ip-service #loc,
-.ip-service #selector1, .ip-service #work {
+#sec13 .left .ip-service #name,
+#sec13 .left .ip-service #email,
+#sec13 .left .ip-service #phone,
+#sec13 .left .ip-service #loc,
+#sec13 .left .ip-service #selector1,
+#sec13 .left .ip-service #work {
   width: 100%;
   height: 35px;
   margin: 10px 0;
   padding: 20px 5px;
-  background: #1B1C1E;
+  background: #1b1c1e;
   border: 1px solid rgba(0, 0, 0, 0.3);
   border-radius: 5px;
 }
 
-.ip-service #selector1 {
+#sec13 .left .ip-service #selector1 {
   padding: 10px 5px;
   background: none;
   border: none;
 }
 
-.ip-service .btn {
+#sec13 .left .ip-service .btn {
   width: 200px;
   margin: 30px 0px;
   padding: 15px 0;
@@ -2724,9 +2759,54 @@ body .learn-more:hover {
   color: #fff;
 }
 
-.ip-service .btn:hover {
+#sec13 .left .ip-service .btn:hover {
   color: #93000a;
   background: #fff;
   border: 1px solid #93000a;
 }
+
+#sec13 .right img {
+  margin: 0px 50px;
+}
+
+#sec13 .right h1 {
+  margin: 10px 50px;
+  color: #fff;
+  font-weight: 900;
+  font-size: 72px;
+  margin-bottom: 50px;
+}
+
+#sec13 .right h2 {
+  padding: 30px;
+  margin: 20px 5px;
+  color: #fff;
+  font-weight: 900;
+  font-size: 40px;
+}
+
+#sec13 .right ul {
+  color: #fff;
+  font-weight: 900;
+  font-size: 45px;
+}
+
+#sec-service {
+  background: #000;
+}
+
+#sec-service h5 {
+  font-size: 24px;
+}
+
+#sec-service p {
+  font-size: 20px;
+}
+
+#sec-service h1 {
+  text-align: center;
+  color: #fff;
+  font-weight: 900;
+  font-size: 72px;
+}
 /*# sourceMappingURL=style.css.map */

Разлика између датотеке није приказан због своје велике величине
+ 0 - 0
style.css.map


+ 124 - 68
style.scss

@@ -62,7 +62,8 @@ body {
     }
 
     #link,
-    .link2 {
+    .link2,
+    .link3 {
         padding: 4vw 1vw 2vw 1vw;
         @media screen and(max-width:$moblie) {
             display: none;
@@ -111,6 +112,10 @@ body {
             display: inline;
         }
     }
+
+    .link3 {
+        padding: 4vw 1vw 1vw 0.5vw;
+    }
     #socail-link {
         padding: 4vw 5vw 2vw 1vw;
         text-align: right;
@@ -645,7 +650,7 @@ body {
     width: 100vw;
     .adv-banner {
         width: 100%;
-        height: 90vh;
+        height: 55vw;
         position: relative;
         overflow: hidden;
         display: flex;
@@ -658,7 +663,7 @@ body {
     .adv-banner video {
         position: absolute;
         width: 100%;
-        height: 90%;
+        height: 100%;
         top: 0;
         left: 0;
         object-fit: cover;
@@ -666,13 +671,21 @@ body {
 }
 // 活動作品集
 #sec-works {
+    @media screen and(max-width:$moblie) {
+        margin: 10px;
+    }
     .sec-work-container {
         width: 85vw;
+        @media screen and(max-width:$moblie) {
+            width: 80vw;
+        }
     }
+
     #sec-work-box {
         .work-box {
+            margin: 10px;
             .card {
-                height: 800px;
+                height: 850px;
                 text-align: center;
                 display: inline-block !important;
                 transition: 0.3s;
@@ -993,15 +1006,13 @@ body {
         width: 120px;
     }
     #sec04-container {
-        background: linear-gradient(180deg, #414141 15%, #eee 0%);
+        background: linear-gradient(180deg, #414141 30%, #fff 0%);
         // background: rgba(0,0,0,0.72);
         padding: 20px;
         padding-bottom: 50px;
         .card {
-            border: none;
-
+          padding: 5px;
             border-radius: 0%;
-
             .card-title {
                 font-weight: 900;
             }
@@ -2050,13 +2061,13 @@ body {
             position: relative;
             #OUR-PARTNER {
                 position: absolute;
-                top: -10px;
+                top: 20px;
                 right: 0vw;
                 @media screen and(max-width:$moblie) {
                     top: 0px;
                 }
                 h5 {
-                    font-size: 5em;
+                    font-size: 48px;
                     opacity: 0.8;
                     /*  文字的距離  */
                     /*  通常搭配內距左邊  */
@@ -2077,7 +2088,7 @@ body {
         h1 {
             padding: 10px;
             color: #fff;
-            font-size: 45px;
+            font-size: 48px;
             font-weight: 900;
 
             @media screen and(max-width:$moblie) {
@@ -2131,14 +2142,13 @@ body {
 
 #sec09 {
     background: #414141;
-
     padding-bottom: 5vw;
     .col-lg-9 {
         position: relative;
         #TRADING {
             position: absolute;
-            right: -10px;
-            top: -180px;
+            right: -1px;
+            top: -50px;
             @media screen and(max-width:$moblie) {
                 top: 5px;
                 right: 30px;
@@ -2147,7 +2157,7 @@ body {
                 right: 20px;
             }
             h5 {
-                font-size: calc(7rem + (1.3-1.2) * ((100vw - 600px) / (1200 - 600)));
+                font-size: 48px;
                 opacity: 0.8;
                 /*  文字的距離  */
                 /*  通常搭配內距左邊  */
@@ -2170,11 +2180,11 @@ body {
         background-blend-mode: overlay;
     }
     #sec09-title {
-        padding-top: 15vw;
+        padding-top: 10vw;
 
         h1 {
             color: #fff;
-            font-size: 45px;
+            font-size: 48px;
             font-weight: 900;
             padding: 5px 10px;
 
@@ -2347,7 +2357,7 @@ body {
         font-size: 16px;
     }
 }
-
+// ip代理服務
 #sec11 {
     #sec11-container {
         h1 {
@@ -2382,57 +2392,103 @@ body {
         }
     }
 }
-
-// ip代理服務
-.ip-service {
-    width: 50vw;
-    padding: 30px;
-    margin: 30px auto 0;
-    background: #252628;
-    box-shadow: 5px 10px 10px rgba(0, 0, 0, 0.5);
-    color: white;
-    border-radius: 10px;
-    font-size: 16px;
-    @media screen and(max-width:$moblie) {
-        width: 100vw;
-    }
-    img{
-        width: 200px;
+#sec13 {
+    background-image: url(./img/sec04banner.jpg);
+    background-size: cover;
+    .left{
+        .ip-service {
+            width: 50vw;
+            padding: 30px;
+            margin: 0px auto;
+            background: #252628;
+            box-shadow: 5px 10px 10px rgba(0, 0, 0, 0.5);
+            color: white;
+            border-radius: 10px;
+            font-size: 16px;
+            @media screen and(max-width:$moblie) {
+                width: 100vw;
+                margin: 0;
+            }
+            img {
+                width: 200px;
+            }
+            #name,
+            #email,
+            #phone,
+            #loc,
+            #selector1,
+            #work {
+                width: 100%;
+                height: 35px;
+                margin: 10px 0;
+                padding: 20px 5px;
+                background: #1b1c1e;
+                border: 1px solid rgba(0, 0, 0, 0.3);
+                border-radius: 5px;
+            }
+    
+            #selector1 {
+                padding: 10px 5px;
+                background: none;
+                border: none;
+            }
+    
+            .btn {
+                width: 200px;
+                margin: 30px 0px;
+                padding: 15px 0;
+                background-color: #93000a;
+                /*   邊框:寬度 樣式 顏色  */
+                border: 0 solid #000;
+                color: #fff;
+                &:hover {
+                    color: #93000a;
+                    background: #fff;
+                    border: 1px solid #93000a;
+                }
+            }
+        }
     }
-    #name,
-    #email,
-    #phone,
-    #loc,
-    #selector1,#work {
-        width: 100%;
-        height: 35px;
-        margin: 10px 0;
-        padding: 20px 5px;
-        background:#1B1C1E;
-        border: 1px solid rgba(0, 0, 0, 0.3);
-        border-radius: 5px;
-    }
-   
-    #selector1{
-        padding: 10px 5px;
-        background:none;
-        border:none;
-    }
-
-    .btn{
-        width: 200px;
-        margin:30px 0px ;
-        padding:15px 0;
-        background-color:#93000a;
-        /*   邊框:寬度 樣式 顏色  */
-        border:0 solid #000;
-        color: #fff;
-        &:hover {
-            color: #93000a;
-            background: #fff;
-            border: 1px solid #93000a;
+    .right{
+        img{
+            margin: 0px 50px;
         }
-      }
-      
+        h1 {
+            margin: 10px 50px;
+            color: #fff;
+            font-weight: 900;
+            font-size: 72px;
+            margin-bottom: 50px;
+        }
+        h2{
+        padding: 30px;
+            margin: 20px 5px;
+            color: #fff;
+            font-weight: 900;
+            font-size: 40px;
      
+          
+        }
+        ul{
+            color: #fff;
+            font-weight: 900;
+            font-size: 45px;
+        }
+    }
+}
+#sec-service {
+    background: #000;
+    h5 {
+        font-size: 24px;
+    }
+    p {
+        font-size: 20px;
+    }
+    h1 {
+        text-align: center;
+        color: #fff;
+        font-weight: 900;
+        font-size: 72px;
+    }
+    
 }

Неке датотеке нису приказане због велике количине промена