/
portfoliorevsie.html
313 lines (276 loc) · 13 KB
/
portfoliorevsie.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
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>portfolio-revise</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" href="./css/portfolio_revise.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
</head>
<body>
<header id="top-head">
<div class="sort">
<a href="./index.html">首頁</a>
<a href="./portfoliorevsie.html">設計作品</a>
<a href="./webdesign.html">一頁式網站</a>
<a href="./About.html">關於</a>
</div>
</header>
<!-- ------------------------------>
<section id="section_top">
<div class="pic_stroke"></div>
<div class="explore">EXPLORE</div>
</section>
<!-- ---------------------------------------- -->
<section id="section_title_icon">
<h1 class="icon_title">圖標</h1>
<div class="row">
<div class="col-lg-2"></div>
<div class="col-lg-2"></div>
<div class="col-lg-2"></div>
<div class="col-lg-2"></div>
<div class="col-lg-2"></div>
<div class="col-lg-2"></div>
</div>
<!-- <img class="mountain1" src="./img/svg/mountain2.svg" alt="">-->
</section>
<!-- --------------------ICON------------------------>
<section id="section_works_icon">
<div class="container">
<div class="row row-stroke">
<div class="col-lg-6 icon pic">
<img src="./img/portfolio_product/icon1.png" alt="">
</div>
<div class="col-lg-6 text" >
<div class="all-content">
<h2 class="title">玻璃圖標</h2>
<p class="content">
以日常生活中大家常會用到的工具為主軸,將其轉化成
圖像化APP貼圖,讓人可以藉由圖形快速辨識該APP功能,輕鬆上手
</p>
</div>
</div>
</div>
<div class="row row-stroke">
<div class="col-lg-6 text order-lg-1 order-sm-2" >
<div class="all-content">
<h2 class="title">食物圖標</h2>
<p class="content">
將平常大家都常見的食物,轉換為ICON,方便運用在外賣或者遊戲裡
提供人視覺上感官選擇,相較單純文字敘述更容易聯想
</p>
</div>
</div>
<div class="col-lg-6 icon pic order-lg-2 order-sm-1">
<img src="./img/portfolio_product/icon2.png" alt="">
</div>
</div>
<div class="row row-stroke">
<div class="col-lg-6 icon pic">
<img src="./img/portfolio_product/icon3.png" alt="">
</div>
<div class="col-lg-6 text" >
<div class="all-content">
<h2 class="title">變色圖標</h2>
<p class="content">
透過背景色的不同,圖標隨之變色,使使用者在使用時增添趣味性與新鮮感
</p>
</div>
</div>
</div>
</div>
</section>
<!-- ------------------------------------------------->
<section id="section_title_banner">
<div class="container">
<h1 class="banner_title">BANNER</h1>
</div>
</section>
<!-- ------------------------------------------------------->
<section id="section_works_banner">
<div class="container">
<div class="row">
<div class="col-lg-6 ">
<img src="./img/portfolio_product/banner1.png" alt="" >
<div class="mask">
<h2>促銷海報</h2>
<p>以高彩度的配色搭配立體小圓球的動態感來襯托整體促銷氛圍,藉以抓住消費者的視覺</p>
</div>
</div>
<div class="col-lg-6">
<img src="./img/portfolio_product/banner4.png" alt="">
<div class="mask">
<h2>女裝海報</h2>
<p>以藍色為主色調為炎炎夏日帶來清涼感,同時搭配上俏皮的model讓畫面多了點俏皮感為煩躁悶熱的夏日帶來趣味性
</p>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6">
<img src="./img/portfolio_product/banner5.png" alt="" >
<div class="mask">
<h2>女裝海報</h2>
<p>以暖色調為主色呈現春意盎然的溫暖感,在搭配時尚的model來襯托出
產品的整題質量
</p>
</div>
</div>
<div class="col-lg-6">
<img src="./img/portfolio_product/banner6.png" alt="">
<div class="mask">
<h2>女裝海報</h2>
<p>透過model的帽子暖色澄來為酷寒的冬天帶來溫暖,同時透過model的穿搭來為畫面增添小清新的新鮮感
</p>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6">
<img src="./img/portfolio_product/banner7.png" alt="" >
<div class="mask">
<h2>花妝品海報</h2>
<p>此海報為臨摹海報，透過紫色本身帶有的神秘感,為產品加上光暈的特效，來襯托產品高規優雅性質</p>
</div>
</div>
</div>
</div>
</section>
<!-- ----------------------------------------------->
<section id="section_title_poster">
<div class="container">
<h1 class="poster_title">poster</h1>
</div>
</section>
<!----------------------------------------------------------------->
<section id="section_works_poster">
<div class="container">
<div class="row">
<div class="col-lg-4">
<img src="./img/portfolio_product/poster4-1.png" alt="">
<div class="mask">
<h2>化妝品海報</h2>
<p>以場景搭建的形式,給予產品一個專屬的舞台,藉此襯托產品本身帶有的
獨特性與高貴感</p>
</div>
</div>
<div class="col-lg-4">
<img src="./img/portfolio_product/poster5.png" alt="">
<div class="mask">
<h2>情人節海報</h2>
<p>透過滿天星光的天空，和一對相愛的戀人來表達情人相見那種喜悅與浪漫感</p>
</div>
</div>
<div class="col-lg-4">
<img src="./img/portfolio_product/poster6.png" alt="">
<div class="mask">
<h2>音樂海報</h2>
<p>透過文字的對比以及交錯排版來呈現出音樂的動感,同時搭配顯鮮明的藍紅對比來襯托音樂的炫酷感
</p>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-4">
<img src="./img/portfolio_product/poster1.png" alt="">
<div class="mask">
<h2>視覺海報</h2>
<p>透過七彩噴濺的雲霧由左往右噴射,搭配太空人,藉此表達太空人要被七彩霧壟罩的感覺，藉以呈現時尚酷炫感</p>
</div>
</div>
<div class="col-lg-4">
<img src="./img/portfolio_product/poster2.png" alt="">
<div class="mask">
<h2>音樂海報</h2>
<p>透過七彩炫酷的背景來呈現音樂的爆炸感.透過中間的人物的穿戴裝置,來表達不只
是聽覺同時也是視覺的雙重饗宴
</p>
</div>
</div>
<div class="col-lg-4">
<img src="./img/portfolio_product/poster77.png" alt="">
<div class="mask">
<h2>公寓DM海報</h2>
<p>以簡樸風為主軸，透過大量的留白提升整體透氣感，
來呈現公寓的簡約風格
</p>
</div>
</div>
</div>
</div>
</section>
<!-- -------------------------------------------------------->
<section id="section_title_logo">
<div class="container">
<h1 class="logo_title">LOGO</h1>
</div>
</section>
<!----------------------------------------------------------------------->
<section id="section_works_logo">
<div class="container">
<div class="row">
<div class="col-lg-6">
<img src="./img/portfolio_product/logo1.jpg" alt="">
<div class="mask">
<h2>SHINE HUNTER</h2>
<p>以英文字首為主體去進行結合設計，讓整體更加簡約，提升整體質感
</p>
</div>
</div>
<div class="col-lg-6">
<img src="./img/portfolio_product/logo2.jpg" alt="">
<div class="mask">
<h2>復古LOGO</h2>
<p>透過簡易的風車與背景的小山脈,搭配外圍的圓型徽章來呈現自然復古的質樸感</p>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6">
<img src="./img/portfolio_product/logo4.jpg" alt="">
<div class="mask">
<h2>HA LOGO</h2>
<p>將英文字母H和A進行結合發想,整體圖形呈現出山脈的形狀,象徵大自然的純樸
與清新感
</p>
</div>
</div>
<div class="col-lg-6">
<img src="./img/portfolio_product/logo3.jpg" alt="">
<div class="mask">
<h2>趣味LOGO</h2>
<p>透過趣味性的文字以及表情符號來表達此品牌的動感與趣味,讓人想一探究竟</p>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<img src="./img/portfolio_product/logo5.png" alt="">
<div class="mask">
<h2>詩香記</h2>
<p>將開頭的第一個字做為LOGO主要部分去進行設計，方便大眾去對此商家提高記憶點</p>
</div>
</div>
</div>
</div>
</section>
<!-- ---------------------------------------->
<script src="./js/jquery.min.js" ></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
// 漸變進入畫面-----------------------------
function newpage() {
window.location = newLocation;
}
$("img").mouseover(function(){
})
// 圖層遮罩
$(".mask").on("mouseover",function(){
$(this).css("opacity",1);
})
$(".mask").on("mouseout",function(){
$(this).css("opacity",0);
})
});
</script>
</body>
</html>