-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
230 lines (223 loc) · 12.9 KB
/
index.html
File metadata and controls
230 lines (223 loc) · 12.9 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
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<!--모바일 우선 태그-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>taekwon's profile</title>
<!--min => minimalize(요소들을 압축하여 보이는 크기와 용량을 작게 만들어줌)-->
<link rel="stylesheet" href="./style.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.3/font/bootstrap-icons.css">
<link rel="stylesheet" href="./animate.css">
<meta property="og:title" content="멋쟁이사자처럼 운영진 정택원"/>
<meta property="og:description" content="멋쟁이사자처럼과 즐거운 코딩!"/>
<meta property="og:image" content="./pic/말하고있잖아.jpeg"/>
</head>
<body data-bs-spy="scroll" data-bs-target=".navbar">
<header class="">
<!--(겹치는게 있다면 !import가 가장 우선순위)-->
<!--($spacer => 1rem => 16px)-->
<nav class="navbar navbar-expand-lg fixed-top bg-dark">
<div class="container">
<a class="navbar-brand text-white" href="/">Taekwon Chung</a>
<button class="navbar-toggler navbar-light bg-light" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link text-white" href="#likelion">멋쟁이사자처럼</a>
</li>
<li class="nav-item">
<a class="nav-link text-white" href="#activity">활동모습</a>
</li>
<li class="nav-item">
<a class="nav-link text-white" href="#contents">게시물</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
<!-- 상단 프로필 -->
<section class="bg-light py-4 mt-4 border-bottom profile">
<div class="container pt-3">
<!-- 개발을 할 때에는 일반 사용자 관점에서 보아라 -->
<div class="d-md-inline-block text-center">
<img data-wow-iteration="1" data-wow-duration="1s" data-wow-delay="0.1s" class="rounded-circle wow bounceInUp" height="250" src="pic/KakaoTalk_20230118_215005960_10.jpg" alt="profil image">
</div>
<div class="d-md-inline-block align-middle mx-3">
<h1 class="fw-bold mb-0 text-md-start text-center">Taekwon Chung</h1>
<h2 class="fw-light mb-0 text-md-start text-center">Sungkyul university</h2>
<h3 class="fw-light mb-0">안녕하세요 멋쨍이사자처럼 대학 11기 운영진 정택원입니다.</h3>
<span class="badge text-bg-primary">성결대</span>
<span class="badge text-bg-secondary">멋사 11기 출격</span>
<span class="badge text-bg-success">learning bootstrap</span>
<span class="badge text-bg-danger">is really fun</span>
<span class="badge text-bg-warning">최백준</span>
<span class="badge text-bg-info">사랑해</span>
<span class="badge text-bg-primary">알고리즘</span>
<span class="badge text-bg-dark">사랑해</span>
</div>
</div>
<div id="likelion"></div>
</section>
<!-- 게시물 -->
<section class="bg-dark py-4 likelion">
<!-- col-md는 항상 row아래에 있어야 함. 여러개 겹쳐서 쓰면 반응형으로 사용 가능 -->
<!-- img-fluid => 모바일에서 너비를 맞추어줌 -->
<!-- <img class="img-fluid" src="http://placeimg.com/768/256/animals" alt="동물 사진">
<img class="img-fluid" src="http://placeimg.com/768/256/animals" alt="동물 사진">
<img class="img-fluid" src="http://placeimg.com/768/256/animals" alt="동물 사진"> -->
<div class="container text-white text-center">
<img class="mb-3" src="pic/성결대 로고_배경만 투명.png" alt="멋쟁이사자처럼 성결대 로고" height="150">
<h3>멋쟁이사자처럼 대학 11기 성결대 운영진</h3>
<p>멋쟁이사저처럼 대학은 테크 기반의 아이디어 실현을 위한 전국 최대 규모의 대학 연합 창업 동아리입니다.
<br class="d-md-none d-lg-block">23년 멋쟁이사자처럼 대학 11기 성결대 신규등록을 주도하며 운영진을 모집했습니다.
<br class="d-md-none d-lg-block">신규등록 완료 후 멋쟁이사자처럼 대학 11기 운영진으로서 활동하고 있습니다.
</p>
</div>
</section>
<div id="activity"></div>
<section class="pt-3 mt-5 pb-1 activity">
<div class="container">
<div class="row d-flex align-items-center">
<div class="col-md-6 text-center">
<h2 class="fw-bold mb-3">활동 모습</h2>
<p>방학동안 매주 진행된 멋쟁이사자처럼 성결대 운영진 스터디 모습입니다
<br>지금까지 배운 내용을 통해서 멋쟁이사저처럼 성결대 홍보 페이지를 제작할 예정입니다.
</p>
</div>
<div class="col-md-6">
<div id="carouselExampleCaptions" class="carousel slide">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2" aria-label="Slide 3"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="pic/IMG_6603.JPG" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<!-- <h5>First slide label</h5>
<p>문상훈</p> -->
</div>
</div>
<div class="carousel-item">
<img src="pic/IMG_6647.JPG" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<!-- <h5>Second slide label</h5>
<p>문땅훈</p> -->
</div>
</div>
<div class="carousel-item">
<img src="pic/IMG_6609.JPG" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<!-- <h5>Third slide label</h5>
<p>쌍후이</p> -->
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions" 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="#carouselExampleCaptions" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</div>
</div>
</div>
</section>
<div id="contents"></div>
<section class="pt-3 mt-5 pb-1 container contents">
<div class="container">
<h3 class="fw-blod text-center">게시물</h3>
<div class="row row-cols-1 row-cols-md-4 g-4 py-4 px-3">
<div class="col">
<div class="card h-100">
<img src="pic/DSC02048.JPG" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">멋사의 시작</h5>
<p class="card-text">멋사 11기의 첫 만남부터 현재까지의 모습을 담았습니다.</p>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<img src="pic/DSC02067.JPG" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">운영진 교육</h5>
<p class="card-text">운영진이 공부한 내용을 토대로 다른 운영진들을 교육하는 모습을 담았습니다.</p>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<img src="pic/KakaoTalk_20230118_215005960_03.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">열띤 토론</h5>
<p class="card-text">교육 외에 알고리즘, 자료구조 등 CS를 주제로 토론을 하는 모습을 담았습니다.</p>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<img src="pic/어떡해.png" class="card-img-top" alt="회의 이미지 넣을것.">
<div class="card-body">
<h5 class="card-title">운영진 회의</h5>
<p class="card-text">앞으로 진행될 멋사의 프로젝트 및 활동을 위한 운영진 회의 모습을 담았습니다.</p>
</div>
</div>
</div>
</div>
</div>
</section>
<footer class="bg-dark py-5">
<div class="text-center mb-0">
<h1 class="text-white fw-light fs-2">contact me!</h1>
</div>
<div class="text-center mb-0">
<a style="text-decoration: none;" href="mailto: chtw2001@likelion.org"></i><h1 class="text-white fw-light fs-5"><i class="bi bi-envelope"></i> mail to taekwon</h1></a>
</div>
<div style="font-size: 2.5rem;" class="text-center mb-0 ">
<a class="text-white" href="https://www.instagram.com/taek_won_/"><i class="bi bi-instagram mx-2 "></i></a>
<a class="text-white" href="https://github.com/chtw2001?tab=repositories"><i class="bi bi-github mx-2" ></i></a>
<i id="liveToastBtn" class="bi bi-hand-thumbs-up-fill mx-2 text-white" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-title="좋아요 눌러주세요"></i>
</div>
</footer>
<!-- <button type="button" class="btn btn-primary" id="liveToastBtn">Show live toast</button> -->
<div class="toast-container position-fixed end-0 top-0 p-3">
<div id="liveToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<strong class="me-auto">페이지 제작자</strong>
<small>방금전</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">
좋아요를 눌러주셔서 감사합니다
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
<script>
const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))
const toastTrigger = document.getElementById('liveToastBtn')
const toastLiveExample = document.getElementById('liveToast')
if (toastTrigger) {
toastTrigger.addEventListener('click', () => {
const toast = new bootstrap.Toast(toastLiveExample)
toast.show()
})
}
</script>
<script src="./wow.min.js"></script>
<script>
new WOW().init();
</script>
</body>
</html>