初版

goto.js

@@ -1,103 +1,6 @@
-// axios
-// axios.get('http://172.105.205.52:8000/courses?tag_string=(2)')
-//   .then(function (response) {
-//     console.log(response);
-//   });
 
-//   axios.post('/user', {
-//     firstName: 'Fred',
-//     lastName: 'Flintstone'
-//   }).then(function (response) {
-//     console.log(response);
-//   })
-
-$( "#1" ).click(function() {
-    $.ajax('http://172.105.205.52:8000/tags', {
-        type: 'GET',  // http method
-        headers: { 'Access-Control-Allow-Origin': '*' },
-        success: function (res) {
-            var myJSON = JSON.stringify(res);
-            // var a = res;
-            // console.log(res);
-            var d = JSON.parse(myJSON);
-            console.log(d[0].name); 
-        },
-        
-        error: function (err) {
-            console.log(err);
-        }
-    });
-  });
-
-  // $( "#2" ).click(function() {
-  //   $.ajax('http://172.105.205.52:8000/tags', {
-  //       type: 'GET',  // http method
-  //       headers: { 'Access-Control-Allow-Origin': '*' },
-  //       success: function (res) {
-  //           var myJSON = JSON.stringify(res);
-  //           // var a = res;
-  //           // console.log(res);
-  //           var d = JSON.parse(myJSON);
-  //           console.log(d[1].name); 
-  //       },
-        
-  //       error: function (err) {
-  //           console.log(err);
-  //       }
-  //   });
-  // });
-  // $( "#3" ).click(function() {
-  //   $.ajax('http://172.105.205.52:8000/tags', {
-  //       type: 'GET',  // http method
-  //       headers: { 'Access-Control-Allow-Origin': '*' },
-  //       success: function (res) {
-  //           var myJSON = JSON.stringify(res);
-  //           // var a = res;
-  //           // console.log(res);
-  //           var d = JSON.parse(myJSON);
-  //           console.log(d[2].name); 
-  //       },
-        
-  //       error: function (err) {
-  //           console.log(err);
-  //       }
-  //   });
-  // });
-  // $( "#4" ).click(function() {
-  //   $.ajax('http://172.105.205.52:8000/tags', {
-  //       type: 'GET',  // http method
-  //       headers: { 'Access-Control-Allow-Origin': '*' },
-  //       success: function (res) {
-  //           var myJSON = JSON.stringify(res);
-  //           // var a = res;
-  //           // console.log(res);
-  //           var d = JSON.parse(myJSON);
-  //           console.log(d[3].name); 
-  //       },
-        
-  //       error: function (err) {
-  //           console.log(err);
-  //       }
-  //   });
-  // });
-  // $( "#5" ).click(function() {
-  //   $.ajax('http://172.105.205.52:8000/tags', {
-  //       type: 'GET',  // http method
-  //       headers: { 'Access-Control-Allow-Origin': '*' },
-  //       success: function (res) {
-  //           var myJSON = JSON.stringify(res);
-  //           // var a = res;
-  //           // console.log(res);
-  //           var d = JSON.parse(myJSON);
-  //           console.log(d[4].name); 
-  //       },
-        
-  //       error: function (err) {
-  //           console.log(err);
-  //       }
-  //   });
-  // });
 
+  
 // 手機板menu彈跳視窗
 $("#menu-box2").hide();
 $("#menu-box").hide();
@@ -133,6 +36,8 @@ $('#sec01-moblie-container').slick({
     $('#sec01-moblie-container').slick('slickNext')
   });
 
