-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathfavorite.html
302 lines (268 loc) · 11.3 KB
/
favorite.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="css/styles.css" />
<script
src="https://kit.fontawesome.com/3f5effa4ba.js"
crossorigin="anonymous"
></script>
<title>About me</title>
</head>
<body class="favorite-body">
<input type="checkbox" id="menuicon-home">
<label for="menuicon-home">
<span></span>
<span></span>
<span></span>
</label>
<!-- <i class="fas fa-times"></i> -->
<nav class="menu">
<ul class="menu__title">
<div class="menu__title-contents">목록</div>
</ul>
<ul class="menu__list">
<li class="menu__list-item">
<a href="index.html" class="menu__list-link">
<i class=""></i>
<span class="menu__list-title">홈</span>
</a>
</li>
<li class="menu__list-item">
<a href="developer.html" class="menu__list-link">
<i class=""></i>
<span class="menu__list-title">셀프 인터뷰</span>
</a>
</li>
<li class="menu__list-item">
<a href="favorite.html" class="menu__list-link">
<i class=""></i>
<span class="menu__list-title">요즘 관심사</span>
</a>
</li>
<!-- <li class="menu__list-item">
<a href="dream.html" class="menu__list-link">
<i class=""></i>
<span class="menu__list-title">dream</span>
</a>
</li> -->
</ul>
</div>
</nav>
<header class="header__favorite">
<div class="header__title-container-favorite">
<a href="#first">
<span class="header__favorite-title">1</span></a>
<a href="#second">
<span class="header__favorite-title">2</span></a>
<a href="#third"><span class="header__favorite-title">3</span></a>
</div>
<div class="economy-text">ECONOMY 🏠💰📖</div>
</header>
<main class="main__favorite">
<div class="favorite__economy-container" id="first">
<div class="economy__contents-container">
<img src="images/economy1.jpeg" alt="economy">
<h5 class="economy-subtitle-01">#부동산</h5>
<h5 class="economy-subtitle-02"><p align="center">요즘 사람들은 어떤 집에서 살고 싶을까요? <br>다양한 주거형태에 관심이 많아요.</p></h5>
<div class="economy-tags">
<div class="economy-tag">#도시의승리</div>
<div class="economy-tag">#호갱노노</div>
<div class="economy-tag">#아파트</div>
<div class="economy-tag">#단독주택</div>
<div class="economy-tag">#살아보고 싶은 곳</div>
<div class="economy-tag">#제주도</div>
</div>
</div>
<div class="economy__contents-container">
<img src="images/economy2.jpeg" alt="economy">
<h5 class="economy-subtitle-01">#주식</h5>
<h5 class="economy-subtitle-02"><p align="center">주식 투자는 아직이에요.<br> 하지만 세계 경제의 핵심은 주식시장!<br>늘 관심 갖고 있어요.</p></h5>
<div class="economy-tags">
<div class="economy-tag">#코로나백신</div>
<div class="economy-tag">#미국vs중국</div>
<div class="economy-tag">#5G</div>
<div class="economy-tag">#대체육</div>
<div class="economy-tag">#워런버핏</div>
<div class="economy-tag">#필립피셔</div>
</div>
</div>
<div class="economy__contents-container">
<img src="images/economy3.jpg" alt="economy">
<h5 class="economy-subtitle-01">#인문학</h5>
<h5 class="economy-subtitle-02"><p align="center">우리가 사는 세상의 뼈대 인문학.<br>최근에 흥미를 갖기 시작했어요. </p></h5>
<div class="economy-tags">
<div class="economy-tag">#거인의어깨</div>
<div class="economy-tag">#니체</div>
<div class="economy-tag">#애덤스미스</div>
<div class="economy-tag">#소크라테스</div>
<div class="economy-tag">#논어</div>
</div>
</div>
</div>
<div class="favorite__travel-container" id="second">
<div class="travel-text">TRAVEL ✈️🚘🏄🏻♂️</div>
<div class="travel-content">
<div class="travel-images">
<div class="travel-image10">
<img src="images/travelimages/travel10.jpeg" alt="travel">
</div>
<div class="travel-image9">
<img src="images/travelimages/travel9.jpeg" alt="travel">
</div>
<div class="travel-image8">
<img src="images/travelimages/travel8.jpeg" alt="travel">
</div>
<div class="travel-image7">
<img src="images/travelimages/travel7.jpeg" alt="travel">
</div>
<div class="travel-image6">
<img src="images/travelimages/travel6.jpeg" alt="travel">
</div>
<div class="travel-image5">
<img src="images/travelimages/travel5.jpeg" alt="travel">
</div>
<div class="travel-image4">
<img src="images/travelimages/travel4.jpeg" alt="travel">
</div>
<div class="travel-image3">
<img src="images/travelimages/travel3.jpeg" alt="travel">
</div>
<div class="travel-image2">
<img src="images/travelimages/travel2.jpeg" alt="travel">
</div>
<div class="travel-image1">
<img src="images/travelimages/travel1.jpeg" alt="travel">
</div>
</div>
<div class="travel__content-text">
<div class="travel__content-text1">여행을 좋아해요.</div>
<div class="travel__content-text1">바다와 맛있는 맥주가 있는 곳이라면 어디든 좋아요.</div>
</div>
</div>
</div>
<div class="favorite__book-container" id="third">
<div class="book-subtitle-container">
<h4 class="book-subtitle">MY BEST BOOKS 📚📚</h4>
</div>
<div class="booklist">
<div class="book1">
<img src="images/book1.png" alt="book">
<span class="book-title title">데미안</span>
<span class="book-author author">헤르만 헤세</span>
<div class="popup">
<input type="checkbox" id="info01">
<label for="info01"></label>
<div class="popup__contents">새는 알에서 나오려고 투쟁한다. 알은 세계이다. 태어나려는 자는 하나의 세계를 깨뜨려야 한다. 새는 신에게로 날아간다. 신의 이름은 압락사스. <br>
<label for="info01">CLOSE</label>
</div>
</div>
</div>
<div class="book2">
<img src="images/book2.jpeg" alt="book">
<span class="book-title title">레버리지</span>
<span class="book-author author">롭 무어</span>
<div class="popup">
<input type="checkbox" id="info02">
<label for="info02"></label>
<div class="popup__contents">각 개인은 다른 개인을 섬긴다. 한쪽은 레버리지 하고 다른 한쪽은 레버리지 당한다.<br>
<label for="info02">CLOSE</label>
</div>
</div>
</div>
<div class="book3">
<img src="images/book3.jpeg" alt="book">
<span class="book-title title"> 우아하고 호쾌한 여자 축구</span>
<span class="book-author author">김혼비</span>
<div class="popup">
<input type="checkbox" id="info03">
<label for="info03"></label>
<div class="popup__contents">다들 정말 못 말리겠다. 아마추어 여자 축구가 있는지 없는지, 여자들이 축구를 좋아하는지 아닌지에 전혀 관심 없는 세상의 곳곳에서 축구에 푹 빠진 여자들이 축구를 시작하고, 축구를 시작하게 끌어주고, ..중략.. 축구를 좀 더 잘해보겠다고 누가 시키지도 않는데 매일매일 연습을 한다. <br>
<label for="info03">CLOSE</label>
</div>
</div>
</div>
<div class="book4">
<img src="images/book4.png" alt="book">
<span class="book-title title">자기 앞의 생</span>
<span class="book-author author">에밀 아자르</span>
<div class="popup">
<input type="checkbox" id="info04">
<label for="info04"></label>
<div class="popup__contents">거꾸로 된 세상, 이건 정말 나의 빌어먹을 인생 중에서 내가 본 가장 멋진 일이었다. 나는 튼튼한 다리로 서 있는 생기 있는 로자 아줌마를 떠올렸다. 나는 좀더 시간을 거슬러올라 아줌마를 아름다운 처녀로 만들었다. 그러자 눈물이 났다. <br>
<label for="info04">CLOSE</label>
</div>
</div>
</div>
<div class="book5">
<img src="images/book5.jpeg" alt="book">
<span class="book-title title">자기 인생의 철학자들</span>
<span class="book-author author">김지수 인터뷰집</span>
<div class="popup">
<input type="checkbox" id="info05">
<label for="info05"></label>
<div class="popup__contents">아름다움이 뭘까요? 진실할 수 없어도 진실해지려는 노력, 책임을 자신에게 돌리는 노력, 그게 사람이 할 수 있는 것의 다가 아닐까요?<br>
<label for="info05">CLOSE</label>
</div>
</div>
</div>
<div class="book6">
<img src="images/book6.jpeg" alt="book">
<span class="book-title title">지지 않는다는 말</span>
<span class="book-author author">김연수</span>
<div class="popup">
<input type="checkbox" id="info06">
<label for="info06"></label>
<div class="popup__contents">삶의 수많은 일들을 무감각하게 여기는 사람은 순식간에 노인이 될 것이다. 기뻐하고, 슬퍼하라. 울고 웃으로. 행복해하고 괴로워하라.<br>
<label for="info06">CLOSE</label>
</div>
</div>
</div>
<div class="book7">
<img src="images/book7.jpeg" alt="book">
<span class="book-title title">창업가의 일</span>
<span class="book-author author">임정민</span>
<div class="popup">
<input type="checkbox" id="info07">
<label for="info07"></label>
<div class="popup__contents">시도를 많이 해야 성공이 나온다. 수십 번 실패해도 상관없다. 스타트업에 필요한 건 단 한번의 성공이다. <br>
<label for="info07">CLOSE</label>
</div>
</div>
</div>
<div class="book8">
<img src="images/book8.jpg" alt="book">
<span class="book-title title">파도가 바다의 일이라면</span>
<span class="book-author author">김연수</span>
<div class="popup">
<input type="checkbox" id="info08">
<label for="info08"></label>
<div class="popup__contents">파도가 바다의 일이라면, 너를 생각하는 건 나의 일이었다. 너와 헤어진 뒤로 나는 단 하루도 너를 잊은 적이 없었다. <br>
<label for="info08">CLOSE</label>
</div>
</div>
</div>
</div>
</div>
</main>
<footer class="footer">
<div class="footer-container">
<div class="footer__contents">
<a href="mailto:[email protected]" target="black">
<img src="images/gmail.png" alt="gmail" >
</a>
<a href="https://github.com/sik-kim" target="black">
<img src="images/github.svg" alt="github" >
</a>
<a href="https://velog.io/@sik-kim" target="black">
<img src="images/velog.jpg" class="velog-img" alt="velog" >
</a>
<a href="https://www.instagram.com/salvame21/" target="black">
<img src="images/instagram.png" alt="instagram" >
</a>
</div>
</div>
</footer>
</body>
</html>