-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
314 lines (274 loc) · 14 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
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
314
<!--
Sources:
Home page: http://themestarz.net/html/scrape
Home page header: https://creativemarket.com/ThemeDevisers/1312269-ResumeCV/screenshots/#screenshot1
Blog: https://cdn.colorlib.com/wp/wp-content/uploads/sites/2/goblog-minimal-wordpress-photography-blog-template.jpg
-->
<!DOCTYPE html>
<html>
<!-- ---------------------------------------------------------------------------------------- -->
<head>
<title>Hung Nguyen</title>
<link rel="shortcut icon" type="image/png" href="./images/favicon.png">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link type="text/css" rel="stylesheet" href="./font-awesome/css/fontawesome-all.css">
<link type="text/css" rel="stylesheet" href="./css/general.css">
<link type="text/css" rel="stylesheet" href="./css/menu.css">
<link type="text/css" rel="stylesheet" href="./css/index.css">
<link type="text/css" rel="stylesheet" href="./css/index-header.css">
<link type="text/css" rel="stylesheet" href="./css/index-what-i-do.css">
<link type="text/css" rel="stylesheet" href="./css/index-my-works.css">
<link type="text/css" rel="stylesheet" href="./css/index-about-me.css">
<link type="text/css" rel="stylesheet" href="./css/index-worked.css">
<link type="text/css" rel="stylesheet" href="./css/index-blog.css">
<link type="text/css" rel="stylesheet" href="./css/footer.css">
</head>
<!-- ---------------------------------------------------------------------------------------- -->
<body>
<!-- ---------------------------------------------------------------------------------------- -->
<a href="index.html"><div id="logo">HUNG NGUYEN</div></a>
<div id="menu">
<a href="#footer" class="menu-link">CONTACT</a>
<a href="blog.html" class="menu-link">BLOG</a>
<a href="profile.html" class="menu-link">ABOUT ME</a>
<a href="#worked" class="menu-link">WORKED</a>
<a href="portfolio.html" class="menu-link">MY WORKS</a>
<a href="#what-i-do-section" class="menu-link">WHAT I DO</a>
<a href="index.html" class="menu-link">HOME</a>
</div>
<div id="menu-small-icon"><i class="fas fa-bars"></i></div>
<!-- ---------------------------------------------------------------------------------------- -->
<div id="header">
<div id="header-background-1"></div>
<div id="header-background-2"></div>
<div id="header-left-column">
<div id="header-avatar-container">
<img src="./images/index/avatar.jpg">
</div>
<hr>
<div class="header-skill">Photography Advanced</div>
<div class="header-skill">Webdesign Advanced</div>
<div class="header-skill">Illustration Advanced</div>
</div>
<div id="header-right-column">
<a href="#0"><div id="show-header-button-left"><i class="far fa-arrow-alt-circle-left"></i></div></a>
<a href="#0"><div id="show-header-button-right"><i class="far fa-arrow-alt-circle-right"></i></div></a>
<div id="header-name"><b>HUNG</b> NGUYEN</div>
<div id="header-profession">Graphic Designer</div>
<div id="header-personal-information">
<div class="label">Age</div>
<div class="content">20</div>
<div class="label">Address</div>
<div class="content">Ho Chi Minh City</div>
<div class="label">Email</div>
<div class="content">[email protected]</div>
<div class="label">Phone</div>
<div class="content">+84 123 456 789</div>
<div class="label">Freelance</div>
<div class="content">till Semtember 30th, 2018</div>
</div>
</div>
</div>
<!-- --------------------------------------------------------------------------------------------- -->
<h1 id="what-i-do-section" class="reveal-animation link">What I Do</h1>
<div id="what-i-do">
<div class="column">
<i class="fas fa-desktop icon"></i>
<div class="title reveal-animation">Webdesign</div>
<p>A paragraph is a self-contained unit of a discourse in writing dealing with</p>
</div>
<div class="column">
<i class="fas fa-pencil-alt icon"></i>
<div class="title reveal-animation">Illustration</div>
<p>A paragraph is a self-contained unit of a discourse in writing dealing with</p>
</div>
<div class="column">
<i class="far fa-play-circle icon"></i>
<div class="title reveal-animation">Animation</div>
<p>A paragraph is a self-contained unit of a discourse in writing dealing with</p>
</div>
</div>
<!-- --------------------------------------------------------------------------------------------- -->
<a href="portfolio.html"><h1 id="my-works-section" class="reveal-animation link">My Works</h1></a>
<div class="my-works">
<div class="container">
<a href="#0" onclick="popupSlide(1)"><img class="content-img" src="./images/index/img-01.jpg"></a>
<div class="text1">Interior Design</div>
<div class="text2 reveal-animation">Bathroom Refresh</div>
</div>
<div class="container">
<a href="#0" onclick="popupSlide(2)"><img class="content-img" src="./images/index/img-02.jpg"></a>
<div class="text1">Architecture</div>
<div class="text2 reveal-animation">Hills Apartment</div>
</div>
<div class="container">
<a href="#0" onclick="popupSlide(3)"><img class="content-img" src="./images/index/img-03.jpg"></a>
<div class="text1">Branding</div>
<div class="text2 reveal-animation">Story Restaurant</div>
</div>
<div class="container">
<a href="#0" onclick="popupSlide(4)"><img class="content-img" src="./images/index/img-04.jpg"></a>
<div class="text1">Industrial Design</div>
<div class="text2 reveal-animation">Room Furniture</div>
</div>
<div class="container">
<a href="#0" onclick="popupSlide(5)"><img class="content-img" src="./images/index/img-05.jpg"></a>
<div class="text1">Branding</div>
<div class="text2 reveal-animation">Maracana Cups</div>
</div>
<div class="container">
<a href="#0" onclick="popupSlide(6)"><img class="content-img" src="./images/index/img-06.jpg"></a>
<div class="text1">Art</div>
<div class="text2 reveal-animation">Timeless Motion</div>
</div>
</div>
<a href="portfolio.html"><div class="see-more-button">See More</div></a>
<!-- image slide section -->
<div id="popup-background" onclick="closePopupSlide();"></div>
<img class="popup-img" src="./images/index/img-01.jpg">
<img class="popup-img" src="./images/index/img-02.jpg">
<img class="popup-img" src="./images/index/img-03.jpg">
<img class="popup-img" src="./images/index/img-04.jpg">
<img class="popup-img" src="./images/index/img-05.jpg">
<img class="popup-img" src="./images/index/img-06.jpg">
<div class="img-index"><span id="img-index-count">1</span> of 6</div>
<i class="fas fa-caret-right" onclick="showNextImg(1)"></i>
<i class="fas fa-caret-left" onclick="showNextImg(-1)"></i>
<!-- --------------------------------------------------------------------------------------------- -->
<a href="profile.html"><h1 id="about-me-section" class="reveal-animation link">About Me</h1></a>
<div class="about-me">
<p><img class="content-img" src="./images/index/about-me.png">The oldest classical Greek and Latin writing had little or no space between words and could be written in boustrophedon. Over time, text direction became standardized, and word dividers and terminal punctuation became common. The first way to divide sentences into groups was the original paragraphos, similar to an underscore at the beginning of the new group. The Greek paragraphos evolved into the pilcrow, which in English manuscripts in the Middle Ages can be seen inserted inline between sentences. The hedera leaf has also been used in the same way.</p>
<a href="#footer"><div class="contact-button">Contact</div></a>
</div>
<!-- --------------------------------------------------------------------------------------------- -->
<div id="worked">
<img class="filter" src="./images/index/filter.png">
<h1 id="worked-section" class="reveal-animation link">Where I Worked</h1>
<div class="list">
<div class="element">
<a href="http://www.google.com"><div class="title link">Wilmington Design</div></a>
<div class="ocupation">Creative Director</div>
<div class="picture-frame">
<img class="picture" src="./images/index/company-1.jpg">
<div class="worked-decoration">
<img class="worked-decoration-img" src="./images/index/worked-decoration.png">
<div class="icons">
<a href="#0"><i class="fab fa-twitter"></i></a>
<a href="#0"><i class="fab fa-facebook-f"></i></a>
<a href="#0"><i class="fas fa-envelope"></i></a>
</div>
</div>
</div>
</div>
<div class="element">
<a href="http://www.google.com"><div class="title link">Phresh</div></a>
<div class="ocupation">Illustrator</div>
<div class="picture-frame">
<img class="picture" src="./images/index/company-2.jpg">
<div class="worked-decoration">
<img class="worked-decoration-img" src="./images/index/worked-decoration.png">
<div class="icons">
<a href="#0"><i class="fab fa-twitter"></i></a>
<a href="#0"><i class="fab fa-facebook-f"></i></a>
<a href="#0"><i class="fas fa-envelope"></i></a>
</div>
</div>
</div>
</div>
<div class="element">
<a href="http://www.google.com"><div class="title link">Kevin Kurbs</div></a>
<div class="ocupation">UX/UI Designer</div>
<div class="picture-frame">
<img class="picture" src="./images/index/company-3.jpg">
<div class="worked-decoration">
<img class="worked-decoration-img" src="./images/index/worked-decoration.png">
<div class="icons">
<a href="#0"><i class="fab fa-twitter"></i></a>
<a href="#0"><i class="fab fa-facebook-f"></i></a>
<a href="#0"><i class="fas fa-envelope"></i></a>
</div>
</div>
</div>
</div>
<div class="element">
<a href="http://www.google.com"><div class="title link">Lesia</div></a>
<div class="ocupation">Front-end Designer</div>
<div class="picture-frame">
<img class="picture" src="./images/index/company-4.jpg">
<div class="worked-decoration">
<img class="worked-decoration-img" src="./images/index/worked-decoration.png">
<div class="icons">
<a href="#0"><i class="fab fa-twitter"></i></a>
<a href="#0"><i class="fab fa-facebook-f"></i></a>
<a href="#0"><i class="fas fa-envelope"></i></a>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- --------------------------------------------------------------------------------------------- -->
<a href="blog.html"><h1 id="blog-section" class="reveal-animation link">Blog</h1></a>
<div class="blog">
<a href="blog-post-1.html">
<div class="column">
<div class="container"><img src="./images/index/blog-01.jpg"></div>
<div class="date">20.07.2018</div>
<div class="title reveal-animation link">How To Become More Creative</div>
<div class="paragraph">A paragraph is a self-contained unit of a discourse in writing dealing with a particular point or idea.</div>
</div>
</a>
<a href="blog-post-2.html">
<div class="column">
<div class="container"><img src="./images/index/blog-02.jpg"></div>
<div class="date">15.07.2018</div>
<div class="title reveal-animation link">10 Tips For Better Photography</div>
<div class="paragraph">A paragraph is a self-contained unit of a discourse in writing dealing with a particular point or idea.</div>
</div>
</a>
<a href="blog-post-3.html">
<div class="column">
<div class="container"><img src="./images/index/blog-03.jpg"></div>
<div class="date">02.07.2018</div>
<div class="title reveal-animation link">Refresh Your Mind And Body</div>
<div class="paragraph">A paragraph is a self-contained unit of a discourse in writing dealing with a particular point or idea.</div>
</div>
</a>
</div>
<!-- --------------------------------------------------------------------------------------------- -->
<div id="footer">
<h1 id="contact-section" class="link">Contact</h1>
<div class="my-address">
<div class="title">My Address</div>
<div id="content">
24A Duong Thi Muoi Street<br>
Tan Chanh Hiep Ward, District 12<br>
Ho Chi Minh City
</div>
<div id="icons-container">
<a href="#0"><i class="fas fa-envelope"></i><span> [email protected]</span></a><br>
<a href="#0"><i class="fab fa-facebook-f"></i><span>   fb.com/hungng300899</span></a><br>
<a href="#0"><i class="fab fa-youtube"></i><span> youtube.com/hungng300899</span></a>
</div>
</div>
<form class="contact-form" onsubmit="return false;">
<div class="title">Contact Form</div>
<div class="contact-column">
<div class="input-guide">Your Name</div>
<input type="text" name="name" placeholder="Your Name">
</div>
<div class="contact-column">
<div class="input-guide">Your Email</div>
<input type="text" name="email" placeholder="Your Email">
</div>
<div class="input-guide">Your Message</div>
<textarea name="message" rows="8" placeholder="Your Message"></textarea><br>
<input type="submit" value="Send A Message">
</form>
</div>
<!-- --------------------------------------------------------------------------------------------- -->
<script src="./js/menu.js"></script>
<script src="./js/index.js"></script>
<!-- --------------------------------------------------------------------------------------------- -->
</body>
</html>