Página inicial Explorar Ajuda
Registrar Entrar
choozmo
/
OpenTalk
2
0
Fork 0
Arquivos Issues 0 Pull Requests 0 Wiki
Ver código fonte

版面優化

jeter20131220 3 anos atrás
pai
4de0dfc6ce
commit
90c02775c2
19 arquivos alterados com 746 adições e 171 exclusões
Visão unificada Mostrar estatísticas do Diff
  1. 284 0
      artist-course.html
  2. 41 0
      goto.js
  3. BIN
      img/sec02/sec02-1.png
  4. BIN
      img/sec04/sec01-2.png
  5. BIN
      img/sec04/sec04-1.jpg
  6. BIN
      img/sec04/sec04-1.png
  7. BIN
      img/sec04/sec04-3.png
  8. BIN
      img/sec04/sec04-4.jpg
  9. BIN
      img/sec10/S__43253764.jpg
  10. BIN
      img/sec10/sec10-01.webp
  11. BIN
      img/sec10/sec10-02.jpg
  12. BIN
      img/sec10/sec10-03.jpg
  13. BIN
      img/sec10/sec10-04.jpg
  14. BIN
      img/sec10/sec10_x264.mp4
  15. BIN
      img/time.png
  16. 103 101
      index.html
  17. 176 34
      style.css
  18. 0 0
      style.css.map
  19. 142 36
      style.scss

+ 284 - 0
artist-course.html
Ver arquivo 

@@ -0,0 +1,284 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+
 
+<head>
 
+    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-201820994-1"></script>
 
+    <meta charset="UTF-8">
 
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <meta name="copyright" content="2021 © Opentalk │ All Rights Reserved.">
 
+    <meta name="creation-date" content="2021-07-09 12:00:04 GTM+8">
 
+    <meta name="description" content="">
 
+    <meta name="distribution" content="Taiwan">
 
+    <meta name="keywords" content="">
 
+    <meta name="revisit-after" content="1 days">
 
+    <meta name="robots" content="all">
 
+    <meta name="format-detection" content="telephone=no">
 
+    <meta name="author" content="Choozmo">
 
+
 
+    <meta property="og:image" content="" />
 
+    <meta property="og:description" content="" />
 
+    <meta property="og:site_name" content="Opentalk" />
 
+    <meta property="og:title" content="" />
 
+    <meta property="og:type" content="website" />
 
+    <title>從王力宏的直播看線上課程的推動</title>
 
+
 
+
 
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet"
 
+        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>
 
+    <section id="Navigation" class="container-fluid">
 
+        <div id="nav" class="row">
 
+            <div id="logo" class=" col-md-2 col-lg-2">
 
+                <a href=""> <img src="./img/logo03_png.png" alt=""></a>
 
+            </div>
 
+            <div id="link" class="col-md-10 col-lg-10">
 
+                <a data-gt-target="#sec01 " data-gt-duration="500" data-gt-offset="100">最新課程</a>
 
+                <a data-gt-target="#sec02" data-gt-duration="800" data-gt-offset="180">TOP 10 熱門課程</a>
 
+                <a data-gt-target="#sec04" data-gt-duration="500" data-gt-offset="150">專欄報導</a>
 
+                <a data-gt-target="#sec05" data-gt-duration="500" data-gt-offset="100">課程分類</a>
 
+                <a data-gt-target="#sec06" data-gt-duration="500" data-gt-offset="80">合作對象</a>
 
+                <a data-gt-target="#footer" data-gt-duration="500" data-gt-offset="50">聯絡我們</a>
 
+            </div>
 
+            <img id="menu-btn1" src="./img/menu.png" alt="">
 
+        </div>
 
+    </section>
 
+    <div id="menu-box" class="container-fluid" style="padding:0;margin:0 ">
 
+        <div id="menu-box2">
 
+            <div style="text-align: right;">
 
+                <img class="close" src="./img/close.png" alt="">
 
+            </div>
 
+            <a class="link" data-gt-target="#sec01" data-gt-duration="500" data-gt-offset="0"
 
+                style="padding-top: 3vw;">最新課程</a>
 
+            <hr>
 
+            <a class="link" data-gt-target="#sec02-moblie" data-gt-duration="800" data-gt-offset="60">TOP10 熱門課程</a>
 
+            <hr>
 
+            <a class="link" data-gt-target="#sec04-moblie" data-gt-duration="500" data-gt-offset="60">專欄報導</a>
 
+            <hr>
 
+            <a class="link" data-gt-target="#sec05-moblie" data-gt-duration="500" data-gt-offset="60">課程分類</a>
 
+            <hr>
 
+            <a class="link" data-gt-target="#sec06" data-gt-duration="500" data-gt-offset="60">合作對象</a>
 
+            <hr>
 
+            <a class="link" data-gt-target="#footer" data-gt-duration="500" data-gt-offset="">聯絡我們</a>
 
+            <hr>
 
+
 
+        </div>
 
+
 
+    </div>
 
+
 
+    <section class="py-5 bg-white mb-5"></section>
 
+    <section id="adv01" class="py-5 bg-light">
 
+        <div class="adv01-1 container-fluid">
 
+            <a target="_blank" href="">
 
+                <img class="img-fluid" src="./img/sec05img1.webp" alt="">
 
+            </a>
 
+        </div>
 
+    </section>
 
+
 
+    <section id="sec10" class="pt-3">
 
+        <div class="row">
 
+            <div class="content col-lg-7">
 
+                <h1 class="sec10-title">
 
+                    從王力宏的直播看線上課程的推動     
+                </h1>
 
+                <p class="card-text"><small class="text-muted">By Opentalk</small></p>
 
+                <img class="m-1" style="width: 20px;" src="./img/time.png" alt=""><span>2021/8/6</span>
 
+                <hr>
 
+                <a target="_blank" href="https://testnets.akaswap.com/akaobj/251">
 
+                    <img class="img-fluid" src="./img/sec04/sec04-4.jpg" alt="">
 
+                </a>
 
+               
+               
+                <div class="sec10-content mt-3">
 
+                   <p>線上課程因為每一次的疫情再起助推了一波又一波的趨勢，7月王力宏在直播中公開這一次線上課程的發布，引起了課單價7000台幣、同時間三千多堂課的搶購，意外的再次掀起名人課的風潮。</p>
 
+                   <p>從2016年開始線上課開展短短3年已經相當成熟，帶來超過千億的數值，單單以中國市場預估2022年就可達到4300億，完成了更多人不被時間限制的有效學習模式。</p>
 
+                   <img class="img-fluid" src="./img/sec04/sec04-1.jpg" alt="">
 
+                   <h2 style="font-weight: 900;" class="my-3">「好課三要素”深入淺出”、 ”言語魅力”、 ”訴求明確”」</h2>
 
+                   <p>什麼樣的課能夠備受眾喜愛我想是許多人的疑問，我們經常分享關於做課的訣竅：”深入淺出”是一門好課的基礎，”言語魅力”也是必備的條件，”訴求明確”的好課綱便是學習者願意花錢買課的最大因素。</p>
 
+                   <p>通常我們在做課之前會先經過定價調研，然後是課綱調研，確認市場對這門課的意願度才會訂定銷售模式，這期間大概需要一兩個月的時間進行。</p>
 
+                   <p>接下來就是製作內容，講師的錄製工作狀態與導播、攝影師有著極重要的互動默契關係，製作人要熟悉UX思維來輔助講師進入一種自我的「演出」狀態，把自己最自然不受限制的狀態表達出來，還要按著腳本一一完成，不能詞不達意，也不能過度發揮。通常好的講者是相當稀缺的，因為要滿足的條件等同專家+藝人的能力。</p>
 
+                   <h2 style="font-weight: 900;"class="my-3">成為「超級頭部講師」</h2>
 
+                  <p>要成為一位擁有數十萬名學生的頭部講師我建議一定要有出版經驗，清楚了解出版的程序，再者也一定要閱覽過大量的線上課，了解有別於線下講課的無人模式，還有時間控制在線上閱聽的極限範圍內，視頻課建議不超過22分鐘，音頻課建議不超過15分鐘。</p>
 
+                  <p>因為視頻需要眼耳專注，通常超過15分鐘以上就容易被來電或是環境因素干染，而音頻課雖然不需要用到眼睛，但是耳朵更需專一的聆聽，還沒有銀幕做輔助，所以聽課時間更不能太過冗長。</p>
 
+                  <p>再回到王力宏的線上教學課，我們可以知道他明星魅力的價值相當驚人，透過這種直播刺激立即消費操作模式成功的吸引了許多學習者，但希望讓教育學程成為長尾的方式就是持續產出更有價值的內容，應避免原本可以慢慢咀嚼的課程因過多包裝失焦。</p>
 
+                  <p>關注了明星光環帶來的刺激而忽略了精彩課程的本質，我們期待這些含金量極高的巨星們為我們帶來更多好課。</p>
 
+                   <p>FeFeTseng 知識內容製作人
 
+                    與喜瑪拉雅/荔枝微課/千聊共同合作/現任Opentalk開課共同創辦人
 
+                    </p>
 
+                </div>
 
+            </div>
 
+                <div class="col-lg-1"></div>
 
+                <!-- 側邊攔 -->
 
+                <div class="side-bar col-lg-4">
 
+                    <hr>
 
+                    <h1>TOP5熱門課程</h1>
 
