forked from yuyuanhey/2017IMCamp
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
214 lines (201 loc) · 11.3 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>2017 IM Camp</title>
<!-- Bootstrap Core CSS -->
<link rel="stylesheet" type="text/css" href="./css/style.css">
<script src="https://cdn.rawgit.com/michalsnik/aos/2.1.1/dist/aos.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel="stylesheet" href="https://cdn.rawgit.com/michalsnik/aos/2.1.1/dist/aos.css">
</head>
<script>
if(/Android|webOS|iPhone|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent))
location.href = "./index-1.html";// iPad|
</script>
<body id="page-top" data-spy="scroll" style="overflow-x:hidden;" onload="myLoading()">
<!-- loading的動畫 -->
<div id="loaderBack"><div id="loading"><i></i><i></i><i></i><i></i></div></div>
<div id="myDiv" style="height:100%;display:none">
<!-- NAVBAR -->
<nav style="width: 7vw;height: 100vh;background:#FCFAF2;position:fixed;top:0px;left:0px;color:#666;">
<img id="navlogo" src="./photo/logo.png" style="background:#B6B2B2;border-radius:100%;width:70px;margin-bottom:40%;position:relative;left:10px;top:5px"/>
<div class="navbar-en">2017 IM CAMP</div>
</nav>
<!-- 封面頁 -->
<div id="homepage" class="js-content" style="height:100%;width:100%;">
<div class="cell-1"></div>
<div class="cell-2" style="color:#656765;">
<div style="z-index:1000;position:absolute;top:32.5%;left:27.5%"><img src="./photo/title.png" style="width:40vw"></div>
<div style="position:relative;height:100vh;width:100vw">
<div class="homepage-circle" data-scroll="campInfo"><img src="./photo/camp.png" alt=""></div>
<div class="homepage-circle" data-scroll="dailyInfo"><img src="./photo/daily.png" alt=""></div>
<div class="homepage-circle" data-scroll="register"><img src="./photo/register.png" alt=""></div>
<div class="homepage-circle" data-scroll="review"><img src="./photo/review.png" alt=""></div>
</div>
</div>
</div>
<!--營隊介紹-->
<div id="campInfo" class="js-content" style="height:100%;width:100%;background:url('./photo/background-1.png');background-size:100% 100%;background-repeat:no-repeat">
<div class="cell-1"></div>
<div class="cell-2">
<div class="title" style="color:#81AD31;" data-aos="flip-left">營隊介紹</div>
<img src="./photo/illustration1.png" class="illustration"/>
<!-- </div> -->
<!-- <div class="cell-3"> -->
<div style="font-size:22px;line-height:6.5vh;letter-spacing:0.3vw;color:#536F20;position:absolute;top:10vh;right:2.5vw" data-aos="zoom-in">
<b>資訊管理</b>是一門跨領域的學問，<br>
<b>臺大資訊管理學系</b>結合<b>資訊科技基礎</b>與<b>專業管理素養</b>，<br>
培養無數綜覽全局視野的青年才俊，<br>
知名新創公司: Dcard、Qsearch…等等的創辦人，皆為本系系友。<br><br>
2017臺大資管營將帶領高中生一窺資管系的奧秘！<br>
充實的課程與活動，將讓學員滿載而歸，進而啟發學習的興趣！<br>
每位參與學員皆隸屬於一個<b>新創公司</b>，由學長姊擔任公司領導人，<br>
搭配<b>網頁入門教學</b>、<b>設計思考引導</b>，與<b>團隊合作精神</b>，<br>
使學員對資訊科技、管理行銷領域有初步的認識。<br>
同時，更輔以精采、有趣的活動，讓營期間充滿歡樂。<br>
除此之外，我們亦安排知名<b>企業參訪</b>活動，機會十分難得。<br>
今年夏天讓我們一起探索未來！<br>
</div>
</div>
</div>
<!--活動簡介-->
<div id="dailyInfo" class="js-content" style="height:100%;width:100%;background:url('./photo/background-2.png');background-size:100% 100%;background-repeat:no-repeat">
<div class="cell-1"></div>
<div class="cell-2">
<div class="title" style="color:#E87A90;" data-aos="flip-left">活動簡介</div>
<img src="./photo/illustration2.png" class="illustration"/>
<!-- </div>
<div class="cell-3"> -->
<table class="myTable">
<tr class='days'>
<td data-aos="fade-up">7/3 星期一</td>
<td data-aos="fade-down">7/4 星期二</td>
<td data-aos="fade-up">7/5 星期三</td>
<td data-aos="fade-down">7/6 星期四</td>
</tr>
<tr style="line-height:100px;">
<td class="day1" data-aos="fade-down">開幕儀式</td>
<td class="day2" data-aos="fade-up">網頁課程</td>
<td class="day3" data-aos="fade-down">創意課程</td>
<td class="day4" data-aos="fade-up">呈現準備</td>
</tr>
<tr><td class="myLunch" colspan="4" data-aos="fade-up">午餐時間</td></tr>
<tr>
<td class="day1" data-aos="fade-up">資管講座</td>
<td class="day2" rowspan="2" data-aos="fade-down">企業參訪</td>
<td class="day3" rowspan="2" data-aos="fade-up">RPG</td>
<td class="day4" rowspan="2" data-aos="fade-down">小隊呈現</td>
</tr>
<tr><td class="day1" data-aos="fade-down">大地遊戲</td></tr>
<tr style="line-height:100px;">
<td class="day1" data-aos="fade-up">晚會</td>
<td class="day2" data-aos="fade-down">BBQ</td>
<td class="day3" data-aos="fade-up">舞會</td>
<td class="day4" data-aos="fade-down">回家啦~</td>
</tr>
</table>
</div>
</div>
<!--報名資訊-->
<div id="register" class="js-content" style="height:100%;width:100%;background:url('./photo/background-3.png');background-size:100% 100%;background-repeat:no-repeat">
<div class="cell-1"></div>
<div class="cell-2">
<div class="title" style="color:#1E88A8;" data-aos="flip-left">報名資訊</div>
<img src="./photo/illustration3.png" class="illustration"/>
<!-- </div>
<div class="cell-3"> -->
<div style="font-size:24px;line-height:8.5vh;color:#04878E;letter-spacing:0.5vw;position:absolute;top:12.5vh;right:10%">
<div data-aos="fade-up">招生對象：共 100 名全台各地高中職學生</div>
<div data-aos="fade-down">報名時間：即日起至2017/5/5(五)</div>
<div data-aos="fade-up">報名方式：線上報名</div>
<div data-aos="fade-down">報名費用：5000 元 (另有清寒生專案)</div>
<div data-aos="fade-up">活動期間：2017/07/03 (一) ~ 07/06 (四)</div>
<div data-aos="fade-down">活動地點：國立臺灣大學校總區</div>
<div data-aos="fade-up">主辦單位：國立臺灣大學資訊管理學系學生會</div>
</div>
<button id="myBtnRegister">立即報名!</button>
<button id="myBtnCheck">確認報名</button>
</div>
</div>
<!-- 確認報名狀況的popup -->
<div id="popupCheck" style="color:#1E6262;font-size:20px;display:none">
<span class="closePopup" style="color:#ccc"><i class="fa fa-times-circle" aria-hidden="true"></i></span>
<div class="form-group" style="margin:10% 5px">
<div>姓名<br><input type="text" name="checkname" placeholder="請輸入姓名"></div>
</div>
<div class="form-group" style="margin:10% 5px">
<div>身分證字號<br><input type="text" name="checkpassword" placeholder="請輸入身分證字號"></div>
</div>
<div id="checkImg" style='color:black'></div>
<input type="submit" name="submit" value="Check" id="checkSubmit"/>
</div>
<!--精彩回顧-->
<div id="review" class="js-content" style="height:100%;width:100%;background:url('./photo/background-4.png');background-size:100% 100%;background-repeat:no-repeat">
<div class="cell-1"></div>
<div class="cell-2">
<div class="title" style="color:#EA9036;" data-aos="flip-left">精彩回顧</div>
<img src="./photo/illustration4.png" class="illustration"/>
<!-- </div>
<div class="cell-3"> -->
<div class="reviewPhoto">
<img src="./photo/day3-2.jpg" alt="活動照片" style="display:block">
<img src="./photo/day3-3.jpg" alt="活動照片">
<img src="./photo/day1-3.jpg" alt="活動照片">
<img src="./photo/day3-1.jpg" alt="活動照片">
<img src="./photo/day4-2.jpg" alt="活動照片">
<div id="photoCircle"><div></div><div></div><div></div><div></div><div></div></div>
</div>
</div>
</div>
<!-- Footer (如果有贊助廠商可以放這邊) -->
<footer style="background-color:#EFA375;color:white;height:55vh;margin:0px">
<div id="footer-title">Contact Us!</div>
<div style="display:inline-block;font-size:24px;line-height:5vh;letter-spacing:0.5vw;text-align:right;height:80px;width:55%">
<div>總召 王鼎元 0912-845-656<br></div>
<div>副召 陳禹媛 0988-820-629<br></div>
<div> 吳泓叡 0978-212-021<br></div>
<div> 何昱辰 0987-400-736<br></div>
</div>
<div style="display:inline-block;font-size:24px;line-height:30px;letter-spacing:2px;width:35%;padding-left:50px;;height:80px">
<a href="https://www.facebook.com/ntuimcamp2017/?fref=ts">
<div><i class="fa fa-facebook-official" aria-hidden="true"></i> 2017台大資管營</div></a>
<a href="mailto:camp2017@ntu.im">
<div><i class="fa fa-envelope" aria-hidden="true"></i> camp2017@ntu.im</div>
</a>
<br>
</div>
<div style="display:block;text-align:center;line-height:5vh;margin-top:30px">
<span style="font-size:18px">Copyright © 2017 國立臺灣大學資訊管理營 Designed by YuYuan Chen & YuHsin Lin</span><br>
<span>Illustrations Designed by Freepik</span>
</div>
</footer>
</div>
</body>
<script src="./javascript/jquery.min.js"></script>
<script src="./javascript/index.js"></script>
<script src='./javascript/jquery.scrollTo-min.js'></script>
<script src='./javascript/jquery.easing.min.js'></script>
<script>
AOS.init({
duration: 1200,
});
function GetIEVersion() {
var sAgent = window.navigator.userAgent;
var Idx = sAgent.indexOf("MSIE");
// If IE, return version number.
if (Idx > 0)
return parseInt(sAgent.substring(Idx+ 5, sAgent.indexOf(".", Idx)));
// If IE 11 then look for Updated user agent string.
else if (!!navigator.userAgent.match(/Trident\/7\./))
return 11;
else
return 0; //It is not IE
}
if (GetIEVersion() > 0){
$(".navbar-en").html("台<br>大<br>資<br>管<br>營");
}
</script>