edit page

src/app/home/home.page.html

@@ -1,4 +1,4 @@
-<ion-header >
+<ion-header>
   <ion-toolbar class="toolbar-bg-color">
     <ion-buttons slot="end">
       <ion-menu-button></ion-menu-button>
@@ -19,68 +19,72 @@
     <p>Start with Ionic <a target="_blank" rel="noopener noreferrer"
         href="https://ionicframework.com/docs/components">UI Components</a></p>
   </div> -->
-  <ion-grid>
+  <ion-grid class="ion-padding-vertical">
     <ion-row>
       <ion-col>
         <h2>ข่าวกีฬา</h2>
+        <hr>
       </ion-col>
     </ion-row>
     <ion-row>
       <ion-col size="5">
         <img src="../../assets/img-static/SEI129887404-c4a9.jpg">
       </ion-col>
-      <ion-col>“น้องเทนนิส” หวังคว้าแชมป์ในศึกชิงแชมป์โลก ต้นเดือนหน้า</ion-col>
+      <ion-col class="ion-align-self-center">“น้องเทนนิส” หวังคว้าแชมป์ในศึกชิงแชมป์โลก ต้นเดือนหน้า</ion-col>
     </ion-row>
     <ion-row>
       <ion-col size="5">
         <img src="../../assets/img-static/SEI129887404-c4a9.jpg">
       </ion-col>
-      <ion-col>โรนัลโด กลับมาซ้อมกับทีม พร้อมปรับความเข้าใจกับ เทน ฮาก</ion-col>
+      <ion-col class="ion-align-self-center">โรนัลโด กลับมาซ้อมกับทีม พร้อมปรับความเข้าใจกับ เทน ฮาก</ion-col>
     </ion-row>
     <ion-row>
       <ion-col size="5">
         <img src="../../assets/img-static/SEI129887404-c4a9.jpg">
       </ion-col>
-      <ion-col>เตรียมหารือบอร์ดหาข้อสรุป รัฐ-เอกชน จับมือยิงสดฟุตบอลโลก</ion-col>
+      <ion-col class="ion-align-self-center">เตรียมหารือบอร์ดหาข้อสรุป รัฐ-เอกชน จับมือยิงสดฟุตบอลโลก</ion-col>
     </ion-row>
     <ion-row>
       <ion-col size="5">
         <img src="../../assets/img-static/SEI129887404-c4a9.jpg">
       </ion-col>
-      <ion-col>บีจี แยกทางกับ “มาโกโตะ เทกุระโมริ” หลังผลงานไม่เป็นตามเป้า</ion-col>
-    </ion-row>
-    <ion-row>
-      <ion-col>
-        <img src="../../../assets/img-static/banner-320x50.jpeg" alt="">
-      </ion-col>
+      <ion-col class="ion-align-self-center">บีจี แยกทางกับ “มาโกโตะ เทกุระโมริ” หลังผลงานไม่เป็นตามเป้า</ion-col>
     </ion-row>
+  </ion-grid>
+
+  <ion-grid>
+    <img src="../../../assets/img-static/banner-320x50.jpeg" alt="">
+  </ion-grid>
+
+  <ion-grid class="ion-padding-vertical">
     <ion-row>
       <ion-col>
         <h2>รายการย้อนหลัง</h2>
+        <hr>
       </ion-col>
     </ion-row>
     <ion-row>
       <ion-col size="5">
         <img src="../../assets/img-static/mqdefault-1.jpg">
       </ion-col>
-      <ion-col>Morning Talk [26-10-2022 l 07:30 - 09:00 น. ]</ion-col>
+      <ion-col class="ion-align-self-center">Morning Talk [26-10-2022 l 07:30 - 09:00 น. ]</ion-col>
     </ion-row>
     <ion-row>
       <ion-col size="5">
         <img src="../../assets/img-static/mqdefault-2.jpg">
       </ion-col>
