-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
235 lines (224 loc) · 12.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0 user-scalable=0 maximum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="icon" type="image/x-icon" href="images\favicon.ico">
<title>Online Courses CV Work</title>
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/layout.css">
<link rel="stylesheet" href="css/component.css">
</head>
<body>
<div class="wrapper">
<!-- Start Bg -->
<div class="bg"></div>
<!-- End Bg -->
<!-- Start Header -->
<header class="header">
<div class="container">
<div class="navber navber--collapse u-clearfix">
<div class="social-bar navber__social-bar">
<a href="#" class="icon-btn"><i class="icon icon-facebook-official"></i></a>
<a href="#" class="icon-btn"><i class="icon icon-dribbble"></i></a>
<a href="#" class="icon-btn"><i class="icon icon-behance"></i></a>
</div>
<div class="nav navber__nav">
<a href="#popup-overlay" class="menu-toggle"><span></span><span></span><span></span></a>
<div id="popup-overlay" class="popup-menu">
<div class="container">
<div class="u-clearfix">
<a href="#!" class="popup-menu__close"><span></span><span></span></a>
</div>
<ul>
<li><a href="#" class="popup-menu__item">ABOUT</a></li>
<li><a href="#" class="popup-menu__item">SKILL</a></li>
<li><a href="#" class="popup-menu__item">EXPERIENCE</a></li>
<li><a href="#" class="popup-menu__item">MY WORK</a></li>
<li><a href="#" class="popup-menu__item">CONTACT</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</header>
<!-- End Header -->
<!-- Start Main -->
<section class="main">
<!-- Start About -->
<div class="hero">
<div class="hero__bg"></div>
<div class="container">
<div class="hero__content">
<h1 class="hero__heading">HELLO<br>I'M JHAN</h1>
</div>
<a href="#" class="btn btn--primary btm--md">Contact</a>
</div>
</div>
<!-- End About -->
<!-- Start Quote -->
<div class="quote bg-color--white">
<div class="container">
<div class="row">
<div class="col-sm-6 col-sm-push-3">
<div class="quote__content">
<div class="quote__icon">
<i class="icon-quote-right"></i>
</div>
<p class="quote__text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex, sint quidem? Dolore deleniti
deserunt dolor earum illum error non corporis.</p>
<div class="quote__name"><span>Somebody - </span>from somewhere</div>
</div>
</div>
</div>
</div>
</div>
<!-- End Quote -->
<!-- Start Skill -->
<div class="skill bg-color--white">
<div class="container">
<h2 class="subtitle u-text-center">SKILL</h2>
<div class="skill-group">
<div class="row">
<div class="col-sm-6">
<div class="skill-card">
<div class="skill-card__inner">
<h4 class="skill-card__title">HTML</h4>
<p class="skill-card__text">「超文本」(HyperText)是指從某個網頁連到其他網頁的連結,不管它連結到站內抑或站外。連結連結 Web 的核心概念。藉由撰寫與上載網頁到網際網路中,你就積極參與了全球資訊網(World Wide Web)。</p>
</div>
<div class="skill-card__icon">
<img class="image" src="./images/skill_icon/html-icon.png" alt="HTML">
</div>
</div>
</div>
<div class="col-sm-6">
<div class="skill-card">
<div class="skill-card__inner">
<h4 class="skill-card__title">CSS</h4>
<p class="skill-card__text">CSS 是開放網路的核心語言之一,具有標準化的 W3C 規範。歷經不同層級的開發,CSS1 目前已被棄用、CSS2.1 是建議規範,而 CSS3 目前被分作數個較小的模組,持續在標準化的路上行進。</p>
</div>
<div class="skill-card__icon">
<img class="image" src="./images/skill_icon/css-icon.png" alt="HTML">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<div class="skill-card">
<div class="skill-card__inner">
<h4 class="skill-card__title">SKETCH</h4>
<p class="skill-card__text">Sketch 為您提供真正協作設計過程所需的所有工具。從早期的想法到像素完美的藝術作品、可玩的原型和開發者交接。</p>
</div>
<div class="skill-card__icon">
<img class="image" src="./images/skill_icon/sketch-icon.png" alt="HTML">
</div>
</div>
</div>
<div class="col-sm-6">
<div class="skill-card">
<div class="skill-card__inner">
<h4 class="skill-card__title">AI</h4>
<p class="skill-card__text">豐富創作功能一應具全,讓您信手拈來簡單的形狀和色彩,輕鬆打造經典的標誌、圖示和圖形。透過 Illustrator 創作的圖稿以向量為基礎,因此可以流暢地放大或縮小尺寸。無論您的作品是展示在行動裝置螢幕或廣告大看板上,都能永保銳利清晰。</p>
</div>
<div class="skill-card__icon">
<img class="image" src="./images/skill_icon/ai-icon.png" alt="HTML">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- End Skill -->
<!-- Start Experience -->
<div class="experiecne">
<div class="container">
<h2 class="subtitle u-text-center color--white">EXPERIENCE</h2>
<div class="timeline-group">
<div class="timeline"></div>
<div class="timeline-cards">
<div class="timeline-cards__row">
<div class="timeline-card">
<p class="timeline-card__text">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quas distinctio commodi laborum fuga accusamus quasi magnam maiores
voluptatum?
</p>
</div>
</div>
<div class="timeline-cards__row">
<div class="timeline-card">
<p class="timeline-card__text">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quas distinctio commodi laborum fuga accusamus quasi magnam maiores
voluptatum?
</p>
</div>
</div>
<div class="timeline-cards__row">
<div class="timeline-card">
<p class="timeline-card__text">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quas distinctio commodi laborum fuga accusamus quasi magnam maiores
voluptatum?
</p>
</div>
</div>
<div class="timeline-cards__row">
<div class="timeline-card">
<p class="timeline-card__text">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quas distinctio commodi laborum fuga accusamus quasi magnam maiores
voluptatum?
</p>
</div>
</div>
<div class="timeline-cards__row">
<div class="timeline-card">
<p class="timeline-card__text">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quas distinctio commodi laborum fuga accusamus quasi magnam maiores
voluptatum?
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- End Experience -->
<!-- Start Work -->
<div class="work bg-color--white">
<div class="container">
<h2 class="subtitle u-text-center">MY WORKS</h2>
<div class="work-list">
<div class="work-item">
<div class="row">
<div class="col-sm-6 col-sm-push-5">
<div class="imgbox">
<div class="imgbox__inner imgbox__inner--4-3">
<div class="image" style="background-image:url('images/works/thumbnail/work001_thumb.jpg');"></div>
</div>
</div>
</div>
<div class="col-sm-4 col-sm-pull-5">
<div class="work-item__text work-item__text--right">
<h3 class="work-item__title work-item__title--right">Work title for good design stuff</h3>
<p class="work-item__intro">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus quisquam reprehenderit perspiciatis minima unde rerum magnam, sit tenetur odio? Est!</p>
<a href="#" class="text-btn text-btn--primary text-btn--lg">Show project</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- End Work -->
<!-- Start Contact -->
<!-- End Contact -->
</section>
<!-- End Main -->
<!-- Start Footer -->
<footer class="footer"></footer>
<!-- End Footer -->
</div>
</body>
</html>