박은주 / Todays_Issue

Go to a project
Toggle navigation Toggle navigation pinning
박은주
6fceef78 1 parent 2dbdb0b9

Add templates

Expand all
Inline Side-by-side
Showing 30 changed files with 1280 additions and 0 deletions
This diff could not be displayed because it is too large.
1 +@font-face {
2 + font-family: 'et-line';
3 + src:url('../fonts/et-line.eot');
4 + src:url('../fonts/et-line.eot?#iefix') format('embedded-opentype'),
5 + url('../fonts/et-line.woff') format('woff'),
6 + url('../fonts/et-line.ttf') format('truetype'),
7 + url('../fonts/et-line.svg#et-line') format('svg');
8 + font-weight: normal;
9 + font-style: normal;
10 +}
11 +
12 +/* Use the following CSS code if you want to use data attributes for inserting your icons */
13 +[data-icon]:before {
14 + font-family: 'et-line';
15 + content: attr(data-icon);
16 + speak: none;
17 + font-weight: normal;
18 + font-variant: normal;
19 + text-transform: none;
20 + line-height: 1;
21 + -webkit-font-smoothing: antialiased;
22 + -moz-osx-font-smoothing: grayscale;
23 + display:inline-block;
24 +}
25 +
26 +/* Use the following CSS code if you want to have a class per icon */
27 +/*
28 +Instead of a list of all class selectors,
29 +you can use the generic selector below, but it's slower:
30 +[class*="icon-"] {
31 +*/
32 +.icon-mobile, .icon-laptop, .icon-desktop, .icon-tablet, .icon-phone, .icon-document, .icon-documents, .icon-search, .icon-clipboard, .icon-newspaper, .icon-notebook, .icon-book-open, .icon-browser, .icon-calendar, .icon-presentation, .icon-picture, .icon-pictures, .icon-video, .icon-camera, .icon-printer, .icon-toolbox, .icon-briefcase, .icon-wallet, .icon-gift, .icon-bargraph, .icon-grid, .icon-expand, .icon-focus, .icon-edit, .icon-adjustments, .icon-ribbon, .icon-hourglass, .icon-lock, .icon-megaphone, .icon-shield, .icon-trophy, .icon-flag, .icon-map, .icon-puzzle, .icon-basket, .icon-envelope, .icon-streetsign, .icon-telescope, .icon-gears, .icon-key, .icon-paperclip, .icon-attachment, .icon-pricetags, .icon-lightbulb, .icon-layers, .icon-pencil, .icon-tools, .icon-tools-2, .icon-scissors, .icon-paintbrush, .icon-magnifying-glass, .icon-circle-compass, .icon-linegraph, .icon-mic, .icon-strategy, .icon-beaker, .icon-caution, .icon-recycle, .icon-anchor, .icon-profile-male, .icon-profile-female, .icon-bike, .icon-wine, .icon-hotairballoon, .icon-globe, .icon-genius, .icon-map-pin, .icon-dial, .icon-chat, .icon-heart, .icon-cloud, .icon-upload, .icon-download, .icon-target, .icon-hazardous, .icon-piechart, .icon-speedometer, .icon-global, .icon-compass, .icon-lifesaver, .icon-clock, .icon-aperture, .icon-quote, .icon-scope, .icon-alarmclock, .icon-refresh, .icon-happy, .icon-sad, .icon-facebook, .icon-twitter, .icon-googleplus, .icon-rss, .icon-tumblr, .icon-linkedin, .icon-dribbble {
33 + font-family: 'et-line';
34 + speak: none;
35 + font-style: normal;
36 + font-weight: normal;
37 + font-variant: normal;
38 + text-transform: none;
39 + line-height: 1;
40 + -webkit-font-smoothing: antialiased;
41 + -moz-osx-font-smoothing: grayscale;
42 + display:inline-block;
43 +}
44 +.icon-mobile:before {
45 + content: "\e000";
46 +}
47 +.icon-laptop:before {
48 + content: "\e001";
49 +}
50 +.icon-desktop:before {
51 + content: "\e002";
52 +}
53 +.icon-tablet:before {
54 + content: "\e003";
55 +}
56 +.icon-phone:before {
57 + content: "\e004";
58 +}
59 +.icon-document:before {
60 + content: "\e005";
61 +}
62 +.icon-documents:before {
63 + content: "\e006";
64 +}
65 +.icon-search:before {
66 + content: "\e007";
67 +}
68 +.icon-clipboard:before {
69 + content: "\e008";
70 +}
71 +.icon-newspaper:before {
72 + content: "\e009";
73 +}
74 +.icon-notebook:before {
75 + content: "\e00a";
76 +}
77 +.icon-book-open:before {
78 + content: "\e00b";
79 +}
80 +.icon-browser:before {
81 + content: "\e00c";
82 +}
83 +.icon-calendar:before {
84 + content: "\e00d";
85 +}
86 +.icon-presentation:before {
87 + content: "\e00e";
88 +}
89 +.icon-picture:before {
90 + content: "\e00f";
91 +}
92 +.icon-pictures:before {
93 + content: "\e010";
94 +}
95 +.icon-video:before {
96 + content: "\e011";
97 +}
98 +.icon-camera:before {
99 + content: "\e012";
100 +}
101 +.icon-printer:before {
102 + content: "\e013";
103 +}
104 +.icon-toolbox:before {
105 + content: "\e014";
106 +}
107 +.icon-briefcase:before {
108 + content: "\e015";
109 +}
110 +.icon-wallet:before {
111 + content: "\e016";
112 +}
113 +.icon-gift:before {
114 + content: "\e017";
115 +}
116 +.icon-bargraph:before {
117 + content: "\e018";
118 +}
119 +.icon-grid:before {
120 + content: "\e019";
121 +}
122 +.icon-expand:before {
123 + content: "\e01a";
124 +}
125 +.icon-focus:before {
126 + content: "\e01b";
127 +}
128 +.icon-edit:before {
129 + content: "\e01c";
130 +}
131 +.icon-adjustments:before {
132 + content: "\e01d";
133 +}
134 +.icon-ribbon:before {
135 + content: "\e01e";
136 +}
137 +.icon-hourglass:before {
138 + content: "\e01f";
139 +}
140 +.icon-lock:before {
141 + content: "\e020";
142 +}
143 +.icon-megaphone:before {
144 + content: "\e021";
145 +}
146 +.icon-shield:before {
147 + content: "\e022";
148 +}
149 +.icon-trophy:before {
150 + content: "\e023";
151 +}
152 +.icon-flag:before {
153 + content: "\e024";
154 +}
155 +.icon-map:before {
156 + content: "\e025";
157 +}
158 +.icon-puzzle:before {
159 + content: "\e026";
160 +}
161 +.icon-basket:before {
162 + content: "\e027";
163 +}
164 +.icon-envelope:before {
165 + content: "\e028";
166 +}
167 +.icon-streetsign:before {
168 + content: "\e029";
169 +}
170 +.icon-telescope:before {
171 + content: "\e02a";
172 +}
173 +.icon-gears:before {
174 + content: "\e02b";
175 +}
176 +.icon-key:before {
177 + content: "\e02c";
178 +}
179 +.icon-paperclip:before {
180 + content: "\e02d";
181 +}
182 +.icon-attachment:before {
183 + content: "\e02e";
184 +}
185 +.icon-pricetags:before {
186 + content: "\e02f";
187 +}
188 +.icon-lightbulb:before {
189 + content: "\e030";
190 +}
191 +.icon-layers:before {
192 + content: "\e031";
193 +}
194 +.icon-pencil:before {
195 + content: "\e032";
196 +}
197 +.icon-tools:before {
198 + content: "\e033";
199 +}
200 +.icon-tools-2:before {
201 + content: "\e034";
202 +}
203 +.icon-scissors:before {
204 + content: "\e035";
205 +}
206 +.icon-paintbrush:before {
207 + content: "\e036";
208 +}
209 +.icon-magnifying-glass:before {
210 + content: "\e037";
211 +}
212 +.icon-circle-compass:before {
213 + content: "\e038";
214 +}
215 +.icon-linegraph:before {
216 + content: "\e039";
217 +}
218 +.icon-mic:before {
219 + content: "\e03a";
220 +}
221 +.icon-strategy:before {
222 + content: "\e03b";
223 +}
224 +.icon-beaker:before {
225 + content: "\e03c";
226 +}
227 +.icon-caution:before {
228 + content: "\e03d";
229 +}
230 +.icon-recycle:before {
231 + content: "\e03e";
232 +}
233 +.icon-anchor:before {
234 + content: "\e03f";
235 +}
236 +.icon-profile-male:before {
237 + content: "\e040";
238 +}
239 +.icon-profile-female:before {
240 + content: "\e041";
241 +}
242 +.icon-bike:before {
243 + content: "\e042";
244 +}
245 +.icon-wine:before {
246 + content: "\e043";
247 +}
248 +.icon-hotairballoon:before {
249 + content: "\e044";
250 +}
251 +.icon-globe:before {
252 + content: "\e045";
253 +}
254 +.icon-genius:before {
255 + content: "\e046";
256 +}
257 +.icon-map-pin:before {
258 + content: "\e047";
259 +}
260 +.icon-dial:before {
261 + content: "\e048";
262 +}
263 +.icon-chat:before {
264 + content: "\e049";
265 +}
266 +.icon-heart:before {
267 + content: "\e04a";
268 +}
269 +.icon-cloud:before {
270 + content: "\e04b";
271 +}
272 +.icon-upload:before {
273 + content: "\e04c";
274 +}
275 +.icon-download:before {
276 + content: "\e04d";
277 +}
278 +.icon-target:before {
279 + content: "\e04e";
280 +}
281 +.icon-hazardous:before {
282 + content: "\e04f";
283 +}
284 +.icon-piechart:before {
285 + content: "\e050";
286 +}
287 +.icon-speedometer:before {
288 + content: "\e051";
289 +}
290 +.icon-global:before {
291 + content: "\e052";
292 +}
293 +.icon-compass:before {
294 + content: "\e053";
295 +}
296 +.icon-lifesaver:before {
297 + content: "\e054";
298 +}
299 +.icon-clock:before {
300 + content: "\e055";
301 +}
302 +.icon-aperture:before {
303 + content: "\e056";
304 +}
305 +.icon-quote:before {
306 + content: "\e057";
307 +}
308 +.icon-scope:before {
309 + content: "\e058";
310 +}
311 +.icon-alarmclock:before {
312 + content: "\e059";
313 +}
314 +.icon-refresh:before {
315 + content: "\e05a";
316 +}
317 +.icon-happy:before {
318 + content: "\e05b";
319 +}
320 +.icon-sad:before {
321 + content: "\e05c";
322 +}
323 +.icon-facebook:before {
324 + content: "\e05d";
325 +}
326 +.icon-twitter:before {
327 + content: "\e05e";
328 +}
329 +.icon-googleplus:before {
330 + content: "\e05f";
331 +}
332 +.icon-rss:before {
333 + content: "\e060";
334 +}
335 +.icon-tumblr:before {
336 + content: "\e061";
337 +}
338 +.icon-linkedin:before {
339 + content: "\e062";
340 +}
341 +.icon-dribbble:before {
342 + content: "\e063";
343 +}
This diff is collapsed. Click to expand it.
1 + /*
2 + Indus by TEMPLATE STOCK
3 + templatestock.co @templatestock
4 + Released for free under the Creative Commons Attribution 3.0 license (templated.co/license)
5 +*/
6 +
7 +/* Settings In style.css :
8 + 1. General
9 + 2.Home/Countdown
10 + 3.Newsletter
11 + 4.Features
12 + 5.Contact-Us
13 +*/
14 +
15 +/* ==============================================
16 +1.GENERAL
17 +=============================================== */
18 +body{
19 + overflow-x: hidden;
20 + overflow-y: auto;
21 + font-family: 'Roboto', sans-serif;
22 +}
23 +.margin-t-50{
24 + margin-top: 50px;
25 +}
26 +.btn-custom{
27 + background-color: #000;
28 + color: #fff;
29 + border-radius: 3px;
30 +}
31 +.btn-custom:hover,.btn-custom:active,.btn-custom:focus{
32 + background-color: #3A3939;
33 + color: #fff;
34 + outline: none;
35 +}
36 +.parallax {
37 + background-position: 0 0;
38 + background-repeat: no-repeat;
39 + background-size: 100% auto;
40 + width: 100%;
41 + background-size: cover;
42 + background-attachment: fixed;
43 +
44 +}
45 +.animationload {
46 + position: fixed;
47 + top:0;
48 + left:0;
49 + right:0;
50 + bottom:0;
51 + background-color:#fff;
52 + z-index:999999;
53 +}
54 +.loader {
55 + width:200px;
56 + height:200px;
57 + font-size:0;
58 + position:absolute;
59 + left:50%;
60 + top:50%;
61 + background-image:url(../images/loader.gif);
62 + background-repeat:no-repeat;
63 + background-position:center;
64 + margin:-100px 0 0 -100px;
65 +}
66 +/* -----------------------------------------------------------------------
67 + 2. HOME / Countdown styles
68 +------------------------------------------------------------------------- */
69 +.logo{
70 + padding-bottom: 5%; /* 로고 */
71 +}
72 +.logo p{ /* 오늘의 학교는 */
73 + color: #ffffff;
74 + padding-top: 20px;
75 + font-style: italic;
76 +}
77 +#home .large-header { /* Background */
78 + background-image: url("../images/pattern.png"),url('../images/img-1.jpg');
79 + background-position: center;
80 +}
81 +.home-main { /* container 정렬 */
82 + position: absolute;
83 + margin: 0;
84 + padding: 0;
85 + text-align: center;
86 + top: 50%;
87 + left: 50%;
88 + -webkit-transform: translate3d(-50%,-50%,0);
89 + transform: translate3d(-50%,-50%,0);
90 +}
91 +#countdown_dashboard { /* 위에거랑 비슷한듯? */
92 + display: block;
93 + margin: 0px auto;
94 + overflow: hidden
95 +}
96 +.dash { /* 숫자 불투명도 */
97 + padding-bottom: 10px;
98 + position: relative;
99 + opacity: 1;
100 +}
101 +.dash_title {
102 + font-size: 16px;
103 + width: 100%;
104 + color: #bbbbbb;
105 + display: block;
106 + clear: both;
107 +}
108 +.digit {
109 + color: #f9f9f9;
110 + font-size: 60px;
111 + font-weight: 300;
112 + display: inline-block;
113 + overflow: hidden;
114 + text-align: center;
115 + height: 110px;
116 + line-height: 110px;
117 + position: relative;
118 + vertical-align: middle;
119 +}
120 +@media(max-height:360px) {
121 + .digit {
122 + font-size: 30px;
123 + height: 50px;
124 + line-height: 50px;
125 + }
126 +}
127 +@media(max-width:560px) {
128 + #countdown_dashboard{
129 + min-width: 300px;
130 + }
131 + .digit{
132 + font-size: 30px;
133 + height: 60px;
134 + line-height: 60px;
135 + }
136 +}
137 +@media(min-width:560px) and (max-width: 1024px){
138 + .digit{
139 + font-size: 40px;
140 + height: 80px;
141 + line-height: 80px;
142 + }
143 +}
144 +/* -----------------------------------------------------------------------
145 + 4. Features styles
146 +------------------------------------------------------------------------- */
147 +.features{
148 + padding: 120px 0px 100px 0px;
149 +}
150 +.features h4{
151 + color: #fff;
152 +}
153 +#features{
154 + background:url("../images/pattern.png"),url("../images/img-2.jpg");
155 +}
156 +div.open-overlay {
157 + width: 80px;
158 + height: 80px;
159 + margin: 0 auto;
160 + -webkit-transition: all .6s ease 0s;
161 + -moz-transition: all .6s ease 0s;
162 + transition: all .6s ease 0s;
163 + -webkit-transform: rotate(45deg);
164 + -moz-transform: rotate(45deg);
165 + transform: rotate(45deg);
166 + text-align: center;
167 + color: #fff;
168 + border: solid 3px #fff;
169 + border-radius: 3px;
170 +}
171 +.open-overlay {
172 + font-size: 28px;
173 + line-height: 60px;
174 + width: 60px;
175 + height: 60px;
176 + margin-top: -60px;
177 + margin-left: -30px;
178 +}
179 +.open-overlay i {
180 + font-size: 32px;
181 + line-height: 70px;
182 + z-index: 2;
183 + margin: 0 auto;
184 + cursor: inherit;
185 + -webkit-transition: all .6s ease 0s;
186 + -moz-transition: all .6s ease 0s;
187 + transition: all .6s ease 0s;
188 + -webkit-transform: rotate(-45deg);
189 + -moz-transform: rotate(-45deg);
190 + transform: rotate(-45deg);
191 + color: inherit;
192 + background: rgba(255,255,255,.0);
193 +}
194 +.features-box:hover .open-overlay {
195 + -webkit-transform: rotate(0deg);
196 + -moz-transform: rotate(0deg);
197 + transform: rotate(0deg);
198 + background: rgba(255,255,255,1);
199 +}
200 +.features-box:hover .open-overlay i {
201 + -webkit-transform: rotate(0deg);
202 + -moz-transform: rotate(0deg);
203 + transform: rotate(0deg);
204 + color: #444;
205 + font-weight: bold;
206 +}
207 +.features-box h4{
208 + padding-top: 30px;
209 + text-transform: uppercase;
210 +}
211 +.features-box p{
212 + color: #bbbbbb;
213 + padding-top: 10px;
214 + margin-bottom: 0px;
215 +}
216 +@media (max-width: 1000px){
217 + .features-box{
218 + padding-top: 50px;
219 + }
220 +}
221 +/*-------------------------------------------------------------------*/
222 +/* 5.CONTACT
223 +/*-------------------------------------------------------------------*/
224 +.contact{
225 + text-align: center;
226 + padding: 100px 0px;
227 +}
228 +.contact h4{
229 + font-size: 22px;
230 + line-height: 28px;
231 + margin-bottom: 10px;
232 + color: #000;
233 + text-transform: uppercase;
234 +}
235 +.contact p{
236 + color: #534F4F;
237 + font-size: 16px;
238 + margin-bottom: 0px;
239 + padding: 10px 0px 30px 0px;
240 +}
241 +.contact input {
242 + width: 100%;
243 + height: 43px;
244 + margin-bottom: 20px;
245 + line-height: 20px;
246 + padding-left: 15px;
247 + font-size: 15px;
248 + color: #000000;
249 +}
250 +.contact .validation{
251 + border: 1px solid #ff0000;
252 +}
253 +.contact textarea {
254 + width: 100%;
255 + height: 170px;
256 + margin-bottom: 15px;
257 + padding: 15px 55px 15px 15px;
258 + font-size: 15px;
259 + color: #000000;
260 + line-height: 28px;
261 +}
262 +textarea {
263 + resize: none;
264 +}
265 +.contact input:focus,.contact textarea:focus,.contact input:active,.contact textarea:active{
266 + border: 1px solid #000;
267 + outline: none;
268 +}
269 +
270 +.confirm-message {
271 + margin-top: 20px;
272 + font-size: 18px;
273 + color: #000;
274 + padding: 10px 0 10px;
275 + text-transform: uppercase;
276 + display: none;
277 + text-align: center;
278 +}
279 +.line-separate {
280 + display: block;
281 + margin-bottom: 10px !important;
282 + width: 120px;
283 + height: 15px;
284 + position: relative;
285 + margin: 0 auto;
286 +}
287 +.line-white:before, .line-white:after {
288 + background: #000;
289 +}
290 +.line-separate:before {
291 + content: '';
292 + display: block;
293 + position: relative;
294 + top: 7px;
295 + width: 49px;
296 + height: 2px;
297 + margin: 0 !important;
298 + float: left;
299 +}
300 +.line-white span {
301 + box-shadow: inset 0px 0px 0px 2px #000;
302 +}
303 +.line-separate span {
304 + display: block;
305 + position: relative;
306 + width: 17px;
307 + height: 17px;
308 + margin: 0 auto;
309 + transform: rotate(45deg);
310 + -webkit-transform: rotate(45deg);
311 + -moz-transform: rotate(45deg);
312 + -o-transform: rotate(45deg);
313 +}
314 +.line-separate:after {
315 + content: '';
316 + display: block;
317 + position: relative;
318 + top: -10px;
319 + width: 49px;
320 + height: 2px;
321 + margin: 0 !important;
322 + float: right;
323 +}
324 +.social li{
325 + margin: 0px 10px !important;
326 +}
327 +li.social-btn {
328 + width: 32px;
329 + height: 32px;
330 + margin: 0 auto;
331 + -webkit-transition: all .6s ease 0s;
332 + -moz-transition: all .6s ease 0s;
333 + transition: all .6s ease 0s;
334 + -webkit-transform: rotate(-45deg);
335 + -moz-transform: rotate(-45deg);
336 + transform: rotate(-45deg);
337 + text-align: center;
338 + color: #fff;
339 + border: solid 1px #000;
340 +}
341 +.social-btn {
342 + font-size: 16px;
343 + line-height: 30px;
344 + width: 30px;
345 + height: 30px;
346 + margin-top: -60px;
347 + margin-left: -30px;
348 +}
349 +.social-btn a{
350 + padding: 10px
351 +}
352 +.social-btn a{
353 + font-size: 15px;
354 + line-height: 17px;
355 + z-index: 2;
356 + margin: 0 auto;
357 + cursor: inherit;
358 + -webkit-transition: all .6s ease 0s;
359 + -moz-transition: all .6s ease 0s;
360 + transition: all .6s ease 0s;
361 + color: inherit;
362 + background: rgba(255,255,255,.0);
363 +}
364 +.social-btn a i{
365 + -webkit-transform: rotate(45deg);
366 + -moz-transform: rotate(45deg);
367 + transform: rotate(45deg);
368 + margin-left: -0.3em;
369 + margin-top: -0.1em;
370 +}
371 +.social-btn a i:last-of-type {
372 + margin-left: -0.5em;
373 + margin-top: -0.3em;
374 +}
375 +#fb{
376 + border: 2px solid #3b5998;
377 + color: #3b5998;
378 +}
379 +#fb a{
380 + color: #3b5998;
381 +}
382 +#fb:hover{
383 + background-color: #3b5998;
384 +}
385 +#fb:hover a{
386 + color: #fff;
387 +}
388 +#tw{
389 + border: 2px solid #00aced;
390 + color: #00aced;
391 +}
392 +#tw a{
393 + color: #00aced;
394 +}
395 +#tw:hover{
396 + background-color: #00aced;
397 +}
398 +#tw:hover a{
399 + color: #fff;
400 +}
401 +#flk{
402 + border: 2px solid #ff0084;
403 + color: #ff0084;
404 +}
405 +#flk a{
406 + color: #ff0084;
407 +}
408 +#flk:hover{
409 + background-color: #ff0084;
410 +}
411 +#flk:hover a{
412 + color: #fff;
413 +}
414 +#tbl{
415 + border: 2px solid #32506d;
416 + color: #32506d;
417 +}
418 +#tbl a{
419 + color: #32506d;
420 +}
421 +#tbl:hover{
422 + background-color: #32506d;
423 +}
424 +#tbl:hover a{
425 + color: #fff;
426 +}
427 +#pin{
428 + border: 2px solid #cb2027;
429 +}
430 +#pin a{
431 + color: #cb2027;
432 +}
433 +#pin:hover{
434 + background-color: #cb2027;
435 +}
436 +#pin:hover a{
437 + color: #fff;
438 +}
439 +
440 +.footer{
441 + padding-bottom: 100px;
442 +}
443 +.copyright{
444 + padding-top: 10px;
445 +}
446 +
No preview for this file type
This diff could not be displayed because it is too large.
No preview for this file type
No preview for this file type
No preview for this file type
This diff could not be displayed because it is too large.
No preview for this file type
No preview for this file type
No preview for this file type
No preview for this file type
This diff could not be displayed because it is too large.
No preview for this file type
No preview for this file type
1 + /*
2 + Indus by TEMPLATE STOCK
3 + templatestock.co @templatestock
4 + Released for free under the Creative Commons Attribution 3.0 license (templated.co/license)
5 +*/
6 +
7 +(function() {
8 +
9 + var width, height, largeHeader, canvas, ctx, circles, target, animateHeader = true;
10 +
11 + // Main
12 + initHeader();
13 + addListeners();
14 +
15 + function initHeader() {
16 + width = window.innerWidth;
17 + height = window.innerHeight;
18 + target = {x: 0, y: height};
19 +
20 + largeHeader = document.getElementById('large-header');
21 + largeHeader.style.height = height+'px';
22 +
23 + canvas = document.getElementById('demo-canvas');
24 + canvas.width = width;
25 + canvas.height = height;
26 + ctx = canvas.getContext('2d');
27 +
28 + // create particles
29 + circles = [];
30 + for(var x = 0; x < width*0.5; x++) {
31 + var c = new Circle();
32 + circles.push(c);
33 + }
34 + animate();
35 + }
36 +
37 + // Event handling
38 + function addListeners() {
39 + window.addEventListener('scroll', scrollCheck);
40 + window.addEventListener('resize', resize);
41 + }
42 +
43 + function scrollCheck() {
44 + if(document.body.scrollTop > height) animateHeader = false;
45 + else animateHeader = true;
46 + }
47 +
48 + function resize() {
49 + width = window.innerWidth;
50 + height = window.innerHeight;
51 + largeHeader.style.height = height+'px';
52 + canvas.width = width;
53 + canvas.height = height;
54 + }
55 +
56 + function animate() {
57 + if(animateHeader) {
58 + ctx.clearRect(0,0,width,height);
59 + for(var i in circles) {
60 + circles[i].draw();
61 + }
62 + }
63 + requestAnimationFrame(animate);
64 + }
65 +
66 + // Canvas manipulation
67 + function Circle() {
68 + var _this = this;
69 +
70 + // constructor
71 + (function() {
72 + _this.pos = {};
73 + init();
74 + //console.log(_this);
75 + })();
76 +
77 + function init() {
78 + _this.pos.x = Math.random()*width;
79 + _this.pos.y = height+Math.random()*100;
80 + _this.alpha = 0.1+Math.random()*0.3;
81 + _this.scale = 0.1+Math.random()*0.3;
82 + _this.velocity = Math.random();
83 + }
84 +
85 + this.draw = function() {
86 + if(_this.alpha <= 0) {
87 + init();
88 + }
89 + _this.pos.y -= _this.velocity;
90 + _this.alpha -= 0.0005;
91 + ctx.beginPath();
92 + ctx.arc(_this.pos.x, _this.pos.y, _this.scale*10, 0, 2 * Math.PI, false);
93 + ctx.fillStyle = 'rgba(255,255,255,'+ _this.alpha+')';
94 + ctx.fill();
95 + };
96 + }
97 +
98 +})();
...\ No newline at end of file ...\ No newline at end of file
1 +/*!
2 + * jQuery Countdown plugin v1.0
3 + * http://www.littlewebthings.com/projects/countdown/
4 + *
5 + * Copyright 2010, Vassilis Dourdounis
6 + *
7 + * Permission is hereby granted, free of charge, to any person obtaining a copy
8 + * of this software and associated documentation files (the "Software"), to deal
9 + * in the Software without restriction, including without limitation the rights
10 + * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
11 + * copies of the Software, and to permit persons to whom the Software is
12 + * furnished to do so, subject to the following conditions:
13 + *
14 + * The above copyright notice and this permission notice shall be included in
15 + * all copies or substantial portions of the Software.
16 + *
17 + * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
18 + * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
19 + * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
20 + * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
21 + * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
22 + * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
23 + * THE SOFTWARE.
24 + */
25 +(function($){
26 +
27 + $.fn.countDown = function (options) {
28 +
29 + config = {};
30 +
31 + $.extend(config, options);
32 +
33 + diffSecs = this.setCountDown(config);
34 +
35 + if (config.onComplete)
36 + {
37 + $.data($(this)[0], 'callback', config.onComplete);
38 + }
39 + if (config.omitWeeks)
40 + {
41 + $.data($(this)[0], 'omitWeeks', config.omitWeeks);
42 + }
43 +
44 + $('#' + $(this).attr('id') + ' .digit').html('<div class="top"></div><div class="bottom"></div>');
45 + $(this).doCountDown($(this).attr('id'), diffSecs, 500);
46 +
47 + return this;
48 +
49 + };
50 +
51 + $.fn.stopCountDown = function () {
52 + clearTimeout($.data(this[0], 'timer'));
53 + };
54 +
55 + $.fn.startCountDown = function () {
56 + this.doCountDown($(this).attr('id'),$.data(this[0], 'diffSecs'), 500);
57 + };
58 +
59 + $.fn.setCountDown = function (options) {
60 + var targetTime = new Date();
61 +
62 + if (options.targetDate)
63 + {
64 + targetTime = new Date(options.targetDate.month + '/' + options.targetDate.day + '/' + options.targetDate.year + ' ' + options.targetDate.hour + ':' + options.targetDate.min + ':' + options.targetDate.sec + (options.targetDate.utc ? ' UTC' : ''));
65 + }
66 + else if (options.targetOffset)
67 + {
68 + targetTime.setFullYear(options.targetOffset.year + targetTime.getFullYear());
69 + targetTime.setMonth(options.targetOffset.month + targetTime.getMonth());
70 + targetTime.setDate(options.targetOffset.day + targetTime.getDate());
71 + targetTime.setHours(options.targetOffset.hour + targetTime.getHours());
72 + targetTime.setMinutes(options.targetOffset.min + targetTime.getMinutes());
73 + targetTime.setSeconds(options.targetOffset.sec + targetTime.getSeconds());
74 + }
75 +
76 + var nowTime = new Date();
77 +
78 + diffSecs = Math.floor((targetTime.valueOf()-nowTime.valueOf())/1000);
79 +
80 + $.data(this[0], 'diffSecs', diffSecs);
81 +
82 + return diffSecs;
83 + };
84 +
85 + $.fn.doCountDown = function (id, diffSecs, duration) {
86 + $this = $('#' + id);
87 + if (diffSecs <= 0)
88 + {
89 + diffSecs = 0;
90 + if ($.data($this[0], 'timer'))
91 + {
92 + clearTimeout($.data($this[0], 'timer'));
93 + }
94 + }
95 +
96 + secs = diffSecs % 60;
97 + mins = Math.floor(diffSecs/60)%60;
98 + hours = Math.floor(diffSecs/60/60)%24;
99 + if ($.data($this[0], 'omitWeeks') == true)
100 + {
101 + days = Math.floor(diffSecs/60/60/24);
102 + weeks = Math.floor(diffSecs/60/60/24/7);
103 + }
104 + else
105 + {
106 + days = Math.floor(diffSecs/60/60/24)%7;
107 + weeks = Math.floor(diffSecs/60/60/24/7);
108 + }
109 +
110 + $this.dashChangeTo(id, 'seconds_dash', secs, duration ? duration : 800);
111 + $this.dashChangeTo(id, 'minutes_dash', mins, duration ? duration : 1200);
112 + $this.dashChangeTo(id, 'hours_dash', hours, duration ? duration : 1200);
113 + $this.dashChangeTo(id, 'days_dash', days, duration ? duration : 1200);
114 + $this.dashChangeTo(id, 'weeks_dash', weeks, duration ? duration : 1200);
115 +
116 + $.data($this[0], 'diffSecs', diffSecs);
117 + if (diffSecs > 0)
118 + {
119 + e = $this;
120 + t = setTimeout(function() { e.doCountDown(id, diffSecs-1) } , 1000);
121 + $.data(e[0], 'timer', t);
122 + }
123 + else if (cb = $.data($this[0], 'callback'))
124 + {
125 + $.data($this[0], 'callback')();
126 + }
127 +
128 + };
129 +
130 + $.fn.dashChangeTo = function(id, dash, n, duration) {
131 + $this = $('#' + id);
132 +
133 + for (var i=($this.find('.' + dash + ' .digit').length-1); i>=0; i--)
134 + {
135 + var d = n%10;
136 + n = (n - d) / 10;
137 + $this.digitChangeTo('#' + $this.attr('id') + ' .' + dash + ' .digit:eq('+i+')', d, duration);
138 + }
139 + };
140 +
141 + $.fn.digitChangeTo = function (digit, n, duration) {
142 + if (!duration)
143 + {
144 + duration = 800;
145 + }
146 + if ($(digit + ' div.top').html() != n + '')
147 + {
148 +
149 + $(digit + ' div.top').css({'display': 'none'});
150 + $(digit + ' div.top').html((n ? n : '0')).slideDown(duration);
151 +
152 + $(digit + ' div.bottom').animate({'height': ''}, duration, function() {
153 + $(digit + ' div.bottom').html($(digit + ' div.top').html());
154 + $(digit + ' div.bottom').css({'display': 'block', 'height': ''});
155 + $(digit + ' div.top').hide().slideUp(10);
156 +
157 +
158 + });
159 + }
160 + };
161 +
162 +})(jQuery);
163 +
164 +
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
1 + /*
2 + Indus by TEMPLATE STOCK
3 + templatestock.co @templatestock
4 + Released for free under the Creative Commons Attribution 3.0 license (templated.co/license)
5 +*/
6 +
7 +/* ------------------------------------------------------------------------------
8 + This is jquery module for main page
9 + ------------------------------------------------------------------------------ */
10 +
11 + /* Global constants */
12 +
13 + /*global jQuery */
14 + jQuery(function ($) {
15 + 'use strict';
16 +
17 + var App = {
18 + $options: {},
19 + $loader: $(".loader"),
20 + $animationload: $(".animationload"),
21 + $countdown: $('#countdown_dashboard'),
22 +
23 + bindEvents: function() {
24 + //binding events
25 + $(window).on('load', this.load.bind(this));
26 + $(document).on('ready', this.docReady.bind(this));
27 + },
28 + load: function() {
29 + /* ==============================================
30 + 1.Page Preloader
31 + =============================================== */
32 + this.$loader.delay(300).fadeOut();
33 + this.$animationload.delay(600).fadeOut("slow");
34 + },
35 + docReady: function() {
36 + /* -----------------------------------------------------------------------
37 + Countdown
38 + ----------------------------------------------------------------------- */
39 + this.$countdown.countDown({
40 + targetDate: {
41 + 'day': this.$options.day,
42 + 'month': this.$options.month,
43 + 'year': this.$options.year,
44 + 'hour': this.$options.hour,
45 + 'min': this.$options.min,
46 + 'sec': this.$options.sec
47 + },
48 + omitWeeks: true
49 + });
50 +
51 + /* ==============================================
52 + NiceScroll
53 + =============================================== */
54 + $("html").niceScroll({
55 + scrollspeed: 50,
56 + mousescrollstep: 38,
57 + cursorwidth: 7,
58 + cursorborder: 0,
59 + autohidemode: true,
60 + zindex: 9999999,
61 + horizrailenabled: false,
62 + cursorborderradius: 0
63 + });
64 +
65 + /* ==============================================
66 + Parallax
67 + =============================================== */
68 + $(window).stellar({
69 + horizontalScrolling: false,
70 + responsive: true,
71 + scrollProperty: 'scroll',
72 + parallaxElements: false,
73 + horizontalOffset: 0,
74 + verticalOffset: 0
75 + });
76 +
77 + //custom app
78 +
79 + },
80 + init: function (_options) {
81 + $.extend(this.$options, _options);
82 + this.bindEvents();
83 + }
84 + }
85 +
86 + //Initializing the app
87 + //passing the countdown date
88 + App.init({day: 18, month: 2, year: 2016, hour: 11, min: 59, sec: 59});
89 +});
...\ No newline at end of file ...\ No newline at end of file
1 +/*
2 +A Design by Template Stock
3 +Author: Template Stock
4 +Author URL: http://templatestock.co
5 +License: Creative Commons Attribution 3.0 Unported
6 +License URL: http://creativecommons.org/licenses/by/3.0/
7 +*/
8 +----------------------------------
9 +NOTE : FREQUENTLY ASKED QUESTIONS
10 +----------------------------------
11 +
12 +1. What is Template Stock?
13 +
14 + Template Stock is an initiative of AgileITs to provide free web designs which are cross device supported.
15 +
16 +2. Is Template Stock Templates Really Free?
17 +
18 + Yes, all our templates free to use for both commercial and non-commercial, but you have provide a back link to Template Stock.com which is already included in footer design by Template Stock.com don’t edit or remove it.
19 +
20 +3. I want to Help Template Stock, How can I?
21 +
22 + You can help Template Stock By
23 + 1. Donate Some $’s, Any Amount your wish
24 + 2. Contribute Design inventory like stock photos, Icons or PSD designs with full rights to Template Stock
25 +
26 +4. I want to remove Template Stock.com back link from footer?
27 +
28 + We have two plans for that per template and unlimited.
29 + Donate us $10 per template. If you want templates for multiple domains or bulk templates please contact info@templatestock.co
30 +
31 +5. Will these templates work on iPhone, Android platforms, Tabs like kindle and Ipads?
32 +
33 + Yes, Template Stock templates work with all Smartphones and Tablets. To, support all the devices we are providing bootstrap Responisve designs WEB Template.
34 +
35 +6. What is Web Template?
36 +
37 + WEB template is a responsive design which can be used for desktop users. Users visiting website from desktop browsers can view WEB template
38 +
39 +
40 +7. Do I need a separate version for Smartphones and Tablets?
41 +
42 + No, WEB Template is compatible in all web browsers, Smartphones and Tablets.
43 +
44 +8. Do I need any database?
45 +
46 + No, it is not necessary.
47 +
48 +
49 +11. Under which license you are providing these templates?
50 +
51 + Template Stock templates are under Creative Commons Attribution 3.0 unported
52 +
1 +<!DOCTYPE html>
2 +<!--
3 + Indus by TEMPLATE STOCK
4 + templatestock.co @templatestock
5 + Released for free under the Creative Commons Attribution 3.0 license (templated.co/license)
6 +-->
7 +
8 +<html lang="en" class="no-js">
9 + <head>
10 + <meta charset="utf-8">
11 + <meta name="viewport" content="width=device-width, initial-scale=1">
12 + <title>Today's Issue</title>
13 +
14 + <link rel="stylesheet" type="text/css" href="../static/css/bootstrap.min.css" />
15 + <link rel="stylesheet" type="text/css" href="../static/css/et-lineicon.css" />
16 + <link rel="stylesheet" type="text/css" href="../static/css/font-awesome.min.css" />
17 + <link rel="stylesheet" type="text/css" href="../static/css/style.css" />
18 + <link href='http://fonts.googleapis.com/css?family=Roboto:400,500,400italic,500italic,700' rel='stylesheet' type='text/css'>
19 + <!--[if IE]>
20 + <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
21 + <![endif]-->
22 + </head>
23 + <body>
24 + <div class="animationload">
25 + <div class="loader">
26 + Loading...
27 + </div>
28 + </div>
29 + <section id="home">
30 + <div class="content">
31 + <div id="large-header" class="large-header">
32 + <canvas id="demo-canvas"></canvas>
33 + <div id="countdown_dashboard" class="home-main container">
34 + <div class="row">
35 + <div class="logo">
36 + <img src="../static/images/logo-light.png" alt="logo" width="70">
37 + <p>오 늘 의 학 교 는</p>
38 + </div>
39 + </div>
40 + <div class="row">
41 + <div class="col-md-3 col-sm-3 col-xs-6 dash-glob" data-scroll-reveal="enter bottom move 25px, after 0.3s">
42 + <div class="dash days_dash">
43 + <div class="digit">{{ data.total }}</div>
44 + <span class="dash_title">새 글</span>
45 + </div>
46 + </div>
47 + <div class="col-md-3 col-sm-3 col-xs-6 dash-glob" data-scroll-reveal="enter bottom move 25px, after 0.3s">
48 + <div class="dash hours_dash">
49 + <div class="digit">{{ data.positive }}</div>
50 + <span class="dash_title">긍정</span>
51 + </div>
52 + </div>
53 + <div class="col-md-3 col-sm-3 col-xs-6 dash-glob" data-scroll-reveal="enter bottom move 25px, after 0.3s">
54 + <div class="dash minutes_dash">
55 + <div class="digit">{{ data.neutral }}</div>
56 + <span class="dash_title">중립</span>
57 + </div>
58 + </div>
59 + <div class="col-md-3 col-sm-3 col-xs-6 dash-glob" data-scroll-reveal="enter bottom move 25px, after 0.3s">
60 + <div class="dash seconds_dash">
61 + <div class="digit">{{ data.negative }}</div>
62 + <span class="dash_title">부정</span>
63 + </div>
64 + </div>
65 + </div>
66 + </div>
67 + </div>
68 + </div>
69 + </section>
70 + <section id="contact" class="contact">
71 + <!-- WordCloud FIG -->
72 + </section>
73 + <footer class="footer">
74 + <div class="container text-center">
75 + <div class="row">
76 + <p class="copyright">Copyright© 2016 <a href="http://templatestock.co">Template Stock</p>
77 + </div>
78 + </div>
79 + </footer>
80 +
81 + <!-- JAVASCRIPTS -->
82 + <script src="../static/js/jquery.min.js"></script>
83 + <script src="../static/js/jquery.stellar.min.js"></script>
84 + <script src="../static/js/jquery.nicescroll.min.js"></script>
85 + <script src="../static/js/animated.js"></script>
86 + <script src="../static/js/main.js"></script>
87 + </body>
88 +</html>
...\ No newline at end of file ...\ No newline at end of file