-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
165 lines (165 loc) · 7.94 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
<!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">
<title>HODU</title>
<link href='//spoqa.github.io/spoqa-han-sans/css/SpoqaHanSansNeo.css' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="./src/style/reset.css">
<link rel="stylesheet" href="./src/style/style.css">
</head>
<body>
<div id="root">
<header class="main-header">
<section class="header-cont">
<div class="wrap">
<h1 class="main-title">
<a href="index.html">
<img src="src/img/logo.svg" alt="hodu">
</a>
</h1>
<nav class="main-nav">
<ul class="menu">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Support</a></li>
</ul>
<button type="button" class="download-btn">Download</button>
<button type="button" class="menu-close-btn">
<strong class="ir">메뉴 닫기 버튼</strong>
</button>
</nav>
<button type="button" class="menu-open-btn">
<strong class="ir">메뉴 열기 버튼</strong>
</button>
</div>
</section>
<section class="banner">
<h2 class="ir">배너</h2>
<div class="banner-info">
<p class="banner-tit">
Lorem Ipsum is simply<span class="br-style"></span>dummy text<span class="br-style"></span>of the printing and
</p>
<p class="banner-txt">
Lorem Ipsum is simply dummy text<br>of the printing and typesetting industry.<span class="br-style"></span>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown
</p>
<button type="button" class="download-btn">Download</button>
</div>
<img class="banner-img" src="src/img/box-cat.png" alt="">
</section>
</header>
<main class="main-contents">
<section class="best-pic">
<h2 class="ir">베스트컷</h2>
<div class="img_wrap">
<img src="src/img/img_4.jpg" alt="베스트 이미지">
</div>
<div class="best-pic-info">
<p class="best-pic-tit">
Lorem Ipsum is simply dummy text of the printing
and dummy text
</p>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</p>
</div>
</section>
<section class="gallery">
<h2 class="ir">갤러리</h2>
<h3 class="gallery-tit">dummy text of the printing and dummy</h3>
<p class="gallery-txt">
Lorem Ipsum is simply <strong>dummy text</strong> of the printing and typesetting industry. <span class="br-style"></span>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,<br>when an unknown
</p>
<section class="img-list-wrap">
<h3 class="ir">이미지 슬라이더</h3>
<ul class="img-list">
<li>
<img src="src/img/img_1.jpg" alt="이미지 슬라이드1">
</li>
<li>
<img src="src/img/img_2.jpg" alt="이미지 슬라이드2">
</li>
<li>
<img src="src/img/img_3.jpg" alt="이미지 슬라이드3">
</li>
</ul>
</section>
<section class="learn-more">
<h3 class="ir">learn more</h3>
<p class="learn-more-txt">
Lorem Ipsum is simply dummy text of the<br>printing and typesetting industry.<span class="br-style"></span>Lorem Ipsum has been the industry's<br>standard dummy text ever since the 1500s,<br>when an unknown<span class="br-style"></span>Ipsum is simply dummy text of the printing and typesetting industry.
</p>
<button type="button" class="learn-more-btn">Learn More</button>
</section>
</section>
<section class="subscribe">
<h2 class="ir">subscribe</h2>
<section class="subscribe-info">
<h3 class="subscribe-tit">Subscribe to our Blog post</h3>
<p class="subscribe-txt">
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text
</p>
</section>
<form class="email-form">
<label for="emailAddr" class="ir">이메일 입력창</label>
<input id="emailAddr" type="email" class="email-input" placeholder="Enter your e-mail address">
<button type="button" class="subscribe-btn">Subscribe</button>
</form>
</section>
<div class="scroll-top">
<button type="button">
<strong class="ir">최상위로 이동합니다.</strong>
<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12.35 25.6833L20 18.0499L27.65 25.6833L30 23.3333L20 13.3333L10 23.3333L12.35 25.6833Z" fill="#C4C4C4" class="scroll-top-img"/>
</svg>
</button>
</div>
</main>
<footer class="main-footer">
<a href="index.html" class="footer-logo">
<img src="src/img/logo.svg" alt="hodu">
</a>
<nav class="footer-menu">
<ul>
<li><a href="#">About</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Support</a></li>
<li><a href="#">Terms of Use</a></li>
</ul>
</nav>
<ul class="sns">
<li class="blog">
<strong class="ir">blog</strong>
<a href="#"></a>
</li>
<li class="instagram">
<strong class="ir">instagram</strong>
<a href="#"></a>
</li>
<li class="facebook">
<strong class="ir">facebook</strong>
<a href="#"></a>
</li>
<li class="youtube">
<strong class="ir">youtube</strong>
<a href="#"></a>
</li>
</ul>
</footer>
<!-- Subscribe 감사 인사 모달창 : subscribe 버튼을 누르면 나옵니다. -->
<section class="modal subscribe-modal">
<h2 class="ir">subscribe modal</h2>
<div class="subscribe-modal-wrap">
<img src="src/img/cat-subscribe.png" alt="" class="subscribe-cat">
<strong>Thank you!</strong>
<p>Lorem Ipsum is simply dummy <span class="br-style"></span>text of the printing industry.</p>
<button type="button" class="subscribe-modal-close">OK! I Love HODU</button>
</div>
</section>
<!-- // subscribe 감사 인사 모달창 -->
</div>
<script src="src/js/index.js"></script>
</body>
</html>