-      <ion-col>Golf Trick [26-10-2022 l 09:00 - 10:00 น.]</ion-col>
+      <ion-col class="ion-align-self-center">Golf Trick [26-10-2022 l 09:00 - 10:00 น.]</ion-col>
     </ion-row>
     <ion-row>
-      <ion-col size="5">
+      <ion-col size="5" >
         <img src="../../assets/img-static/mqdefault-3.jpg">
       </ion-col>
-      <ion-col>เจาะสนามบอลไทย [ 20-10-2022 l 20:00 - 21:30 น. ]</ion-col>
-    </ion-row>
-    <ion-row>
-      <ion-col>
-        <img src="../../../assets/img-static/banner-320x100.jpeg" alt="">
-      </ion-col>
+      <ion-col class="ion-align-self-center">เจาะสนามบอลไทย [ 20-10-2022 l 20:00 - 21:30 น. ]</ion-col>
     </ion-row>
   </ion-grid>
+
+  <ion-grid>
+    <img src="../../../assets/img-static/banner-320x100.jpeg" alt="">
+  </ion-grid>
+
 </ion-content>

src/app/home/home.page.scss

@@ -1,23 +1,6 @@
-
 // ion-title { text-align: center !important; }
 
-#container strong {
-  font-size: 20px;
-  line-height: 26px;
-}
-
-#container p {
-  font-size: 16px;
-  line-height: 22px;
 
-  color: #8c8c8c;
-
-  margin: 0;
-}
-
-#container a {
-  text-decoration: none;
-}
 
 // .swiper .swiper-slide {
 //   height: 100%;
@@ -29,11 +12,15 @@
   // flex-direction: column;
   // align-items: center;
   // justify-content: center;
-  background-color: blueviolet;
+  background-color: rgb(0, 0, 0);
+}
+
+ion-content {
+  font-family: Prompt Reg !important;
+  font-size: 1em;
+  line-height: 1.3em;
 }
 