+                    <div class="card-body">
 
+                        <a target="_blank" href="./nftboard-akaswap.html">
 
+                            <img class="img-fluid" src="./img/sec10/S__43253764.jpg" alt="">
 
+                        </a>
 
+                        <a target="_blank" href="./nftboard-akaswap.html">
 
+                            <h5 class="card-title  pt-3">NFTboard與台北方舟跨界直播 - akaswap平台空投一番賞限量開搶</h5>
 
+                        </a>
 
+
 
+                        <p class="card-text">NFTBoard 與akaswap 即將於2021/8/7(六) 晚上舉辦一場精緻的「NFT 方舟加密藝術X akaSwap跨界直播」活動</p>
 
+                    </div>
 
+                    <div class="card-body">
 
+                        <a target="_blank" href="https://www.facebook.com/nftboard/posts/124820929842942">
 
+                            <img class="img-fluid" src="./img/sec01/Olympic.png" alt="">
 
+                        </a>
 
+                        <a target="_blank" href="https://www.facebook.com/nftboard/posts/124820929842942">
 
+                            <h5 class="card-title pt-3"> NFT席捲體育界 NBA數位收藏交易掀熱潮~疫情推升NBA熱潮，玩家身家暴漲百倍</h5>
 
+                        </a>
 
+                        <p class="card-text">
 
+                            NBA球員哈里伯頓說：「有人說我可以上YOUTUBE看到這些照片難道不行嗎？確實是，但同樣你買了NFT球員卡時，你不是也能在Google上找到一樣的照片嗎？重點不在照片，是在你手上的東西。」
 
+                        </p>
 
+                    </div>
 
+                    <div class="card-body">
 
+                        <a target="_blank" href="https://www.facebook.com/nftboard/posts/121145806877121">
 
+                            <img class="img-fluid" src="./img/sec04/safe_image.jpg" alt="">
 
+                        </a>
 
+                        <a target="_blank" href="https://www.facebook.com/nftboard/posts/121145806877121">
 
+                            <h5 class="card-title  pt-3">區塊鏈可以幫助出版商提高受眾信任度，46% 的受訪者表示他們願意為準確的新聞付費</h5>
 
+                        </a>
 
+                        <p class="card-text">"區塊鏈如何增加信任?艾米·惠特克在《華爾街日報》上寫道。“什麼可以防止篡改歷史記錄——是否有可能為子孫後代保護這些信息？” Haber 和
 
+                            Stornetta 的解決方案：........。</p>
 
+                    </div>
 
+                    <div class="card-body">
 
+                        <a target="_blank" href="https://www.facebook.com/nftboard/posts/124179153240453">
 
+                            <img class="img-fluid" src="./img/sec01/game.jpg" alt="">
 
+                        </a>
 
+                        <a target="_blank" href="https://www.facebook.com/nftboard/posts/124179153240453">
 
+                            <h5 class="card-title  pt-3">NFT遊戲 | 玩轉遊戲世界</h5>
 
+                        </a>
 
+                        <p class="card-text">究竟NFT能擴充到什麼樣的地步？電競世界跟NFT合作持續火熱延燒！NFT CyptoMotos 也進入 Animoca Brands
 
+                            的世界同步與REVV 達成合作，NFT社交平台DeFine 也獲得500 萬美元的戰略投資</p>
 
+                    </div>
 
+                    <div class="card-body">
 
+                        <a target="_blank" href="https://www.facebook.com/nftboard/posts/105110191814016">
 
+                            <img class="img-fluid" src="./img/sec06/sec06-01.webp" alt="">
 
+                        </a>
 
+                        <a target="_blank" href="https://www.facebook.com/nftboard/posts/105110191814016">
 
+                            <h5 class="card-title pt-3">誰要買這個啦！推特執行長賣推文「加密熱潮」新標的，NFT是什麼？</h5>
 
+                        </a>
 
+                        <p class="card-text">如果果你還沒聽過NFT，應該也快聽說了。NFT正在攻佔網路，並被認為是區塊鏈技術 （blockchain technology）
 
+                            的最佳應用實例。</p>
 
+                    </div>
 
+                    <hr>
 
+                    <a target="_blank" href="https://superrare.com/artwork-v2/cavity-25934"> <img class="img-fluid my-3"
 
+                            src="./img/adv/adv3-1.webp" alt=""></a>
 
+                    <a target="_blank" href="https://superrare.com/artwork-v2/paparazzi-princess-25976"> <img
 
+                            class="img-fluid my-3" src="./img/adv/adv3-2.webp" alt=""></a>
 
+                    <a target="_blank" href="https://superrare.com/artwork-v2/smoking-hero-25987"> <img
 
+                            class="img-fluid my-3" src="./img/adv/adv3-3.webp" alt=""></a>
 
+                </div>
 
+            </div>
 
+    </section>
 
+    <!-- <section id="adv02" class="py-5 bg-light">
 
+        <div class="adv01-1 container-fluid">
 
+            <img class="img-fluid" src="./img/sec01/218116504_124830393175329_4675674980376029305_n.jpg" alt="">
 
+        </div>
 
+    </section> -->
 
+    <section id="sec11">
 
+
 
+        <div id="sec11-container" class="container-fluid px-0 py-5">
 
+            <h1>RECENT POST(NEWS)</h1>
 
+            <div class="sec11-01 row row-col-1 row-cols-sm-2">
 
+                <div class="col my-3">
 
+                    <div class="card mb-3 p-1 h-100 border-0">
 
+                        <a target="_blank" href="https://www.facebook.com/nftboard/posts/126805716311130">
 
+                            <img class="sec11-img img-fluid rounded-3" src="./img/sec01/sec01-10.jpg" alt="">
 
+                        </a>
 
+                        <a target="_blank" href="https://www.facebook.com/nftboard/posts/126805716311130">
 
+                            <h2 class="my-3"> 幣安BINANCE於7月28日推出「每個孩子都值得擁有光明的未來」-- NFT 做公益活動（NFT for Good）。</h2>
 
+                        </a>
 
+
 
+                        <p class="card-text"><small class="text-muted">By NFTBoard </small></p>
 
+                    </div>
 
+                </div>
 
+                <div class="col my-3">
 
+                    <div class="card mb-3 p-1 h-100 border-0">
 
+                        <div class="col">
 
+                            <a target="_blank" href="https://www.facebook.com/nftboard/posts/126429853015383">
 
+                                <img class="sec11-img img-fluid rounded-3" src="./img/sec01/sec01-8.jpg" alt="">
 
+                            </a>
 
+                            <a target="_blank" href="https://www.facebook.com/nftboard/posts/126429853015383">
 
+                                <h2 class="my-3">俄羅斯的冬宮將藝術品作為 NFT 出售</h2>
 
+                            </a>
 
+
 
+                            <p class="card-text"><small class="text-muted">By NFTBoard</small></p>
 
+                        </div>
 
+                    </div>
 
+                </div>
 
+                <div class="col my-3">
 
+                    <div class="card mb-3 p-1 h-100 border-0">
 
+                        <div class="col">
 
+                            <a target="_blank" href="https://www.facebook.com/nftboard/posts/122120953446273">
 
+                                <img class="sec11-img img-fluid rounded-3" src="./img/sec01/SEC11.png" alt="">
 
+                            </a>
 
+                            <a target="_blank" href="https://www.facebook.com/nftboard/posts/122120953446273">
 
+                                <h2 class="my-3"> NFT資訊 | 收藏品大爆發 萬物皆可NFT”的階段已經到來</h2>
 
+                            </a>
 
+
 
+                            <p class="card-text"><small class="text-muted">By NFTBoard </small></p>
 
+                        </div>
 
+                    </div>
 
+                </div>
 
+                <div class="col my-3">
 
+                    <div class="card mb-3 p-1 h-100 border-0">
 
+                        <div class="col">
 
+                            <a target="_blank" href="https://www.facebook.com/nftboard/posts/115261730798862">
 
+                                <img class="sec11-img img-fluid rounded-3" src="./img/sec01/sec01-img02webp.webp"
 
+                                    alt="">
 
+                            </a>
 
+                            <a target="_blank" href="https://www.facebook.com/nftboard/posts/115261730798862">
 
+                                <h2 class="my-3"> NFT人物 | Tim Berners-Lee
 
+                                    發明家蒂姆·伯納斯·李 (Tim Berners-Lee) 將網絡的源代碼作為 NFT 拍賣</h2>
 
+                            </a>
 
+
 
+                            <p class="card-text"><small class="text-muted">By NFTBoard </small></p>
 
+                        </div>
 
+                    </div>
 
+                </div>
 
+            </div>
 
+        </div>
 
+
 
+
 
+
 
+        </div>
 
+    </section>
 
+
 
+    <footer id="footer" class="container-fluid" 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>
 
+            <p>Opentakk &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"
 
+        crossorigin="anonymous"></script>
 
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js"
 
+        integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT"
 
+        crossorigin="anonymous"></script>
 
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
 
+
 
+    <script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
 
+    <script src="./goto.js"></script>
 
+    <script src="./node_modules/jquery-touchswipe/jquery.touchSwipe.min.js"></script>
 
+    <script src="./node_modules/jquery-touchswipe/jquery.touchSwipe.js"></script>
 
+</body>
 
+
 
+</html>

+ 41 - 0
goto.js
Ver arquivo 

