Inicio Explorar Ayuda
Registro Iniciar sesión
choozmo
/
NFTBoard
2
0
Fork 0
Archivos Incidencias 0 Pull Requests 0 Wiki
Explorar el Código

版面調整

jeter20131220 hace 3 años
padre
d1fc04d924
commit
575a6762a3
Se han modificado 4 ficheros con 167 adiciones y 77 borrados
Dividir vista Mostrar estadísticas de diff
  1. 61 31
      index.html
  2. 52 18
      style.css
  3. 0 0
      style.css.map
  4. 54 28
      style.scss

+ 61 - 31
index.html
Ver fichero 

@@ -11,13 +11,13 @@
 
 
 
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet"
 
-    integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
 
+        integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
 
     <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css" />
 
     <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css" />
 
     <link rel="stylesheet" href="./style.css">
 
 </head>
 
 
-<body id="top">
 
+<body id="top" class="container-fluid w-100" style="padding: 0; margin: 0;">
 
 
     <!-- 主選單 -->
 
     <section id="Navigation" class="container-fluid" style="padding:0;margin:0">
 
@@ -195,7 +195,7 @@
 
     </section>
 
     <!-- 廣告區塊 -->
 
     <section id="sec-adv">
 
-        <div id="sec-adv-container" class="container-fluid w-auto py-5">
 
+        <div id="sec-adv-container" class="container-fluid py-5">
 
             <div id="sec01-container-card" class="row">
 
 
                 <div class="col-12 py-3 col-lg-6">
 
@@ -212,7 +212,7 @@
 
     <!-- 作品集活動區塊 -->
 
     <section id="sec-works" class="container-fluid py-3">
 
         <div class="sec-work-title">
 
-            <h1>作品</h1>
 
+            <h1>NFTBoard Protfolio</h1>
 
         </div>
 
         <div id="sec-work-container" class="container-fluid">
 
             <div id="sec-work-box" class="row"></div>
 
@@ -3685,31 +3685,47 @@
 
 
     <!-- 合作夥伴 -->
 
     <section id="sec08">
 
-        <div id="sec08-title">
 
-            <h1>合作夥伴</h1>
 
-        </div>
 
         
-        <div id="sec08-container-box">
 
+        <div id="sec08-container-box" class="container-fluid">
 
             <div id="sec08-container" class="container-fluid">
 
+                <div id="sec08-title" class="container-fluid">
 
+                    <div class="row">
 
+                        <div class="col-3">
 
+                            <h1>合作夥伴</h1>
 
+                        </div>
 
+                        <div class="col-9">
 
+                            <div  id="OUR-PARTNER">
 
+                                <h5>OUR PARTNER</h5>
 
+                            </div>
 
+                        </div>
 
+                    </div>
 
+
 
+
 
+                </div>
 
                 <div class="card">
 
 
                     <div id="sec08-slider" class="row">
 
-                        <div class="col-3"><a target="_blank" href=""><img class="img-fluid" src="./img/sec08/sec06-8.png" alt=""></a>
 
+                        <div class="col-3"><a target="_blank" href=""><img class="img-fluid"
 
+                                    src="./img/sec08/sec06-8.png" alt=""></a>
 
                         </div>
 
-                        <div class="col-3"><a target="_blank" href="https://www.facebook.com/ARK.TPE/"><img class="img-fluid" src="./img/sec08/sec06-02.png" alt=""></a>
 
+                        <div class="col-3"><a target="_blank" href="https://www.facebook.com/ARK.TPE/"><img
 
+                                    class="img-fluid" src="./img/sec08/sec06-02.png" alt=""></a>
 
                         </div>
 
-                        <div class="col-3"><a target="_blank" href="https://www.chain.tw/"><img class="img-fluid" src="./img/sec08/sec06-04.png" alt=""></a>
 
+                        <div class="col-3"><a target="_blank" href="https://www.chain.tw/"><img class="img-fluid"
 
+                                    src="./img/sec08/sec06-04.png" alt=""></a>
 
                         </div>
 
-                        <div  class="col-3 d-flex align-items-center justfy-content-center"><a target="_blank" href="https://www.facebook.com/Shengeng.Foundation/"><img
 
-                                    class="img-fluid" src="./img/sec08/sec06-05.png" alt=""></a></div>
 
-                        <div class="col-3"><a target="_blank" href="https://www.ampaimusic.com/"><img class="img-fluid" src="./img/sec08/sec06-01.jpg" alt=""></a>
 
+                        <div class="col-3 d-flex align-items-center justfy-content-center"><a target="_blank"
 
+                                href="https://www.facebook.com/Shengeng.Foundation/"><img class="img-fluid"
 
+                                    src="./img/sec08/sec06-05.png" alt=""></a></div>
 
+                        <div class="col-3"><a target="_blank" href="https://www.ampaimusic.com/"><img class="img-fluid"
 