+ 
+
   // sec04  專欄報導 手機輪播 
 $('#sec04-moblie-container').slick({
     arrows: false,

index.html

@@ -69,54 +69,14 @@
                 <hr class="line">
             </div>
             <div id="sec01-container" class="row row-cols-1 row-cols-md-4 g-4">
-                <div class="col">
-                    <div class="card">
-                        <img src="./img/sec01/sec01-01webp.webp" class="card-img-top" alt="...">
-                        <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>
-                        </div>
-                    </div>
-                </div>
-                <div class="col">
-                    <div class="card">
-                        <img src="./img/sec01/sec01-2webp.webp" class="card-img-top" alt="...">
-                        <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>
-                        </div>
-                    </div>
-                </div>
-                <div class="col">
-                    <div class="card">
-                        <img src="./img/sec01/sec01-3webp.webp" class="card-img-top" alt="...">
-                        <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>
-
-                        </div>
-                    </div>
-                </div>
-                <div class="col">
-                    <div class="card">
-                        <img src="./img/sec01/sec01-4webp.webp" class="card-img-top" alt="...">
-                        <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>
-                        </div>
-                    </div>
-                </div>
+            
             </div>
 
 
         </div>
     </section>
     <!-- 最新課程 手機板 -->
-    <section id="sec01-moblie">
+    <!-- <section id="sec01-moblie">
         <img id="sec01-slider-next" style="position: absolute;" class="arrow-table" src="./img/arrow-table.png" alt="">
         <div id="sec01-moblie-title" class="container-fluid">
             <div id="sec01-moblie-header">
@@ -168,7 +128,7 @@
 
 
         </div>
-    </section>
+    </section> -->
 
     <!-- 排名區塊 topbox 電腦版 -->
     <section id="sec02">
@@ -709,158 +669,20 @@
             <h1>課程分類</h1>
             <hr class="line">
         </div>
+        <div id="tag-group" class="container-fluid my-5 text-center rounded-pill px-0 mx-0">
+            <div class="tag btn-group" role="group" aria-label="Basic outlined example">
+                <button id="15" type="button" class=" border-0 rounded-pill">享受生活</button>
+                <button id="16" type="button" class="border-0  rounded-pill">我要變美</button>
+                <button id="17" type="button" class=" border-0  rounded-pill">賺錢理財</button>
+                <button id="18" type="button" class=" border-0 rounded-pill">自我成長</button>
+            </div>
+        </div>
+
         <div id="sec05-container" class="container-fluid">
             <div id="sec05-course" class="row">
-                <div class="col-12 col-lg-6">
-                    <div class="card mb-3" style="max-width: 540px;">
-                        <div class="row g-0">
-                            <div class="col-6  col-lg-4">
-                                <img src="..." class="img-fluid rounded-start" alt="...">
-                                <small class="text-muted">
-                                    <img class="m-1" style="width: 20px;" src="./img/sec05/master.png" alt="">4320
-                                </small>
-                            </div>
-                            <div class="col-6  col-lg-8">
-                                <div class="card-body">
-                                    <h5 class="card-title">Card title</h5>
-                                    <p class="card-text">This is a wider card with supporting text below as a natural
-                                        lead-in to additional content. This content is a little bit longer.</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>125分鐘</span>
-                                        </small>
-                                        <small style="color:#eb144c; font-size:20px;" class="col-4">NT$1200</small>
-
-                                    </p>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-                <div class="col-12 col-lg-6">
-                    <div class="card mb-3" style="max-width: 540px;">
-                        <div class="row g-0">
-                            <div class="col-6  col-lg-4">
-                                <img src="..." class="img-fluid rounded-start" alt="...">
-                            </div>
-                            <div class="col-6  col-lg-8">
-                                <div class="card-body">
-                                    <h5 class="card-title">Card title</h5>
-                                    <p class="card-text">This is a wider card with supporting text below as a natural
-                                        lead-in to additional content. This content is a little bit longer.</p>
-                                    <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-                <div class="col-12 col-lg-6">
-                    <div class="card mb-3" style="max-width: 540px;">
-                        <div class="row g-0">
-                            <div class="col-6  col-lg-4">
-                                <img src="..." class="img-fluid rounded-start" alt="...">
-                            </div>
-                            <div class="col-6  col-lg-8">
-                                <div class="card-body">
-                                    <h5 class="card-title">Card title</h5>
-                                    <p class="card-text">This is a wider card with supporting text below as a natural
-                                        lead-in to additional content. This content is a little bit longer.</p>
-                                    <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-                <div class="col-12 col-lg-6">
-                    <div class="card mb-3" style="max-width: 540px;">
-                        <div class="row g-0">
-                            <div class="col-6  col-lg-4">
-                                <img src="..." class="img-fluid rounded-start" alt="...">
-                            </div>
-                            <div class="col-6  col-lg-8">
-                                <div class="card-body">
-                                    <h5 class="card-title">Card title</h5>
-                                    <p class="card-text">This is a wider card with supporting text below as a natural
-                                        lead-in to additional content. This content is a little bit longer.</p>
-                                    <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-            <img src="./img/sec05img1.webp" alt="">
-            <div class="row">
-                <div class="col-12 col-lg-6">
-                    <div class="card mb-3" style="max-width: 540px;">
-                        <div class="row g-0">
-                            <div class="col-6  col-lg-4">
-                                <img src="..." class="img-fluid rounded-start" alt="...">
-                            </div>
-                            <div class="col-6  col-lg-8">
-                                <div class="card-body">
-                                    <h5 class="card-title">Card title</h5>
-                                    <p class="card-text">This is a wider card with supporting text below as a natural
-                                        lead-in to additional content. This content is a little bit longer.</p>
-                                    <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-                <div class="col-12 col-lg-6">
-                    <div class="card mb-3" style="max-width: 540px;">
-                        <div class="row g-0">
-                            <div class="col-6 col-lg-4">
-                                <img src="..." class="img-fluid rounded-start" alt="...">
-                            </div>
-                            <div class="col-6 col-lg-8">
-                                <div class="card-body">
-                                    <h5 class="card-title">Card title</h5>
-                                    <p class="card-text">This is a wider card with supporting text below as a natural
-                                        lead-in to additional content. This content is a little bit longer.</p>
-                                    <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-                <div class="col-12 col-lg-6">
-                    <div class="card mb-3" style="max-width: 540px;">
-                        <div class="row g-0">
-                            <div class="col-6 col-lg-4">
-                                <img src="..." class="img-fluid rounded-start" alt="...">
-                            </div>
-                            <div class="col-6 col-lg-8">
-                                <div class="card-body">
-                                    <h5 class="card-title">Card title</h5>
-                                    <p class="card-text">This is a wider card with supporting text below as a natural
-                                        lead-in to additional content. This content is a little bit longer.</p>
-                                    <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-                <div class="col-12 col-lg-6">
-                    <div class="card mb-3" style="max-width: 540px;">
-                        <div class="row g-0">
-                            <div class="col-6 col-lg-4">
-                                <img src="..." class="img-fluid rounded-start" alt="...">
-                            </div>
-                            <div class="col-6 col-lg-8">
-                                <div class="card-body">
-                                    <h5 class="card-title">Card title</h5>
-                                    <p class="card-text">This is a wider card with supporting text below as a natural
-                                        lead-in to additional content. This content is a little bit longer.</p>
-                                    <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
+
             </div>
+            <!-- <img src="./img/sec05img1.webp" alt=""> -->
         </div>
     </section>
 
@@ -939,7 +761,7 @@
             <p>開拓Open Talk &copy; All Rights Reserved.</p>
         </div>
     </footer>
-
+    <a href=""></a>
 
     <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"
         integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p"
@@ -950,31 +772,110 @@
     <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>
-        $(document).ready(function () {
-
+        window.onload=function() {
             $.ajax({
                 method: "POST",
-                url: "https://welife.asia:8002/get_courses",
-                data: '[15,16,17,18]',
+                url: "https://welife.asia:8002/get_courses_by_cid",
+                data: '[16,17,19,23]',
                 dataType: "json",
-            })
 
+            })
                 .done(function (msg) {
-                    var sec05course = '';
+                    var sec01course = '';
                     console.log(msg);
-                   
-                    // $('#sec-work-box').html(sec05course);
-                    // var test = msg[0].newstext1;
-
-                    // $('#jsontest').append(test);
+                    var res = msg.length;
+                    console.log(res);
+                    const limit = res;
+                    for (var i = 0; i < limit; i++) {
+                        sec01course += ' \
+                            <div  class="sec01-1 col-lg-3">\
+                                <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>\
+                                    <div class="card-body">\
+                                        <a style="text-decoration: none;" target="_blank" href="'+ msg[i].url + '"><h1 style="font-weight:900;  font-size: 22px; color:#000;" 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-6">\
+                                            <img class="m-1" style="width: 25px; object-fit: cover; " src="./img/sec05/time.png"alt=""><span>'+ msg[i].hours + 'hr</span>\
+                                            </small>\
+                                            <small style="color:#eb144c; font-size:20px;" class="col-6">NT$'+ msg[i].price_discount + '</small>\
+                                        </p>\
+                                    </div>\
+                                </div>\
+                            </div>';
+
+                    }
+                    $('#sec01-container').html(sec01course);
                 });
-
-
-
+        }
+    </script>
+    <!-- 課程分類 -->
+    <script>
+        $(document).ready(function () {
+            function get_data(numb = '[15]') {
+
+                $.ajax({
+                    method: "POST",
+                    url: "https://welife.asia:8002/get_courses",
+                    data: numb,
+                    dataType: "json",
+
+                })
+                    .done(function (msg) {
+                        var sec05course = '';
+                        console.log(msg);
+                        var res = msg.length;
+                        console.log(res);
+                        const limit = res;
+                        for (var i = 0; i < limit; i++) {
+                            sec05course += ' \
+                            <div class="sec05-1 col-12 col-lg-6">\
+                            <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>';
+
+                        }
+                        $('#sec05-course').html(sec05course);
+                    });
+            }
+            get_data();
+            // 享受生活
+            $('#15').click(function () {
+                get_data('[15]');
+            });
+            // 我要變美
+            $('#16').click(function () {
+                get_data('[16]');
+            });
+            // 賺錢理財
+            $('#17').click(function () {
+                get_data('[17]');
+            });
+            // 自我成長
+            $('#18').click(function () {
+                get_data('[18]');
+            });
         });
     </script>
+    
 </body>
 
 </html>

style.css

@@ -201,12 +201,6 @@
   background: #fff;
 }
 
-@media screen and (max-width: 767px) {
-  #sec01 {
-    display: none;
-  }
-}
-
 #sec01 #sec01-title {
   margin-bottom: 50px;
 }