@@ -61,3 +61,44 @@ $('#sec03-slider').slick({
 
   $('#sec03-slider-next').click(function () {
 
   $('#sec03-slider-next').click(function () {
 
     $('#sec03-slider').slick('slickNext')
 
     $('#sec03-slider').slick('slickNext')
 
   });
 
   });
 
+  
+  $("*").each(function (index, element) {
 
+    // 此元素被點選後執行
 
+    $(this).click(function (e) {
 
+      // 取得被點選元素的屬性：data-gt-target
 
+      var target = $(this).attr("data-gt-target");
 
+      var duration = $(this).attr("data-gt-duration");
 
+      var offset = $(this).attr("data-gt-offset");
 
+  
+      // JS 語法：判斷式
 
+      // if (條件) {程式區塊}
 
+      // 當條件成立，會執行程式區塊
 
+  
+      // 如果 目標有資料 才會執行 { } 內的程式
 
+      // 避免出現 undefine (未定義 - 不存在的資料)
 
+      if (target) {
 
+        //console.log("目標：" + target);
 
+        //console.log("時間：" + duration);
 
+        //console.log("位移：" + offset);
 
+  
+        // 上方位置 = 目標區塊.位移().上方位置
 
+        var top = $(target).offset().top;
 
+        //console.log("要前往元素的上方位置：" + top);
 
+  
+        // 網頁元素.停止().動畫({ 上方捲動：指定元素 - 位移}，持續時間)
 
+        // parseInt() 將文字轉為數字
 
+  
+        $("html").stop().animate({
 
+          scrollTop: top - offset
 
+        }, parseInt(duration));
 
+      }
 
+    });
 
+  });
 
+  
+  // 避免動畫與使用者滾輪衝突
 
+  // html 在滾動滾輪時 停止 html 所有效果
 
+  $("html").on("mousewheel", function () {
 
+    $("html").stop();
 
+  });
 
+
 
+

BIN
img/sec02/sec02-1.png
Ver arquivo


BIN
img/sec04/sec01-2.png
Ver arquivo


BIN
img/sec04/sec04-1.jpg
Ver arquivo


BIN
img/sec04/sec04-1.png
Ver arquivo


BIN
img/sec04/sec04-3.png
Ver arquivo


BIN
img/sec04/sec04-4.jpg
Ver arquivo


BIN
img/sec10/S__43253764.jpg
Ver arquivo


BIN
img/sec10/sec10-01.webp
Ver arquivo


BIN
img/sec10/sec10-02.jpg
Ver arquivo


BIN
img/sec10/sec10-03.jpg
Ver arquivo


BIN
img/sec10/sec10-04.jpg
Ver arquivo


BIN
img/sec10/sec10_x264.mp4
Ver arquivo


BIN
img/time.png
Ver arquivo


+ 103 - 101
index.html
Ver arquivo 

@@ -22,11 +22,11 @@
 
                 <a href=""> <img src="./img/logo03_png.png" alt=""></a>
 
                 <a href=""> <img src="./img/logo03_png.png" alt=""></a>
 
             </div>
 
             </div>
 
             <div id="link" class="col-md-10 col-lg-10">
 
             <div id="link" class="col-md-10 col-lg-10">
 
-                <a data-gt-target="#sec01 " data-gt-duration="500" data-gt-offset="">最新課程</a>
 
-                <a data-gt-target="#sec02" data-gt-duration="800" data-gt-offset="60">TOP 10 熱門課程</a>
 
-                <a data-gt-target="#sec04" data-gt-duration="500" data-gt-offset="60">專欄報導</a>
 
-                <a data-gt-target="#sec05" data-gt-duration="500" data-gt-offset="60">課程分類</a>
 
-                <a data-gt-target="#sec06" data-gt-duration="500" data-gt-offset="60">合作對象</a>
 
+                <a data-gt-target="#sec01 " data-gt-duration="500" data-gt-offset="100">最新課程</a>
 
+                <a data-gt-target="#sec02" data-gt-duration="800" data-gt-offset="180">TOP 10 熱門課程</a>
 
+                <a data-gt-target="#sec04" data-gt-duration="500" data-gt-offset="150">專欄報導</a>
 
+                <a data-gt-target="#sec05" data-gt-duration="500" data-gt-offset="100">課程分類</a>
 
+                <a data-gt-target="#sec06" data-gt-duration="500" data-gt-offset="80">合作對象</a>
 
                 <a data-gt-target="#footer" data-gt-duration="500" data-gt-offset="50">聯絡我們</a>
 
                 <a data-gt-target="#footer" data-gt-duration="500" data-gt-offset="50">聯絡我們</a>
 
             </div>
 
             </div>
 
             <img id="menu-btn1" src="./img/menu.png" alt="">
 
             <img id="menu-btn1" src="./img/menu.png" alt="">
 
@@ -69,7 +69,7 @@
 
                 <hr class="line">
 
                 <hr class="line">
 
             </div>
 
             </div>
 
             <div id="sec01-container" class="row row-cols-1 row-cols-md-4 g-4">
 
             <div id="sec01-container" class="row row-cols-1 row-cols-md-4 g-4">
 
-            
+
 
             </div>
 
             </div>
 
 
 
 
 
@@ -178,7 +178,7 @@
 
             <div id="sec02-content">
 
             <div id="sec02-content">
 
                 <div id="sec02-top-box" class="row" style="margin-right: 0; padding-right:0;">
 
                 <div id="sec02-top-box" class="row" style="margin-right: 0; padding-right:0;">
 
                     <div class="sec02-box1 col-4 order-2">
 
                     <div class="sec02-box1 col-4 order-2">
 
-                        <img width="130px;" class="" id="top1" src="./img/sec02/sec02-1-removebg-preview.png" alt="">
 
+                        <img class="" id="top1" src="./img/sec02/sec02-1.png" alt="">
 
                         <div class="sec02-top-text"><span>1</span>Bobbi</div>
 
                         <div class="sec02-top-text"><span>1</span>Bobbi</div>
 
                         <div class="sec02-top-text">你會學會如何對自己的皮膚有信心。</div>
 
                         <div class="sec02-top-text">你會學會如何對自己的皮膚有信心。</div>
 
                     </div>
 
                     </div>
 
@@ -563,43 +563,39 @@
 
             </div>
 
             </div>
 
             <div id="sec04-container" class="row row-cols-1 row-cols-md-4 g-4">
 
             <div id="sec04-container" class="row row-cols-1 row-cols-md-4 g-4">
 
                 <div class="col">
 
                 <div class="col">
 
-                    <div class="card">
 
-                        <img src="./img/sec01/sec01-01webp.webp" class="card-img-top" alt="...">
 
+                    <div class="card h-100">
 
+                        <img src="./img/sec04/sec04-4.jpg" class="card-img-top" alt="...">
 
                         <div class="card-body">
 
                         <div class="card-body">
 
-                            <h5 class="card-title">標題</h5>
 
-                            <p class="card-text">This is a wider card with supporting text below as a natural lead-in to
 
-                                additional</p>
 
+                            <h5 class="card-title">從王力宏的直播看線上課程的推動</h5>
 
+                            <p class="card-text">線上課程因為每一次的疫情再起助推了一波又一波的趨勢，7月王力宏在直播中公開這一次線上課程的發布，引起了課單價7000台幣、同時間三千多堂課的搶購，意外的再次掀起名人課的風潮。</p>
 
                         </div>
 
                         </div>
 
                     </div>
 
                     </div>
 
                 </div>
 
                 </div>
 
                 <div class="col">
 
                 <div class="col">
 
-                    <div class="card">
 
-                        <img src="./img/sec01/sec01-2webp.webp" class="card-img-top" alt="...">
 
+                    <div class="card h-100">
 
+                        <img src="./img/sec04/sec04-1.png" class="card-img-top" alt="...">
 
                         <div class="card-body">
 
                         <div class="card-body">
 
-                            <h5 class="card-title">標題</h5>
 
-                            <p class="card-text">This is a wider card with supporting text below as a natural lead-in to
 
-                                additional</p>
 
+                            <h5 class="card-title">5個國際最佳線上課程選擇</h5>
 
+                            <p class="card-text">2021 年5門國際最受好評的個人和專業發展課程、課程認證和培訓網站</p>
 
                         </div>
 
                         </div>
 
                     </div>
 
                     </div>
 
                 </div>
 
                 </div>
 
                 <div class="col">
 
                 <div class="col">
 
-                    <div class="card">
 
-                        <img src="./img/sec01/sec01-3webp.webp" class="card-img-top" alt="...">
 
+                    <div class="card h-100">
 
+                        <img src="./img/sec04/sec01-2.png" class="card-img-top" alt="...">
 
                         <div class="card-body">
 
                         <div class="card-body">
 
-                            <h5 class="card-title">標題</h5>
 
-                            <p class="card-text">This is a wider card with supporting text below as a natural lead-in to
 
-                                additional</p>
 
-
 
+                            <h5 class="card-title">強推薦~生命洗禮後的變美課</h5>
 
+                            <p class="card-text">健康飲食真的很重要，節食和吃藥看似效果快，其實反彈起來更加可怕，分分鐘超過原來的體重。而運動沒效果，是因為我們女生肌肉少，能量消耗慢</p>
 
                         </div>
 
                         </div>
 
                     </div>
 
                     </div>
 
                 </div>
 
                 </div>
 
                 <div class="col">
 
                 <div class="col">
 
-                    <div class="card">
 
-                        <img src="./img/sec01/sec01-4webp.webp" class="card-img-top" alt="...">
 
+                    <div class="card h-100">
 
+                        <img src="./img/sec04/sec04-3.png" class="card-img-top" alt="...">
 
                         <div class="card-body">
 
                         <div class="card-body">
 
-                            <h5 class="card-title">標題</h5>
 
-                            <p class="card-text">This is a wider card with supporting text below as a natural lead-in to
 
-                                additional</p>
 
+                            <h5 class="card-title">侯吉諒書法講堂：從零開始，學寫一手好字</h5>
 
+                            <p class="card-text">侯吉諒精通詩文、古典與現代文學、書法、繪畫，篆刻，為難得一見之全方位創作者，因長期接觸中西方各種藝術，在作品中深入古典而又具有強烈的現代意識，</p>
 
+
 
                         </div>
 
                         </div>
 
                     </div>
 
                     </div>
 
                 </div>
 
                 </div>
 
@@ -618,42 +614,39 @@
 
             </div>
 
             </div>
 
             <div id="sec04-moblie-container" class="row row-cols-1 row-cols-md-4 g-4">
 
             <div id="sec04-moblie-container" class="row row-cols-1 row-cols-md-4 g-4">
 
                 <div class="col">
 
                 <div class="col">
 
-                    <div class="card">
 
-                        <img src="./img/sec01/sec01-01webp.webp" class="card-img-top" alt="...">
 
+                    <div class="card h-100">
 
+                        <img src="./img/sec04/sec04-4.jpg" class="card-img-top" alt="...">
 
                         <div class="card-body">
 
                         <div class="card-body">
 
-                            <h5 class="card-title">標題</h5>
 
-                            <p class="card-text">This is a wider card with supporting text below as a natural lead-in to
 
-                                additional</p>
 
+                            <h5 class="card-title">從王力宏的直播看線上課程的推動</h5>
 
+                            <p class="card-text">線上課程因為每一次的疫情再起助推了一波又一波的趨勢，7月王力宏在直播中公開這一次線上課程的發布，引起了課單價7000台幣、同時間三千多堂課的搶購，意外的再次掀起名人課的風潮。</p>
 
                         </div>
 
                         </div>
 
                     </div>
 
                     </div>
 
                 </div>
 
                 </div>
 
                 <div class="col">
 
                 <div class="col">
 
-                    <div class="card">
 
-                        <img src="./img/sec01/sec01-2webp.webp" class="card-img-top" alt="...">
 
+                    <div class="card h-100">
 
+                        <img src="./img/sec04/sec04-1.png" class="card-img-top" alt="...">
 
                         <div class="card-body">
 
                         <div class="card-body">
 
-                            <h5 class="card-title">標題</h5>
 
-                            <p class="card-text">This is a wider card with supporting text below as a natural lead-in to
 
-                                additional</p>
 
+                            <h5 class="card-title">5個國際最佳線上課程選擇</h5>
 
+                            <p class="card-text">2021 年5門國際最受好評的個人和專業發展課程、課程認證和培訓網站</p>
 
                         </div>
 
                         </div>
 
                     </div>
 
                     </div>
 
                 </div>
 
                 </div>
 
                 <div class="col">
 
                 <div class="col">
 
-                    <div class="card">
 
-                        <img src="./img/sec01/sec01-3webp.webp" class="card-img-top" alt="...">
 
+                    <div class="card h-100">
 
+                        <img src="./img/sec04/sec01-2.png" class="card-img-top" alt="...">
 
                         <div class="card-body">
 
                         <div class="card-body">
 
-                            <h5 class="card-title">標題</h5>
 
-                            <p class="card-text">This is a wider card with supporting text below as a natural lead-in to
 
-                                additional</p>
 
+                            <h5 class="card-title">強推薦~生命洗禮後的變美課</h5>
 
+                            <p class="card-text">健康飲食真的很重要，節食和吃藥看似效果快，其實反彈起來更加可怕，分分鐘超過原來的體重。而運動沒效果，是因為我們女生肌肉少，能量消耗慢</p>
 
                         </div>
 
                         </div>
 
                     </div>
 
                     </div>
 
                 </div>
 
                 </div>
 
                 <div class="col">
 
                 <div class="col">
 
-                    <div class="card">
 
-                        <img src="./img/sec01/sec01-4webp.webp" class="card-img-top" alt="...">
 
+                    <div class="card h-100">
 
+                        <img src="./img/sec04/sec04-3.png" class="card-img-top" alt="...">
 
                         <div class="card-body">
 
                         <div class="card-body">
 
-                            <h5 class="card-title">標題</h5>
 
-                            <p class="card-text">This is a wider card with supporting text below as a natural lead-in to
 
-                                additional</p>
 
+                            <h5 class="card-title">侯吉諒書法講堂：從零開始，學寫一手好字</h5>
 
+                            <p class="card-text">侯吉諒精通詩文、古典與現代文學、書法、繪畫，篆刻，為難得一見之全方位創作者，因長期接觸中西方各種藝術，在作品中深入古典而又具有強烈的現代意識，</p>
 
+
 
                         </div>
 
                         </div>
 
                     </div>
 
                     </div>
 
                 </div>
 
                 </div>
 
@@ -679,7 +672,7 @@
 
         </div>
 
         </div>
 
 
 
         <div id="sec05-container" class="container-fluid">
 
         <div id="sec05-container" class="container-fluid">
 
-            <div id="sec05-course" class="row">
 
+            <div id="sec05-course" class="row row-cols-1 row-cols-md-2 g-4">
 
 
 
             </div>
 
             </div>
 
             <!-- <img src="./img/sec05img1.webp" alt=""> -->
 
             <!-- <img src="./img/sec05img1.webp" alt=""> -->
 
@@ -691,21 +684,24 @@
 
         <div id="sec06-container-box">
 
         <div id="sec06-container-box">
 
             <div class="">
 
             <div class="">
 
                 <div id="sec06-title">
 
                 <div id="sec06-title">
 
-                    <h1>合作對象</h1>
 
+                    <h1 class="mb-0">合作對象</h1>
 
                     <hr>
 
                     <hr>
 
                 </div>
 
                 </div>
 
             </div>
 
             </div>
 
-
 
+            <!-- <div id="sec06-title-m">
 
+                <h1>合作對象</h1>
 
+                <hr>
 
+            </div> -->
 
             <div id="sec06-container" class="container-fluid">
 
             <div id="sec06-container" class="container-fluid">
 
                 <div class="card">
 
                 <div class="card">
 
 
 
                     <div class="row">
 
                     <div class="row">
 
                         <div class="row">
 
                         <div class="row">
 
-                            <div class="sec09-1 col-3 py-3"><a target="_blank" href="https://mintable.app/browse"><img
 
+                            <div class="sec09-1 col-3 py-3"><a target="_blank" href=""><img
 
                                         class="img-fluid" src="./img/sec06/sec06-01-removebg-preview.png" alt=""></a>
 
                                         class="img-fluid" src="./img/sec06/sec06-01-removebg-preview.png" alt=""></a>
 
                             </div>
 
                             </div>
 
 
 
-                            <div class="sec09-1 col-3 py-3"><a target="_blank" href="https://knownorigin.io/"><img
 
+                            <div class="sec09-1 col-3 py-3"><a target="_blank" href=""><img
 
                                         class="img-fluid" src="./img/sec06/sec06-06.jpg" alt=""></a></div>
 
                                         class="img-fluid" src="./img/sec06/sec06-06.jpg" alt=""></a></div>
 
 
 
 
 
@@ -715,22 +711,21 @@
 
 
 
 
 
 
 
-                            <div class="sec09-1 col-3 py-3"><a target="_blank" href="https://mintable.app/browse"><img
 
+                            <div class="sec09-1 col-3 py-3"><a target="_blank" href=""><img
 
                                         class="img-fluid" src="./img/sec06/sec06-07.png" alt=""></a></div>
 
                                         class="img-fluid" src="./img/sec06/sec06-07.png" alt=""></a></div>
 
 
 
-                            <div class="sec09-1 col-3 py-3"><a target="_blank" href="https://makersplace.com/"><img
 
+                            <div class="sec09-1 col-3 py-3"><a target="_blank" href=""><img
 
                                         class="img-fluid" src="./img/sec06/sec06-8.png" alt=""></a></div>
 
                                         class="img-fluid" src="./img/sec06/sec06-8.png" alt=""></a></div>
 
 
 
-                            <div class="sec09-1 col-3 py-3"><a target="_blank" href="https://opensea.io/"><img
 
+                            <div class="sec09-1 col-3 py-3"><a target="_blank" href=""><img
 
                                         class="img-fluid" src="./img/sec06/sec06-02.png" alt=""></a></div>
 
                                         class="img-fluid" src="./img/sec06/sec06-02.png" alt=""></a></div>
 
 
 
-
 
                             <div class="col-3 py-3 d-flex align-items-center justfy-content-center"><a target="_blank"
 
                             <div class="col-3 py-3 d-flex align-items-center justfy-content-center"><a target="_blank"
 
-                                    href=" https://superrare.com/"><img class="img-fluid"
 
+                                    href=""><img class="img-fluid"
 
                                         src="./img/sec06/sec06-06-removebg-preview.png" alt=""></a>
 
                                         src="./img/sec06/sec06-06-removebg-preview.png" alt=""></a>
 
                             </div>
 
                             </div>
 
-                            <div class="sec09-1 col-3 py-3 d-flex align-items-center justfy-content-center"><a
 
-                                    target="_blank" href="https://zora.co/"><img class="sec09-7 img-fluid"
 
+                            <div class="col-3 py-3 d-flex align-items-center justfy-content-center"><a
 
+                                    target="_blank" href=""><img class="sec09-7 img-fluid"
 
                                         src="./img/sec06/sec06-05.png" alt=""></a></div>
 
                                         src="./img/sec06/sec06-05.png" alt=""></a></div>
 
 
 
                         </div>
 
                         </div>
 
@@ -742,26 +737,14 @@
 
 
 
     <!-- footer -->
 
     <!-- footer -->
 
     <footer id="footer" class="container-fluid" style="padding:0;margin:0">
 
     <footer id="footer" class="container-fluid" style="padding:0;margin:0">
 
-        <div class="footer-link">
 
-
 
-            <a target="https://www.facebook.com/nftboard"
 
-                href="https://www.facebook.com/nftboard"><span>｜</span>粉絲專頁<span>｜</span></a>
 
-            <a href=""><span>｜</span>OpenTalk<span>｜</span></a>
 
-            <a href=""><span>｜</span>Ark.cards<span>｜</span></a>
 
-            <a href=""><span>｜</span>NFTfair.art<span>｜</span></a>
 
-        </div>
 
-        <div class="text">
 
-            <a href="tel:0988268521">
 
-                <h2>客服電話：0988268521</h2>
 
+        <div class="text" style="padding-right:0;">
 
+            <a target="_blank" href="mailto:nftboard.info@gmail.com">
 
+                <h2>客服信箱：nftboard.info@gmail.com</h2>
 
             </a>
 
             </a>
 
-            <a href="mailto:elainsmail@gmail.com">
 
-                <h2>客服信箱：elainsmail@gmail.com</h2>
 
-            </a>
 
-            <h2 style="display: block;">公司名稱：微生活知識科技公司</h2>
 
-            <p>開拓Open Talk &copy; All Rights Reserved.</p>
 
+            <h2>公司名稱：微生活知識科技公司</h2>
 
+            <p>Opentakk &copy; All Rights Reserved.</p>
 
         </div>
 
         </div>
 
     </footer>
 
     </footer>
 
-    <a href=""></a>
 
 
 
     <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"
 
     <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"
 
         integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p"
 
         integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p"
 
@@ -774,7 +757,7 @@
 
     <script src="./goto.js"></script>
 
     <script src="./goto.js"></script>
 
     <!-- 最新課程 -->
 
     <!-- 最新課程 -->
 
     <script>
 
     <script>
 
-        window.onload=function() {
 
+        window.onload = function () {
 
             $.ajax({
 
             $.ajax({
 
                 method: "POST",
 
                 method: "POST",
 
                 url: "https://welife.asia:8002/get_courses_by_cid",
 
                 url: "https://welife.asia:8002/get_courses_by_cid",
 
@@ -794,8 +777,10 @@
 
                                 <div class="card h-100 d-inline-block">\
 
                                 <div class="card h-100 d-inline-block">\
 
                                     <a target="_blank" href="'+ msg[i].url + '"><img src="' + msg[i].cover_img + '" class="img-fluid rounded-start" alt=""></a>\
 
                                     <a target="_blank" href="'+ msg[i].url + '"><img src="' + msg[i].cover_img + '" class="img-fluid rounded-start" alt=""></a>\
 
                                     <div  class="card-body">\
 
                                     <div  class="card-body">\
 
-                                        <a style="text-decoration: none; " target="_blank" href="'+ msg[i].url + '"><h1 style="font-weight:900; height:100px; font-size: 22px; color:#000;" class="card-title">' + msg[i].title + '</h1></a>\
 
-                                        <p style="height:220px" class="card-text">'+ msg[i].profile + '</p>\
 
+                                        <div class="card-title1 d-flex align-items-center">\
 
+                                            <a style="text-decoration: none;" target="_blank" href="'+ msg[i].url + '"><h1 style="font-weight:900;  font-size: 22px; color:#000;" class="title-text">' + msg[i].title + '</h1></a>\
 
+                                         </div>\
 
+                                        <p  class="card-text card-content1 d-flex align-items-center">'+ msg[i].profile + '</p>\
 
                                         <p  class="card-text row">\
 
                                         <p  class="card-text row">\
 
                                             <small class="text-muted col-6">\
 
                                             <small class="text-muted col-6">\
 
                                             <img class="m-1" style="width: 25px; object-fit: cover; " src="./img/sec05/time.png"alt=""><span>'+ msg[i].hours + 'hr</span>\
 
                                             <img class="m-1" style="width: 25px; object-fit: cover; " src="./img/sec05/time.png"alt=""><span>'+ msg[i].hours + 'hr</span>\
 
@@ -808,6 +793,22 @@
 
 
 
                     }
 
                     }
 
                     $('#sec01-container').html(sec01course);
 
                     $('#sec01-container').html(sec01course);
 
+                    $(".title-text").each(function () {
 
+                        var len = $(this).text().length;   //當前HTML物件text的長度
 
+                        if (len > 28) {
 
+                            var str = "";
 
+                            str = $(this).text().substring(0, 28) + "......";  //使用字串擷取，獲取前30個字元，多餘的字元使用“......”代替
 
+                            $(this).html(str);                   //將替換的值賦值給當前物件
 
+                        }
 
+                    });
 
+                    $(".card-content1").each(function () {
 
+                        var len = $(this).text().length;   //當前HTML物件text的長度
 
+                        if (len > 50) {
 
+                            var str = "";
 
+                            str = $(this).text().substring(0, 50) + "......";  //使用字串擷取，獲取前30個字元，多餘的字元使用“......”代替
 
+                            $(this).html(str);                   //將替換的值賦值給當前物件
 
+                        }
 
+                    });
 
                 });
 
                 });
 
         }
 
         }
 
     </script>
 
     </script>
 
