forked from haujin99/summer-circle
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
146 lines (142 loc) · 6.41 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
<!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>썸머써클</title>
<!-- 파비콘(favorite icon) 설정 -->
<link rel="icon" href="./favicon.ico" />
<!-- 각 브라우저의 기본 스타일을 초기화 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reset-css@5.0.1/reset.min.css">
<!-- 구글 폰트: main.css보다 먼저 불러올 수 있도록 한다 -->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;700&display=swap" rel="stylesheet">
<!-- Google material Icon -->
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<!-- main.css -->
<link rel="stylesheet" href="./css/main.css">
<script defer src="./js/main.js"></script>
</head>
<body>
<!-- HEADER -->
<header>
<div class="wrapper">
<!-- 헤더 세번째 섹션 -->
<div class="header--tertiary">
<!-- 실습 5. 지도 다운로드 및 멤버십 가입 안내 -->
<ul>
<li class="map-download">
지도 다운로드
<span class="material-icons">
file_download
</span>
</li>
<li class="membership">
2021 썸머써클 멤버십 가입하기
</li>
</ul>
<!-- 실습 6. 배경음악 플레이어 -->
<div class="music__box">
<div class="music__info">
<p id="song__info"></p>
</div>
<span id="headset--on" class="material-icons">
headset
</span>
<span id="headset--off" class="material-icons">
headset_off
</span>
</div>
<div class="lang">en</div>
</div>
<div class="main">
<!-- 실습 1. 로고 이미지 -->
<!-- 클릭하면 홈으로 이동하는 링크가 걸려있습니다 -->
<a href="/" class="logo">
<img src="./images/logo.png" alt="로고">
</a>
<div class="menu">
<!-- 헤더 두번째 섹션 -->
<div class="header--secondary">
<!-- 실습 4. 서브 메뉴 -->
<div class="festival__date">
2021.06.18 금 ~ 06.20 일
</div>
<ul class="sub">
<li>대하여</li>
<li>스폰서</li>
<li>자원활동</li>
<li>기부</li>
</ul>
</div>
<!-- 헤더 첫번째 섹션 -->
<div class="header--primary">
<!-- 실습 2. 네비게이션 메뉴 -->
<ul class="main">
<li class="item">
<div class="item__title">
<div class="item__name">프로그램</div>
<span class="material-icons">
keyboard_arrow_down
</span>
</div>
<div class="item__contents">
<ul>
<li>바람맞는 공연</li>
<li>무해한 플리마켓</li>
<li>파도타는 파티</li>
<li>고요한 영화관</li>
<li>간지러운 워크샵</li>
</ul>
</div>
</li>
<li class="item">
<div class="item__title">
<div class="item__name">일정</div>
<span class="material-icons">
keyboard_arrow_down
</span>
</div>
<div class="item__contents">
<ul>
<li>18 금요일</li>
<li>19 토요일</li>
<li>20 일요일</li>
</ul>
</div>
</li>
<li class="item">
<div class="item__title">
<div class="item__name">정보</div>
<span class="material-icons">
keyboard_arrow_down
</span>
</div>
<div class="item__contents">
<ul>
<li>이동거리</li>
<li>먹거리</li>
<li>마실거리</li>
<li>누울자리</li>
</ul>
</div>
</li>
</ul>
<!-- 실습 3. 검색창 -->
<div class="search">
<input id="search__box" placeholder="새소년과 긴 꿈" />
<span class="material-icons">
search
</span>
</div>
</div>
</div>
</div>
</div>
</header>
</body>
</html>