@@ -244,20 +238,28 @@
   width: 45%;
 }
 
-#sec01 #sec01-container .card {
+#sec01 #sec01-container .row {
+  overflow: hidden;
+}
+
+#sec01 #sec01-container .row [class*="col-"] {
+  margin-bottom: -9999px;
+  padding-bottom: 9999px;
+}
+
+#sec01 #sec01-container .sec01-1 .card {
   -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
           box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
   border-radius: 10px;
 }
 
-#sec01 #sec01-container .card img {
+#sec01 #sec01-container .sec01-1 .card img {
   padding: 5px;
-  height: 150px;
   -o-object-fit: cover;
      object-fit: cover;
 }
 
-#sec01 #sec01-container .card .card-title {
+#sec01 #sec01-container .sec01-1 .card .card-title {
   font-weight: 900;
 }
 
@@ -803,7 +805,6 @@
 #sec05 {
   padding-top: 5vw;
   padding-bottom: 5vw;
-  background-image: url();
 }
 
 #sec05 #sec05-title {
@@ -839,13 +840,55 @@
   }
 }
 
-#sec05 #sec05-container img {
-  width: 78vw;
+#sec05 #tag-group {
+  border: 3px solid #ea504d;
+}
+
+@media screen and (max-width: 767px) {
+  #sec05 #tag-group {
+    font-size: 16px;
+    padding: 0 10px;
+    margin: 0 10px;
+    border: 0;
+  }
+}
+
+#sec05 #tag-group .tag button {
+  padding: 0 30px;
+  margin: 0 30px;
+  color: #ffafae;
+  background: none;
+  font-size: 32px;
+}
+
+@media screen and (max-width: 767px) {
+  #sec05 #tag-group .tag button {
+    font-size: 16px;
+    padding: 0 15px;
+    margin: 0 10px;
+    color: #fff;
+    background: #ffafae;
+  }
+}
+
+#sec05 #tag-group .tag button:hover, #sec05 #tag-group .tag button:focus {
+  color: #fff;
+  background: #eb144c;
+}
+
+#sec05 #sec05-container #sec05-course a {
+  color: #000;
+  font-weight: 900;
+}
+
+#sec05 #sec05-container #sec05-course img {
   margin: 30px 0;