@@ -831,26 +832,27 @@
 
                         const limit = res;
 
                         const limit = res;
 
                         for (var i = 0; i < limit; i++) {
 
                         for (var i = 0; i < limit; i++) {
 
                             sec05course += ' \
 
                             sec05course += ' \
 
-                            <div class="sec05-1 col-12 col-lg-6 my-3">\
 
-                            <div class="card mb-3 p-1" style="max-width: 600px;">\
 
-                         <div class="row g-0">\
 
-                            <div class="col-12 col-lg-12">\
 
-                                <a target="_blank" href="'+ msg[i].url + '"><img src="' + msg[i].cover_img + '" class="img-fluid rounded-start" alt=""></a>\
 
-                                <small class="text-muted"><img class="m-1" style="width: 20px;" src="./img/sec05/master.png" alt="">'+ msg[i].units + '次學習</small>\
 
-                            </div>\
 
-                            <div class="col-12 col-lg-12 p-1">\
 
-                                <a style="text-decoration: none;" target="_blank" href="'+ msg[i].url + '"><h1 style="font-weight:900;  font-size: 22px;" class="card-title">' + msg[i].title + '</h1></a>\
 
-                              <p class="card-text">'+ msg[i].profile + '</p>\
 
-                                <p class="card-text row">\
 
-                                     <small class="text-muted col-8">\
 
-                                        <img class="m-1" style="width: 20px;" src="./img/sec05/time.png"alt=""><span>'+ msg[i].hours + 'hr</span>\
 
-                                    </small>\
 
-                                    <small style="color:#eb144c; font-size:20px;" class="col-4">NT$'+ msg[i].price_discount + '</small>\
 
-                                </p>\
 
-                             </div>\
 
-                            </div> \
 
-                         </div> \
 
-                         </div>';
 
+                                <div class="col my-3">\
 
+                                    <div class="card mb-3 p-1 h-100">\
 
+                                        <div class="row g-0">\
 
+                                            <div class="banner col-12 col-lg-12">\
 
+                                                <a target="_blank" href="'+ msg[i].url + '"><img src="' + msg[i].cover_img + '" class="img-fluid rounded-start" alt=""></a>\
 
+                                            </div>\
 
+                                            <small class="text-muted py-2"><img class="m-1" style="width: 20px;" src="./img/sec05/master.png" alt="">'+ msg[i].units + '次學習</small>\
 
+                                            <div class="col-12 col-lg-12 p-1">\
 
+                                                <a style="text-decoration: none;" target="_blank" href="'+ msg[i].url + '"><h1 style="font-weight:900;  font-size: 22px;" class="card-title d-flex align-items-center">' + msg[i].title + '</h1></a>\
 
+                                                <p class="card-text card-content">'+ msg[i].profile + '</p>\
 
+                                                <p class="card-text row">\
 
+                                                    <small class="text-muted col-8">\
 
+                                                        <img class="m-1" style="width: 20px;" src="./img/sec05/time.png"alt=""><span>'+ msg[i].hours + 'hr</span>\
 
+                                                    </small>\
 
+                                                <small style="color:#eb144c;" class="price col-4">NT$'+ msg[i].price_discount + '</small>\
 
+                                                </p>\
 
+                                            </div>\
 
+                                        </div> \
 
+                                    </div> \
 
+                                </div>';
 
+
 
 
 
                         }
 
                         }
 
                         $('#sec05-course').html(sec05course);
 
                         $('#sec05-course').html(sec05course);
 