+                                    src="./img/sec08/sec06-01.jpg" alt=""></a>
 
                         </div>
 
                         <div class="col-3"><a target="_blank"
 
                                 href="https://www.oursong.com/party/vbloqxgl?redeem_code=XJBONRDL"><img
 
-                                class="img-fluid" src="./img/sec08/oursong.jpg" alt=""></a></div>
 
+                                    class="img-fluid" src="./img/sec08/oursong.jpg" alt=""></a></div>
 
 
-                        <div class="col-3"><a target="_blank" href="https://opentalk.center/"><img class="sec08-1 img-fluid" 
-                        src="./img/sec08/logo01_jpg.jpg" alt=""></a></div>
 
+                        <div class="col-3"><a target="_blank" href="https://opentalk.center/"><img
 
+                                    class="sec08-1 img-fluid" src="./img/sec08/logo01_jpg.jpg" alt=""></a></div>
 
 
                     </div>
 
                 </div>
 
@@ -3718,24 +3734,38 @@
 
     </section>
 
     <!-- 交易平台 -->
 
     <section id="sec09">
 
+
 
         <div id="sec09-container-box">
 
-            <div id="sec09-title">
 
-                <h1>交易平台</h1>
 
-            </div>
 
+
 
             <div id="sec09-container" class="container-fluid">
 
+                <div id="sec09-title">
 
+                    <div class="row">
 
+                        <div class="col-3">
 
+                            <h1>交易平台</h1>
 
+                        </div>
 
+                        <div  class="col-9">
 
+                            <div id="TRADING">
 
+
 
+                                <h5>TRADING</h5>
 
+                                <h5>PIATFORM</h5>
 
+                            </div>
 
+                        </div>
 
+                    </div>
 
+
 
+                </div>
 
                 <div class="card">
 
 
                     <div class="row">
 
-                        <div  class="sec09-1 col-3 py-3"><a target="_blank" href="https://mintable.app/browse"><img  class="img-fluid"
 
-                                    src="./img/sec09/sec09-adv-1.jpeg" alt=""></a></div>
 
-                        <div class="col-3 py-3"><a target="_blank" href="https://opensea.io/"><img  class="img-fluid"
 
+                        <div class="sec09-1 col-3 py-3"><a target="_blank" href="https://mintable.app/browse"><img
 
+                                    class="img-fluid" src="./img/sec09/sec09-adv-1.jpeg" alt=""></a></div>
 
+                        <div class="col-3 py-3"><a target="_blank" href="https://opensea.io/"><img class="img-fluid"
 
                                     src="./img/sec09/sec09-adv-2.png" alt=""></a></div>
 
-                        <div  class="col-3 py-3"><a target="_blank" href="https://www.binance.com/zh-TW/nft"><img  class="img-fluid"
 
-                                    src="./img/sec09/sec09-adv-3.jpg" alt=""></a></div>
 
-                        <div class="sec09-1 col-3 py-3"><a target="_blank" href="https://mintable.app/browse"><img  class="img-fluid"
 
-                                    src="./img/sec09/sec09-adv-4.png" alt=""></a></div>
 
-                        <div class="sec09-1 col-3 py-3"><a target="_blank" href="https://makersplace.com/"><img  class="img-fluid"
 
-                                    src="./img/sec09/sec09-adv-6.png" alt=""></a></div>
 
+                        <div class="col-3 py-3"><a target="_blank" href="https://www.binance.com/zh-TW/nft"><img
 
+                                    class="img-fluid" src="./img/sec09/sec09-adv-3.jpg" alt=""></a></div>
 
+                        <div class="sec09-1 col-3 py-3"><a target="_blank" href="https://mintable.app/browse"><img
 
+                                    class="img-fluid" src="./img/sec09/sec09-adv-4.png" alt=""></a></div>
 
+                        <div class="sec09-1 col-3 py-3"><a target="_blank" href="https://makersplace.com/"><img
 
+                                    class="img-fluid" src="./img/sec09/sec09-adv-6.png" alt=""></a></div>
 
                     </div>
 
                 </div>
 
             </div>
 
@@ -3897,7 +3927,7 @@
 
                         slidesToScroll: 1,
 
                         infinite: true,
 
                         dots: true,
 
-                       
+
 
                         responsive: [
 
                             {
 
                                 breakpoint: 600, // RWD在1024寬度時切換顯示數量
 
@@ -3906,7 +3936,7 @@
 
                                     slidesToShow: 1, //一次顯示3個
 
                                     slidesToScroll: 1,//切換下一頁時移動3個
 
                                     infinite: true,
 
-                                    
+
 
                                 }
 
                             },
 
                         ]

+ 52 - 18
style.css
Ver fichero 

