-
Notifications
You must be signed in to change notification settings - Fork 0
/
index_copy.html
507 lines (462 loc) · 23.9 KB
/
index_copy.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
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
<!DOCTYPE html>
<html lang="ko">
<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">
<title>사이트 만들기1</title>
<!-- SEO -->
<meta name="author" content="Youcodein">
<meta name="description" content="사이트 만들기 튜토리얼입니다.">
<meta name="keyword" content="사이트, 만들기, 튜토리얼, Youcodein">
<meta name="robots" content="all">
<!-- CSS -->
<link rel="stylesheet" href="assets/css/font.css">
<link rel="stylesheet" href="assets/css/reset.css">
<link rel="stylesheet" href="assets/css/common.css">
<!-- CSS(섹션별) -->
<link rel="stylesheet" href="assets/css/header.css">
<link rel="stylesheet" href="assets/css/slider.css">
<link rel="stylesheet" href="assets/css/image.css">
<link rel="stylesheet" href="assets/css/imgText.css">
<link rel="stylesheet" href="assets/css/card.css">
<link rel="stylesheet" href="assets/css/banner.css">
<link rel="stylesheet" href="assets/css/text.css">
<link rel="stylesheet" href="assets/css/footer.css">
<!-- CSS -->
<link rel="stylesheet" href="assets/css/swiper.css">
<style>
/* #headerType {
display: none;
} */
/* #sliderType {display: none;} */
/* #imageType {display: none;} */
/* #imgTextType {display: none;} */
/* #cardType {display: none;} */
/* #bannerType {display: none;} */
/* #textType {display: none;} */
/* #footerType {display: none;} */
.header__menu li.active a {
background-color: #f1f1f1;
border-radius: 10px;
box-sizing: content-box;
}
</style>
</head>
<body>
<div id="skip">
<a href="#headerType">헤더 영역 바로가기</a>
<a href="#sliderType">슬라이드 영역 바로가기</a>
<a href="#imageType">이미지 영역 바로가기</a>
<a href="#imgTextType">이미지/텍스트 영역 바로가기</a>
<a href="#cardType">카드 영역 바로가기</a>
<a href="#bannerType">배너 영역 바로가기</a>
<a href="#textType">텍스트 영역 바로가기</a>
<a href="#footerType">푸터 영역 바로가기</a>
</div>
<!-- skip -->
<header id="headerType" class="header__wrap nexon content__item">
<div class="header__inner">
<div class="header__logo">
<a href="#">Diary <em>deco</em></a>
</div>
<div class="header__menu">
<ul>
<li><a href="#sliderType">Hot!</a></li>
<li><a href="#imageType">Why?</a></li>
<li><a href="#imgTextType">for NEWBIE</a></li>
<li><a href="#cardType">How?</a></li>
<li><a href="#bannerType">Ask</a></li>
<li><a href="#textType">My Tip</a></li>
</ul>
</div>
<div class="header__member">
<a href="#">로그인</a>
</div>
<div class="header__ham">
<span></span>
<span></span>
<span></span>
</div>
</div>
</header>
<!-- headerType -->
<main id="mainType">
<section id="sliderType" class="slider__wrap nexon scroll">
<h2 class="ir">Hot Issue</h2>
<div class="slider__inner">
<!-- <div class="slider">
<div class="slider__img">
<div class="desc">
<span>Dairy</span>
<h3>Art of Dairy</h3>
<p>
다이어리는 이제 기록을 넘어선 문화 예술이 되었습니다.<br>
다이어리 꾸미기의 매력에 빠져보세요
</p>
<div class="btn">
<a href="#">자세히보기</a>
<a href="#" class="black">사이트보기</a>
</div>
</div>
</div>
<div class="slider__arrow">
<a href="#" class="left"><span class="ir">이전 이미지</span></a>
<a href="#" class="right"><span class="ir">다음 이미지</span></a>
</div>
<div class="slider__dot">
<a href="#" class="dot active"><span class="ir">1</span></a>
<a href="#" class="dot"><span class="ir">2</span></a>
<a href="#" class="dot"><span class="ir">3</span></a>
<a href="#" class="play"><span class="ir">플레이</span></a>
<a href="#" class="stop"><span class="ir">정지</span></a>
</div>
</div> -->
<div class="swiper mySwiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="desc">
<span>Dairy</span>
<h3>Art of Dairy</h3>
<p>
다이어리는 이제 기록을 넘어선 문화 예술이 되었습니다.<br>
다이어리 꾸미기의 매력에 빠져보세요
</p>
<div class="btn">
<a href="#">자세히보기</a>
<a href="#" class="black">사이트보기</a>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="desc">
<span>Dairy</span>
<h3>Art of Dairy</h3>
<p>
다이어리는 이제 기록을 넘어선 문화 예술이 되었습니다.<br>
다이어리 꾸미기의 매력에 빠져보세요
</p>
<div class="btn">
<a href="#">자세히보기</a>
<a href="#" class="black">사이트보기</a>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="desc">
<span>Dairy</span>
<h3>Art of Dairy</h3>
<p>
다이어리는 이제 기록을 넘어선 문화 예술이 되었습니다.<br>
다이어리 꾸미기의 매력에 빠져보세요
</p>
<div class="btn">
<a href="#">자세히보기</a>
<a href="#" class="black">사이트보기</a>
</div>
</div>
</div>
</div>
<div class="swiper-pagination"></div>
<div class="swiper-button">
<div class="swiper-button-play"><span class="ir">play</span></div>
<div class="swiper-button-stop"><span class="ir">stop</span></div>
</div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
</div>
</section>
<!-- sliderType -->
<section id="imageType" class="image__wrap nexon section scroll">
<h2>Why?</h2>
<p>왜 사람들은 "다이어리 꾸미기" 에 열광하는가?</p>
<div class="image__inner container">
<article class="image img1">
<h3 class="image__title">Remember your Memories</h3>
<p class="image__desc">기억으로 남기는 것도 좋은 방법이지만 기록으로 남기지 않은 기억은 금방 휘발되는 법입니다. 멋진 기억들을 기록하고 이후에 펼쳐보면 많은
감정들을 알려주죠.</p>
<a class="image__btn" href="/" title="자세히 보기">자세히 보기</a>
</article>
<article class="image img2">
<h3 class="image__title">See my Feelings</h3>
<p class="image__desc">당신의 감정을 시각적으로 표현하고 싶지 않으신가요? 스티커를 붙이세요. 그림을 그리세요. 당신의 추억을 장식하세요. 적절한 장식은 감정을
실감나게 표현해줍니다. 마음에 드는 스티커나 그림으로 예쁘게 장식해보세요</p>
<a class="image__btn yellow" href="/" title="자세히 보기">자세히 보기</a>
</article>
</div>
</section>
<!-- imageType -->
<section id="imgTextType" class="imgText__wrap nexon section gray scroll">
<h2 class="blind">유용한 사이트 살펴보기</h2>
<div class="imgtext__inner container">
<div class="imgText__txt">
<span>초보 다.꾸인을 위해</span>
<h3>유용한 사이트 살펴보기</h3>
<p>다이어리 꾸미기를 처음 할 때 입문용으로 유용한 사이트입니다.</p>
<ul>
<li><a href="/">튜토리얼 사이트</a></li>
<li><a href="/">레퍼런스 사이트</a></li>
<li><a href="/">디지털 다이어리 스티커</a></li>
<li><a href="/">유용한 블로그 모음</a></li>
<li><a href="/">다꾸 자랑 사진들</a></li>
<li><a href="/">Youtube 사이트</a></li>
</ul>
</div>
<div class="imgText__img img1">
<a href="/">레퍼런스 사이트</a>
</div>
<div class="imgText__img img2">
<a href="/" class="blue">튜토리얼 사이트</a>
</div>
</div>
</section>
<!-- imgTextType -->
<section id="cardType" class="card__wrap nexon section scroll">
<h2>How?</h2>
<p>어떤 식으로 당신의 다이어리를 꾸밀건가요? 당신만의 멋진 다이어리를 만들어보세요!</p>
<div class="card__inner container">
<article class="card">
<figure class="card__header">
<img src="assets/img/card_bg01_01.jpg" alt="멋진 글을 적어보세요.">
</figure>
<div class="card__body">
<h3 class="tit">멋진 글을 적어보세요.</h3>
<p class="desc">어떠한 글이 멋진 글이라고 정확히 정할 수는 없습니다만 당신이 쓰는 글이라면 어떤 글이든 멋질 거예요! 연필을 들고 종이에 적어볼까요? 용기를
내세요 글을 적으세요! 당신의 마음을 적어보세요!</p>
<a class="btn" href="/">
더 자세히 보기
<span>
<svg width="65" height="8" viewBox="0 0 65 8" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M64.3536 4.35355C64.5488 4.15829 64.5488 3.84171 64.3536 3.64645L61.1716 0.464466C60.9763 0.269204 60.6597 0.269204 60.4645 0.464466C60.2692 0.659728 60.2692 0.976311 60.4645 1.17157L63.2929 4L60.4645 6.82843C60.2692 7.02369 60.2692 7.34027 60.4645 7.53553C60.6597 7.7308 60.9763 7.7308 61.1716 7.53553L64.3536 4.35355ZM0 4.5H64V3.5H0V4.5Z"
fill="black" />
</svg>
</span>
</a>
</div>
</article>
<article class="card">
<figure class="card__header">
<img src="assets/img/card_bg01_02.jpg" alt="당신의 추억을 기록하세요">
</figure>
<div class="card__body">
<h3 class="tit">당신의 추억을 기록하세요!</h3>
<p class="desc">기억으로 남기는 것도 좋은 방법이지만 기록으로 남기지 않은 기억은 금방 휘발되는 법이죠. 당신의 기억과 감정을 어딘가에 박제하세요. 훗날 당신의
추억을 읽고 기뻐할 당신의 얼굴을 상상하세요!</p>
<a class="btn" href="/">
더 자세히 보기
<span>
<svg width="65" height="8" viewBox="0 0 65 8" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M64.3536 4.35355C64.5488 4.15829 64.5488 3.84171 64.3536 3.64645L61.1716 0.464466C60.9763 0.269204 60.6597 0.269204 60.4645 0.464466C60.2692 0.659728 60.2692 0.976311 60.4645 1.17157L63.2929 4L60.4645 6.82843C60.2692 7.02369 60.2692 7.34027 60.4645 7.53553C60.6597 7.7308 60.9763 7.7308 61.1716 7.53553L64.3536 4.35355ZM0 4.5H64V3.5H0V4.5Z"
fill="black" />
</svg>
</span>
</a>
</div>
</article>
<article class="card">
<figure class="card__header">
<img src="assets/img/card_bg01_03.jpg" alt="당신의 추억을 장식하세요">
</figure>
<div class="card__body">
<h3 class="tit">당신의 추억을 장식하세요</h3>
<p class="desc">당신의 감정을 시각적으로 표현하고 싶지 않으신가요? 스티커를 붙이세요. 그림을 그리세요. 당신의 추억을 장식하세요. 적절한 장식은 감정을
실감나게
표현해줍니다. 마음에 드는 스티커나 그림으로 예쁘게 장식해보세요</p>
<a class="btn" href="/">
더 자세히 보기
<span aria-hidden="true">
<svg width="65" height="8" viewBox="0 0 65 8" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M64.3536 4.35355C64.5488 4.15829 64.5488 3.84171 64.3536 3.64645L61.1716 0.464466C60.9763 0.269204 60.6597 0.269204 60.4645 0.464466C60.2692 0.659728 60.2692 0.976311 60.4645 1.17157L63.2929 4L60.4645 6.82843C60.2692 7.02369 60.2692 7.34027 60.4645 7.53553C60.6597 7.7308 60.9763 7.7308 61.1716 7.53553L64.3536 4.35355ZM0 4.5H64V3.5H0V4.5Z"
fill="black" />
</svg>
</span>
</a>
</div>
</article>
</div>
</section>
<!-- cardType -->
<section id="bannerType" class="banner__wrap nexon content__item scroll">
<h2 class="blind">Ask</h2>
<div class="banner__inner">
<h3 class="title">Ask</h3>
<p class="desc">
궁금한 점이 있으신가요? 아래 이메일로 연락 주세요!
<a href="#" title="새 페이지 열림">D_Deco@abcde.com</a>
</p>
<span class="small">고객 센터</span>
</div>
</section>
<!-- bannerType -->
<section id="textType" class="text__wrap nexon section scroll">
<span>My Tip</span>
<h2 class="mb70">📖나만의 다이어리 꾸미기 팁!🖋</h2>
<div class="text__inner container">
<div class="text t1">
<h3 class="text__title">Only Text</h3>
<p class="text__desc">문자만의 매력이 있지요. 어떠한 기교도, 장식도 없는 텍스트만의 매력은 미니멀리즘의 아름다움을 연상합니다.</p>
<a href="/" class="text__btn">더보기</a>
</div>
<div class="text t2">
<h3 class="text__title">Handwriting</h3>
<p class="text__desc">글자만으론 너무 밋밋하신가요? 그렇다면 글씨에 예술적인 감각을 더해보면 어떨까요? 포인트가 될 거예요!</p>
<a href="/" class="text__btn">더보기</a>
</div>
<div class="text t3">
<h3 class="text__title">Color</h3>
<p class="text__desc">무채색의 다이어리도 멋지지만 당신의 기억에 색을 칠해보는건 어떠세요? 당신의 감정을 색깔로 표현해보세요!</p>
<a href="/" class="text__btn">더보기</a>
</div>
<div class="text t4">
<h3 class="text__title">Hand Drawing</h3>
<p class="text__desc">글만으로는 표현하기 어려울 때, 그림을 더해보세요! 당신도 저도 무엇인지 이해하기 쉬워요! 물론, 이해하기 어려운 그림도 매력적이죠!</p>
<a href="/" class="text__btn">더보기</a>
</div>
<div class="text t5">
<h3 class="text__title">Sticker</h3>
<p class="text__desc">그림에 자신이 없다면 이미 만들어진 그림을 활용해봐요. 그래요, 바로 스티커를 이용해보세요!</p>
<a href="/" class="text__btn">더보기</a>
</div>
<div class="text t6">
<h3 class="text__title">Just WRITING!</h3>
<p class="text__desc">앞의 팁은 모두 잊어버리세요! 자신다운 다이어리를 원하시나요? 그럼 겁먹지 말고 일단 "쓰세요!"</p>
<a href="/" class="text__btn">더보기</a>
</div>
</div>
</section>
<!-- textType -->
</main>
<!-- mainType -->
<footer id="footerType" class="footer__wrap nexon section gray content__item scroll">
<h2 class="blind">푸터 영역</h2>
<div class="footer__inner container">
<div class="footer__menu">
<div>
<h3>사이트</h3>
<ul>
<li><a href="/">웹표준 사이트</a></li>
<li><a href="/">반응형 사이트</a></li>
<li><a href="/">페럴랙스 사이트</a></li>
<li><a href="/">포트폴리오 사이트</a></li>
</ul>
</div>
<div>
<h3>헤더 영역</h3>
<ul>
<li><a href="#">메뉴 유형01</a></li>
<li><a href="#">메뉴 유형02</a></li>
</ul>
</div>
<div>
<h3>슬라이드 영역</h3>
<ul>
<li><a href="#">슬라이드 유형01</a></li>
<li><a href="#">슬라이드 유형02</a></li>
</ul>
</div>
<div>
<h3>이미지 영역</h3>
<ul>
<li><a href="#">이미지 유형 01</a></li>
<li><a href="#">이미지 유형 02</a></li>
<li><a href="#">이미지 / 텍스트 유형 01</a></li>
<li><a href="#">이미지 / 텍스트 유형 02</a></li>
<li><a href="#">텍스트 유형 01</a></li>
</ul>
</div>
<div>
<h3>컨텐츠 영역</h3>
<ul>
<li><a href="#">카드 유형 01</a></li>
<li><a href="#">카드 유형 02</a></li>
<li><a href="#">카드 유형 03</a></li>
</ul>
</div>
<div>
<h3>푸터 영역</h3>
<ul>
<li><a href="#">푸터 메뉴 유형 01</a></li>
<li><a href="#">푸터 컨택트 유형 02</a></li>
<li><a href="#">푸터 이메일 유형 03</a></li>
</ul>
</div>
</div>
<div class="footer__right">
2022 D_Deco. Dairy Decoraion<br>
All rights reserved.
</div>
</div>
</footer>
<!-- footerType -->
<script src="assets/js/swiper-bundle.min.js"></script>
<!-- Initialize Swiper -->
<script>
var swiper = new Swiper(".mySwiper", {
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
autoplay: {
delay: 2000,
disableOnInteraction: false,
},
pagination: {
el: '.swiper-pagination',
type: 'bullets',
clickable: true,
},
});
const btnStop = document.querySelector(".swiper-button-stop");
const btnStart = document.querySelector(".swiper-button-stop");
const btnHam = document.querySelector(".header__ham");
const btnMenu = document.querySelector(".header__menu");
const btnMenuList = btnMenu.querySelectorAll("ul li a");
btnStart.style.display = "none";
document.querySelector(".swiper-button-stop").addEventListener("click", () => {
swiper.autoplay.stop();
btnStart.style.display = "block";
btnStop.style.display = "none";
});
document.querySelector(".swiper-button-play").addEventListener("click", () => {
swiper.autoplay.start();
btnStart.style.display = "none";
btnStop.style.display = "block";
});
btnHam.addEventListener("click", () => {
btnHam.classList.toggle("active");
btnMenu.classList.toggle("active");
document.body.classList.toggle("fixed");
})
btnMenuList.forEach((List)=>{
List.addEventListener("click", ()=>{
btnMenu.classList.remove("active");
btnHam.classList.remove("active");
document.body.classList.remove("fixed");
})
})
window.addEventListener("resize", () => {
let width = window.innerWidth;
if (width > 1300) {
document.body.classList.remove("fixed");
btnMenu.classList.remove("active");
btnHam.classList.remove("active");
}
});
document.querySelectorAll("a").forEach(li => {
li.addEventListener("click", (e) => {
e.preventDefault();
document.querySelector(li.getAttribute("href")).scrollIntoView({
behavior:"smooth"
});
});
});
</script>
</body>
</html>