@@ -875,7 +877,7 @@
 
             });
 
             });
 
         });
 
         });
 
     </script>
 
     </script>
 
-    
+
 
 </body>
 
 </body>
 
 
 
 </html>
 
 </html>

+ 176 - 34
style.css
Ver arquivo 

@@ -238,15 +238,6 @@
 
   width: 45%;
 
   width: 45%;
 
 }
 
 }
 
 
 
-#sec01 #sec01-container .row {
 
-  overflow: hidden;
 
-}
 
-
 
-#sec01 #sec01-container .row [class*="col-"] {
 
-  margin-bottom: -9999px;
 
-  padding-bottom: 9999px;
 
-}
 
-
 
 #sec01 #sec01-container .sec01-1 .card {
 
 #sec01 #sec01-container .sec01-1 .card {
 
   -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
 
   -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
 
           box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
 
           box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
 
@@ -259,8 +250,13 @@
 
      object-fit: cover;
 
      object-fit: cover;
 
 }
 
 }
 
 
 
-#sec01 #sec01-container .sec01-1 .card .card-title {
 
+#sec01 #sec01-container .sec01-1 .card .card-title1 {
 
   font-weight: 900;
 
   font-weight: 900;
 
+  height: 100px;
 
+}
 
+
 
+#sec01 #sec01-container .sec01-1 .card .card-content1 {
 
