dev 1/7

css/style.css

@@ -195,13 +195,9 @@ a {
   }
 }
 
-a:hover {
-  text-decoration: underline;
-}
-
 @media all {
   a:hover {
-    color: #cbd3da;
+    color: #9ab6cf;
   }
 }
 
@@ -2296,6 +2292,12 @@ input[type="radio"][class="style"]:checked + label {
   }
 }
 
+@media (max-width: 576px) {
+  .hero__h2 {
+    font-size: 2rem;
+  }
+}
+
 .hero__p {
   color: black;
   margin: 0 12rem;
@@ -2360,4 +2362,17 @@ input[type="radio"][class="style"]:checked + label {
     max-height: 85vh;
   }
 }
+
+.cards .card__imgfr {
+  position: relative;
+  cursor: pointer;
+}
+
+.cards .card__play {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  -webkit-transform: translate(-50%, -50%);
+          transform: translate(-50%, -50%);
+}
 /*# sourceMappingURL=style.css.map */

css/style.scss

@@ -194,14 +194,11 @@ a {
 	}
 }
 
-a:hover {
-	text-decoration: underline;
-}
 
 
 @media all {
 	a:hover {
-		color: #cbd3da;
+		color: #9ab6cf;
 	}
 }
 
@@ -2046,6 +2043,9 @@ input[type="radio"][class="style"]:checked + label {
 		@media (max-width: 992px) {
 			margin: 0 6rem; 
 		}
+		@media (max-width: 576px) {
+			font-size: 2rem;
+		}
 	}
 	&__p {
 		color: black;
@@ -2105,6 +2105,16 @@ input[type="radio"][class="style"]:checked + label {
 			height: 80vh;
   		max-height: 85vh;
 		}
+		&__imgfr {
+			position: relative;
+			cursor: pointer;
+		}
+		&__play {
+			position: absolute;
+			left: 50%;
+			top: 50%;
+			transform: translate(-50%, -50%);
+		}
 	}
 }
  

index.html

@@ -231,13 +231,11 @@ a {
   }
 }
 
-a:hover {
-  text-decoration: underline;
-}
+
 
 @media all {
   a:hover {
-    color: #cbd3da;
+    color: #9ab6cf;
   }
 }
 
@@ -2371,6 +2369,12 @@ input[type="radio"][class="style"]:checked + label {
   }
 }
 
