-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.htm
220 lines (205 loc) · 9.99 KB
/
index.htm
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>My personal website</title>
<link rel="stylesheet" href=D:\Desktop\創建個人網站之路\css\font-awesome.min.css>
<link rel="stylesheet" href=D:\Desktop\創建個人網站之路\css\style.css>
</head>
<body>
<header id="header">
<div class="container">
<nav>
<div id="logo">
<a href="">
<img src="../image/logo.jpg" hieght="40px" width="60px" alt="logo">
</a>
</div>
<ul class="nav">
<li><a href="">home</a></li>
<li><a href="">about</a></li>
<li><a href="">service</a></li>
<li><a href="">portfolio</a></li>
<li><a href="">contact</a></li>
</ul>
</nav>
</div>
</header>
<!--homepage background-->
<section class="home_bg">
<div class="overlay"></div>
<div class="container_table">
<div class="container_table_cell">
<h2>hi, i am ian</h2>
<div class="social_icons">
<a href="../facebook.com/ChenKuanYiengineer"><i class="fa fa-facebook" aria-hidden="true"></i></a>
<a href=""><i class="fa fa-twitter" aria-hidden="true"></i></a>
<a href=""><i class="fa fa-github-alt" aria-hidden="true"></i></a>
<a href=""><i class="fa fa-skype" aria-hidden="true"></i></a>
<a href=""><i class="fa fa-linkedin" aria-hidden="true"></i></a>
</div>
</div>
</div>
</section>
<!-- About Me -->
<section class="about_me clearfix">
<div class="container">
<h2>about me</h2>
<div class="summary clearfix">
<div class="col-left">
<div class="avatar">
<img src=../image/0002.jpg alt="avatar">
</div>
</div>
<div class="col-right">
<div class="personal-info">
<h3>hello!</h3>
<p>開始玩SAO時是15歲，2年後的故事本篇是17歲，生日為2007年9月30日。父親是大型電子用品製造商「RECT」的CEO，母親是某大學中的教授。對於料理非常拿手，最出名的就是用桐人得到的S食材雜燴兔肉做成的燉肉雜燴。因家庭因素，從小就接受精英式的培育，不論是自己還是兄長都被家人期望著將來有所成就，不斷地作為親戚間互相競爭與比較的對象，基於這個原因，在好奇心的驅使之下借用了自己哥哥帶回來的NERvGear進入SAO，也因此被捲入了這場死亡遊戲之中。本身是網路遊戲新手，甚至直接用現實的真名去取遊戲角色的名字。在攻略第一層Boss時，還不知道跟人組隊後能看見其他隊員的遊戲角色名字。
</p>
</div>
<div class="skill">
<ul>
<li>html5 and css3</li>
<li>responsive website design</li>
<li>ruby on rails</li>
</ul>
</div>
<div class="button-group">
<div class="download_cv">
<a href="">download CV</a>
</div>
<div class="hire_me">
<a href="">hire me</a>
</div>
</div>
</div>
</div>
</div>
</section>
<!--My Service-->
<section class="my_service">
<div class="container">
<h2>what i offer</h2>
<div class="service_item clearfix">
<div class="service_content">
<i class="fa fa-address-book" aria-hidden="true"></i>
<h3>web design and evelopment</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis unde ea, numquam corrupti quidem quibusdam aspernatur error rerum, voluptates at, reprehenderit dolores? Nemo, unde? Illum ipsa molestias sed adipisci harum!</p>
</div>
<div class="service_content">
<i class="fa fa-university" aria-hidden="true"></i>
<h3>web design and evelopment</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum illum labore, nulla a similique vero ab adipisci aut debitis nisi. Recusandae quae architecto minus iure beatae temporibus eveniet, laborum reiciendis.</p>
</div>
<div class="service_content">
<i class="fa fa-youtube" aria-hidden="true"></i>
<h3>web design and evelopment</h3>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Facilis explicabo, sint repellendus ullam vitae perspiciatis at amet ipsa consectetur commodi dicta quia magni. Placeat rerum quasi saepe rem. Impedit, nostrum.</p>
</div>
</div>
</div>
</section>
<!--Resume-->
<section class="resume ">
<h2>resume</h2>
<div class="container">
<div class="row clearfix">
<h3 class="resume_subtitle">eduacation</h3>
<div class="row_item">
<p class="resume_years">2001 - 2002</p>
<div class="resume_detail">
<h4>civil engineering</h4>
<h6>national taiwan university</h6>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Possimus pariatur nihil nam odio est ex? Deserunt quae dignissimos nobis aperiam optio, commodi quibusdam ipsam adipisci neque ipsa, assumenda vero aspernatur?</p>
</div>
</div>
<div class="row_item">
<p class="resume_years">2001 - 2002</p>
<div class="resume_detail">
<h4>civil engineering</h4>
<h6>national taiwan university</h6>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Possimus pariatur nihil nam odio est ex? Deserunt quae dignissimos nobis aperiam optio, commodi quibusdam ipsam adipisci neque ipsa, assumenda vero aspernatur?</p>
</div>
</div>
</div>
<div class="row clearfix">
<h3 class="resume_subtitle">eduacation</h3>
<div class="row_item">
<p class="resume_years">2001 - 2002</p>
<div class="resume_detail">
<h4>civil engineering</h4>
<h6>national taiwan university</h6>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Possimus pariatur nihil nam odio est ex? Deserunt quae dignissimos nobis aperiam optio, commodi quibusdam ipsam adipisci neque ipsa, assumenda vero aspernatur?</p>
</div>
</div>
<div class="row_item">
<p class="resume_years">2001 - 2002</p>
<div class="resume_detail">
<h4>civil engineering</h4>
<h6>national taiwan university</h6>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Possimus pariatur nihil nam odio est ex? Deserunt quae dignissimos nobis aperiam optio, commodi quibusdam ipsam adipisci neque ipsa, assumenda vero aspernatur?</p>
</div>
</div>
</div>
</div>
</section>
<!--quote-->
<section class="quote">
<div class="overlay"></div>
<div class="container">
<h3>lets work together</h3>
<p>I am available for freelance projects</p>
<a href="#">get quotes</a>
</div>
</section>
<!--latest work-->
<section>
<div class="container">
<h2>latest work</h2>
<div class="work_item clearfix">
<div class="work">
<a href="../image/work02.jpg">
<img src="../image/work02.jpg" alt="" />
</a>
</div>
<div class="work">
<a href="../image/work02.jpg">
<img src="../image/work02.jpg" alt="" />
</a>
</div>
<div class="work">
<a href="../image/work02.jpg">
<img src="../image/work02.jpg" alt="" />
</a>
</div>
<div class="work">
<a href="../image/work02.jpg">
<img src="../image/work02.jpg" alt="" />
</a>
</div>
<div class="work">
<a href="../image/work02.jpg">
<img src="../image/work02.jpg" alt="" />
</a>
</div>
<div class="work">
<a href="../image/work02.jpg">
<img src="../image/work02.jpg" alt="" />
</a>
</div>
</div>
</div>
</section>
<!--contact-->
<section class="contact">
<div class="container">
<h2>get in touch</h2>
<div class="form">
<form action=""></form>
</div>
</div>
</section>
</body>
</html>