+  height: 100px;
 
 }
 
 }
 
 
 
 #sec01-moblie {
 
 #sec01-moblie {
 
@@ -387,7 +383,7 @@
 
 
 
 #sec02 #sec02-container #sec02-top-box #sec02-content {
 
 #sec02 #sec02-container #sec02-top-box #sec02-content {
 
   position: absolute;
 
   position: absolute;
 
-  top: -150px;
 
+  top: -180px;
 
   left: 300px;
 
   left: 300px;
 
 }
 
 }
 
 
 
@@ -446,9 +442,8 @@
 
 }
 
 }
 
 
 
 #sec02-moblie #sec02-container {
 
 #sec02-moblie #sec02-container {
 
-  background: -webkit-gradient(linear, left top, left bottom, color-stop(20%, #fff), color-stop(40%, transparent), color-stop(20%, #eb144c));
 
-  background: linear-gradient(180deg, #fff 20%, transparent 40%, #eb144c 20%);
 
-  padding: 15px;
 
+  background: -webkit-gradient(linear, left top, left bottom, color-stop(20%, #fff), color-stop(35%, transparent), color-stop(20%, #eb144c));
 
+  background: linear-gradient(180deg, #fff 20%, transparent 35%, #eb144c 20%);
 
   font-weight: 900;
 
   font-weight: 900;
 
   color: #fff;
 
   color: #fff;
 
   text-align: right;
 
   text-align: right;
 
@@ -457,6 +452,7 @@
 
 
 
 #sec02-moblie #sec02-container #sec02-content {
 
 #sec02-moblie #sec02-container #sec02-content {
 
   position: relative;
 
   position: relative;
 
+  padding: 5px;
 
 }
 
 }
 
 
 
 @media screen and (max-width: 350px) {
 
 @media screen and (max-width: 350px) {
 
@@ -469,23 +465,38 @@
 
   color: #fff;
 
   color: #fff;
 
 }
 
 }
 
 
 
+#sec02-moblie #sec02-container #sec02-top-box .sec02-box1 #top1 {
 
+  width: 120px;
 
+}
 
+
 
 @media screen and (max-width: 350px) {
 
 @media screen and (max-width: 350px) {
 
   #sec02-moblie #sec02-container #sec02-top-box .sec02-box1 #top1 {
 
   #sec02-moblie #sec02-container #sec02-top-box .sec02-box1 #top1 {
 
     width: 100px;
 
     width: 100px;
 
-    height: 130px;
 
+    height: auto;
 
   }
 
   }
 
 }
 
 }
 
 
 
+#sec02-moblie #sec02-container #sec02-top-box .sec02-box1 img {
 
+  -o-object-fit: cover;
 
+     object-fit: cover;
 
+}
 
+
 
 @media screen and (max-width: 350px) {
 
 @media screen and (max-width: 350px) {
 
   #sec02-moblie #sec02-container #sec02-top-box .sec02-box1 img {
 
   #sec02-moblie #sec02-container #sec02-top-box .sec02-box1 img {
 
     width: 70px;
 
     width: 70px;
 
-    height: 100px;
 
+    height: auto;
 
   }
 
   }
 
 }
 
 }
 
 
 
 #sec02-moblie #sec02-container #sec02-top-box .sec02-box1 .sec02-top-text {
 
 #sec02-moblie #sec02-container #sec02-top-box .sec02-box1 .sec02-top-text {
 
   font-size: 12px;
 
   font-size: 12px;
 
-  text-align: center;
 
+  text-align: left;
 
+}
 
+
 
+@media screen and (max-width: 350px) {
 
+  #sec02-moblie #sec02-container #sec02-top-box .sec02-box1 .sec02-top-text {
 
+    text-align: left;
 
+  }
 
 }
 
 }
 
 
 
 #sec02-moblie #sec02-container #sec02-top-box .sec02-box1 .sec02-top-text span {
 
 #sec02-moblie #sec02-container #sec02-top-box .sec02-box1 .sec02-top-text span {
 
@@ -795,12 +806,24 @@
 
      object-fit: cover;
 
      object-fit: cover;
 
 }
 
 }
 
 
 
+#sec04-moblie #sec04-moblie-container .col .card .card-body {
 
+  height: 260px;
 
+}
 
+
 
+@media screen and (max-width: 350px) {
 
+  #sec04-moblie #sec04-moblie-container .col .card .card-body {
 
+    padding: .5rem .5rem;
 
+  }
 
+}
 
+
 
 #sec04-moblie #sec04-moblie-container .col .card .card-title {
 
 #sec04-moblie #sec04-moblie-container .col .card .card-title {
 
   font-weight: 900;
 
   font-weight: 900;
 
 }
 
 }
 
 
 
-#sec04-moblie #sec04-moblie-container .col .card .learn-more {
 
-  width: 120px;
 
+@media screen and (max-width: 350px) {
 
+  #sec04-moblie #sec04-moblie-container .col .card .card-text {
 
+    font-size: 14px;
 
+  }
 
 }
 
 }
 
 
 
 #sec05 {
 
 #sec05 {
 
@@ -877,17 +900,12 @@
 
   background: #eb144c;
 
   background: #eb144c;
 
 }
 
 }
 
 
 
-#sec05 #sec05-container #sec05-course .sec05-1 .card {
 
-  height: 600px;
 
-}
 
-
 
 #sec05 #sec05-container #sec05-course a {
 
 #sec05 #sec05-container #sec05-course a {
 
   color: #000;
 
   color: #000;
 
   font-weight: 900;
 
   font-weight: 900;
 
 }
 
 }
 
 
 
 #sec05 #sec05-container #sec05-course img {
 
 #sec05 #sec05-container #sec05-course img {
 
-  margin: 30px 0;
 
   -o-object-fit: cover;
 
   -o-object-fit: cover;
 
      object-fit: cover;
 
      object-fit: cover;
 
 }
 
 }
 
@@ -898,6 +916,41 @@
 
   }
 
   }
 
 }
 
 }
 
 
 
+#sec05 #sec05-container #sec05-course .card-title {
 
+  font-weight: 900;
 
+  height: 55px;
 
+}
 
+
 
+#sec05 #sec05-container #sec05-course .banner img {
 
+  height: 22vw;
 
+}
 
+
 
+@media screen and (max-width: 767px) {
 
+  #sec05 #sec05-container #sec05-course .banner img {
 
+    height: auto;
 
+  }
 
+}
 
+
 
+#sec05 #sec05-container #sec05-course .card-content {
 
+  height: 100px;
 
+}
 
+
 
+@media screen and (max-width: 767px) {
 
+  #sec05 #sec05-container #sec05-course .card-content {
 
+    height: auto;
 
+  }
 
+}
 
+
 
+#sec05 #sec05-container #sec05-course .price {
 
+  font-size: 20px;
 
+}
 
+
 
+@media screen and (max-width: 350px) {
 
+  #sec05 #sec05-container #sec05-course .price {
 
+    font-size: 18px;
 
+  }
 
+}
 
+
 
 #sec06 {
 
 #sec06 {
 
   padding-top: 5vw;
 
   padding-top: 5vw;
 
   padding-bottom: 5vw;
 
   padding-bottom: 5vw;
 
@@ -913,11 +966,17 @@
 
 }
 
 }
 
 
 
 #sec06 #sec06-title {
 
 #sec06 #sec06-title {
 
-  width: 80vw;
 
+  width: 75vw;
 
   margin: 0 auto;
 
   margin: 0 auto;
 
   text-align: right !important;
 
   text-align: right !important;
 
 }
 
 }
 
 
 
+@media screen and (max-width: 767px) {
 
+  #sec06 #sec06-title {
 
+    width: 100vw;
 
+  }
 
+}
 
+
 
 #sec06 #sec06-title h1 {
 
 #sec06 #sec06-title h1 {
 
   color: #eb144c;
 
   color: #eb144c;
 
   font-size: 45px;
 
   font-size: 45px;
 
