-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
336 lines (316 loc) · 18.5 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
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
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="icon" href="img/favicon.png" type="image/png">
<title>퐁근</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="vendors/linericon/style.css">
<link rel="stylesheet" href="css/font-awesome.min.css">
<link rel="stylesheet" href="vendors/owl-carousel/owl.carousel.min.css">
<link rel="stylesheet" href="vendors/lightbox/simpleLightbox.css">
<link rel="stylesheet" href="vendors/nice-select/css/nice-select.css">
<link rel="stylesheet" href="vendors/animate-css/animate.css">
<link rel="stylesheet" href="vendors/flaticon/flaticon.css">
<!-- main css -->
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/responsive.css">
<!-- icon -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
</head>
<body>
<!--================Header Menu Area =================-->
<header class="header_area">
<div class="main_menu">
<nav class="navbar navbar-expand-lg navbar-light">
<div class="container box_1620">
<!-- Brand and toggle get grouped for better mobile display -->
<a class="navbar-brand logo_h" href="index.html"><img src="img/logo.png" alt=""></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="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse offset" id="navbarSupportedContent">
<ul class="nav navbar-nav menu_nav justify-content-center">
</ul>
</div>
</div>
</nav>
</div>
</header>
<!--================Header Menu Area =================-->
<!--================Home Banner Area =================-->
<section class="home_banner_area">
<div class="banner_inner">
<div class="container">
<div class="row">
<div class="col-lg-5">
<div class="banner_content">
<h2>프로그래머용 <br />다운로드 서비스</h2>
<p>개발환경을 쉽게 구축하기 위한 프로그래머용 통합 다운로드 서비스<br> 개발하는데 필요한 각 종 유틸리티 프로그램이나 라이브러리 등을 찾기 쉽게 분류한 웹 기반 다운로드 서비스</p>
<a class="banner_btn2" href="#" onclick="alert('꿈이 좀 큰 편이에요.')">Download</a>
</div>
</div>
<div class="col-lg-7">
<div class="home_left_img">
<img class="img-fluid" src="img/banner/home-left-1.png" alt="">
</div>
</div>
</div>
</div>
</div>
</section>
<!--================End Home Banner Area =================-->
<!--================Work Area =================-->
<section class="work_area p_120">
<div class="container">
<div class="main_title">
<h2>불-편</h2>
<p>프로그래밍 입문자로써 개발환경 구축부터가 진이 빠질 때가 한 두번이 아니다.<br></p>
</div>
<div class="work_inner row">
<div class="col-lg-4">
<div class="work_item">
<i class="lnr lnr-screen"></i>
<a href="#">
<h4>정보</h4>
</a>
<p>python IDE만 해도 종류가 굉장히 많다. 데이터베이스는 어떤가. 이때 각종 프로그램들의 장단점, 특징 등을 얻으려면 우리는 구글링을 해야한다.</p>
</div>
</div>
<div class="col-lg-4">
<div class="work_item">
<i class="lnr lnr-code"></i>
<a href="#">
<h4>프로그래밍 입문자</h4>
</a>
<p>프로그램이 한번에 오류없이 적용되면 너무 고맙다. 설치 도중 오류는 개발을 시작하기도 전에 진을 뺀다. 특히 입문자의 경우, 알려줄 사람이 없어 점점 구글링 마스터가 된다.</p>
</div>
</div>
<div class="col-lg-4">
<div class="work_item">
<i class="lnr lnr-clock"></i>
<a href="#">
<h4>시간</h4>
</a>
<p>상황에 따라 추가적으로 버전 업/다운의 필요성이 생길 때, 우리는 해당 프로그램, 라이브러리의 파일 다운로드 경로를 탐색하는데 소모되는 시간이 매우 비효율적이다.</p>
</div>
</div>
</div>
</div>
</section>
<!--================End Work Area =================-->
<!--================Made Life Area =================-->
<section class="made_life_area p_120">
<div class="container">
<div class="made_life_inner">
<div class="row made_life_text">
<div class="col-lg-6">
<div class="left_side_text">
<h3>개발환경 구축 때문에<br />더 이상 시간 쓰지 마세요.</h3>
<p>필요한 프로그램 설치 시, 더 이상 구글을 돌아다닐 필요가 없어요.<br>마치 폰에 앱을 검색, 설치, 업데이트 하는 것 처럼<br>퐁근에서 필요한 프로그램을 검색, 설치파일 다운할 수 있어요.<br>또한 프로그램 마다 설치 가이드와 QnA를 두어<br>편리함에 퐁근이 한 몫할꺼에요.</p>
</div>
</div>
<div class="col-lg-6">
<div class="chart_img" style="text-align: center;">
<i class="fas fa-arrow-alt-circle-down" style="font-size:200px; color:#3bacf0"></i>
</div>
</div>
</div>
</div>
</div>
</section>
<!--================End Made Life Area =================-->
<!--================Screen Area =================-->
<section class="screen_area text-center p_120">
<div class="container">
<div class="main_title">
<h2>구글링 하지 말고, 퐁근 하세요.</h2>
<p>개발에 필요한 각 종 유틸리티 프로그램, 라이브러리 등을<br>언어, 용도, 목적 등으로 분류하여 쉽게 찾을 수 있어요. </p>
</div>
<img class="img-fluid" src="img/banner/pong.png" alt="">
</div>
</section>
<!--================End Screen Area =================-->
<!--================Made Life Area =================-->
<section class="made_life_area p_120">
<div class="container">
<div class="made_life_inner">
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item">
<a class="nav-link" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">분류</a>
</li>
<li class="nav-item">
<a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">도움</a>
</li>
<li class="nav-item">
<a class="nav-link active" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">커뮤니티</a>
</li>
<li class="nav-item">
<a class="nav-link" id="edge-tab" data-toggle="tab" href="#edge" role="tab" aria-controls="edge" aria-selected="false">기대효과</a>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade" id="home" role="tabpanel" aria-labelledby="home-tab">
<div class="row made_life_text">
<div class="col-lg-6">
<div class="left_side_text">
<h3>필요한 서비스를 <br />단 몇번의 클릭으로</h3>
<h6>프로그램을 검색하고, 다운로드 경로를 검색하고, 들어가서 버전을 검색..검색 검색</h6>
<p>몇 번의 클릭으로 개발자가 원하는 서비스에 해당되는 프로그램들을 찾아주고, 해당 프로그램에 대한 정보를 얻을 수 있으며, 다운로드 할 수 있어요.</p>
</div>
</div>
<div class="col-lg-6">
<div class="chart_img" style="float:right;">
<img class="img-fluid" src="img/Venn%20diagram.png" width="300px;" alt="venn">
</div>
</div>
</div>
</div>
<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
<div class="row made_life_text">
<div class="col-lg-6">
<div class="left_side_text">
<h3>이제는 혼자서 <br />에러랑 싸우지 마세요</h3>
<h6>설치 프로그램을 다운 받고, 또 설치하는 방법을 검색하고, 설치 중에 생기는 오류 해결 방법을 또 검색하고...</h6>
<p>프로그램마다 설치 가이드와 QnA 칸을 두어 설치 방법은 물론 오류 해결방법도 쉽게 얻을 수 있어요.</p>
</div>
</div>
<div class="col-lg-6">
<div class="chart_img" style="float:right;">
<img class="img-fluid" src="img/error.png" alt="help" width="300px;">
</div>
</div>
</div>
</div>
<div class="tab-pane fade show active" id="contact" role="tabpanel" aria-labelledby="contact-tab">
<div class="row made_life_text">
<div class="col-lg-6">
<div class="left_side_text">
<h3>빠른 피드백 <br />활발한 커뮤니티</h3>
<h6>자신이 자주 사용하는 프로그램이 퐁근에 없다면?</h6>
<p>프로그램 이름( 또는 라이브러리 )과 다운로드 경로를 적어 포스팅 하면,좋아요 순으로 빠르게 업데이트 해서 불편함을 개선시켜요.</p>
</div>
</div>
<div class="col-lg-6">
<div class="chart_img" style="float:right;">
<img class="img-fluid" src="img/comunity.png" width="300" alt="group chat">
</div>
</div>
</div>
</div>
<div class="tab-pane fade" id="edge" role="tabpanel" aria-labelledby="edge-tab">
<div class="row made_life_text">
<div class="col-lg-6">
<div class="left_side_text">
<h3>프로그래밍의<br />미래는 밝습니다</h3>
<h6>퐁근으로 얻게되는 기대효과는 무엇이 있을까요?</h6>
<p>아무생각없이 앱스토어에 들어가서 게임 순위를 보며'어! 이거 재밌겠는데?'라고 생각이 들어 앱을 다운 받은 경험이 있을꺼에요. 퐁근도 이런 다운로드 서비스가 되었으면 좋겠어요. 현직 프로그래머나 미래의 개발자 새싹이 퐁근을 통해 여러 프로그램과 라이브러리 등을 보면서 프로젝트를 시작할 수 있게한다면, 그것만큼 멋진 서비스가 있을까요!</p>
</div>
</div>
<div class="col-lg-6">
<div class="chart_img" style="float:right;">
<img class="img-fluid" src="img/lamp idea.png" alt="lamp idea" width="300">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!--================End Made Life Area =================-->
<!--================Made Life Area =================-->
<section class="made_life_area made_white p_120">
<div class="container">
<div class="made_life_inner">
<div class="row made_life_text">
<div class="col-lg-6">
<div class="chart_img">
<img class="img-fluid" src="img/banner/home-left-1.png" alt="">
</div>
</div>
<div class="col-lg-6">
<div class="left_side_text">
<h3>Hack Your Life!</h3>
<h6>더 쉽게, 더 효율적인 develop을 위해</h6>
<p>오만가지의 에러와 오백번의 검색은 그만, 퐁근이 도와줄께요.<br>간단한 라이브러리 설치부터, 시도했다가 포기한 유틸리티 프로그램까지<br>프로그램 카테고리, 도움말, QnA, 랭킹 시스템 등 시작하세요. Pong Geun</p>
<a class="main_btn" href="#" onclick="alert('ㅇㅁㅇ!')">Get Started Now</a>
</div>
</div>
</div>
</div>
</div>
</section>
<!--================End Made Life Area =================-->
<!--================Impress Area =================-->
<section class="impress_area p_120">
<div class="container">
<div class="impress_inner">
<h2>이름이 왜 PongGeun인가요?</h2>
<p>이름 정할 때, 이걸 '만짐'</p>
<a class="banner_btn2" href="https://www.yooying.com/p/1960310797360153965">사이트 바로가기</a>
</div>
</div>
</section>
<!--================End Impress Area =================-->
<!--================Footer Area =================-->
<footer class="footer_area p_120">
<div class="container">
<div class="row footer_inner">
<div class="col-lg-5 col-sm-6">
<aside class="f_widget ab_widget">
<div class="f_title">
<h3>profile</h3>
</div>
<p>이경은<br>바이오산업자원공학과<br>17학번<br>휴학 중<br></p>
</aside>
</div>
<div class="col-lg-5 col-sm-6">
<aside class="f_widget news_widget">
</aside>
</div>
<div class="col-lg-2">
<aside class="f_widget social_widget">
<div class="f_title">
<h3>Follow Me</h3>
</div>
<p>SNS</p>
<ul class="list">
<li><a href="https://www.facebook.com/profile.php?id=100015443015440"><img src="img/facebook.png" width="40px;"></a></li>
<li><a href="https://www.instagram.com/2kyung19/?hl=ko"><img src="img/insta.png" width="40px;"></a></li>
<li><a href="https://medium.com/@2kyung19"><img src="img/me.png" width="40px;"></a></li>
<li><a href="https://github.com/2kyung19"><img src="img/git.png" width="40px;"></a></li>
</ul>
</aside>
</div>
</div>
</div>
</footer>
<!--================End Footer Area =================-->
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/popper.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/stellar.js"></script>
<script src="vendors/lightbox/simpleLightbox.min.js"></script>
<script src="vendors/nice-select/js/jquery.nice-select.min.js"></script>
<script src="vendors/isotope/imagesloaded.pkgd.min.js"></script>
<script src="vendors/isotope/isotope-min.js"></script>
<script src="vendors/owl-carousel/owl.carousel.min.js"></script>
<script src="js/jquery.ajaxchimp.min.js"></script>
<script src="vendors/counter-up/jquery.waypoints.min.js"></script>
<script src="vendors/counter-up/jquery.counterup.min.js"></script>
<script src="js/mail-script.js"></script>
<!--gmaps Js-->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCjCGmQ0Uq4exrzdcL6rvxywDDOvfAu6eE"></script>
<script src="js/gmaps.min.js"></script>
<script src="js/theme.js"></script>
</body>
</html>