-
Notifications
You must be signed in to change notification settings - Fork 1
/
2.html
285 lines (278 loc) · 15.2 KB
/
2.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
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
<!DOCTYPE html>
<html lang="zh-TW">
<head>
<meta charset="utf-8">
<title>董華正——民間司法改革基金會</title>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Link Swiper's CSS -->
<link href="img/favicon.png" rel="shortcut icon" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="style.css">
<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 style="margin-bottom: 50px">
<div class="container">
<nav class="navbar navbar-expand-lg navbar-dark fixed-top bg-dark">
<a class="navbar-brand" href="index.html"><img src="img/logo.png" height="25px"></a>
</nav>
</div>
</div>
<!-- 畫家 -->
<div class="container-fliud gradient-t">
<div class="row justify-content-md-center">
<div class="col-lg-8"><p class="text-center"><img src="img/t2.svg" width="60%"></p>
</div></div>
</div>
<!-- 作家介紹 -->
<div id="info" class="container">
<div class="row justify-content-md-center">
<div class="col-lg-8">
<blockquote>
<p class="lead pb30">
經歷不公義程序，秉持助人之心，為這社會出一份心力
</p>
</blockquote>
<h1 class="text-center pb30"># 董華正</h1>
<p>師大美術研究所畢業、好藝術畫廊負責人、野鴨畫塘創辦人。董華正老師擅長油畫、粉彩、水彩創作，創作主題以寫生為主，包括風景寫生與人物寫生。作品寫實中帶有留白的東方色彩、展現東方內斂的藝術修養。2016年之後，畫風逐漸轉為抽象，以大膽的色塊及線條取代細緻的描繪，讓觀眾在寫實的作品中融入更多的想像空間。</p>
<p>自稱是藝術的水電工，董華正老師曾說：「畫畫，可以是很自我的，可以是享受，可以是挑戰，可以是創新，可以期待自己的心情，也可以期待感動別人。」畫畫對他而言不像是志業，反而像是生活，他可以在沾滿不同色彩的畫布中得到快樂，也希望跟別人分享他所擁有的喜悅。他一直喜歡一句話：「把每次的嘗試都當作大學剛畢業，努力二十年，必然有成就，哪怕我已經一百歲了。」一如現在的他仍然在藝術這條路上學習、成長、收穫，隨時充電，沒有間斷。</p>
</div>
</div>
</div>
<!-- 回饋方案 -->
<div id="plan" class="container">
<h2 class="mt60 pb30 text-center">作品</h2>
<h4><span class="label">#C</span> 捐款$20,000</h4>
<div class="row row-cols-2 row-cols-sm-4">
<!-- 2C01 -->
<div class="col-sm pb30">
<a data-toggle="modal" data-target="#2C01">
<img class="img-box" src="img/s/2C01.jpg" width="100%"></a>
<!-- -->
<div class="modal fade" id="2C01" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel"><span class="label">2C01</span> </h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body small">
<ul>
<li>材質：粉彩</li>
<li>尺寸：54 X 39 cm</li>
</ul>
<img class="img-box" src="img/s/2C01.jpg" width="100%">
</div><a class="btn btn-warning" href="https://jrf.neticrm.tw/civicrm/event/register?id=566&reset=1">立刻捐款</a>
</div>
</div>
</div>
<!-- 2C34 end-->
</div>
<!-- 2C01 -->
<!-- 2C02 -->
<div class="col-sm pb30">
<a data-toggle="modal" data-target="#2C02">
<img class="img-box" src="img/s/2C02.jpg" width="100%"></a>
<div class="modal fade" id="2C02" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel"><span class="label">2C02</span> </h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body small">
<ul>
<li>材質：粉彩</li>
<li>尺寸：54 X 39 cm</li>
</ul>
<img class="img-box" src="img/s/2C02.jpg" width="100%">
</div><a class="btn btn-warning" href="https://jrf.neticrm.tw/civicrm/event/register?id=567&reset=1">立刻捐款</a>
</div>
</div>
</div>
</div>
<!-- 2C02 -->
<!-- 2C03 -->
<div class="col-sm pb30">
<a data-toggle="modal" data-target="#2C03">
<img class="img-box" src="img/s/2C03.jpg" width="100%"></a>
<div class="modal fade" id="2C03" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel"><span class="label">2C03</span> </h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body small">
<ul>
<li>材質：粉彩</li>
<li>尺寸：54 X 39 cm</li>
</ul>
<img class="img-box" src="img/s/2C03.jpg" width="100%">
</div><a class="btn btn-warning" href="https://jrf.neticrm.tw/civicrm/event/register?id=568&reset=1">立刻捐款</a>
</div>
</div>
</div>
</div>
<!-- 2C03 -->
<!-- 2C05 -->
<div class="col-sm pb30">
<a data-toggle="modal" data-target="#2C05">
<img class="img-box" src="img/s/2C05.jpg" width="100%"></a>
<div class="modal fade" id="2C05" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel"><span class="label">2C05</span> </h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body small">
<ul>
<li>材質：粉彩</li>
<li>尺寸：54 X 39 cm</li>
</ul>
<img class="img-box" src="img/s/2C05.jpg" width="100%">
</div><a class="btn btn-warning" href="https://jrf.neticrm.tw/civicrm/event/register?id=570&reset=1">立刻捐款</a>
</div>
</div>
</div>
</div>
<!-- 2C05 -->
<!-- 2C06 -->
<div class="col-sm pb30">
<a data-toggle="modal" data-target="#2C06">
<img class="img-box" src="img/s/2C06.jpg" width="100%"></a>
<div class="modal fade" id="2C06" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel"><span class="label">2C06</span> </h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body small">
<ul>
<li>材質：粉彩</li>
<li>尺寸：54 X 39 cm</li>
</ul>
<img class="img-box" src="img/s/2C06.jpg" width="100%">
</div><a class="btn btn-warning" href="https://jrf.neticrm.tw/civicrm/event/register?id=571&reset=1">立刻捐款</a>
</div>
</div>
</div>
</div>
<!-- 2C06 -->
<!-- 2C07 -->
<div class="col-sm pb30">
<a data-toggle="modal" data-target="#2C07">
<img class="img-box" src="img/s/2C07.jpg" width="100%"></a>
<div class="modal fade" id="2C07" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel"><span class="label">2C07</span> </h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body small">
<ul>
<li>材質：粉彩</li>
<li>尺寸：54 X 39 cm</li>
</ul>
<img class="img-box" src="img/s/2C07.jpg" width="100%">
</div><a class="btn btn-warning" href="https://jrf.neticrm.tw/civicrm/event/register?id=572&reset=1">立刻捐款</a>
</div>
</div>
</div>
</div>
<!-- 2C07 -->
</div>
</div>
<!-- 底 -->
<div class="container-fliud gradient-b">
<div class="row justify-content-md-center">
<div class="col-lg-8">
<h1 id="plan" class="text-center mt60 pb30"> </h1>
</div>
</div>
</div>
<footer>
<div class="row small">
<div class="col-md-4 pb30"><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: contact@jrf.org.tw</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>
<script src="https://use.fontawesome.com/dff2ad1bd1.js"></script>
<!-- Swiper JS -->
<script src="https://unpkg.com/swiper/js/swiper.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',
},
});
</script>
</body>
</html>