@@ -1963,6 +1963,7 @@ body .learn-more:hover {
 
   padding-bottom: 5vw;
 
   background: -webkit-gradient(linear, left top, left bottom, color-stop(35%, #414141), color-stop(30%, transparent), color-stop(55%, #fff));
 
   background: linear-gradient(180deg, #414141 35%, transparent 30%, #fff 55%);
 
+  position: relative;
 
 }
 
 
 #sec08 #sec08-container-box {
 
@@ -1973,12 +1974,33 @@ body .learn-more:hover {
 
 
 #sec08 #sec08-title {
 
   background: #414141;
 
-  padding: 3vw 0;
 
+  padding-top: 5vw;
 
 }
 
 
-#sec08 #sec08-title h1 {
 
+#sec08 #sec08-title .col-9 {
 
+  position: relative;
 
+}
 
+
 
+#sec08 #sec08-title .col-9 #OUR-PARTNER {
 
+  position: absolute;
 
+  top: -10px;
 
+  right: 0vw;
 
+}
 
+
 
+#sec08 #sec08-title .col-9 #OUR-PARTNER h5 {
 
+  font-size: 5em;
 
+  opacity: 0.8;
 
+  /*  文字的距離  */
 
+  /*  通常搭配內距左邊  */
 
   text-align: center;
 
-  padding: 15px;
 
+  letter-spacing: 10px;
 
+  font-weight: 900;
 
+  padding-left: 30px;
 
+  color: #f5f5f5;
 
+}
 
+
 
+#sec08 #sec08-title h1 {
 
+  padding: 10px;
 
   color: #fff;
 
   font-size: 45px;
 
   font-weight: 900;
 
@@ -2005,10 +2027,6 @@ body .learn-more:hover {
 
   }
 
 }
 
 
-#sec08 #sec08-container {
 
-  text-align: center;
 
-}
 
-
 
 #sec08 #sec08-container .card {
 
   border: none;
 
   -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
 
@@ -2036,10 +2054,6 @@ body .learn-more:hover {
 
   padding: 0px !important;
 
 }
 
 
-#sec08 #sec08-container .col-3 {
 
-  margin: 10px 0;
 
-}
 
-
 
 #sec08 #sec08-container .col-3 img {
 
   padding: 40px;
 
   -o-object-fit: cover;
 
@@ -2052,6 +2066,32 @@ body .learn-more:hover {
 
   }
 
 }
 
 
+#sec09 {
 
+  background: #9d9d9d;
 
+  padding-bottom: 5vw;
 
+}
 
+
 
+#sec09 .col-9 {
 
+  position: relative;
 
+}
 
+
 
+#sec09 .col-9 #TRADING {
 
+  position: absolute;
 
+  right: -10px;
 
+  top: -150px;
 
+}
 
+
 
+#sec09 .col-9 #TRADING h5 {
 
+  font-size: calc(7rem + (1.3-1.2) * ((100vw - 600px) / (1200 - 600)));
 
+  opacity: 0.8;
 
+  /*  文字的距離  */
 
+  /*  通常搭配內距左邊  */
 
+  letter-spacing: 10px;
 
+  font-weight: 900;
 
+  padding-left: 30px;
 
+  color: #414141;
 
+}
 
+
 
 #sec09 #sec09-container-box {
 
   background-size: contain;
 
   background-repeat: no-repeat;
 
@@ -2059,12 +2099,10 @@ body .learn-more:hover {
 
 }
 
 
 #sec09 #sec09-title {
 
-  padding: 5vw;
 
-  background: #414141;
 
+  padding-top: 15vw;
 
 }
 
 
 #sec09 #sec09-title h1 {
 
-  text-align: center;
 
   color: #fff;
 
   font-size: 45px;
 
   font-weight: 900;
 
@@ -2092,10 +2130,6 @@ body .learn-more:hover {
 
   }
 
 }
 
 
-#sec09 #sec09-container {
 
-  text-align: center;
 
-}
 
-
 
 #sec09 #sec09-container .card {
 
   padding-top: 5vw;
 
   padding-bottom: 5vw;

La diferencia del archivo ha sido suprimido porque es demasiado grande
+ 0 - 0
style.css.map


+ 54 - 28
style.scss
Ver fichero 

@@ -485,7 +485,6 @@ body {
 
         width: 85vw;
 
     }
 
     #sec-work-box {
 