@@ -929,15 +988,16 @@
 
 
 
 @media screen and (max-width: 767px) {
 
 @media screen and (max-width: 767px) {
 
   #sec06 #sec06-title h1 {
 
   #sec06 #sec06-title h1 {
 
-    font-weight: 900;
 
-    font-size: 32px;
 
+    font-size: 28px;
 
+    margin-top: 10px;
 
+    margin-right: 10px;
 
   }
 
   }
 
 }
 
 }
 
 
 
 #sec06 #sec06-title hr {
 
 #sec06 #sec06-title hr {
 
   display: inline-block;
 
   display: inline-block;
 
-  margin-right: 80px;
 
-  width: 8vw;
 
+  margin-right: 110px;
 
+  width: 5vw;
 
   height: 5px;
 
   height: 5px;
 
   color: #eb144c;
 
   color: #eb144c;
 
   opacity: 1 !important;
 
   opacity: 1 !important;
 
@@ -945,7 +1005,10 @@
 
 
 
 @media screen and (max-width: 767px) {
 
 @media screen and (max-width: 767px) {
 
   #sec06 #sec06-title hr {
 
   #sec06 #sec06-title hr {
 
-    width: 30vw;
 
+    margin-top: 0;
 
+    width: 15vw;
 
+    height: 3px;
 
+    margin-right: 50px;
 
   }
 
   }
 
 }
 
 }
 
 
 
@@ -962,6 +1025,12 @@
 
   border: none;
 
   border: none;
 
 }
 
 }
 
 
 
+@media screen and (max-width: 767px) {
 
+  #sec06 #sec06-container .card {
 
+    padding: 5px;
 
+  }
 
+}
 
+
 
 #sec06 #sec06-container .card .sec09-7 {
 
 #sec06 #sec06-container .card .sec09-7 {
 
   width: 200px;
 
   width: 200px;
 
 }
 
 }
 
@@ -1004,7 +1073,7 @@
 
 
 
 @media screen and (max-width: 767px) {
 
 @media screen and (max-width: 767px) {
 
   #sec06 #sec06-container .col-3 img {
 
   #sec06 #sec06-container .col-3 img {
 
-    padding: 0px;
 
+    padding: 5px;
 
   }
 
   }
 
 }
 
 }
 
 
 
@@ -1014,7 +1083,7 @@
 
 
 
 @media screen and (max-width: 767px) {
 
 @media screen and (max-width: 767px) {
 
   #sec06 #sec06-container .sec09-1 {
 
   #sec06 #sec06-container .sec09-1 {
 
-    padding: 20px;
 
+    padding: 0;
 
   }
 
   }
 
 }
 
 }
 
 
 
@@ -1024,7 +1093,6 @@
 
   line-height: 2;
 
   line-height: 2;
 
   background: #eb144c;
 
   background: #eb144c;
 
   color: #fff;
 
   color: #fff;
 
-  padding-bottom: 3vw !important;
 
 }
 
 }
 
 
 
 #footer .footer-link {
 
 #footer .footer-link {
 
@@ -1080,7 +1148,6 @@
 
   font-size: 20px;
 
   font-size: 20px;
 
   margin: 10px;
 
   margin: 10px;
 
   letter-spacing: 1px;
 
   letter-spacing: 1px;
 
-  display: inline;
 
 }
 
 }
 
 
 
 @media screen and (max-width: 767px) {
 
 @media screen and (max-width: 767px) {
 
@@ -1094,4 +1161,79 @@
 
 #footer .text p {
 
 #footer .text p {
 
   margin: 0 !important;
 
   margin: 0 !important;
 
 }
 
 }
 
+
 
+#footer .text img {
 
+  width: 30px;
 
+  margin: 10px;
 
+  -webkit-filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(138deg) brightness(103%) contrast(102%);
 
+          filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(138deg) brightness(103%) contrast(102%);
 
+  -webkit-transition: 0.3s;
 
+  transition: 0.3s;
 
+}
 
+
 
+#footer .text img:hover {
 
+  opacity: 0.6;
 
+}
 
+
 
+#sec10 {
 
+  width: 90vw;
 
+  margin: 0 auto;
 
+}
 
+
 
+#sec10 .sec10-title {
 
+  font-size: 43px;
 
+}
 
+
 
+@media screen and (max-width: 767px) {
 
+  #sec10 .sec10-title {
 
+    width: 95vw;
 
+    font-size: 26px;
 
+  }
 
+}
 
+
 
+#sec10 hr {
 
+  height: 1px;
 
+  background: #525252;
 
+  opacity: 1;
 
+}
 
+
 
+#sec10 .content {
 
+  word-wrap: break-word;
 
+}
 
+
 
+#sec10 .content p {
 
+  line-height: 2;
 
+  font-size: 18px;
 
+}
 
+
 
+#sec10 .content .video-work #video2 video {
 
+  width: 100%;
 
+}
 
+
 
+#sec10 .side-bar h1 {
 
+  color: #e02d4b;
 
+  font-size: 36px;
 
+  font-weight: 900;
 
+}
 
+
 
+#sec10 .side-bar a {
 
+  text-decoration: none;
 
+  color: #000;
 
+  -webkit-transition: 0.3s;
 
+  transition: 0.3s;
 
+  cursor: pointer;
 
+}
 
+
 
+#sec10 .side-bar a:hover {
 
+  color: #2828ff;
 
+}
 
+
 
+#sec10 .side-bar h5 {
 
+  font-size: 20px;
 
+  font-weight: 900;
 
+}
 
+
 
+#sec10 .side-bar p {
 
+  font-size: 16px;
 
+}
 
 /*# sourceMappingURL=style.css.map */
 
 /*# sourceMappingURL=style.css.map */

Diferenças do arquivo suprimidas por serem muito extensas
+ 0 - 0
style.css.map


+ 142 - 36
style.scss
Ver arquivo 

@@ -186,7 +186,7 @@ $navbgcolor: #eb144c;
 
             font-size: 45px;
 
             font-size: 45px;
 
             font-weight: 900;
 
             font-weight: 900;
 
             padding: 5px 10px;
 
             padding: 5px 10px;
 
-
 
+           
             @media screen and(max-width:$moblie) {
 
             @media screen and(max-width:$moblie) {
 
                 font-weight: 900;
 
                 font-weight: 900;
 
                 font-size: 32px;
 
                 font-size: 32px;
 
@@ -207,13 +207,6 @@ $navbgcolor: #eb144c;
 
         width: 45%;
 
         width: 45%;
 
     }
 
     }
 
     #sec01-container {
 
     #sec01-container {
 
-        .row {
 
-            overflow: hidden;
 
-        }
 
-        .row [class*="col-"] {
 
-            margin-bottom: -9999px;
 
-            padding-bottom: 9999px;
 
-        }
 
         .sec01-1 {
 
         .sec01-1 {
 
             .card {
 
             .card {
 
                 box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
 
                 box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
 
@@ -223,8 +216,13 @@ $navbgcolor: #eb144c;
 
                     object-fit: cover;
 
                     object-fit: cover;
 
                 }
 
                 }
 
 
 
-                .card-title {
 
+                .card-title1{
 
                     font-weight: 900;
 
                     font-weight: 900;
 
+                    height: 100px;
 
+                }
 
+
 
+                .card-content1{
 
+                    height: 100px;
 
                 }
 
                 }
 
             }
 
             }
 
         }
 
         }
 
@@ -327,7 +325,7 @@ $navbgcolor: #eb144c;
 
             position: relative;
 
             position: relative;
 
             #sec02-content {
 
             #sec02-content {
 
                 position: absolute;
 
                 position: absolute;
 
-                top: -150px;
 
+                top: -180px;
 
                 left: 300px;
 
                 left: 300px;
 
             }
 
             }
 
 
 
@@ -380,16 +378,14 @@ $navbgcolor: #eb144c;
 
         }
 
         }
 
     }
 
     }
 
     #sec02-container {
 
     #sec02-container {
 
-        background: linear-gradient(180deg, #fff 20%, transparent 40%, #eb144c 20%);
 
-
 
-        padding: 15px;
 
+        background: linear-gradient(180deg, #fff 20%, transparent 35%, #eb144c 20%);
 
         font-weight: 900;
 
         font-weight: 900;
 
         color: #fff;
 
         color: #fff;
 
         text-align: right;
 
         text-align: right;
 
         padding: 20vw 0;
 
         padding: 20vw 0;
 
-
 
         #sec02-content {
 
         #sec02-content {
 
             position: relative;
 
             position: relative;
 
+            padding: 5px;
 
         }
 
         }
 
         #sec02-top-box {
 
         #sec02-top-box {
 
             @media screen and(max-width:350px) {
 
             @media screen and(max-width:350px) {
 
@@ -399,21 +395,26 @@ $navbgcolor: #eb144c;
 
                 color: #fff;
 
                 color: #fff;
 
 
 
                 #top1 {
 
                 #top1 {
 
+                    width:120px;
 
                     @media screen and(max-width:350px) {
 
                     @media screen and(max-width:350px) {
 
                         width: 100px;
 
                         width: 100px;
 
-                        height: 130px;
 
+                        height: auto;
 
                     }
 
                     }
 
                 }
 
                 }
 
                 img {
 
                 img {
 
+                    object-fit: cover;
 
                     @media screen and(max-width:350px) {
 
                     @media screen and(max-width:350px) {
 
                         width: 70px;
 
                         width: 70px;
 
-                        height: 100px;
 
+                        height:auto;
 
                     }
 
                     }
 
                 }
 
                 }
 
                 .sec02-top-text {
 
                 .sec02-top-text {
 
                     font-size: 12px;
 
                     font-size: 12px;
 
-                    text-align: center;
 
+                    text-align: left;
 
+                    
                     @media screen and(max-width:350px) {
 
                     @media screen and(max-width:350px) {
 
+                        text-align: left;
 
+                     
                     }
 
                     }
 
 
 
                     span {
 
                     span {
 
@@ -663,12 +664,19 @@ $navbgcolor: #eb144c;
 
                 }
 
                 }
 
                 box-shadow: 0 10px 1px $navbgcolor;
 
                 box-shadow: 0 10px 1px $navbgcolor;
 
                 border-radius: 10px;
 
                 border-radius: 10px;
 
+                .card-body{
 
+                    height: 260px;
 
+                    @media screen and(max-width:350px) {
 
+                       padding: .5rem .5rem;
 
+                     }
 
+                }
 
                 .card-title {
 
                 .card-title {
 
                     font-weight: 900;
 
                     font-weight: 900;
 
                 }
 
                 }
 
-
 
-                .learn-more {
 
-                    width: 120px;
 
+                .card-text{
 
+                    @media screen and(max-width:350px) {
 
+                       font-size: 14px;
 
+                    }
 
                 }
 
                 }
 
             }
 
             }
 
         }
 
         }
 