+  -o-object-fit: cover;
+     object-fit: cover;
 }
 
 @media screen and (max-width: 767px) {
-  #sec05 #sec05-container img {
+  #sec05 #sec05-container #sec05-course img {
     width: 95vw;
   }
 }

style.scss

@@ -175,9 +175,9 @@ $navbgcolor: #eb144c;
 #sec01 {
     padding-bottom: 10vw;
     background: #fff;
-    @media screen and(max-width:$moblie) {
-        display: none;
-    }
+    // @media screen and(max-width:$moblie) {
+    //     display: none;
+    // }
     #sec01-title {
         margin-bottom: 50px;
         h1 {
@@ -207,17 +207,25 @@ $navbgcolor: #eb144c;
         width: 45%;
     }
     #sec01-container {
-        .card {
-            box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
-            border-radius: 10px;
-            img {
-                padding: 5px;
-                height: 150px;
-                object-fit: cover;
-            }
+        .row {
+            overflow: hidden;
+        }
+        .row [class*="col-"] {
+            margin-bottom: -9999px;
+            padding-bottom: 9999px;
+        }
+        .sec01-1 {
+            .card {
+                box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
+                border-radius: 10px;
+                img {
+                    padding: 5px;
+                    object-fit: cover;
+                }
 
-            .card-title {
-                font-weight: 900;
+                .card-title {
+                    font-weight: 900;
+                }
             }
         }
     }
@@ -345,15 +353,14 @@ $navbgcolor: #eb144c;
 // sec02 TOP排名 手機板
 #sec02-moblie {
     padding-top: 3vw;
-   
+
     @media screen and(min-width:$desktop) {
         display: none;
     }
     #sec02-moblie-header {
-       
         h1 {
             text-align: center;
-            color:$navbgcolor;
+            color: $navbgcolor;
             font-size: 45px;
             font-weight: 900;
             padding: 5px 10px;
@@ -367,41 +374,37 @@ $navbgcolor: #eb144c;
             margin: 10px auto !important;
             width: 25vw;
             height: 5px;
-            color:$navbgcolor;
+            color: $navbgcolor;
             margin: 10px;
             opacity: 1 !important;
         }
     }
     #sec02-container {
         background: linear-gradient(180deg, #fff 20%, transparent 40%, #eb144c 20%);
-       
+
         padding: 15px;
         font-weight: 900;
         color: #fff;
         text-align: right;
         padding: 20vw 0;
-       
+
         #sec02-content {
             position: relative;
         }
         #sec02-top-box {
