-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
444 lines (404 loc) · 19.4 KB
/
index.html
File metadata and controls
444 lines (404 loc) · 19.4 KB
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
<!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, shrink-to-fit=no" />
<meta name="keywords" content="ARGOS, 충남대, 정보보안, 동아리, CNU" />
<meta name="description" content="충남대학교 정보보안 동아리 ARGOS - Hack the world for everyone" />
<meta name="author" content="ARGOS" />
<link rel="shortcut icon" href="https://cdn.jsdelivr.net/gh/4RG0S/2024-Spring-Homeless@main/images/logo_circle.png" type="image/png">
<title>ARGOS</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" />
<link href="css/font-awesome.min.css" rel="stylesheet" />
<link href="css/style.css" rel="stylesheet" />
<link href="css/responsive.css" rel="stylesheet" />
</head>
<body>
<div class="hero_area">
<div class="hero_bg_box">
<div class="bg_img_box">
<img src="images/hero-bg.png" alt="ARGOS 히어로 배경">
</div>
</div>
<header class="header_section">
<div class="container-fluid">
<nav class="navbar navbar-expand-lg custom_nav-container ">
<a class="navbar-brand" href="index.html">
<span>ARGOS</span>
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class=""> </span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ">
<li class="nav-item active">
<a class="nav-link" href="index.html">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="education.html">동아리 활동</a>
<ul>
<li><a href="seminar.html" class="nav-link">정기 세미나</a></li>
<li><a href="hack.html" class="nav-link">해킹 시연회</a></li>
<li><a href="hackathon.html" class="nav-link">SOGRA Hackathon</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="history.html">연혁</a>
</li>
<li class="nav-item">
<a class="nav-link" href="inquiry.html">가입 문의</a>
</li>
</ul>
</div>
</nav>
</div>
</header>
<section class="slider_section ">
<div id="customCarousel1" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<div class="container ">
<div class="row">
<div class="col-7 col-md-6 ">
<div class="detail-box">
<h2 class="slider_subtitle">충남대학교 정보보안 동아리</h2>
<h1>ARGOS</h1>
<p>Hack the world for everyone</p>
<div class="btn-box">
<a href="inquiry.html" class="btn1">가입하기 ></a>
</div>
</div>
</div>
<div class="col-5 col-md-6">
<div class="img-box">
<img src="https://cdn.jsdelivr.net/gh/4RG0S/2024-Spring-Homeless@main/images/main_floating.png" alt="">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
<section class="about_section layout_padding reveal-dramatic">
<div class="container ">
<div class="heading_container heading_center">
<h2>동아리 소개</h2>
<p>충남대학교 컴퓨터융합학부 유일무이 정보보안 동아리</p>
</div>
<div class="row">
<div class="col-md-6 ">
<div class="img-box d-flex justify-content-center align-items-center">
<img src="https://cdn.jsdelivr.net/gh/4RG0S/2024-Spring-Homeless@main/images/logo_regular.png" alt="" style="width:300px;height:300px;">
</div>
</div>
<div class="col-md-6">
<div class="detail-box">
<p>
ARGOS는 2003년 6월 25일에 설립된 충남대학교 정보보호 연구 동아리로, 동아리 이름은 그리스 신화에 나오는 '100개의 눈을 가진 문지기'에서 유래되었습니다.
<br>
'Hack the world for everyone' 이라는 모토 아래 미래 우리나라의 보안을 책임지기 위해 지속적인 연구와 학습을 하고 있습니다.
</p>
<p>
창립 이후 활발한 외부활동을 통해 보안 기술에 대해 연구하며, 정기적인 내부 세미나를 통해 학습 내용을 공유하고 있습니다.
또한, 외부 해킹 및 보안 단체와 함께 산학 연구도 진행하고 있으며, 매년 다양한 학술 행사를 개최하고 있습니다.
</p>
</div>
</div>
</div>
</div>
</section>
<section class="activity_section layout_padding">
<div class="container">
<div class="heading_container heading_center">
<p class="activity_subtitle">Activity</p>
<h2>ARGOS는 이러한 활동을 합니다.</h2>
</div>
<div class="activity_grid row">
<div class="col-6 col-md-6 col-lg-4 activity_item_wrap">
<div class="activity_item">
<div class="activity_item_icon"><i class="fa fa-book" aria-hidden="true"></i></div>
<h5>스터디</h5>
<p>보안, 개발, 워게임 등<br>다양한 분야의 스터디를 진행합니다.</p>
</div>
</div>
<div class="col-6 col-md-6 col-lg-4 activity_item_wrap">
<div class="activity_item">
<div class="activity_item_icon"><i class="fa fa-code" aria-hidden="true"></i></div>
<h5>해킹/개발 프로젝트</h5>
<p>다양한 팀별 프로젝트를 수행합니다.</p>
</div>
</div>
<div class="col-6 col-md-6 col-lg-4 activity_item_wrap">
<div class="activity_item">
<div class="activity_item_icon"><i class="fa fa-trophy" aria-hidden="true"></i></div>
<h5>해킹대회/공모전 참가</h5>
<p>국내외 오프라인/온라인 해킹대회 및<br>공모전에 참가합니다.</p>
</div>
</div>
<div class="col-6 col-md-6 col-lg-4 activity_item_wrap">
<div class="activity_item">
<div class="activity_item_icon"><i class="fa fa-shield" aria-hidden="true"></i></div>
<h5>교육활동</h5>
<p>보안, python관련 교육 및 세미나를 진행합니다.</p>
</div>
</div>
<div class="col-6 col-md-6 col-lg-4 activity_item_wrap">
<div class="activity_item">
<div class="activity_item_icon"><i class="fa fa-calendar" aria-hidden="true"></i></div>
<h5>행사 운영</h5>
<p>SOGRA, JFS, 사계절 MT 등<br>동아리 주최 행사를 기획·운영합니다.</p>
</div>
</div>
<div class="col-6 col-md-6 col-lg-4 activity_item_wrap">
<div class="activity_item">
<div class="activity_item_icon"><i class="fa fa-users" aria-hidden="true"></i></div>
<h5>기타</h5>
<p>멘토멘티, 소규모 모임, 풋살 등<br>다양한 친목활동을 합니다.</p>
</div>
</div>
</div>
<div class="tc-wrap mt-5">
<div class="tc-stage" id="tcStage">
<div class="tc-bg" id="tcBg" aria-hidden="true"></div>
<div class="tc-cards" id="tcCards">
<article class="tc-card" data-img="images/edu1.png" data-link="education.html">
<img class="tc-media" src="images/edu1.png" alt="동아리 교육">
<div class="tc-overlay">
<div class="tc-pill">Education</div>
<h3 class="tc-title">동아리 교육</h3>
<p class="tc-desc">월간 세미나, 자체 커리큘럼, 외부 연사 초청으로 기본기부터 실전까지 끌어올립니다.</p>
<div class="tc-tags">
<span>#C</span><span>#Assembly</span><span>#System</span><span>#Reverse</span>
</div>
<a class="tc-link" href="education.html">자세히 보기 →</a>
</div>
</article>
<article class="tc-card" data-img="images/study1.jpg" data-link="education.html">
<img class="tc-media" src="images/study1.jpg" alt="스터디팀 활동">
<div class="tc-overlay">
<div class="tc-pill">Study</div>
<h3 class="tc-title">스터디팀 활동</h3>
<p class="tc-desc">원하는 주제로 팀을 꾸리고 기록·공유합니다. 성과 기반 시상으로 동기부여까지.</p>
<div class="tc-tags">
<span>#CTF</span><span>#Write-up</span><span>#Algorithm</span><span>#Team</span>
</div>
<a class="tc-link" href="education.html">자세히 보기 →</a>
</div>
</article>
<article class="tc-card is-volunteer" data-img="images/volunteer.png" data-link="education.html">
<img class="tc-media" src="images/volunteer.png" alt="교육 봉사활동">
<div class="tc-overlay">
<div class="tc-pill">Outreach</div>
<h3 class="tc-title">교육 봉사활동</h3>
<p class="tc-desc">찾아가는 SW 교육기부단, 쏙쏙캠프 등으로 지역 사회에 실질적인 교육 기여를 합니다.</p>
<div class="tc-tags">
<span>#Mentoring</span><span>#SW</span><span>#Community</span>
</div>
<a class="tc-link" href="education.html">자세히 보기 →</a>
</div>
</article>
</div>
<div class="tc-controls" aria-label="슬라이드 이동">
<button class="tc-arrow" type="button" id="tcPrev" aria-label="이전">
<svg viewBox="0 0 24 24" aria-hidden="true">
<path d="M14.5 5.5L8 12l6.5 6.5" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</button>
<button class="tc-arrow" type="button" id="tcNext" aria-label="다음">
<svg viewBox="0 0 24 24" aria-hidden="true">
<path d="M9.5 5.5L16 12l-6.5 6.5" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</button>
</div>
</div>
</div>
</div>
</section>
<section class="conferences_section layout_padding">
<div class="container">
<div class="heading_container heading_center">
<h2>동아리 학술 행사</h2>
<p class="conferences_lead">매년 진행하는 대표 학술 행사를 소개합니다</p>
</div>
<div class="conferences_container row">
<div class="col-6 col-sm-6 col-lg-3 conference_card_wrap">
<a href="hack.html" class="conference_card">
<div class="conference_card_img">
<img src="https://cdn.jsdelivr.net/gh/4RG0S/2024-Spring-Homeless@main/images/hack.png" alt="해킹 시연회">
</div>
<h5>해킹 시연회</h5>
<p>최신 공격/방어 기술 시연회</p>
<span class="conference_card_more">자세히 보기</span>
</a>
</div>
<div class="col-6 col-sm-6 col-lg-3 conference_card_wrap">
<a href="hackathon.html" class="conference_card">
<div class="conference_card_img">
<img src="https://cdn.jsdelivr.net/gh/4RG0S/2024-Spring-Homeless@main/images/hackathon.png" alt="SOGRA Hackathon">
</div>
<h5>SOGRA Hackathon</h5>
<p>1박 2일 해커톤 대회</p>
<span class="conference_card_more">자세히 보기</span>
</a>
</div>
<div class="col-6 col-sm-6 col-lg-3 conference_card_wrap">
<a href="education.html" class="conference_card">
<div class="conference_card_img">
<img src="https://cdn.jsdelivr.net/gh/4RG0S/2024-Spring-Homeless@main/images/jfs.png" alt="Just For Security CTF">
</div>
<h5>Just For Security CTF</h5>
<p>자체 제작 문제 CTF 대회</p>
<span class="conference_card_more">자세히 보기</span>
</a>
</div>
<div class="col-6 col-sm-6 col-lg-3 conference_card_wrap">
<a href="seminar.html" class="conference_card">
<div class="conference_card_img">
<img src="images/seminar_mentoring.png" alt="월간 세미나">
</div>
<h5>월간 세미나</h5>
<p>보안 또는 그 외의 지식을 공유</p>
<span class="conference_card_more">자세히 보기</span>
</a>
</div>
</div>
<div class="conferences_btn_wrap">
<a href="education.html" class="conference_btn">전체 행사 자세히 보기</a>
</div>
</div>
</section>
<section class="info_section layout_padding2">
<div class="container">
<div class="row">
<div class="col-6 col-md-6 col-lg-3 info_col">
<div class="info_contact">
<h4>Address</h4>
<div class="contact_link_box">
<a href="https://map.naver.com/p/entry/place/21033930?c=15.00,0,0,0,dh" target="_blank" rel="noopener noreferrer">
<i class="fa fa-map-marker" aria-hidden="true"></i>
<span>대전광역시 유성구 대학로 99 공과대학 5호관</span>
</a>
<a href="mailto:we.represent.argos@gmail.com">
<i class="fa fa-envelope" aria-hidden="true"></i>
<span>we.represent.argos@gmail.com</span>
</a>
</div>
</div>
<div class="info_social">
<a href="https://www.instagram.com/cnu_argos/" target="_blank" rel="noopener noreferrer" aria-label="인스타그램">
<i class="fa fa-instagram" aria-hidden="true"></i>
</a>
</div>
</div>
<div class="col-6 col-md-6 col-lg-2 mx-auto info_col">
<div class="info_link_box">
<h4>Links</h4>
<div class="info_links">
<a class="active" href="index.html">Home</a>
<a class="" href="education.html">동아리 활동</a>
<a class="" href="history.html">연혁</a>
<a class="" href="inquiry.html">가입 문의</a>
</div>
</div>
</div>
</div>
</div>
</section>
<script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
<script type="text/javascript" src="js/custom.js"></script>
<script>
document.addEventListener("DOMContentLoaded", function () {
const targets = document.querySelectorAll(".reveal-dramatic");
const observer = new IntersectionObserver((entries, observer) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add("is-visible");
observer.unobserve(entry.target);
}
});
}, { threshold: 0.2 });
targets.forEach((target) => {
observer.observe(target);
});
});
</script>
<script>
(function () {
const stage = document.getElementById("tcStage");
const bg = document.getElementById("tcBg");
const cards = Array.from(document.querySelectorAll("#tcCards .tc-card"));
const prevBtn = document.getElementById("tcPrev");
const nextBtn = document.getElementById("tcNext");
if (!stage || !bg || cards.length === 0) return;
let idx = 0;
function clamp(v, a, b) { return Math.max(a, Math.min(b, v)); }
function setActiveClass() {
cards.forEach((c, i) => c.classList.toggle("is-active", i === idx));
}
function setBgFromActive() {
const src = cards[idx].getAttribute("data-img");
if (src) bg.style.backgroundImage = `url('${src}')`;
}
function apply() {
cards.forEach((card, i) => {
const rel = i - idx;
const abs = Math.abs(rel);
const x = rel * 220;
const y = abs * 14;
const rotY = rel * -18;
const rotZ = rel * 2.2;
const scale = 1 - abs * 0.08;
const opacity = clamp(1 - abs * 0.20, 0, 1);
const blur = clamp(abs * 2.2, 0, 6);
const z = 3 - Math.round(abs);
card.style.zIndex = String(z);
card.style.opacity = String(opacity);
card.style.filter = `blur(${blur}px)`;
card.style.transform = `translateX(${x}px) translateY(${y}px) rotateY(${rotY}deg) rotateZ(${rotZ}deg) scale(${scale})`;
});
}
function goNext() { idx = (idx + 1) % cards.length; setActiveClass(); setBgFromActive(); apply(); }
function goPrev() { idx = (idx - 1 + cards.length) % cards.length; setActiveClass(); setBgFromActive(); apply(); }
if (nextBtn) nextBtn.addEventListener("click", goNext);
if (prevBtn) prevBtn.addEventListener("click", goPrev);
window.addEventListener("keydown", (e) => {
if (e.key === "ArrowRight") goNext();
if (e.key === "ArrowLeft") goPrev();
});
setActiveClass();
setBgFromActive();
apply();
})();
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCh39n5U-4IoWpsVGUHWdqB6puEkhRLdmI&callback=myMap"></script>
<script>
(function () {
var header = document.querySelector('.header_section');
var ticking = false;
function updateHeader() {
if (window.scrollY >= 10) {
header.classList.add('scrolled');
} else {
header.classList.remove('scrolled');
}
ticking = false;
}
window.addEventListener('scroll', function () {
if (!ticking) {
requestAnimationFrame(updateHeader);
ticking = true;
}
}, { passive: true });
updateHeader();
})();
</script>
</body>
</html>