-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
288 lines (283 loc) · 12.3 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
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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="來自一位網頁前端的初學者開始100DaysOfCode挑戰">
<meta name="keywords" content="100daysofcode,front-end,html5,CSS3,JavaScript">
<meta name="author" content="Peter Chen">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>100DaysOfCode</title>
<!-- <link rel="stylesheet" type="text/css" href="css/reset.css"> -->
<link rel="icon" href="images/superhero.ico">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/common.css">
<link rel="stylesheet" type="text/css" href="css/index.css">
<script src="JavaScript/index.js"></script>
</head>
<body>
<!-- 頁首導覽區 -->
<header id="header" class="bg-info">
<nav class="container d-flex justify-content-around text-center align-content-center">
<div class="my-2 btn">
<span class="show-above-768px p-2">Home Page</span>
<a href="#" class="show-under-768px p-2"><img src="images/homebutton.svg" width="30"></a>
</div>
<div class="my-2 btn">
<span class="show-above-768px p-2">About Me</span>
<a href="#" class="show-under-768px p-2"><img src="images/aboutme.svg" width="30"></a>
</div>
<div class="my-2 btn">
<span class="show-above-768px p-2">My Working</span>
<a href="#" class="show-under-768px p-2"><img src="images/product.svg" width="30"></a>
</div>
</nav>
</header>
<!-- 主體區 -->
<div id="bg1">
<div class="container">
<div class="row p-5">
<h3 class="col-sm-12 text-center mb-5 text-white">Hello ! Welcome to my web page!</h3>
<p class="col-sm-12 font-italic text-white mb-md-5 text-center p-2 show-above-768px">我是 陳又傑。<br>A RWD web designer、UI/UX designer.<br>
去年某一天，我做了一個重要的決定，為了趁還年輕時，<br>
去學習更多未來不容易被淘汰的技能;我選擇離開了舒適的電視台工作。<br>
思索著什麼樣的產業，在未來是不可或缺的，便想到了軟體產業的工作走向。<br>
於是便走向網頁前端、RWD設計這條路。<br>
如您所見，網頁UI運用的技能，是在聯成電腦中學習的。<br>
包括基本的 HTML5、CSS3、JavaScript效果。<br>
還使用了像是jQuery、Bootstrap4 等等框架加速建設。<br>
但是並未有先前去做設計的動作，自己回頭看，還有很大的整容空間。<br>
平面影像部分，會運用 Adobe Photoshop、Illustrator兩種設計工具。<br>
編輯器使用Sublime Text 3。<br>
若您有興趣看更多的平面設計作品請點選下方按鈕，尋找分類作品。</p>
</div>
</div>
</div>
<div class="container">
<div class="p-4 my-4 d-flex flex-column text-center">
<h3>Photoshop</h3>
<p class="mb-4">Ps軟體在大學時學習過，學業之餘也常用來修圖，去年電腦課程的學習，著重在接近商業設計概念的作品。</p>
<h3>Illustrator</h3>
<p>同樣在去年開始精進Ai使用，課堂中老師用接近CIS企業識別的技巧和方法，帶領學員設計假想店面的LOGO與相關。</p>
</div>
<!-- 導覽按鈕區 -->
<div class="row justify-content-around py-5" id="guidebtn">
<button id="frontEndBtn" type="button" class="btn btn-info btn-lg col-sm-2 col-7 mb-2">Front-end</button>
<button id="psBtn" type="button" class="btn btn-info btn-lg col-sm-2 col-7 mb-2">Photoshop</button>
<button id="IllBtn" type="button" class="btn btn-info btn-lg col-sm-2 col-7 mb-2">Illustrator</button>
<button id="ctfBtn" type="button" class="btn btn-info btn-lg col-sm-2 col-7 mb-2">Certification</button>
</div>
<div class="row text-center">
<h2 class="col-12 mb-3">資料填寫區</h2>
<p class="col-12">這裡是聯絡資料填寫區，不過還未學習後端，形式是示意用途。</p>
</div>
<!-- 表單填答區 -->
<div class="row">
<div class="input-group my-sm-5 my-3 input-group-lg col-lg-6">
<div class="input-group-prepend">
<span class="input-group-text">NAME</span>
</div>
<input type="text" name="" class="form-control" placeholder="First Name...">
<input type="text" name="" class="form-control" placeholder="Last Name...">
</div>
<div class="input-group my-sm-5 my-3 input-group-lg col-lg-6">
<div class="input-group-prepend">
<span class="input-group-text">EMAIL</span>
</div>
<input type="text" name="" class="form-control" placeholder="@gmail.com...">
<button class="btn btn-primary">提交</button>
</div>
<div class="col-lg my-sm-5 my-3">
<label for="comment" class="font-weight-bold">建議:</label>
<textarea class="form-control" row="5" id="comment" name="text" placeholder="在這留些話..."></textarea>
<button type="submit" class="btn btn-primary my-2">提交</button>
</div>
</div>
<!-- 浮動info區 -->
<div id="menu-float">
<a class="m-3" id="facebook" href="https://www.facebook.com/profile.php?id=100001065213954&lst=100001065213954%3A100001065213954%3A1583230309&sk=about">
<img src="images/facebook.svg" width="40" alt="FB">
</a>
<a class="m-3" id="instagram" href="https://www.instagram.com/peteryojay/?hl=zh-tw">
<img src="images/instagram.svg" width="40" alt="IG">
</a>
<a class="m-3" id="Github" href="https://github.com/ChenYu-Chieh">
<img src="images/github.svg" width="40" alt="GitHub">
</a>
<button type="button" class="btn btn-light" id="x1">X</button>
</div>
<!-- PS作品輪播區 -->
<div id="Carousel" class="my-5">
<h3 class="text-center mb-5">Photoshop 成品</h3>
<div id="myCarousel" class="carousel slide">
<!-- 指示器 -->
<ul class="carousel-indicators">
<li class="item1 active"></li>
<li class="item2"></li>
<li class="item3"></li>
</ul>
<!-- 圖片輪播區塊 -->
<div class="carousel-inner boxShadow">
<div class="carousel-item active">
<img src="images/the matrix2020.1.23.jpg" alt="駭客任務4">
<div class="carousel-caption show-above-992px">
<h3>駭客任務4</h3>
<p>我很喜歡這部電影!</p>
</div>
</div>
<div class="carousel-item">
<img src="images/東京著衣.jpg" alt="東京著衣">
<div class="carousel-caption text-dark show-above-992px">
<h3>東京著衣</h3>
<p>Banner 800*500</p>
</div>
</div>
<div class="carousel-item">
<img src="images/塗鴉牆-完圖.jpg" alt="復仇者聯盟塗鴉牆">
<div class="carousel-caption show-above-992px">
<h3>復仇者聯盟塗鴉牆</h3>
<p>混和模式作品</p>
</div>
</div>
</div>
<!-- 左右輪播按鍵 -->
<a href="#myCarousel" class="carousel-control-prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a href="#myCarousel" class="carousel-control-next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
</div>
<!-- Ai作品輪播區 -->
<div id="Carousel1" class="my-5">
<h3 class="text-center mb-5">Illustrator 成品</h3>
<div id="myCarousel1" class="carousel slide">
<!-- 指示器 -->
<ul class="carousel-indicators">
<li class="item4 active"></li>
<li class="item5"></li>
<li class="item6"></li>
</ul>
<div class="carousel-inner boxShadow">
<div class="carousel-item active">
<img src="images/logoDesign1.svg" alt="設計構想">
<div class="carousel-caption show-above-992px">
<h3>Cloris LOGO</h3>
<p>設計構想:低咖啡因下午茶店</p>
</div>
</div>
<div class="carousel-item">
<img src="images/logoDesign2.svg" alt="設計方向">
<div class="carousel-caption show-above-992px">
<h3>Cloris LOGO</h3>
<p>制定設計方向</p>
</div>
</div>
<div class="carousel-item">
<img src="images/logoDesign3.svg" alt="實際成品">
<div class="carousel-caption show-above-992px">
<h3>Cloris LOGO</h3>
<p>設計成品</p>
</div>
</div>
</div>
<!-- 左右輪播按鍵 -->
<a href="#myCarousel1" class="carousel-control-prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a href="#myCarousel1" class="carousel-control-next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
</div>
<!-- 認證輪播區 -->
<div id="Carousel2" class="my-5">
<h3 class="text-center mb-5">現有證照</h3>
<div id="myCarousel2" class="carousel slide">
<!-- 指示器 -->
<ul class="carousel-indicators">
<li class="item7 active"></li>
<li class="item8"></li>
</ul>
<div class="carousel-inner boxShadow">
<div class="carousel-item active">
<img src="images/ACA-Illustrator.svg" alt="ACA證照">
<div class="carousel-caption show-above-992px">
<h3>ACA-Illustrator</h3>
<p>Adobe 國際認證證照</p>
</div>
</div>
<div class="carousel-item">
<img src="images/Google-Ads.svg" alt="Google Ads證照">
<div class="carousel-caption show-above-992px text-dark">
<h3>Google Ads</h3>
<p>Google 關鍵字搜尋認證</p>
</div>
</div>
</div>
<!-- 左右輪播按鍵 -->
<a href="#myCarousel2" class="carousel-control-prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a href="#myCarousel2" class="carousel-control-next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
</div>
</div>
<!-- 時間軸區 -->
<div id="historyLine" class="my-5 container">
<h2 class="text-secondary text-center mb-sm-5 mb-3">開始挑戰 100-Days-of-code</h2>
<section class="my-3">
<h5 class="text-info text-center">2019年11月</h5>
<div class="justify-content-around align-items-center row">
<p class="text-lg-center text-md-right col-7 col-md-2 col-lg-6">Nov 18</h5>
<p class="text-lg-center text-md-left col-7 col-md-2 col-lg-3">Joined GitHub!</p>
<img src="images/1-1.jpg" class="img-fluid rounded-lg shadow col-md-4 col-lg-3" alt="加入GitHub!" width="300" height="240">
</div>
</section>
<section class="my-3">
<h5 class="text-info text-center">2020年1月</h5>
<div class="d-flex justify-content-around align-items-center row">
<img src="images/1-2.jpg" class="order-3 order-md-1 img-fluid rounded-lg shadow col-md-4 col-lg-3" alt="建立第一個倉庫" width="300" height="240">
<p class="order-2 order-md-2 text-lg-center text-md-right col-10 col-md-3 col-lg-3">Created first repository</p>
<p class=" order-1 order-md-3 text-lg-center text-md-left col-10 col-md-2 col-lg-6">Jan 16</p>
</div>
</section>
<section class="my-3">
<h5 class="text-info text-center">2020年2月</h5>
<div class="d-flex justify-content-around align-items-center row">
<p class="text-lg-center text-md-right col-10 col-md-2 col-lg-6">Feb 3</p>
<p class="text-lg-right text-md-left col-10 col-md-2 col-lg-3">Uploaded my first work</p>
<img src="images/zelda.png" class="img-fluid rounded-lg shadow col-md-4 col-lg-3" alt="加入GitHub!" width="300" height="240">
</div>
</section>
</div>
<footer class="bg-secondary">
<div class="d-flex justify-content-around p-4">
<div class="col-4">
<p class="show-above-768px text-center">Phone : 0916166002</p>
<img src="images/call.svg" id="call" class="show-under-768px" width="30">
</div>
<p class="col-4 text-center">Icons made by
<a href="https://www.flaticon.com/authors/freepik" title="Freepik">Freepik</a>
from
<a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com</a>
</p>
<div id="backToTop" class="col-4 text-center">
<span class="text-center show-above-768px">Back to top
<img src="images/backToTop.svg" alt="backToTop" width="30">
</span>
<img src="images/backToTop.svg" alt="backToTop" width="30" id="BackToTop" class="col-4 show-under-768px">
</div>
</div>
</footer>
</body>
</html>