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