-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
executable file
·247 lines (222 loc) · 12.6 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
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
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<title>Jaram</title>
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<link rel="shortcut icon" href="img/jaram_.ico">
<style>
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;500;900&display=swap');
@media (min-width: 768px) {
.bd-placeholder-img-lg {
font-size: 3.5rem;
}
}
</style>
<link href="css/carousel.css" rel="stylesheet">
</head>
<body>
<header>
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
<div class="container-fluid">
<img src="img/jaram_.ico" style="height: 2em; margin-bottom:0;"/>
<a class="navbar-brand" href="#" style="margin-left: 0.4em;" >Jaram</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav me-auto mb-2 mb-md-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#introduce">Intro</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#activity">Activity</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
<main>
<div id="myCarousel" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#myCarousel" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#myCarousel" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#myCarousel" data-bs-slide-to="2" aria-label="Slide 3"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="carousel-bd-placeholder-img" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" src="img/background.jpg"><rect width="100%" height="100%" fill="#777" /></svg>
<div class="container">
<div class="carousel-caption text-start">
<h1>Jaram</h1>
<p>한양대학교 ERICA 캠퍼스 소프트웨어융합대학 전공학회</p>
<p><a class="btn btn-lg btn-primary" href="#introduce">자세히 보기</a></p>
</div>
</div>
</div>
<div class="carousel-item">
<img class="carousel-bd-placeholder-img" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" preserveAspectRatio="xMidYMid slice" focusable="false" src="https://i.ytimg.com/vi/23Ys41ojPlY/maxresdefault.jpg"></img>
<div class="container">
<div class="carousel-caption">
<h1>2021 하계 E-sports 대회</h1>
<p>일시: 2021/07/28 8PM</p>
<p><a class="btn btn-lg btn-primary" href="https://youtu.be/23Ys41ojPlY" target="_blank" >보러가기</a></p>
</div>
</div>
</div>
<div class="carousel-item">
<img class="carousel-bd-placeholder-img" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" preserveAspectRatio="xMidYMid slice" focusable="false" src="https://i.ytimg.com/vi/Uzu_HgB4ZpI/maxresdefault.jpg"></img>
<div class="container">
<div class="carousel-caption text-end">
<h1>세미나</h1>
<p>학회원들이 직접 진행하는 세미나를 감상해보세요.</p>
<p><a class="btn btn-lg btn-primary" href="https://www.youtube.com/channel/UCkogqLvBHQNxS5c-VcnZnHw" target="_blank" >구독하기</a></p>
</div>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#myCarousel" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#myCarousel" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
<!-- Marketing messaging and featurettes
Wrap the rest of the page in another container to center all the content. -->
<div class="container marketing">
<section id="introduce" class="accent">
<br/><br/><br/><br/><br/>
<div class="row featurette">
<div class="col-md-7">
<h2 class="featurette-heading">안녕<span class="text-muted">하세요!</span></h2><br/>
<p class="lead">자람은 한양대학교 ERICA 캠퍼스 소프트웨어융합대학 전공 학회로, 1984년에 시작해 올해로 37주년을 맞이하였습니다.
2021년 현재, 약 100명의 학회원들과 함께하고 있습니다.
</p>
</div>
<div class="col-md-5">
<img class="bd-placeholder-img bd-placeholder-img-lg featurette-image img-fluid mx-auto" width="500" height="500" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: 500x500" preserveAspectRatio="xMidYMid slice" focusable="false" src="img/Jaram.png">></img>
</div>
</div>
</section>
<!-- START THE FEATURETTES -->
<section id="activity" class="accent">
<hr class="featurette-divider">
<div class="row featurette">
<div class="col-md-7 order-md-2">
<h2 class="featurette-heading">기초부터 <span class="text-muted">전문 능력</span>까지</h2>
<p class="lead">대학교에 진학할때부터 관심분야를 정확히 정하고 오거나 잘하는 사람은 많지 않습니다.
자람은 세미나를 통해 다양한 분야를 접할 수 있도록 하여 관심분야를 정하는데 도움을 주고,
관심분야가 정해진 친구들은 스터디를 꾸려 그 분야를 더 깊게 공부할 수 있도록 체계가 이루어져 있습니다.
또한 매 학기 방학 워크샵을 개최해 한가지 주제에 대해 함께, 그리고 깊이 공부하며
프로그래밍 능력과 전공분야에 대한 소양을 기릅니다.</p>
</div>
<div class="col-md-5 order-md-1">
<img class="bd-placeholder-img bd-placeholder-img-lg featurette-image img-fluid mx-auto" width="500" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: 500x500" preserveAspectRatio="xMidYMid slice" focusable="false" src="img/1.jpg">
</div>
</div>
<br/><br/><br/>
<div class="row">
<div class="col-lg-4">
<!--<svg class="bd-placeholder-img rounded-circle" width="140" height="140" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: 140x140" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#777"/><text x="50%" y="50%" fill="#777" dy=".3em">140x140</text></svg>-->
<img class="bd-placeholder-img " width="140" height="140" src="img/icon/science.svg">
<h2>그룹 스터디</h2>
<p>관심있는 주제에 대해<br/>그룹별로 진행</p>
</div><!-- /.col-lg-4 -->
<div class="col-lg-4">
<img class="bd-placeholder-img" width="140" height="140" src="img/icon/presentation.svg">
<h2>세미나</h2>
<p>주 1회 진행</p>
<p><a class="btn btn-secondary" href="https://www.youtube.com/channel/UCkogqLvBHQNxS5c-VcnZnHw" target="_blank">보러가기</a></p>
</div><!-- /.col-lg-4 -->
<div class="col-lg-4">
<img class="bd-placeholder-img rounded-circle" width="140" height="140" src="img/icon/pacman.svg">
<h2>워크샵</h2>
<p>연중 2회 진행</p>
</div><!-- /.col-lg-4 -->
</div><!-- /.row -->
</section>
<hr class="featurette-divider">
<div class="row featurette">
<div class="col-md-7">
<h2 class="featurette-heading"><span class="text-muted">관계</span>를 중요시하는 학회</h2>
<p class="lead">자람은 선배와 후배 구분 없이 모든 학회원들이 가깝게 지낼 수 있도록 하기 위해 여러가지 활동을 하고 있습니다.
학기 초에는 엠티를 통해 새로 가입한 학회원과 재학생 사이의 어색함을 덜고
체육대회를 통해서 학회원들이 같이 땀을 흘리면서 모두가 친해질 수 있도록 노력하고 있습니다.
또한 매년 신년회를 통해서 이미 졸업한 선배와 후배가 소통할 수 있는 공간을 마련하여
자람 가족의 관계가 계속될 수 있도록 하고 있습니다</p>
</div>
<div class="col-md-5">
<img class="bd-placeholder-img bd-placeholder-img-lg featurette-image img-fluid mx-auto" width="500" height="500" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: 500x500" preserveAspectRatio="xMidYMid slice" focusable="false" src="img/2.jpg"></img>
</div>
</div>
<br/><br/><br/>
<div class="row">
<div class="col-lg-4">
<!--<svg class="bd-placeholder-img rounded-circle" width="140" height="140" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: 140x140" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#777"/><text x="50%" y="50%" fill="#777" dy=".3em">140x140</text></svg>-->
<img class="bd-placeholder-img " width="140" height="140" src="img/icon/fireworks.svg">
<h2>신년회</h2>
<p>매년 1학기 개강 전에 진행</p>
</div><!-- /.col-lg-4 -->
<div class="col-lg-4">
<img class="bd-placeholder-img" width="140" height="140" src="img/icon/olympic-games.svg">
<h2>체육대회</h2>
<p>여름 또는 가을에 진행</p>
</div><!-- /.col-lg-4 -->
<div class="col-lg-4">
<img class="bd-placeholder-img rounded-circle" width="140" height="140" src="img/icon/campfire.svg">
<h2>엠티</h2>
<p>연중 2회 진행</p>
</div><!-- /.col-lg-4 -->
</div><!-- /.row -->
<hr class="featurette-divider">
<section id="contact" class="accent">
<!-- Three columns of text below the carousel -->
<center><h2>저희와 만나고 싶으시다면</h2></center><br/>
<div class="row">
<div class="col-lg-4">
<!--<svg class="bd-placeholder-img rounded-circle" width="140" height="140" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: 140x140" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#777"/><text x="50%" y="50%" fill="#777" dy=".3em">140x140</text></svg>-->
<img class="bd-placeholder-img " width="140" height="140" src="img/icon/book.svg">
<h2>이메일</h2>
<p>hyu.cse.jaram@gmail.com</p>
<p><a class="btn btn-secondary" href="mailto:hyu.cse.jaram@gmail.com">문의하기 »</a></p>
</div><!-- /.col-lg-4 -->
<div class="col-lg-4">
<img class="bd-placeholder-img rounded-circle" width="140" height="140" src="img/icon/GitHub-Mark-120px-plus.png">
<h2>GitHub</h2>
<p><a class="btn btn-secondary" href="https://github.com/Jaram" target="_blank">Follow @Jaram</a></p>
<p><a class="btn btn-secondary" href="https://github.com/Jaram2019" target="_blank">Follow @Jaram2019</a></p>
</div><!-- /.col-lg-4 -->
<div class="col-lg-4">
<img class="bd-placeholder-img rounded-circle" width="140" height="140" src="img/icon/placeholder.svg">
<h2>학회방</h2>
<p>한양대학교 ERICA캠퍼스<br/>제3공학관 지하107호</p>
<p><a class="btn btn-secondary" href="http://kko.to/6947gKj4H" target="_blank">지도 보기 »</a></p>
</div><!-- /.col-lg-4 -->
</div><!-- /.row -->
</section>
<hr class="featurette-divider">
<!-- /END THE FEATURETTES -->
</div><!-- /.container -->
<!-- FOOTER -->
<footer class="container">
<p class="float-end"><a href="#">Back to top</a></p>
<p>© 1984-2021 Jaram. <!--· <a href="#">Privacy</a> · <a href="#">Terms</a>--></p>
</footer>
</main>
<script src="js/bootstrap.bundle.min.js"></script>
</body>
</html>