-
Notifications
You must be signed in to change notification settings - Fork 1
/
index-.html
255 lines (241 loc) · 15.9 KB
/
index-.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
<!DOCTYPE html>
<html lang="zh-TW">
<head>
<meta charset="utf-8">
<title>司改友好藝——民間司法改革基金會</title>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
<!-- Link Swiper's CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="swiper-bundle.min.css">
<link rel="stylesheet" type="text/css" href="style.css">
<link href="img/favicon.png" rel="shortcut icon" />
<meta property="og:title" content="司改友好藝——民間司法改革基金會" />
<meta property="og:type" content="website" />
<meta property="og:image" content="https://donate.jrf.org.tw/img/fb.jpg" />
<meta property="og:site_name" content="司改友好藝——民間司法改革基金會" />
<meta property="og:url" content="https://donate.jrf.org.tw/" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:image" content="img/fb.jpg" />
<!-- Demo styles -->
<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-K67RK6Z');</script>
<!-- End Google Tag Manager -->
</head>
<body>
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-K67RK6Z"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->
<!-- menu -->
<div class="navbar-wrapper" style="margin-bottom: 50px">
<div class="container">
<nav class="navbar navbar-toggleable-md navbar-inverse fixed-top bg-inverse">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#"><img src="img/logo.png" height="25px"></a>
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="#plan">捐款方案</a>
</li>
</ul>
</div>
</nav>
</div>
</div>
<!-- 畫家 -->
<div class="container gradient-t">
<div class="row justify-content-md-center">
<div class="col-lg-10">
<div class="swiper-container">
<div class="swiper-wrapper">
<!-- 畫家
<div class="swiper-slide"><a href="1.html"><img src="img/t1.svg" width="90%"></a><p class="text-center f-bold">#林大洋</p></div>
<div class="swiper-slide"><a href="4.html"><img src="img/t4.svg" width="90%"></a><p class="text-center f-bold">#楊年發</p></div>
<div class="swiper-slide"><a href="5.html"><img src="img/t5.svg" width="90%"></a><p class="text-center f-bold">#邱錫勳</p></div>
<div class="swiper-slide"><a href="6.html"><img src="img/t6.png" width="90%"></a><p class="text-center f-bold">#林桂英</p></div>
-->
<div class="swiper-slide"><a href="7.html"><img src="img/t7.png" width="90%"></a><p class="text-center f-bold">#余明宗</p></div>
<div class="swiper-slide"><a href="3.html"><img src="img/t3.svg" width="90%"></a><p class="text-center f-bold">#陳姝香</p></div>
<div class="swiper-slide"><a href="8.html"><img src="img/t8.svg" width="90%"></a><p class="text-center f-bold">#劉洋哲</p></div>
<div class="swiper-slide"><a href="2.html"><img src="img/t2.svg" width="90%"></a><p class="text-center f-bold">#董華正</p></div>
</div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
</div></div>
</div>
</div>
<!-- 引言 -->
<div id="info" class="container">
<div class="row justify-content-md-center">
<div class="col-lg-6 mt60 col-md-10">
<blockquote>
<p class="lead">
我只懂藝術，不懂法律，但是我支持司法改革，<br>所以用自己的專長來共襄盛舉！
</p>
</blockquote>
</div></div>
<div class="row justify-content-md-center">
<div class="col-lg-8">
<h1 class="text-center mt60 pb30"><img class="col-lg-6 col-md-6 col-sm-8" src="img/title.png" width="100%"></h1>
<p>每一幅藝術品都蘊含著畫家們對於這個社會的關懷，更蘊含著支持司法改革的心意傳達在捐贈的畫作中。</p>
<p>此次的藝術品都是獨一無二，沒有複製畫。這些畫作不單純只是人像、場景的紀錄，更是藝術家，對於藝術的真誠態度，看見每一幅畫背後，那份對於理想的追求；看見對於社會的關注與想法；看見對於自然的情感表達；看見精神表達的心靈軌跡。</p>
<p>因為有各位的支持與捐助，讓司改會有著來自各式各樣的能量，使我們更加的溫暖並繼續前行，因此希望透過回饋禮，與您分享每一份來自台灣社會，對司法改革充滿支持的心意；與您分享使我們穩健踏下每一步的力量。</p>
<p>在司法改革的路上，我們非常需要您的支持，懇請慷慨捐助司改會！或許，我們無法確保一切改革盡如人意，但是我們能拍胸脯保證，每一分您的捐輸，都是花在刀口上，並發揮它的最大效用！</p>
</div>
</div>
</div>
<!-- 畫家
<div class="col-lg-2 col-3">
<a data-toggle="popover" data-html="true" data-trigger="hover" data-container="body" data-placement="top" data-content="<h4></h4>從思想到生命律動，超越文化界線，盡藝術與生活於畫布" data-original-title="林大洋" title="林大洋" type="button" href="1.html"><img src="img/t1.svg" width="100%"></a>
</div>
<div class="col-3 col-lg-2">
<a data-toggle="popover" data-html="true" data-trigger="hover" data-container="body" data-placement="top" data-content="<h4></h4>以浮世眾生，詮釋人生的哲思" data-original-title="邱錫勛" title="邱錫勛" type="button" href="5.html"><img src="img/t5.svg" width="100%"></a>
</div>
<div class="col-3 col-lg-2">
<a data-toggle="popover" data-html="true" data-trigger="hover" data-container="body" data-placement="top" data-content="<h4></h4>連結記憶時間軸裡的故事，拾起舊時代的溫度" data-original-title="楊年發" title="楊年發" type="button" href="4.html"><img src="img/t4.svg" width="100%"></a>
</div>
<div class="col-3 col-lg-2">
<a data-toggle="popover" data-html="true" data-trigger="hover" data-container="body" data-placement="top" data-content="<h4></h4>走訪未曾抵達的景色，看見眼下瞬間的珍藏" data-original-title="林桂英" title="林桂英" type="button" href="6.html"><img src="img/t6.png" width="100%"></a>
</div>
-->
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-2 col-3">
<a data-toggle="popover" data-html="true" data-trigger="hover" data-container="body" data-placement="top" data-content="<h4></h4>歲月裡有那些畫的陪伴，日子就不算虛度" data-original-title="劉洋哲" title="劉洋哲" type="button" href="8.html"><img src="img/t8.svg" width="100%"></a>
</div>
<div class="col-lg-2 col-3">
<a data-toggle="popover" data-html="true" data-trigger="hover" data-container="body" data-placement="top" data-content="<h4></h4>把世界畫進來，讓每個人都可以看見風景的美麗" data-original-title="陳姝香" title="陳姝香" type="button" href="3.html"><img src="img/t3.svg" width="100%"></a>
</div>
<div class="col-3 col-lg-2">
<a data-toggle="popover" data-html="true" data-trigger="hover" data-container="body" data-placement="top" data-content="<h4></h4>圖畫都成了象徵自己追逐景跑的愛戀與深情，不知所起，卻一往而深" data-original-title="余明宗" title="余明宗" type="button" href="7.html"><img src="img/t7.png" width="100%"></a>
</div>
<div class="col-lg-2 col-3">
<a data-toggle="popover" data-html="true" data-trigger="hover" data-container="body" data-placement="top" data-content="<h4></h4>經歷不公義程序，秉持助人之心，為這社會出一份心力" data-original-title="董華正" title="董華正" type="button" href="2.html"><img src="img/t2.svg" width="100%"></a>
</div>
</div>
</div>
<!-- 捐款方案 -->
<div id="plan" class="container">
<div class="row justify-content-md-center">
<div class="col-lg-8">
<h2 class="text-center mt60"><span class="small">2023</span><br>捐款方案</h2>
<div class="alert alert-warning" role="alert">
<ul>
<li><p>捐款 <span class="f-bold">10,000</span>、<span class="f-bold">20,000</span>元 或 <span class="f-bold">30,000</span>元，即可挑選該分類中您喜愛的藝術品。</p></li>
<li><p>捐款包含：義賣畫作 ＋ 裱框 ＋ 運送</p>
<ul>
<li>捐款完成後，會有專人主動與您聯繫裱框</li>
<li>捐款後需等候10個工作天，畫作裱框後會盡快為您送出</li>
<li>實品與螢幕可能略有色差，顏色以實物為準<br> </li>
</ul>
</li>
<li><p>所有畫作皆為藝術家<span class="f-bold2">原創著作、獨一無二</span>，沒有任何複製畫，每項作品皆有簽名</p></li>
<li><p>若點擊「立即捐款」按鈕後，頁面顯示「此藝術品目前已贈出。」表示該畫作已被其他支持者選擇，還請您選擇其他作品。</p></li>
</ul>
</div>
</div>
</div>
</div>
<!-- 流程 -->
<div class="container">
<div class="row justify-content-md-center">
<div class="col-lg-8">
<h2 class="text-center mt60">流程</h2>
<div class="alert alert-warning" role="alert">
<p><span class="nobreak"><span class="f-bold2">①</span>點選藝術家 ➤ </span><br class="d-block d-sm-none"><span class="nobreak"><span class="f-bold2">②</span>決定捐款金額 ➤ </span><br class="d-block d-sm-none"><span class="nobreak"><span class="f-bold2">③</span>挑選喜歡的作品 ➤ </span><br class="d-block d-sm-none"><span class="nobreak"><span class="f-bold2">④</span>確認尺寸、材質 ➤ </span><br class="d-block d-sm-none"><span class="nobreak"><span class="f-bold2">⑤</span>「立刻捐款」 填寫資料 ➤ </span><br class="d-block d-sm-none"><span class="nobreak"><span class="f-bold2">⑥</span>捐款完成 ➤ </span><br class="d-block d-sm-none"><span class="nobreak"><span class="f-bold2">⑦</span>專人與您聯繫 ➤ </span><br class="d-block d-sm-none"><span class="nobreak"><span class="f-bold2">⑧</span>裱框製作 ➤ </span><br class="d-block d-sm-none"><span class="nobreak"><span class="f-bold2">⑨</span>畫作運送 ➤ </span><br class="d-block d-sm-none"><span class="nobreak"><span class="f-bold2">⑩</span>收到義賣品！</span></p>
</div>
</div>
</div>
</div>
<!-- 注意事項 -->
<div class="container">
<div class="row justify-content-md-center">
<div class="col-lg-8">
<h2 class="text-center mt60">注意事項</h2>
<div class="alert alert-warning" role="alert">
<ul>
<li><p>捐款完成時，系統將自動寄發<span class="f-bold2">確認通知信件</span>至您填寫的E-MAIL信箱中</p></li>
<li><p>若您欲挑選<span class="f-bold2">2幅以上畫作</span>，歡迎直接電洽司改會！<span class="f-bold2">02-25231178#26 陳小姐</span></p></li>
</ul>
</div>
</div>
</div>
</div>
<!-- 底 -->
<div class="container gradient-b">
<div class="row justify-content-md-center">
<div class="col-lg-8">
<h1 id="plan" class="text-center mt60 mb30"> </h1>
</div>
</div>
</div>
<footer>
<div class="row small">
<div class="col-md-4 mb30">
<p><a href="https://www.jrf.org.tw/"><img src="img/jrflogo.png"></a></p>
<p>民間司法改革基金會成立於1995年11月。主要工作為法案推動、監督評鑑、個案追蹤與教育推廣。改革的力量必須由下而上，只有經由民間的推力，才能讓改革的夢想成為真實，最終建立人民信賴的司法。</p></div>
<div class="col-md-4">
<h5 class="text-center"><strong>台北辦公室</strong></h5>
<ul>
<li>電話: 02-2523-1178</li>
<li>傳真: 02-2531-9373</li>
<li>E-mail: [email protected]</li>
<li>地址: 10456台北市中山區松江路90巷3號7樓</li>
</ul>
</div>
<div class="col-md-4">
<h5 class="text-center"><strong>台中辦公室</strong></h5>
<ul>
<li>電話: 04-2329-2372</li>
<li>傳真: 04-2329-2370</li>
<li>地址: 40758台中市西屯區臺灣大道2段845號</li>
</ul>
</div>
</div>
</footer>
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<!-- Swiper JS -->
<script src="swiper-bundle.min.js"></script>
<!-- Initialize Swiper -->
<script>
var swiper = new Swiper('.swiper-container', {
effect: 'coverflow',
loop: true,
grabCursor: true,
centeredSlides: true,
slidesPerView: 'auto',
coverflowEffect: {
rotate: 50,
stretch: 0,
depth: 100,
modifier: 1,
slideShadows : true,
},
pagination: {
el: '.swiper-pagination',
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
mousewheel: true,
keyboard: true,
});
</script>
<script>
$(function () {
$("[data-toggle='popover']").popover();
});
</script>
</body>
</html>