-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
326 lines (290 loc) · 10.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
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
315
316
317
318
319
320
321
322
323
324
325
326
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="css/style.css" />
<link
href="https://fonts.googleapis.com/css2?family=Permanent+Marker&display=swap"
rel="stylesheet"
/>
<link
href="https://fonts.googleapis.com/css2?family=Encode+Sans&family=Permanent+Marker&display=swap"
rel="stylesheet"
/>
<link
href="https://fonts.googleapis.com/css2?family=Encode+Sans&family=Permanent+Marker&family=Zen+Kaku+Gothic+New:wght@700&display=swap"
rel="stylesheet"
/>
<title>mihye homepage</title>
</head>
<body>
<div class="mihye_homepage">
<!-- 메인홈 -->
<div class="home">
<a name="home"></a>
<nav id="top_menu">
<div>
<a href="#home">
<img
class="logo_image"
src="image/homepage_logo.PNG"
alt="로고"
/>
</a>
</div>
<ul class="homepage_menu">
<li><a href="#About_me">ABOUT ME</a></li>
<li><a href="#Skills">SKILLS</a></li>
<li><a href="#Favorite">FAVORITE</a></li>
<li><a href="#Guess_me">GUESS ME</a></li>
<li><a href="#Contact">CONTACT</a></li>
</ul>
</nav>
<div class="main_page">
<div class="main_text">
Hi,<br />
I,M
<span class="main_text_name">Jeon mihye</span>
<br />
Web developer
</div>
<div>
<img
class="main_image"
src="image\KakaoTalk_20230505_232004049.jpg"
alt="메인사진"
/>
</div>
</div>
</div>
<!-- 1:About me -->
<a name="About_me"></a>
<div class="About_me">
<div class="About_me_title">ABOUT ME</div>
<img
class="About_me_image"
src="image\IMG_21033.jpg"
alt="자기소개사진"
/>
<div class="About_me_text">
안녕하세요 :) 프론트엔드 개발자가 되고 싶은 전미혜입니다. <br />
처음 웹개발을 접한 뒤 매력에 푹 빠져 하루하루가 다르게 열심히 알아가는
중입니다. 빠르게 변화하는 웹 개발 트랜드를 습득하며 다양한 시도를
해보고 있습니다. 항상 사용자 입장에서 생각하고, 더 나은 방향으로 가기
위해 고민하고 또 고민합니다. 현재는 위코드에서 개발자가 되기 위한
준비를 하고 있으며 제가 좋아하는 개발을 계속해서 더 잘하고 싶습니다
</div>
<a name="Skills"></a>
</div>
<!-- 2:Skills -->
<div class="Skills">
<div class="Skills_text">SKILLS</div>
<div class="Skills_image_wrap">
<img class="Skills_images" src="image\html.PNG" alt="HTML" />
<img class="Skills_images" src="image\css.PNG" alt="CSS" />
<img class="Skills_images" src="image\js.PNG" alt="JS" />
</div>
</div>
<!-- 3.Favorite -->
<a name="Favorite"></a>
<div class="Favorite">
<div class="Favorite_text">FAVORITE</div>
<div class="Favorite_image">
<div class="야구장사진">
<img src="image\야구장.jpg" alt="야구장" />
<div class="inner-content">
<span class="title">야구장</span>
<hr />
<span class="overview"> SSG(구SK) 팬인 사람 소리 질러!!! </span>
</div>
</div>
<div class="불닭사진">
<img src="image\불닭볶음면.jpg" alt="붉닭" />
<div class="inner-content">
<span class="title">불닭볶음면</span>
<hr />
<span class="overview"> 매운 음식 좋아요 </span>
</div>
</div>
<div class="노포사진">
<img src="image\노포.jpg" alt="노포" />
<div class="inner-content">
<span class="title">노포 맛집</span>
<hr />
<span class="overview">
간판이 다 쓰러져<br />
가는 곳이라면<br /> 더 좋아요
</span>
</div>
</div>
<div class="해리포터사진">
<img src="image\해리포터.jpg" alt="해리포터" />
<div class="inner-content">
<span class="title">해리포터</span>
<hr />
<span class="overview">
해리포터와<br />
함께 컸다면 <br />당신은 MZ...
</span>
</div>
</div>
<div class="캠핑사진">
<img src="image\캠핑.jpg" alt="캠핑" />
<div class="inner-content">
<span class="title">캠핑</span>
<hr />
<span class="overview">
사실 바베큐하러<br />
가는거예요
</span>
</div>
</div>
<div class="피아노사진">
<img src="image\피아노.jpg" alt="피아노" />
<div class="inner-content">
<span class="title">피아노</span>
<hr />
<span class="overview">
특히 OST연주를<br />
좋아해요
</span>
</div>
</div>
<div class="예쁜카페사진">
<img src="image\예쁜카페.jpg" alt="예쁜카페" />
<div class="inner-content">
<span class="title">예쁜카페</span>
<hr />
<span class="overview">
커피보단<br />
카페 분위기가 좋아서<br />
찾아가요
</span>
</div>
</div>
<div class="여행사진">
<img src="image\여행.jpg" alt="여행" />
<div class="inner-content">
<span class="title">여행</span>
<hr />
<span class="overview">
지금까지 11개국을<br />
여행했어요
</span>
</div>
</div>
<div class="요리사진">
<img src="image\요리.png" alt="요리" />
<div class="inner-content">
<span class="title">요리</span>
<hr />
<span class="overview">
기회가 된다면 <br />요리 유투브를<br />
찍어보고 싶어요
</span>
</div>
</div>
</div>
</div>
<!-- 4.Guess_me -->
<a name="Guess_me"></a>
<div class="Guess_me">
<div class="Guess_me_text">GUESS ME</div>
<div class="Guess_me_quiz">
<li>🍹공차 최애 메뉴!</li>
<a href="#">
<p onClick="alert('땡! 틀렸습니다');return false;">
타로 밀크티
</p></a
>
<a href="#">
<p onClick="alert('정답입니다');return false;">망고 요구르트</p>
</a>
<li>🌍저는 어디서 태어났을까요?</li>
<a href="#">
<p onClick="alert('땡! 틀렸습니다');return false;">캐나다</p></a
>
<a href="#">
<p class="quiz_result" onClick="alert('정답입니다');return false;">
인천
</p>
</a>
<li>🙋집에서 가장 많이 하는 행동은?</li>
<a href="#">
<p onClick="alert('정답입니다');return false;">누워있기</p></a
>
<a href="#">
<p onClick="alert('땡! 틀렸습니다');return false;">홈 트레이닝</p>
</a>
<li>🕵저의 MBTI는 무엇일까요?</li>
<a href="#">
<p onClick="alert('정답입니다');return false;">ISTP</p></a
>
<a href="#">
<p onClick="alert('땡! 틀렸습니다');return false;">ENFP</p>
</a>
</div>
</div>
<!-- 5.Contact -->
<div class="Contact_text">CONTACT</div>
<a name="Contact"></a>
<div class="Contact_icon">
<div>
<a href="https://github.com/Jeonmihye">
<img src="image\github 아이콘.png" alt="깃허브" />
</a>
</div>
<div>
<a href="#">
<img
src="image\email 아이콘.png"
alt="이메일"
onClick="alert('[email protected]');return false;"
/>
</a>
</div>
<div class="instagram_icon">
<a href="https://www.instagram.com/myeee_jeon/">
<img src="image\instagram 아이콘.png" alt="인스타그램" />
</a>
</div>
<div>
<a href="#">
<img
src="image\phone 아이콘.png"
alt="전화"
onClick="alert('010-1234-5678');return false;"
/>
</a>
</div>
</div>
</div>
<script>
let observer = new IntersectionObserver((e) => {
e.forEach((박스) => {
if (박스.isIntersecting) {
박스.target.style.opacity = 1;
} else {
박스.target.style.opacity = 0;
}
});
});
let div = document.querySelectorAll("div");
console.log(div);
observer.observe(div[3]);
observer.observe(div[6]);
observer.observe(div[7]);
observer.observe(div[8]);
observer.observe(div[10]);
observer.observe(div[11]);
observer.observe(div[13]);
observer.observe(div[14]);
observer.observe(div[34]);
observer.observe(div[35]);
observer.observe(div[36]);
observer.observe(div[37]);
</script>
</body>
</html>