-ion-content{ 
-  font-family:IBM Plex Sans Thai SemiBold !important;
-  font-size:1em;
-  line-height: 1.4em;
+ion-row {
+  background-color: #fcfcfc !important;
 }

src/app/news/news.page.html

@@ -13,60 +13,59 @@
     <ion-row>
       <ion-col>
         <h2>ข่าวกีฬา</h2>
+        <hr>
       </ion-col>
     </ion-row>
     <ion-row>
       <ion-col size="5">
         <img src="../../assets/img-static/SEI129887404-c4a9.jpg">
       </ion-col>
-      <ion-col>“น้องเทนนิส” หวังคว้าแชมป์ในศึกชิงแชมป์โลก ต้นเดือนหน้า</ion-col>
+      <ion-col class="ion-align-self-center">“น้องเทนนิส” หวังคว้าแชมป์ในศึกชิงแชมป์โลก ต้นเดือนหน้า</ion-col>
     </ion-row>
     <ion-row>
       <ion-col size="5">
         <img src="../../assets/img-static/SEI129887404-c4a9.jpg">
       </ion-col>
-      <ion-col>โรนัลโด กลับมาซ้อมกับทีม พร้อมปรับความเข้าใจกับ เทน ฮาก</ion-col>
+      <ion-col class="ion-align-self-center">โรนัลโด กลับมาซ้อมกับทีม พร้อมปรับความเข้าใจกับ เทน ฮาก</ion-col>
     </ion-row>
     <ion-row>
       <ion-col size="5">
         <img src="../../assets/img-static/SEI129887404-c4a9.jpg">
       </ion-col>
-      <ion-col>เตรียมหารือบอร์ดหาข้อสรุป รัฐ-เอกชน จับมือยิงสดฟุตบอลโลก</ion-col>
+      <ion-col class="ion-align-self-center">เตรียมหารือบอร์ดหาข้อสรุป รัฐ-เอกชน จับมือยิงสดฟุตบอลโลก</ion-col>
     </ion-row>
     <ion-row>
       <ion-col size="5">
         <img src="../../assets/img-static/SEI129887404-c4a9.jpg">
       </ion-col>
-      <ion-col>บีจี แยกทางกับ “มาโกโตะ เทกุระโมริ” หลังผลงานไม่เป็นตามเป้า</ion-col>
+      <ion-col class="ion-align-self-center">บีจี แยกทางกับ “มาโกโตะ เทกุระโมริ” หลังผลงานไม่เป็นตามเป้า</ion-col>
     </ion-row>
     <ion-row>
       <ion-col size="5">
         <img src="../../assets/img-static/SEI129887404-c4a9.jpg">
       </ion-col>
-      <ion-col>“น้องเทนนิส” หวังคว้าแชมป์ในศึกชิงแชมป์โลก ต้นเดือนหน้า</ion-col>
+      <ion-col class="ion-align-self-center">“น้องเทนนิส” หวังคว้าแชมป์ในศึกชิงแชมป์โลก ต้นเดือนหน้า</ion-col>
     </ion-row>
     <ion-row>
       <ion-col size="5">
         <img src="../../assets/img-static/SEI129887404-c4a9.jpg">
       </ion-col>
-      <ion-col>โรนัลโด กลับมาซ้อมกับทีม พร้อมปรับความเข้าใจกับ เทน ฮาก</ion-col>
+      <ion-col class="ion-align-self-center">โรนัลโด กลับมาซ้อมกับทีม พร้อมปรับความเข้าใจกับ เทน ฮาก</ion-col>
     </ion-row>
     <ion-row>
       <ion-col size="5">
         <img src="../../assets/img-static/SEI129887404-c4a9.jpg">
       </ion-col>
-      <ion-col>เตรียมหารือบอร์ดหาข้อสรุป รัฐ-เอกชน จับมือยิงสดฟุตบอลโลก</ion-col>
+      <ion-col class="ion-align-self-center">เตรียมหารือบอร์ดหาข้อสรุป รัฐ-เอกชน จับมือยิงสดฟุตบอลโลก</ion-col>
     </ion-row>
     <ion-row>
       <ion-col size="5">
         <img src="../../assets/img-static/SEI129887404-c4a9.jpg">
       </ion-col>
-      <ion-col>บีจี แยกทางกับ “มาโกโตะ เทกุระโมริ” หลังผลงานไม่เป็นตามเป้า</ion-col>
+      <ion-col class="ion-align-self-center">บีจี แยกทางกับ “มาโกโตะ เทกุระโมริ” หลังผลงานไม่เป็นตามเป้า</ion-col>
     </ion-row> 
-    <ion-row>
-      <ion-col>
-        <img src="../../../assets/img-static/banner-320x100.jpeg" alt="">
-      </ion-col>
-    </ion-row>
   </ion-grid>
+  <ion-grid>
+    <img src="../../../assets/img-static/banner-320x100.jpeg" alt="">
+  </ion-grid>  
 </ion-content>

src/app/news/news.page.scss

@@ -0,0 +1,3 @@
+ion-row {
+    background-color: #fcfcfc !important;
+}

src/app/youtube/youtube.page.html

@@ -13,30 +13,53 @@
     <ion-row>
       <ion-col>
         <h2>รายการย้อนหลัง</h2>
+        <hr>
       </ion-col>
     </ion-row>
     <ion-row>
       <ion-col size="5">
         <img src="../../assets/img-static/mqdefault-1.jpg">
       </ion-col>
-      <ion-col>Morning Talk [26-10-2022 l 07:30 - 09:00 น. ]</ion-col>
+      <ion-col class="ion-align-self-center">Morning Talk [26-10-2022 l 07:30 - 09:00 น. ]</ion-col>
     </ion-row>
     <ion-row>
       <ion-col size="5">
         <img src="../../assets/img-static/mqdefault-2.jpg">
       </ion-col>
-      <ion-col>Golf Trick [26-10-2022 l 09:00 - 10:00 น.]</ion-col>
+      <ion-col class="ion-align-self-center">Golf Trick [26-10-2022 l 09:00 - 10:00 น.]</ion-col>
     </ion-row>
     <ion-row>
       <ion-col size="5">
         <img src="../../assets/img-static/mqdefault-3.jpg">
       </ion-col>
-      <ion-col>เจาะสนามบอลไทย [ 20-10-2022 l 20:00 - 21:30 น. ]</ion-col>
+      <ion-col class="ion-align-self-center">เจาะสนามบอลไทย [ 20-10-2022 l 20:00 - 21:30 น. ]</ion-col>
     </ion-row>
     <ion-row>
-      <ion-col>
-        <img src="../../../assets/img-static/banner-320x100.jpeg" alt="">
+      <ion-col size="5">
+        <img src="../../assets/img-static/mqdefault-2.jpg">
+      </ion-col>
+      <ion-col class="ion-align-self-center">Golf Trick [26-10-2022 l 09:00 - 10:00 น.]</ion-col>
+    </ion-row>
+    <ion-row>
+      <ion-col size="5">
+        <img src="../../assets/img-static/mqdefault-3.jpg">
+      </ion-col>
+      <ion-col class="ion-align-self-center">เจาะสนามบอลไทย [ 20-10-2022 l 20:00 - 21:30 น. ]</ion-col>
+    </ion-row>
+    <ion-row>
+      <ion-col size="5">
+        <img src="../../assets/img-static/mqdefault-2.jpg">
+      </ion-col>
+      <ion-col class="ion-align-self-center">Golf Trick [26-10-2022 l 09:00 - 10:00 น.]</ion-col>
+    </ion-row>
+    <ion-row>
+      <ion-col size="5">
+        <img src="../../assets/img-static/mqdefault-3.jpg">
       </ion-col>
+      <ion-col class="ion-align-self-center">เจาะสนามบอลไทย [ 20-10-2022 l 20:00 - 21:30 น. ]</ion-col>
     </ion-row>
   </ion-grid>
+  <ion-grid>
+    <img src="../../../assets/img-static/banner-320x100.jpeg" alt="">
+  </ion-grid>
 </ion-content>

src/app/youtube/youtube.page.scss

@@ -0,0 +1,3 @@
+ion-row {
+    background-color: #fcfcfc !important;
+}

src/global.scss

@@ -33,76 +33,85 @@
 @import "swiper/scss/navigation";
 @import "swiper/scss/pagination";
 @import "swiper/scss/autoplay";
-// @import "swiper/css/bundle";
-// @import "swiper/css/autoplay";
-// @import "~swiper/swiper-bundle";
-// @import "swiper/scss";
-// @import "swiper/scss/autoplay";
-// @import "swiper/scss/keyboard";
-// @import "swiper/scss/pagination";
-// @import "swiper/scss/scrollbar";
-// @import "swiper/scss/zoom";
 
 
 
 @font-face {
-    font-family: "IBM Plex Sans Thai";
-    font-style: normal;
-    font-weight: normal;
-    src: url("./assets/fonts/IBMPlexSansThai-Regular.ttf");
-  }
-
-  @font-face {
-    font-family: "IBM Plex Sans Thai SemiBold";
-    font-style: normal;
-    font-weight: normal;
-    src: url("./assets/fonts/IBMPlexSansThai-SemiBold.ttf");
-  }  
-  @font-face {
-    font-family: "Prompt";
-    font-style: normal;
-    font-weight: normal;
-    src: url("./assets/fonts/Prompt-Medium.ttf");
-  }  
-  @font-face {
-    font-family: "Montserrat";
-    font-style: normal;
-    font-weight: normal;
-    src: url("./assets/fonts/Montserrat-Medium.ttf");
-  }   
-
-  @font-face {
-    font-family: "K2D";
-    font-style: normal;
-    font-weight: normal;
-    src: url("./assets/fonts/K2D-Light.ttf");
-  }  
+  font-family: "IBM Plex Sans Thai";
+  font-style: normal;
+  font-weight: normal;
+  src: url("./assets/fonts/IBMPlexSansThai-Regular.ttf");
+}
+
+@font-face {
+  font-family: "IBM Plex Sans Thai SemiBold";
+  font-style: normal;
+  font-weight: normal;
+  src: url("./assets/fonts/IBMPlexSansThai-SemiBold.ttf");
+}
+
+@font-face {
+  font-family: "Prompt";
+  font-style: normal;
+  font-weight: normal;
+  src: url("./assets/fonts/Prompt-Medium.ttf");
+}
+
+@font-face {
+  font-family: "Prompt Reg";
+  font-style: normal;
+  font-weight: normal;
+  src: url("./assets/fonts/Prompt-Regular.ttf");
+}
+
+@font-face {
+  font-family: "Montserrat";
+  font-style: normal;
+  font-weight: normal;
+  src: url("./assets/fonts/Montserrat-Medium.ttf");
+}
+
+@font-face {
+  font-family: "K2D";
+  font-style: normal;
+  font-weight: normal;
+  src: url("./assets/fonts/K2D-Light.ttf");
+}
+
+
+ion-content {
+  --ion-background-color: #111D12;
+}
 
 
 ion-title {
-    font-family:Montserrat !important;
-    font-size:1.4em;    
+  font-family: Montserrat !important;
+  font-size: 1.4em;
 }
 
 