+@media (max-width: 576px) {
+  .hero__h2 {
+    font-size: 2rem;
+  }
+}
+
 @media (max-width: 992px) {
   .hero__p {
     margin: 0rem;
@@ -2397,6 +2401,18 @@ input[type="radio"][class="style"]:checked + label {
   }
 }
 
+.cards .card__imgfr {
+  position: relative;
+  cursor: pointer;
+}
+
+.cards .card__play {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+}
+
 
     </style>
     <script async src="https://cdn.ampproject.org/v0.js"></script>
@@ -2424,7 +2440,7 @@ input[type="radio"][class="style"]:checked + label {
       <nav class="d-flex align-items-center">
         <span>
           <a href="/" >
-            <img src="./Choozmo cloud logo.png" alt="" width="160">
+            <img src="./imgs/Choozmo cloud logo.png" alt="" width="160">
           </a>
         </span>
         <!-- <ul class="ms-auto">
@@ -2443,7 +2459,7 @@ input[type="radio"][class="style"]:checked + label {
       <section class="hero pb-5" style="background-color: #f1f5f9;padding-bottom: 3rem;">
         <div class="container">
           <div class="hero__imgfr" >
-            <amp-img src="./hero-img.jpg"
+            <amp-img src="./imgs/hero-img.jpg"
               width="266"
               height="150"
               layout="responsive"
@@ -2465,11 +2481,11 @@ input[type="radio"][class="style"]:checked + label {
             <div class="col-11" style="margin: 0 auto;">
               <div class="row">
                 <div class="col-1 d-none d-md-block"></div>
-                <div class="col-6 col-md-2 logos__img" style="background-image: url(./tzuchi.png);"></div>
-                <div class="col-6 col-md-2 logos__img" style="background-image: url(./guide_dog.png);"></div>
-                <div class="col-6 col-md-2 logos__img" style="background-image: url(./women_rescue.png);"></div>
-                <div class="col-6 col-md-2 logos__img" style="background-image: url(./zhishan.png);"></div>
-                <div class="col-6 col-md-2 logos__img" style="background-image: url(./garden_hope.gif);"></div>
+                <div class="col-6 col-md-2 logos__img" style="background-image: url(./imgs/tzuchi.png);"></div>
+                <div class="col-6 col-md-2 logos__img" style="background-image: url(./imgs/guide_dog.png);"></div>
+                <div class="col-6 col-md-2 logos__img" style="background-image: url(./imgs/women_rescue.png);"></div>
+                <div class="col-6 col-md-2 logos__img" style="background-image: url(./imgs/zhishan.png);"></div>
+                <div class="col-6 col-md-2 logos__img" style="background-image: url(./imgs/garden_hope.gif);"></div>
                 <div class="col-1 d-none d-md-block"></div>
               </div>
             </div>
@@ -2482,13 +2498,22 @@ input[type="radio"][class="style"]:checked + label {
           <div class="row">
             <div class="col-12 col-md-6 col-lg-4">
               <div class="card text-dark mb-4" style="border: none;">
-                <amp-img src="./hero-img.jpg"
-                  width="266"
-                  height="150"
-                  layout="responsive"
-                  alt="mountains"
-                  class="card-img-top">
-                </amp-img>
+                <div class="card__imgfr" onclick="window.open('https://www.youtube.com/channel/UC2Qda9PhJWuiMTCZ-j7K_hg')">
+                  <amp-img src="./imgs/hero-img.jpg"
+                    width="266"
+                    height="150"
+                    layout="responsive"
+                    alt="mountains"
+                    class="card-img-top">
+                  </amp-img>
+                  <amp-img src="./imgs/play.png"
+                    width="50"
+                    height="50"
+                    alt="mountains"
+                    class="card__play"
+                  >
+                  </amp-img>
+                </div>
                 <div class="card-body">
                   <h5 class="card-title">慈濟基金會</h5>
                   <p class="card-text">慈濟慈善工作從弱勢家庭濟助到心靈關懷，包含長期扶困、急難救助、居家關懷及海外慈善；近年來也著
@@ -2504,13 +2529,22 @@ input[type="radio"][class="style"]:checked + label {
             </div>
             <div class="col-12 col-md-6 col-lg-4">
               <div class="card text-dark mb-4" style="border: none;">
-                <amp-img src="./hero-img.jpg"
-                  width="266"
-                  height="150"
-                  layout="responsive"
-                  alt="mountains"
-                  class="card-img-top">
-                </amp-img>
+                <div class="card__imgfr" onclick="window.open('https://www.youtube.com/channel/UC2Qda9PhJWuiMTCZ-j7K_hg')">
+                  <amp-img src="./imgs/hero-img.jpg"
+                    width="266"
+                    height="150"
+                    layout="responsive"
+                    alt="mountains"
+                    class="card-img-top">
+                  </amp-img>
+                  <amp-img src="./imgs/play.png"
+                    width="50"
+                    height="50"
+                    alt="mountains"
+                    class="card__play"
+                  >
+                  </amp-img>
+                </div>
                 <div class="card-body">
                   <h5 class="card-title">台灣導盲犬協會</h5>
                   <p class="card-text">協會主要目標是建立並推動導盲犬制度，讓台灣的視障者除了使用白手杖外，也有使用導盲犬的權利。
@@ -2527,13 +2561,22 @@ input[type="radio"][class="style"]:checked + label {
             </div>
             <div class="col-12 col-md-6 col-lg-4">
               <div class="card text-dark mb-4" style="border: none;">
-                <amp-img src="./hero-img.jpg"
-                  width="266"
-                  height="150"
-                  layout="responsive"
-                  alt="mountains"
-                  class="card-img-top">
-                </amp-img>
+                <div class="card__imgfr" onclick="window.open('https://www.youtube.com/channel/UC2Qda9PhJWuiMTCZ-j7K_hg')">
+                  <amp-img src="./imgs/hero-img.jpg"
+                    width="266"
+                    height="150"
+                    layout="responsive"
+                    alt="mountains"
+                    class="card-img-top">
+                  </amp-img>
+                  <amp-img src="./imgs/play.png"
+                    width="50"
+                    height="50"
+                    alt="mountains"
+                    class="card__play"
+                  >
+                  </amp-img>
+                </div>
                 <div class="card-body">
                   <h5 class="card-title">婦女救援協會</h5>
                   <p class="card-text">婦女救援基金會基於尊重生命價值及追求社會正義，致力於關心受到性別暴力壓迫及被忽略的弱勢婦幼，
@@ -2549,13 +2592,22 @@ input[type="radio"][class="style"]:checked + label {
             </div>
             <div class="col-12 col-md-6 col-lg-4">
               <div class="card text-dark mb-4" style="border: none;">
-                <amp-img src="./hero-img.jpg"
-                  width="266"
-                  height="150"
-                  layout="responsive"
-                  alt="mountains"
-                  class="card-img-top">
-                </amp-img>
+                <div class="card__imgfr" onclick="window.open('https://www.youtube.com/channel/UC2Qda9PhJWuiMTCZ-j7K_hg')">
+                  <amp-img src="./imgs/hero-img.jpg"
+                    width="266"
+                    height="150"
+                    layout="responsive"
+                    alt="mountains"
+                    class="card-img-top">
+                  </amp-img>
+                  <amp-img src="./imgs/play.png"
+                    width="50"
+                    height="50"
+                    alt="mountains"
+                    class="card__play"
+                  >
+                  </amp-img>
+                </div>
                 <div class="card-body">
                   <h5 class="card-title">至善社會福利基金會</h5>
                   <p class="card-text">至善是立足台灣的亞洲兒少發展最佳夥伴，服務地區包括台灣、越南、雲南，以及緬甸等亞洲四地，每一年約幫助
@@ -2572,13 +2624,22 @@ input[type="radio"][class="style"]:checked + label {
             </div>
             <div class="col-12 col-md-6 col-lg-4">
               <div class="card text-dark mb-4" style="border: none;">
-                <amp-img src="./hero-img.jpg"
-                  width="266"
-                  height="150"
-                  layout="responsive"
-                  alt="mountains"
-                  class="card-img-top">
-                </amp-img>
+                <div class="card__imgfr" onclick="window.open('https://www.youtube.com/channel/UC2Qda9PhJWuiMTCZ-j7K_hg')">
+                  <amp-img src="./imgs/hero-img.jpg"
+                    width="266"
+                    height="150"
+                    layout="responsive"
+                    alt="mountains"
+                    class="card-img-top">
+                  </amp-img>
+                  <amp-img src="./imgs/play.png"
+                    width="50"
+                    height="50"
+                    alt="mountains"
+                    class="card__play"
+                  >
+                  </amp-img>
+                </div>
                 <div class="card-body">
                   <h5 class="card-title">勵馨基金會</h5>
                   <p class="card-text">勵馨本著基督精神，以追求公義與愛的決心和勇氣，預防及消弭性侵害、性剥削及家庭暴力對婦女與兒少的傷害