-
Notifications
You must be signed in to change notification settings - Fork 0
/
project.html
237 lines (236 loc) · 9.89 KB
/
project.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
<!DOCTYPE html>
<html lang="zh-hant">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Stanley's Portfolio | 專案作品</title>
<link href="img/S-logo.ico" rel="shortcut icon" />
<link rel="stylesheet" href="./style/project.css" />
<link rel="stylesheet" href="./style/navbar.css" />
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/bootstrap-grid.min.css"
rel="stylesheet"
integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0"
crossorigin="anonymous"
/>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100;300;400;500;700;900&display=swap"
rel="stylesheet"
/>
<script
src="https://kit.fontawesome.com/548e1038d8.js"
crossorigin="anonymous"
></script>
</head>
<body>
<main>
<div class="title-bg pdt-96 pdb-24">
<div class="bg-filter"></div>
<div class="container d-flex justify-content-space-around">
<h2 class="title pdt-24 z-index-99" align="center">
專案作品
<br />
<p>PROJECT WORKS</p>
</h2>
</div>
</div>
<section class="pdt-96 pdb-96">
<div class="container position-relative">
<img src="./img/ProjectWorks/1.png" class="project-number" />
<div class="project-1">
<div class="project-1-title">
<h1 class="pdb-32">
台北市運動產業商業同業公會<br />
籌備會宣傳設計
</h1>
<p>
2021年開始國內疫情開始擴散，因應防疫政策開始限制運動產業相關活動，不管是健身房或是實體教練課程都造成極大的經濟損失，也因此很多的運動產業無法營業或是沒有客源的情況下只能停業。在沒有消費與收入的惡性循環下，造成該產業的發展停滯甚至倒退，本公會成立初衷，以民眾的群體力量，與政府連接一個共同的溝通管道，進而能保障運動產業的發展。<br /><br />
以下為運動產業商業同業公會的相關識別與專案設計：
</p>
</div>
<div class="project-1-content">
<div class="project-1-logo">
<div>
<img
src="./img/LogoDesign/taipei_sport_guild_logo.jpg"
alt="taipei-sport-guild-logo"
class="project-logo-img"
/>
</div>
<div class="logo-color-content">
<div class="logo-color">
<div class="color-block color-ff6e6e">
<p>#ff6e6e</p>
</div>
<div class="color-block color-ff374e">
<p>#ff374e</p>
</div>
<div class="color-block color-a5f1ff">
<p>#a5f1ff</p>
</div>
<div class="color-block color-67b4e0">
<p>#67b4e0</p>
</div>
</div>
<div class="logo-content">
<p>
以政府與民間達成共識與互相合作之理念，用「擁抱」與「握手」之意象進行首要傳達之訊息，再以「熱情」與「自由」的色彩對比，表達雙方能合作更順利、更積極的去了解產業的重視與需求。
</p>
</div>
</div>
</div>
</div>
<div class="project-1-image">
<div class="d-flex fd-c">
<img
src="./img/ProjectWorks/TaipeiSportGuild/Invitiation-Mockup-Guild.jpg"
/>
<p class="pdt-16 pdb-24">公會籌備說明會 - 邀請函設計</p>
</div>
<div class="d-flex fd-c">
<img
src="./img/ProjectWorks/TaipeiSportGuild/Guild-invatation-EDM.jpg"
/>
<p class="pdt-16 pdb-24">公會籌備說明會 - 電子函設計</p>
</div>
</div>
<div class="project-video-cont">
<div class="d-flex fd-c">
<iframe
class="project-video"
src="https://www.youtube.com/embed/uKoTdjDTauk"
title="YouTube video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
allowfullscreen
></iframe>
<p class="pdl-32">籌備說明會簡報設計</p>
</div>
</div>
</div>
</div>
</section>
<section
class="pdt-96 pdb-96"
style="background-color: rgba(255, 131, 127, 0.2)"
>
<div class="container position-relative">
<img
src="./img/ProjectWorks/2.png"
class="project-number"
style="right: 0"
/>
<div class="project-2-title">
<h1 class="pdb-32">
美國國家運動醫學院NASM<br />
異業合作專案設計
</h1>
<p>
此次合作對象為美國國家運動醫學院 -
NASM，為運動科學屆最具權威機構之一。<br /><br />配合團隊文案，產出29頁的簡報內容，再搭配英語部門同事與對方洽談，成功得到台灣地區的代理與課程授權，也得到對方對我們的平面設計的讚賞。後開始規劃課程，如CPT私人教練課程、CES運動矯正專家、PES運動表現專家三大課程，因為課程費用為高單價（約38000元至42000元），讓協會月平均收入增加60%，且課程學員報名人數越來越穩定，每堂課程平均15人報名的佳績。
</p>
</div>
<div class="project-2-ppt">
<a
href="https://issuu.com/stanleyhaw/docs/new_partner_1-3_years_plan_isca_nasm"
target="_blank"
><div class="project-2-issuu-link"></div
></a>
</div>
<div class="project-2-img">
<div class="grid-container">
<div class="pic-sqr picture-1"></div>
<div class="pic-sqr picture-2"></div>
<div class="pic-sqr picture-3"></div>
<div class="pic-sqr picture-4"></div>
<div class="pic-sqr picture-5"></div>
<div class="pic-sqr picture-6"></div>
</div>
<p class="pdl-16 pdt-16 pdb-16">合作宣傳視覺設計</p>
</div>
<div class="project-video-cont">
<div class="d-flex fd-c">
<iframe
class="project-video"
src="https://www.youtube.com/embed/3crb8cpvaA8"
title="YouTube video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
allowfullscreen
></iframe>
<p class="video-p-note">
ISCA國際運動教練協會 - 2022 NASM合作宣傳與年度計畫
</p>
</div>
</div>
<div class="project-2-course">
<div class="grid-container-course">
<div class="pic-rel NASMCPT"></div>
<div class="pic-rel NASMCES"></div>
<div class="pic-rel NASMPES"></div>
<div class="pic-rel NASMSAQ"></div>
</div>
<p class="course-word">課程海報設計</p>
</div>
</div>
</section>
</main>
<nav class="navbar-wrapper navbar-rwd-web z-index-99">
<div class="navbar">
<div class="d-flex justify-content-space-between align-items-center">
<a href="./index.html#home"><div class="logo"></div></a>
<ul class="navbar-list font-weight-400">
<li>
<a href="./index.html#about-me" class="list-items about-me"
>關於我</a
>
</li>
<li>
<a href="./index.html#works" class="list-items works">作品集</a>
</li>
<li>
<a href="./index.html#contact-me" class="list-items contact-me"
>聯絡我</a
>
</li>
</ul>
</div>
</div>
</nav>
<nav class="navbar-wrapper navbar-rwd-phone z-index-99">
<div class="navbar">
<div class="container">
<div class="d-flex justify-content-space-between align-items-center">
<a href="./index.html#home"><div class="logo"></div></a>
<ul class="navbar-list font-weight-400">
<li>
<a href="./index.html#about-me" class="list-items works"
><i class="fa-solid fa-user" color="#a98109"></i
></a>
</li>
<li>
<a href="./index.html#works" class="list-items about-me"
><i class="fa-solid fa-image" color="#a98109"></i
></a>
</li>
<li>
<a href="./index.html#contact-me" class="list-items contact-me"
><i class="fa-solid fa-comments" color="#a98109"></i
></a>
</li>
</ul>
</div>
</div>
</div>
</nav>
<footer>
<div class="footer">
<p>©2023 Designed By Stanley Haw</p>
</div>
</footer>
</body>
<script src="./script.js"></script>
</html>