-        
-            
-           @media screen and(max-width:350px) {
+            @media screen and(max-width:350px) {
                 left: 10px;
             }
             .sec02-box1 {
                 color: #fff;
-                
-                #top1 {
 
+                #top1 {
                     @media screen and(max-width:350px) {
                         width: 100px;
                         height: 130px;
                     }
                 }
                 img {
-                   
                     @media screen and(max-width:350px) {
                         width: 70px;
                         height: 100px;
@@ -426,7 +429,6 @@ $navbgcolor: #eb144c;
 }
 // sec03 排名table-電腦版
 #sec03 {
-   
     padding-bottom: 5vw;
     @media screen and(max-width:$moblie) {
         display: none;
@@ -468,7 +470,6 @@ $navbgcolor: #eb144c;
 }
 // sec03排名table-手機板
 #sec03-moblie {
-   
     position: relative;
     .arrow-table {
         position: fixed;
@@ -681,6 +682,7 @@ $navbgcolor: #eb144c;
 
     #sec05-title {
         margin-bottom: 50px;
+
         h1 {
             text-align: center;
             color: $navbgcolor;
@@ -704,14 +706,52 @@ $navbgcolor: #eb144c;
             }
         }
     }
-    background-image: url();
+    #tag-group {
+        border: 3px solid #ea504d;
+        @media screen and(max-width:$moblie) {
+            font-size: 16px;
+            padding: 0 10px;
+            margin: 0 10px;
+            border: 0;
+        }
+        .tag {
+            button {
+                padding: 0 30px;
+                margin: 0 30px;
+                color: #ffafae;
+                background: none;
+                font-size: 32px;
+
+                @media screen and(max-width:$moblie) {
+                    font-size: 16px;
+                    padding: 0 15px;
+                    margin: 0 10px;
+                    color: #fff;
+                    background: #ffafae;
+                }
+                &:hover,
+                &:focus {
+                    color: #fff;
+                    background: #eb144c;
+                }
+            }
+        }
+    }
 
     #sec05-container {
-        img {
-            width: 78vw;
-            margin: 30px 0;
-            @media screen and(max-width:$moblie) {
-                width: 95vw;
+        
+        #sec05-course {
+           
+            a {
+                color: #000;
+                font-weight: 900;
+            }
+            img {
+                margin: 30px 0;
+                object-fit: cover;
+                @media screen and(max-width:$moblie) {
+                    width: 95vw;
+                }
             }
         }
     }
@@ -737,7 +777,7 @@ $navbgcolor: #eb144c;
             font-weight: 900;
             padding: 5px 10px;
             margin-top: 50px;
-            margin-right:50px;
+            margin-right: 50px;
             @media screen and(max-width:$moblie) {
                 font-weight: 900;
                 font-size: 32px;
@@ -745,7 +785,7 @@ $navbgcolor: #eb144c;
         }
         hr {
             display: inline-block;
-            margin-right:80px;
+            margin-right: 80px;
             width: 8vw;
             height: 5px;
             color: $navbgcolor;
@@ -757,14 +797,14 @@ $navbgcolor: #eb144c;
     }
     #sec06-container {
         text-align: center;
-      
+
         .card {
             box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
             background: #fff;
             padding-top: 5vw;
             padding-bottom: 5vw;
             border: none;
-            .sec09-7{
+            .sec09-7 {
                 width: 200px;
             }
             .adv4 {
@@ -787,13 +827,13 @@ $navbgcolor: #eb144c;
             }
             img {
                 object-fit: cover;
-              
+
                 @media screen and(max-width:$moblie) {
                     padding: 0px;
                 }
             }
         }
-    
+
         .sec09-1 {
             padding: 50px;
             @media screen and(max-width:$moblie) {