-h2{
-    font-family:Prompt !important;
-    font-size:1.3em;
-    margin-top: 5px;
-    margin-bottom: 0px;
+h2 {
+  font-family: Prompt !important;
+  font-size: 1.3em;
+  margin-top: 5px;
+  margin-bottom: 0px;
+  color: darkorange;
 
 }
 
-h3{
-    font-family:IBM Plex Sans Thai SemiBold !important;
-    font-size:1.3em;    
+h3 {
+  font-family: IBM Plex Sans Thai SemiBold !important;
+  font-size: 1.3em;
+  margin-top: 5px;
+  margin-bottom: 0px;
+  color: darkorange;
 }
 
 .head-img {
   width: 15%;
   display: flex;
-  margin-left:10px;
-  margin-top:5px;
+  margin-left: 10px;
+  margin-top: 5px;
 }
 
 // ion-toolbar {
@@ -113,8 +122,14 @@ h3{
 // }
 
 .toolbar-bg-color {
-  --background: rgb(25, 42, 113);
-  --background: linear-gradient(315deg, rgb(0, 0, 0) 0%, hsla(190, 68%, 30%, 1) 100%);
-  --background: -moz-linear-gradient(315deg, rgb(0, 0, 0) 0%, hsla(190, 68%, 30%, 1) 100%);
-  --background: -webkit-linear-gradient(315deg, rgb(0, 0, 0) 0%, hsla(190, 68%, 30%, 1) 100%);
+  --background: url('./assets/img-static/background_982645-1-min.png') no-repeat top right / cover;
+  // --background: rgb(25, 42, 113);
+  // --background: linear-gradient(315deg, rgb(0, 0, 0) 0%, hsla(190, 68%, 30%, 1) 100%);
+  // --background: -moz-linear-gradient(315deg, rgb(0, 0, 0) 0%, hsla(190, 68%, 30%, 1) 100%);
+  // --background: -webkit-linear-gradient(315deg, rgb(0, 0, 0) 0%, hsla(190, 68%, 30%, 1) 100%);
 }
+
+hr {
+  border: 0;
+  border-top: 1px solid rgba(0, 0, 0, 0.1);
+}