-
Notifications
You must be signed in to change notification settings - Fork 0
/
webCssEx2.html
246 lines (221 loc) · 11.2 KB
/
webCssEx2.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
<!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">
<meta name="description" content="CSSpractice">
<meta name="keywords" content="웹, websitepractice">
<!-- og -->
<meta property ="og:title" content="파이브스톤">
<meta property ="og:url" content="#">
<meta property ="og:image" content="./images2/og.png">
<meta property ="og:description" content="정직과 신뢰 디자인으로 함께하는 파이브스톤">
<meta property ="og:type" content="website">
<!-- favicon -->
<link rel="shortcut icon" type="image/x-icon" href="./images2/favicon.png">
<title>파이브스톤</title>
<!-- toggle icon -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@48,400,0,0" />
<!-- font -->
<link rel="stylesheet" href="./common/font.css">
<link rel="stylesheet" href="./styleEx2.css">
</head>
<body>
<header>
<h1 class="logo"><a href="#">logo</a></h1>
<div class="toggle"><a href="#"><span class="material-symbols-rounded">menu</span></a></div>
<ul class="gnb">
<li><a href="#">회사소개</a>
<ul class="sub_menu">
<li><a href="#">회사개요</a></li>
<li><a href="#">CEO인사말</a></li>
<li><a href="#">오시는길</a></li>
</ul></li>
<li><a href="#">사업분야</a>
<ul class="sub_menu">
<li><a href="#">사업분야01</a></li>
<li><a href="#">사업분야02</a></li>
<li><a href="#">사업분야03</a></li>
<li><a href="#">사업분야04</a></li>
</ul></li>
<li><a href="#">제품안내</a>
<ul class="sub_menu">
<li><a href="#">제품안내01</a></li>
<li><a href="#">제품안내02</a></li>
<li><a href="#">제품안내03</a></li>
<li><a href="#">제품안내04</a></li>
</ul></li>
<li><a href="#">커뮤니티</a>
<ul class="sub_menu">
<li><a href="#">공지사항</a></li>
<li><a href="#">홍보자료</a></li>
<li><a href="#">채용안내</a></li>
</ul></li>
<li><a href="#">고객지원</a>
<ul class="sub_menu">
<li><a href="#">1:1문의</a></li>
<li><a href="#">묻고답하기</a></li>
<li><a href="#">FAQ</a></li>
</ul></li>
</ul>
<div class="ft_icon1"><a href="#"><img src="./images2/icon-home.png" alt="홈버튼"></a></div>
<div class="ft_icon2"><a href="#"><img src="./images2/icon-contact.png" alt="지도버튼"></a></div>
<div class="top_btn"><a href="#"><img src="./images2/icon-top.png" alt="페이지상단으로이동버튼"></a></div>
</header>
<main>
<div class="slideimg">
<h2><span>CREATIVE </span><br class="hide1"><span>DESIGN</span></h2>
<p>정직과 신뢰, 디자인을 최우선으로 생각하며<br class="hide">고객과 함께 할 수 있는 든든한 파트너가 되겠습니다.</p>
</div>
<article class="art1">
<h2>Main Service</h2>
<p>정직과 신뢰, 디자인으로 함께 하는 파이브스톤</p>
<div class="contentBox">
<div class="ms">
<img src="./images2/m-ms01.jpg" alt="사진1">
<div class="txt">
<h3>회사개요</h3>
<h5>고객과 함께 꾸준히 성장한 당사의 회사개요 및 비전, 연혁 등의 내용을 간략히 소개합니다.</h5>
<a href="#" class="ghostbtn">VIEW DETAIL</a>
</div>
</div>
<div class="ms">
<img src="./images2/m-ms02.jpg" alt="사진">
<div class="txt">
<h3>사업분야</h3>
<h5>당사의 사업내역 및 앞으로 계획하고 진행할 다양한 사업계획을 자세하게 정리하였습니다.</h5>
<a href="#" class="ghostbtn">VIEW DETAIL</a>
</div>
</div>
<div class="ms">
<img src="./images2/m-ms03.jpg" alt="사진">
<div class="txt">
<h3>채용안내</h3>
<h5>고객감동을 실현하는 당사와 함께 성장할 창의적인 인재를 모집하는 공간입니다.</h5>
<a href="#" class="ghostbtn">VIEW DETAIL</a>
</div>
</div>
</div>
</article>
<article class="art2">
<div class="imgbox"></div>
<div class="txt"><h2>GOURD</h2>
<p><strong>파이브스톤은 끊임없는 열정과 최선으로 가치를 창조합니다.</strong></p>
<p>파이브스톤은 다양한 환경에 적응하며 경쟁하기 위해 모든 기술과 디자인 역량을 집중하고 고객과의 친밀한 소통과 협력을 통해 최고의 품질을 제공하고 있습니다. 오랫동안 쌓은 전문지식과 노하우를 바탕으로 고객과 함께 하겠습니다.</p>
<a href="#" class="ghostbtn">VIEW DETAIL</a></div>
</article>
<article class="art3">
<div class="imgbox1"></div>
<div class="txt">
<h2>BARLEY</h2>
<p><strong>정직과 신뢰, 디자인으로 고객과 함께 합니다.</strong></p>
<p>파이브스톤은 디자인을 통한 비지니스 네트워크를 구축하여 고객의 필요와 요구를 파악하고 기존 사업과 연계하여 시너지를 창출하며 고객 감동을 실현해 나갈 것입니다.</p>
<a href="#" class="ghostbtn">VIEW DETAIL</a></div>
<div class="imgbox2"></div>
</article>
<article class="art4">
<div class="layer">
<h2>정직과 신뢰, 디자인</h2>
<p>파이브스톤은 오랫동안 쌓은 전문지식과 노하우를 바탕으로 <br class="hide">고객과 함께 하겠습니다.</p>
<a href="#" class="ghostbtn">VIEW DETAIL</a>
</div>
</article>
<article class="art5">
<h2>KEY BUSINESS</h2>
<p>정직과 신뢰, 디자인으로 함께 하는 파이브스톤</p>
<div class="contentBox">
<div class="key">
<img src="./images2/m-mb01.jpg" alt="사진1">
<div class="txt">
<h3>사업분야01</h3>
<h5>고객의 필요와 사업환경에 따라 맞춤형 디자인으로 보다 큰 감동을 드립니다.</h5>
</div>
</div>
<div class="key">
<img src="./images2/m-mb02.jpg" alt="사진">
<div class="txt">
<h3>사업분야02</h3>
<h5>고객의 필요와 사업환경에 따라 맞춤형 디자인으로 보다 큰 감동을 드립니다.</h5>
</div>
</div>
<div class="key">
<img src="./images2/m-mb03.jpg" alt="사진">
<div class="txt">
<h3>사업분야03</h3>
<h5>고객의 필요와 사업환경에 따라 맞춤형 디자인으로 보다 큰 감동을 드립니다.</h5>
</div>
</div>
<div class="key">
<img src="./images2/m-mb04.jpg" alt="사진">
<div class="txt">
<h3>사업분야04</h3>
<h5>고객의 필요와 사업환경에 따라 맞춤형 디자인으로 보다 큰 감동을 드립니다.</h5>
</div>
</div>
</div>
</article>
<article class ="art6">
<div class="contentBox">
<div class="view">
<a href="#"><img src="./images2/m-us01.png" alt="공지아이콘"></a>
<div class="txt">
<h3>NOTICE</h3>
<h5>고객과 함께 꾸준히 성장한 당사의 회사개요 및 비전, 연혁 등의 내용을 소개합니다.</h5>
<a href="#" class="ghostbtnRound">VIEW</a>
</div>
</div>
<div class="view">
<a href="#"><img src="./images2/m-us02.png" alt="Q&A아이콘"></a>
<div class="txt">
<h3>Q&A</h3>
<h5>문의 및 궁금한 사항을 남겨주시면 친절하고 빠르게 정성껏 답변드리겠습니다.</h5>
<a href="#" class="ghostbtnRound">VIEW</a>
</div>
</div>
<div class="view">
<a href="#"><img src="./images2/m-us03.png" alt="Q&A아이콘"></a>
<div class="txt">
<h3>MEDIA</h3>
<h5>각종 미디어에 소개된 영상 및 당사의 홍보자료를 보실 수 있는 공간입니다.</h5>
<a href="#" class="ghostbtnRound">VIEW</a>
</div>
</div>
</div>
</article>
</main>
<footer>
<a href="#"><img src="./images2/logo-f.png" alt="logo"></a>
<div class="txt">
<ul class="policy">
<li><a href="#">개인정보취급방침</a></li>
<li><a href="#">이메일 무단수집거부</a> <img src="./images2/ft_line.png" alt="구분선"></li>
<li><a href="#">묻고답하기</a> <img src="./images2/ft_line.png" alt="구분선"></li>
</ul>
<ul class="sns">
<li><a href="#"><img src="./images2/mf-icon01.png" alt=""></a></li>
<li><a href="#"><img src="./images2/mf-icon02.png" alt=""></a></li>
<li><a href="#"><img src="./images2/mf-icon03.png" alt=""></a></li>
<li><a href="#"><img src="./images2/mf-icon04.png" alt=""></a></li>
</ul>
<ul class="address">
<li>회사 : 파이브스톤</li>
<li>주소 : 경기도 고양시 덕양구 삼송로 193번길 28-3 하준빌딩 401호 <img src="./images2/ft_line.png" alt="구분선"></li>
<li>사업자등록번호 : 780-42-00047 <img src="./images2/ft_line.png" alt="구분선"></li>
</ul>
<ul class="address">
<li>TEL : 010-2709-0828</li>
<li class="last">EMAIL : fivestone55@daum.net <img src="./images2/ft_line.png" alt="구분선"></li>
</ul>
<p>COPYRIGHT © 2022 FIVESTONE. ALL RIGHT RESERVED</p>
</div>
</footer>
<script>
const gnb = document.querySelector('header .gnb');
const toggleBtn = document.querySelector('header .toggle');
toggleBtn.addEventListener('click', () => {
gnb.classList.toggle('active');
})
</script>
</body>
</html>