-        
         .work-box {
 
             .card {
 
                 text-align: center;
 
@@ -1663,9 +1662,8 @@ body {
 
     }
 
 
     #sec06-container {
 
-       
         width: 80vw;
 
-        
+
 
         .slick-prev:before,
 
         .slick-next:before {
 
             opacity: 0;
 
@@ -1699,8 +1697,8 @@ body {
 
         }
 
         .card {
 
             margin: 10px;
 
-          height: 480px;
 
-          display:inline-block;
 
+            height: 480px;
 
+            display: inline-block;
 
             img {
 
                 height: 150px;
 
                 object-fit: cover;
 
@@ -1714,7 +1712,6 @@ body {
 
             .learn-more {
 
                 width: 120px;
 
             }
 
-           
         }
 
         .learn-more {
 
             width: 120px;
 
@@ -1850,9 +1847,10 @@ body {
 
 }
 
 
 #sec08 {
 
-    
     padding-bottom: 5vw;
 
     background: linear-gradient(180deg, #414141 35%, transparent 30%, #fff 55%);
 
+    position: relative;
 
+
 
     #sec08-container-box {
 
         background-size: contain;
 
         background-repeat: no-repeat;
 
@@ -1860,15 +1858,32 @@ body {
 
     }
 
     #sec08-title {
 
         background: #414141;
 
-        padding:3vw 0;
 
+        padding-top: 5vw;
 
+        .col-9{
 
+            position: relative;
 
+            #OUR-PARTNER {
 
+                position: absolute;
 
+                    top: -10px;
 
+                    right: 0vw;
 
+                h5 {
 
+                    font-size: 5em;
 
+                    opacity: 0.8;
 
+                    /*  文字的距離  */
 
+                    /*  通常搭配內距左邊  */
 
+                    text-align: center;
 
+                    letter-spacing: 10px;
 
+                    font-weight: 900;
 
+                    padding-left: 30px;
 
+                    color: #f5f5f5;
 
+                }
 
+            }
 
+        }
 
 
         h1 {
 
-            text-align: center;
 
-            padding: 15px;
 
+            padding: 10px;
 
             color: #fff;
 
             font-size: 45px;
 
             font-weight: 900;
 
-           
 
             @media screen and(max-width:$moblie) {
 
                 font-weight: 900;
 
@@ -1887,34 +1902,27 @@ body {
 
         }
 
     }
 
     #sec08-container {
 
-        text-align: center;
 
-        
         .card {
 
-            
             border: none;
 
             box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
 
             .adv4 {
 
                 display: flex;
 
                 align-items: center;
 
                 img {
 
-
 
                     align-items: center;
 
                     object-fit: cover;
 
                 }
 
             }
 
         }
 
-        .sec08-1{
 
-            padding:0px !important;
 
+        .sec08-1 {
 
+            padding: 0px !important;
 
         }
 
         .col-3 {
 
-            margin: 10px 0;
 
-            
-
 
             img {
 
                 padding: 40px;
 
                 object-fit: cover;
 
                 @media screen and(max-width:$moblie) {
 
-                   padding: 0;
 
+                    padding: 0;
 
                 }
 
             }
 
         }
 
@@ -1922,17 +1930,38 @@ body {
 
 }
 
 
 #sec09 {
 
+    background: #9d9d9d;
 
+
 
+    padding-bottom: 5vw;
 
+    .col-9 {
 
+        position: relative;
 
+        #TRADING {
 
+            position: absolute;
 
+            right: -10px;
 
+            top: -150px;
 
+            h5 {
 
+                font-size: calc(7rem + (1.3-1.2) * ((100vw - 600px) / (1200 - 600)));
 
+                opacity: 0.8;
 
+                /*  文字的距離  */
 
+                /*  通常搭配內距左邊  */
 
+
 
+                letter-spacing: 10px;
 
+                font-weight: 900;
 
+                padding-left: 30px;
 
+                color: #414141;
 
+            }
 
+        }
 
+    }
 
+
 
     #sec09-container-box {
 
         background-size: contain;
 
         background-repeat: no-repeat;
 
         background-blend-mode: overlay;
 
     }
 
     #sec09-title {
 
-        padding: 5vw;
 
-        background: #414141;
 
+        padding-top: 15vw;
 
 
         h1 {
 
-           text-align: center;
 
             color: #fff;
 
             font-size: 45px;
 
             font-weight: 900;
 
@@ -1955,7 +1984,6 @@ body {
 
         }
 
     }
 
     #sec09-container {
 
-        text-align: center;
 
         .card {
 
             padding-top: 5vw;
 
             padding-bottom: 5vw;
 
@@ -1970,7 +1998,6 @@ body {
 
             }
 
         }
 
 
-        
         .col-3 {
 
             margin: 10px 0;
 
             @media screen and(max-width:$desktop) {
 
@@ -1979,7 +2006,6 @@ body {
 
 
             @media screen and(max-width:$moblie) {
 
                 padding: 5px;
 
-           
             }
 
             img {
 
                 object-fit: cover;
 
@@ -1988,7 +2014,7 @@ body {
 
                 }
 
             }
 
         }
 
-        .sec09-1{
 
+        .sec09-1 {
 
             padding: 70px;
 
             @media screen and(max-width:$moblie) {
 
                 padding: 20px;

Algunos archivos no se mostraron porque demasiados archivos cambiaron en este cambio