@@ -741,22 +749,45 @@ $navbgcolor: #eb144c;
 
     #sec05-container {
 
     #sec05-container {
 
         
         
         #sec05-course {
 
         #sec05-course {
 
-           .sec05-1{
 
-           .card{
 
-               height: 600px;
 
-           }
 
-           }
 
+           
             a {
 
             a {
 
                 color: #000;
 
                 color: #000;
 
                 font-weight: 900;
 
                 font-weight: 900;
 
             }
 
             }
 
             img {
 
             img {
 
-                margin: 30px 0;
 
+                
                 object-fit: cover;
 
                 object-fit: cover;
 
                 @media screen and(max-width:$moblie) {
 
                 @media screen and(max-width:$moblie) {
 
                     width: 95vw;
 
                     width: 95vw;
 
                 }
 
                 }
 
             }
 
             }
 
+            .card-title {
 
+                font-weight: 900;
 
+                height: 55px;
 
+            }
 
+            .banner{
 
+                img{
 
+                    height: 22vw;
 
+                    @media screen and(max-width:$moblie) {
 
+                        height: auto;
 
+                    }
 
+                }
 
+            }
 
+            .card-content{
 
+              height: 100px;
 
+              @media screen and(max-width:$moblie) {
 
+                height: auto;
 
+               
+            }
 
+            }
 
+            .price{
 
+                font-size:20px;
 
+                @media screen and(max-width:350px) {
 
+                    font-size:18px;
 
+
 
+                   
+                }
 
+            }
 
         }
 
         }
 
     }
 
     }
 
 }
 
 }
 
@@ -772,9 +803,12 @@ $navbgcolor: #eb144c;
 
         background-blend-mode: overlay;
 
         background-blend-mode: overlay;
 
     }
 
     }
 
     #sec06-title {
 
     #sec06-title {
 
-        width: 80vw;
 
+        width: 75vw;
 
         margin: 0 auto;
 
         margin: 0 auto;
 
         text-align: right !important;
 
         text-align: right !important;
 
+        @media screen and(max-width:$moblie) {
 
+            width: 100vw;
 
+        }
 
         h1 {
 
         h1 {
 
             color: $navbgcolor;
 
             color: $navbgcolor;
 
             font-size: 45px;
 
             font-size: 45px;
 
@@ -783,19 +817,23 @@ $navbgcolor: #eb144c;
 
             margin-top: 50px;
 
             margin-top: 50px;
 
             margin-right: 50px;
 
             margin-right: 50px;
 
             @media screen and(max-width:$moblie) {
 
             @media screen and(max-width:$moblie) {
 
-                font-weight: 900;
 
-                font-size: 32px;
 
+                font-size: 28px;
 
+                margin-top: 10px;
 
+                margin-right: 10px;
 
             }
 
             }
 
         }
 
         }
 
         hr {
 
         hr {
 
             display: inline-block;
 
             display: inline-block;
 
-            margin-right: 80px;
 
-            width: 8vw;
 
+            margin-right: 110px;
 
+            width: 5vw;
 
             height: 5px;
 
             height: 5px;
 
             color: $navbgcolor;
 
             color: $navbgcolor;
 
             opacity: 1 !important;
 
             opacity: 1 !important;
 
             @media screen and(max-width:$moblie) {
 
             @media screen and(max-width:$moblie) {
 
-                width: 30vw;
 
+                margin-top: 0;
 
+                width: 15vw;
 
+                height: 3px;
 
+                margin-right: 50px;
 
             }
 
             }
 
         }
 
         }
 
     }
 
     }
 
@@ -808,6 +846,9 @@ $navbgcolor: #eb144c;
 
             padding-top: 5vw;
 
             padding-top: 5vw;
 
             padding-bottom: 5vw;
 
             padding-bottom: 5vw;
 
             border: none;
 
             border: none;
 
+            @media screen and(max-width:$moblie) {
 
+                padding: 5px;
 
+            }
 
             .sec09-7 {
 
             .sec09-7 {
 
                 width: 200px;
 
                 width: 200px;
 
             }
 
             }
 
@@ -833,7 +874,7 @@ $navbgcolor: #eb144c;
 
                 object-fit: cover;
 
                 object-fit: cover;
 
 
 
                 @media screen and(max-width:$moblie) {
 
                 @media screen and(max-width:$moblie) {
 
-                    padding: 0px;
 
+                    padding: 5px;
 
                 }
 
                 }
 
             }
 
             }
 
         }
 
         }
 
@@ -841,7 +882,7 @@ $navbgcolor: #eb144c;
 
         .sec09-1 {
 
         .sec09-1 {
 
             padding: 50px;
 
             padding: 50px;
 
             @media screen and(max-width:$moblie) {
 
             @media screen and(max-width:$moblie) {
 
-                padding: 20px;
 
+                padding: 0;
 
             }
 
             }
 
         }
 
         }
 
     }
 
     }
 
@@ -853,7 +894,6 @@ $navbgcolor: #eb144c;
 
     line-height: 2;
 
     line-height: 2;
 
     background: $navbgcolor;
 
     background: $navbgcolor;
 
     color: #fff;
 
     color: #fff;
 
-    padding-bottom: 3vw !important;
 
     .footer-link {
 
     .footer-link {
 
         padding-top: 3vw;
 
         padding-top: 3vw;
 
 
 
@@ -888,12 +928,13 @@ $navbgcolor: #eb144c;
 
         a {
 
         a {
 
             text-decoration: none;
 
             text-decoration: none;
 
             color: #fff;
 
             color: #fff;
 
+           
         }
 
         }
 
         h2 {
 
         h2 {
 
             font-size: 20px;
 
             font-size: 20px;
 
             margin: 10px;
 
             margin: 10px;
 
             letter-spacing: 1px;
 
             letter-spacing: 1px;
 
-            display: inline;
 
+
 
             @media screen and(max-width:$moblie) {
 
             @media screen and(max-width:$moblie) {
 
                 display: block;
 
                 display: block;
 
                 font-size: 16px;
 
                 font-size: 16px;
 
@@ -903,5 +944,70 @@ $navbgcolor: #eb144c;
 
         p {
 
         p {
 
             margin: 0 !important;
 
             margin: 0 !important;
 
         }
 
         }
 
+        img {
 
+            width: 30px;
 
+            margin: 10px;
 
+            filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(138deg) brightness(103%) contrast(102%);
 
+            transition: 0.3s;
 
+            &:hover {
 
+                opacity: 0.6;
 
+            }
 
+        }
 
     }
 
     }
 
 }
 
 }
 
+// 第二層
 
+#sec10 {
 
+    width: 90vw;
 
+    margin: 0 auto;
 
+    .sec10-title {
 
+        font-size: 43px;
 
+        @media screen and(max-width:$moblie) {
 
+            width: 95vw;
 
+            font-size: 26px;
 
+        }
 
+    }
 
+    hr {
 
+        height: 1px;
 
+        background: #525252;
 
+        opacity: 1;
 
+    }
 
+    .content {
 
+        word-wrap:break-word;
 
+        p {
 
+            line-height: 2;
 
+            font-size: 18px;
 
+        }
 
+
 
+        .video-work{
 
+
 
+            #video2 {
 
+                video {
 
+                    width: 100%;
 
+                }
 
+            }
 
+        }
 
+    }
 
+    .side-bar {
 
+        h1{
 
+            color: #e02d4b;
 
+            font-size: 36px;
 
+            font-weight: 900;
 
+        }
 
+        a {
 
+            text-decoration: none;
 
+            color: #000;
 
+            transition: 0.3s;
 
+            cursor: pointer;
 
+            &:hover {
 
+                color: #2828ff;
 
+            }
 
+        }
 
+        h5 {
 
+            font-size: 20px;
 
+            font-weight: 900;
 
+        }
 
+        p {
 
+            font-size: 16px;
 
+        }
 
+    }
 
+}

Alguns arquivos não foram mostrados porque muitos arquivos mudaram nesse diff