박은주 / 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.
@font-face {
font-family: 'et-line';
src:url('../fonts/et-line.eot');
src:url('../fonts/et-line.eot?#iefix') format('embedded-opentype'),
url('../fonts/et-line.woff') format('woff'),
url('../fonts/et-line.ttf') format('truetype'),
url('../fonts/et-line.svg#et-line') format('svg');
font-weight: normal;
font-style: normal;
}
/* Use the following CSS code if you want to use data attributes for inserting your icons */
[data-icon]:before {
font-family: 'et-line';
content: attr(data-icon);
speak: none;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
display:inline-block;
}
/* Use the following CSS code if you want to have a class per icon */
/*
Instead of a list of all class selectors,
you can use the generic selector below, but it's slower:
[class*="icon-"] {
*/
.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 {
font-family: 'et-line';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
display:inline-block;
}
.icon-mobile:before {
content: "\e000";
}
.icon-laptop:before {
content: "\e001";
}
.icon-desktop:before {
content: "\e002";
}
.icon-tablet:before {
content: "\e003";
}
.icon-phone:before {
content: "\e004";
}
.icon-document:before {
content: "\e005";
}
.icon-documents:before {
content: "\e006";
}
.icon-search:before {
content: "\e007";
}
.icon-clipboard:before {
content: "\e008";
}
.icon-newspaper:before {
content: "\e009";
}
.icon-notebook:before {
content: "\e00a";
}
.icon-book-open:before {
content: "\e00b";
}
.icon-browser:before {
content: "\e00c";
}
.icon-calendar:before {
content: "\e00d";
}
.icon-presentation:before {
content: "\e00e";
}
.icon-picture:before {
content: "\e00f";
}
.icon-pictures:before {
content: "\e010";
}
.icon-video:before {
content: "\e011";
}
.icon-camera:before {
content: "\e012";
}
.icon-printer:before {
content: "\e013";
}
.icon-toolbox:before {
content: "\e014";
}
.icon-briefcase:before {
content: "\e015";
}
.icon-wallet:before {
content: "\e016";
}
.icon-gift:before {
content: "\e017";
}
.icon-bargraph:before {
content: "\e018";
}
.icon-grid:before {
content: "\e019";
}
.icon-expand:before {
content: "\e01a";
}
.icon-focus:before {
content: "\e01b";
}
.icon-edit:before {
content: "\e01c";
}
.icon-adjustments:before {
content: "\e01d";
}
.icon-ribbon:before {
content: "\e01e";
}
.icon-hourglass:before {
content: "\e01f";
}
.icon-lock:before {
content: "\e020";
}
.icon-megaphone:before {
content: "\e021";
}
.icon-shield:before {
content: "\e022";
}
.icon-trophy:before {
content: "\e023";
}
.icon-flag:before {
content: "\e024";
}
.icon-map:before {
content: "\e025";
}
.icon-puzzle:before {
content: "\e026";
}
.icon-basket:before {
content: "\e027";
}
.icon-envelope:before {
content: "\e028";
}
.icon-streetsign:before {
content: "\e029";
}
.icon-telescope:before {
content: "\e02a";
}
.icon-gears:before {
content: "\e02b";
}
.icon-key:before {
content: "\e02c";
}
.icon-paperclip:before {
content: "\e02d";
}
.icon-attachment:before {
content: "\e02e";
}
.icon-pricetags:before {
content: "\e02f";
}
.icon-lightbulb:before {
content: "\e030";
}
.icon-layers:before {
content: "\e031";
}
.icon-pencil:before {
content: "\e032";
}
.icon-tools:before {
content: "\e033";
}
.icon-tools-2:before {
content: "\e034";
}
.icon-scissors:before {
content: "\e035";
}
.icon-paintbrush:before {
content: "\e036";
}
.icon-magnifying-glass:before {
content: "\e037";
}
.icon-circle-compass:before {
content: "\e038";
}
.icon-linegraph:before {
content: "\e039";
}
.icon-mic:before {
content: "\e03a";
}
.icon-strategy:before {
content: "\e03b";
}
.icon-beaker:before {
content: "\e03c";
}
.icon-caution:before {
content: "\e03d";
}
.icon-recycle:before {
content: "\e03e";
}
.icon-anchor:before {
content: "\e03f";
}
.icon-profile-male:before {
content: "\e040";
}
.icon-profile-female:before {
content: "\e041";
}
.icon-bike:before {
content: "\e042";
}
.icon-wine:before {
content: "\e043";
}
.icon-hotairballoon:before {
content: "\e044";
}
.icon-globe:before {
content: "\e045";
}
.icon-genius:before {
content: "\e046";
}
.icon-map-pin:before {
content: "\e047";
}
.icon-dial:before {
content: "\e048";
}
.icon-chat:before {
content: "\e049";
}
.icon-heart:before {
content: "\e04a";
}
.icon-cloud:before {
content: "\e04b";
}
.icon-upload:before {
content: "\e04c";
}
.icon-download:before {
content: "\e04d";
}
.icon-target:before {
content: "\e04e";
}
.icon-hazardous:before {
content: "\e04f";
}
.icon-piechart:before {
content: "\e050";
}
.icon-speedometer:before {
content: "\e051";
}
.icon-global:before {
content: "\e052";
}
.icon-compass:before {
content: "\e053";
}
.icon-lifesaver:before {
content: "\e054";
}
.icon-clock:before {
content: "\e055";
}
.icon-aperture:before {
content: "\e056";
}
.icon-quote:before {
content: "\e057";
}
.icon-scope:before {
content: "\e058";
}
.icon-alarmclock:before {
content: "\e059";
}
.icon-refresh:before {
content: "\e05a";
}
.icon-happy:before {
content: "\e05b";
}
.icon-sad:before {
content: "\e05c";
}
.icon-facebook:before {
content: "\e05d";
}
.icon-twitter:before {
content: "\e05e";
}
.icon-googleplus:before {
content: "\e05f";
}
.icon-rss:before {
content: "\e060";
}
.icon-tumblr:before {
content: "\e061";
}
.icon-linkedin:before {
content: "\e062";
}
.icon-dribbble:before {
content: "\e063";
}
This diff is collapsed. Click to expand it.
/*
Indus by TEMPLATE STOCK
templatestock.co @templatestock
Released for free under the Creative Commons Attribution 3.0 license (templated.co/license)
*/
/* Settings In style.css :
1. General
2.Home/Countdown
3.Newsletter
4.Features
5.Contact-Us
*/
/* ==============================================
1.GENERAL
=============================================== */
body{
overflow-x: hidden;
overflow-y: auto;
font-family: 'Roboto', sans-serif;
}
.margin-t-50{
margin-top: 50px;
}
.btn-custom{
background-color: #000;
color: #fff;
border-radius: 3px;
}
.btn-custom:hover,.btn-custom:active,.btn-custom:focus{
background-color: #3A3939;
color: #fff;
outline: none;
}
.parallax {
background-position: 0 0;
background-repeat: no-repeat;
background-size: 100% auto;
width: 100%;
background-size: cover;
background-attachment: fixed;
}
.animationload {
position: fixed;
top:0;
left:0;
right:0;
bottom:0;
background-color:#fff;
z-index:999999;
}
.loader {
width:200px;
height:200px;
font-size:0;
position:absolute;
left:50%;
top:50%;
background-image:url(../images/loader.gif);
background-repeat:no-repeat;
background-position:center;
margin:-100px 0 0 -100px;
}
/* -----------------------------------------------------------------------
2. HOME / Countdown styles
------------------------------------------------------------------------- */
.logo{
padding-bottom: 5%; /* 로고 */
}
.logo p{ /* 오늘의 학교는 */
color: #ffffff;
padding-top: 20px;
font-style: italic;
}
#home .large-header { /* Background */
background-image: url("../images/pattern.png"),url('../images/img-1.jpg');
background-position: center;
}
.home-main { /* container 정렬 */
position: absolute;
margin: 0;
padding: 0;
text-align: center;
top: 50%;
left: 50%;
-webkit-transform: translate3d(-50%,-50%,0);
transform: translate3d(-50%,-50%,0);
}
#countdown_dashboard { /* 위에거랑 비슷한듯? */
display: block;
margin: 0px auto;
overflow: hidden
}
.dash { /* 숫자 불투명도 */
padding-bottom: 10px;
position: relative;
opacity: 1;
}
.dash_title {
font-size: 16px;
width: 100%;
color: #bbbbbb;
display: block;
clear: both;
}
.digit {
color: #f9f9f9;
font-size: 60px;
font-weight: 300;
display: inline-block;
overflow: hidden;
text-align: center;
height: 110px;
line-height: 110px;
position: relative;
vertical-align: middle;
}
@media(max-height:360px) {
.digit {
font-size: 30px;
height: 50px;
line-height: 50px;
}
}
@media(max-width:560px) {
#countdown_dashboard{
min-width: 300px;
}
.digit{
font-size: 30px;
height: 60px;
line-height: 60px;
}
}
@media(min-width:560px) and (max-width: 1024px){
.digit{
font-size: 40px;
height: 80px;
line-height: 80px;
}
}
/* -----------------------------------------------------------------------
4. Features styles
------------------------------------------------------------------------- */
.features{
padding: 120px 0px 100px 0px;
}
.features h4{
color: #fff;
}
#features{
background:url("../images/pattern.png"),url("../images/img-2.jpg");
}
div.open-overlay {
width: 80px;
height: 80px;
margin: 0 auto;
-webkit-transition: all .6s ease 0s;
-moz-transition: all .6s ease 0s;
transition: all .6s ease 0s;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
transform: rotate(45deg);
text-align: center;
color: #fff;
border: solid 3px #fff;
border-radius: 3px;
}
.open-overlay {
font-size: 28px;
line-height: 60px;
width: 60px;
height: 60px;
margin-top: -60px;
margin-left: -30px;
}
.open-overlay i {
font-size: 32px;
line-height: 70px;
z-index: 2;
margin: 0 auto;
cursor: inherit;
-webkit-transition: all .6s ease 0s;
-moz-transition: all .6s ease 0s;
transition: all .6s ease 0s;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
transform: rotate(-45deg);
color: inherit;
background: rgba(255,255,255,.0);
}
.features-box:hover .open-overlay {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
transform: rotate(0deg);
background: rgba(255,255,255,1);
}
.features-box:hover .open-overlay i {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
transform: rotate(0deg);
color: #444;
font-weight: bold;
}
.features-box h4{
padding-top: 30px;
text-transform: uppercase;
}
.features-box p{
color: #bbbbbb;
padding-top: 10px;
margin-bottom: 0px;
}
@media (max-width: 1000px){
.features-box{
padding-top: 50px;
}
}
/*-------------------------------------------------------------------*/
/* 5.CONTACT
/*-------------------------------------------------------------------*/
.contact{
text-align: center;
padding: 100px 0px;
}
.contact h4{
font-size: 22px;
line-height: 28px;
margin-bottom: 10px;
color: #000;
text-transform: uppercase;
}
.contact p{
color: #534F4F;
font-size: 16px;
margin-bottom: 0px;
padding: 10px 0px 30px 0px;
}
.contact input {
width: 100%;
height: 43px;
margin-bottom: 20px;
line-height: 20px;
padding-left: 15px;
font-size: 15px;
color: #000000;
}
.contact .validation{
border: 1px solid #ff0000;
}
.contact textarea {
width: 100%;
height: 170px;
margin-bottom: 15px;
padding: 15px 55px 15px 15px;
font-size: 15px;
color: #000000;
line-height: 28px;
}
textarea {
resize: none;
}
.contact input:focus,.contact textarea:focus,.contact input:active,.contact textarea:active{
border: 1px solid #000;
outline: none;
}
.confirm-message {
margin-top: 20px;
font-size: 18px;
color: #000;
padding: 10px 0 10px;
text-transform: uppercase;
display: none;
text-align: center;
}
.line-separate {
display: block;
margin-bottom: 10px !important;
width: 120px;
height: 15px;
position: relative;
margin: 0 auto;
}
.line-white:before, .line-white:after {
background: #000;
}
.line-separate:before {
content: '';
display: block;
position: relative;
top: 7px;
width: 49px;
height: 2px;
margin: 0 !important;
float: left;
}
.line-white span {
box-shadow: inset 0px 0px 0px 2px #000;
}
.line-separate span {
display: block;
position: relative;
width: 17px;
height: 17px;
margin: 0 auto;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
}
.line-separate:after {
content: '';
display: block;
position: relative;
top: -10px;
width: 49px;
height: 2px;
margin: 0 !important;
float: right;
}
.social li{
margin: 0px 10px !important;
}
li.social-btn {
width: 32px;
height: 32px;
margin: 0 auto;
-webkit-transition: all .6s ease 0s;
-moz-transition: all .6s ease 0s;
transition: all .6s ease 0s;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
transform: rotate(-45deg);
text-align: center;
color: #fff;
border: solid 1px #000;
}
.social-btn {
font-size: 16px;
line-height: 30px;
width: 30px;
height: 30px;
margin-top: -60px;
margin-left: -30px;
}
.social-btn a{
padding: 10px
}
.social-btn a{
font-size: 15px;
line-height: 17px;
z-index: 2;
margin: 0 auto;
cursor: inherit;
-webkit-transition: all .6s ease 0s;
-moz-transition: all .6s ease 0s;
transition: all .6s ease 0s;
color: inherit;
background: rgba(255,255,255,.0);
}
.social-btn a i{
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
transform: rotate(45deg);
margin-left: -0.3em;
margin-top: -0.1em;
}
.social-btn a i:last-of-type {
margin-left: -0.5em;
margin-top: -0.3em;
}
#fb{
border: 2px solid #3b5998;
color: #3b5998;
}
#fb a{
color: #3b5998;
}
#fb:hover{
background-color: #3b5998;
}
#fb:hover a{
color: #fff;
}
#tw{
border: 2px solid #00aced;
color: #00aced;
}
#tw a{
color: #00aced;
}
#tw:hover{
background-color: #00aced;
}
#tw:hover a{
color: #fff;
}
#flk{
border: 2px solid #ff0084;
color: #ff0084;
}
#flk a{
color: #ff0084;
}
#flk:hover{
background-color: #ff0084;
}
#flk:hover a{
color: #fff;
}
#tbl{
border: 2px solid #32506d;
color: #32506d;
}
#tbl a{
color: #32506d;
}
#tbl:hover{
background-color: #32506d;
}
#tbl:hover a{
color: #fff;
}
#pin{
border: 2px solid #cb2027;
}
#pin a{
color: #cb2027;
}
#pin:hover{
background-color: #cb2027;
}
#pin:hover a{
color: #fff;
}
.footer{
padding-bottom: 100px;
}
.copyright{
padding-top: 10px;
}
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
/*
Indus by TEMPLATE STOCK
templatestock.co @templatestock
Released for free under the Creative Commons Attribution 3.0 license (templated.co/license)
*/
(function() {
var width, height, largeHeader, canvas, ctx, circles, target, animateHeader = true;
// Main
initHeader();
addListeners();
function initHeader() {
width = window.innerWidth;
height = window.innerHeight;
target = {x: 0, y: height};
largeHeader = document.getElementById('large-header');
largeHeader.style.height = height+'px';
canvas = document.getElementById('demo-canvas');
canvas.width = width;
canvas.height = height;
ctx = canvas.getContext('2d');
// create particles
circles = [];
for(var x = 0; x < width*0.5; x++) {
var c = new Circle();
circles.push(c);
}
animate();
}
// Event handling
function addListeners() {
window.addEventListener('scroll', scrollCheck);
window.addEventListener('resize', resize);
}
function scrollCheck() {
if(document.body.scrollTop > height) animateHeader = false;
else animateHeader = true;
}
function resize() {
width = window.innerWidth;
height = window.innerHeight;
largeHeader.style.height = height+'px';
canvas.width = width;
canvas.height = height;
}
function animate() {
if(animateHeader) {
ctx.clearRect(0,0,width,height);
for(var i in circles) {
circles[i].draw();
}
}
requestAnimationFrame(animate);
}
// Canvas manipulation
function Circle() {
var _this = this;
// constructor
(function() {
_this.pos = {};
init();
//console.log(_this);
})();
function init() {
_this.pos.x = Math.random()*width;
_this.pos.y = height+Math.random()*100;
_this.alpha = 0.1+Math.random()*0.3;
_this.scale = 0.1+Math.random()*0.3;
_this.velocity = Math.random();
}
this.draw = function() {
if(_this.alpha <= 0) {
init();
}
_this.pos.y -= _this.velocity;
_this.alpha -= 0.0005;
ctx.beginPath();
ctx.arc(_this.pos.x, _this.pos.y, _this.scale*10, 0, 2 * Math.PI, false);
ctx.fillStyle = 'rgba(255,255,255,'+ _this.alpha+')';
ctx.fill();
};
}
})();
\ No newline at end of file
/*!
* jQuery Countdown plugin v1.0
* http://www.littlewebthings.com/projects/countdown/
*
* Copyright 2010, Vassilis Dourdounis
*
* Permission is hereby granted, free of charge, to any person obtaining a copy
* of this software and associated documentation files (the "Software"), to deal
* in the Software without restriction, including without limitation the rights
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
* copies of the Software, and to permit persons to whom the Software is
* furnished to do so, subject to the following conditions:
*
* The above copyright notice and this permission notice shall be included in
* all copies or substantial portions of the Software.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
* THE SOFTWARE.
*/
(function($){
$.fn.countDown = function (options) {
config = {};
$.extend(config, options);
diffSecs = this.setCountDown(config);
if (config.onComplete)
{
$.data($(this)[0], 'callback', config.onComplete);
}
if (config.omitWeeks)
{
$.data($(this)[0], 'omitWeeks', config.omitWeeks);
}
$('#' + $(this).attr('id') + ' .digit').html('<div class="top"></div><div class="bottom"></div>');
$(this).doCountDown($(this).attr('id'), diffSecs, 500);
return this;
};
$.fn.stopCountDown = function () {
clearTimeout($.data(this[0], 'timer'));
};
$.fn.startCountDown = function () {
this.doCountDown($(this).attr('id'),$.data(this[0], 'diffSecs'), 500);
};
$.fn.setCountDown = function (options) {
var targetTime = new Date();
if (options.targetDate)
{
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' : ''));
}
else if (options.targetOffset)
{
targetTime.setFullYear(options.targetOffset.year + targetTime.getFullYear());
targetTime.setMonth(options.targetOffset.month + targetTime.getMonth());
targetTime.setDate(options.targetOffset.day + targetTime.getDate());
targetTime.setHours(options.targetOffset.hour + targetTime.getHours());
targetTime.setMinutes(options.targetOffset.min + targetTime.getMinutes());
targetTime.setSeconds(options.targetOffset.sec + targetTime.getSeconds());
}
var nowTime = new Date();
diffSecs = Math.floor((targetTime.valueOf()-nowTime.valueOf())/1000);
$.data(this[0], 'diffSecs', diffSecs);
return diffSecs;
};
$.fn.doCountDown = function (id, diffSecs, duration) {
$this = $('#' + id);
if (diffSecs <= 0)
{
diffSecs = 0;
if ($.data($this[0], 'timer'))
{
clearTimeout($.data($this[0], 'timer'));
}
}
secs = diffSecs % 60;
mins = Math.floor(diffSecs/60)%60;
hours = Math.floor(diffSecs/60/60)%24;
if ($.data($this[0], 'omitWeeks') == true)
{
days = Math.floor(diffSecs/60/60/24);
weeks = Math.floor(diffSecs/60/60/24/7);
}
else
{
days = Math.floor(diffSecs/60/60/24)%7;
weeks = Math.floor(diffSecs/60/60/24/7);
}
$this.dashChangeTo(id, 'seconds_dash', secs, duration ? duration : 800);
$this.dashChangeTo(id, 'minutes_dash', mins, duration ? duration : 1200);
$this.dashChangeTo(id, 'hours_dash', hours, duration ? duration : 1200);
$this.dashChangeTo(id, 'days_dash', days, duration ? duration : 1200);
$this.dashChangeTo(id, 'weeks_dash', weeks, duration ? duration : 1200);
$.data($this[0], 'diffSecs', diffSecs);
if (diffSecs > 0)
{
e = $this;
t = setTimeout(function() { e.doCountDown(id, diffSecs-1) } , 1000);
$.data(e[0], 'timer', t);
}
else if (cb = $.data($this[0], 'callback'))
{
$.data($this[0], 'callback')();
}
};
$.fn.dashChangeTo = function(id, dash, n, duration) {
$this = $('#' + id);
for (var i=($this.find('.' + dash + ' .digit').length-1); i>=0; i--)
{
var d = n%10;
n = (n - d) / 10;
$this.digitChangeTo('#' + $this.attr('id') + ' .' + dash + ' .digit:eq('+i+')', d, duration);
}
};
$.fn.digitChangeTo = function (digit, n, duration) {
if (!duration)
{
duration = 800;
}
if ($(digit + ' div.top').html() != n + '')
{
$(digit + ' div.top').css({'display': 'none'});
$(digit + ' div.top').html((n ? n : '0')).slideDown(duration);
$(digit + ' div.bottom').animate({'height': ''}, duration, function() {
$(digit + ' div.bottom').html($(digit + ' div.top').html());
$(digit + ' div.bottom').css({'display': 'block', 'height': ''});
$(digit + ' div.top').hide().slideUp(10);
});
}
};
})(jQuery);
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
/*
Indus by TEMPLATE STOCK
templatestock.co @templatestock
Released for free under the Creative Commons Attribution 3.0 license (templated.co/license)
*/
/* ------------------------------------------------------------------------------
This is jquery module for main page
------------------------------------------------------------------------------ */
/* Global constants */
/*global jQuery */
jQuery(function ($) {
'use strict';
var App = {
$options: {},
$loader: $(".loader"),
$animationload: $(".animationload"),
$countdown: $('#countdown_dashboard'),
bindEvents: function() {
//binding events
$(window).on('load', this.load.bind(this));
$(document).on('ready', this.docReady.bind(this));
},
load: function() {
/* ==============================================
1.Page Preloader
=============================================== */
this.$loader.delay(300).fadeOut();
this.$animationload.delay(600).fadeOut("slow");
},
docReady: function() {
/* -----------------------------------------------------------------------
Countdown
----------------------------------------------------------------------- */
this.$countdown.countDown({
targetDate: {
'day': this.$options.day,
'month': this.$options.month,
'year': this.$options.year,
'hour': this.$options.hour,
'min': this.$options.min,
'sec': this.$options.sec
},
omitWeeks: true
});
/* ==============================================
NiceScroll
=============================================== */
$("html").niceScroll({
scrollspeed: 50,
mousescrollstep: 38,
cursorwidth: 7,
cursorborder: 0,
autohidemode: true,
zindex: 9999999,
horizrailenabled: false,
cursorborderradius: 0
});
/* ==============================================
Parallax
=============================================== */
$(window).stellar({
horizontalScrolling: false,
responsive: true,
scrollProperty: 'scroll',
parallaxElements: false,
horizontalOffset: 0,
verticalOffset: 0
});
//custom app
},
init: function (_options) {
$.extend(this.$options, _options);
this.bindEvents();
}
}
//Initializing the app
//passing the countdown date
App.init({day: 18, month: 2, year: 2016, hour: 11, min: 59, sec: 59});
});
\ No newline at end of file
/*
A Design by Template Stock
Author: Template Stock
Author URL: http://templatestock.co
License: Creative Commons Attribution 3.0 Unported
License URL: http://creativecommons.org/licenses/by/3.0/
*/
----------------------------------
NOTE : FREQUENTLY ASKED QUESTIONS
----------------------------------
1. What is Template Stock?
Template Stock is an initiative of AgileITs to provide free web designs which are cross device supported.
2. Is Template Stock Templates Really Free?
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.
3. I want to Help Template Stock, How can I?
You can help Template Stock By
1. Donate Some $’s, Any Amount your wish
2. Contribute Design inventory like stock photos, Icons or PSD designs with full rights to Template Stock
4. I want to remove Template Stock.com back link from footer?
We have two plans for that per template and unlimited.
Donate us $10 per template. If you want templates for multiple domains or bulk templates please contact info@templatestock.co
5. Will these templates work on iPhone, Android platforms, Tabs like kindle and Ipads?
Yes, Template Stock templates work with all Smartphones and Tablets. To, support all the devices we are providing bootstrap Responisve designs WEB Template.
6. What is Web Template?
WEB template is a responsive design which can be used for desktop users. Users visiting website from desktop browsers can view WEB template
7. Do I need a separate version for Smartphones and Tablets?
No, WEB Template is compatible in all web browsers, Smartphones and Tablets.
8. Do I need any database?
No, it is not necessary.
11. Under which license you are providing these templates?
Template Stock templates are under Creative Commons Attribution 3.0 unported
<!DOCTYPE html>
<!--
Indus by TEMPLATE STOCK
templatestock.co @templatestock
Released for free under the Creative Commons Attribution 3.0 license (templated.co/license)
-->
<html lang="en" class="no-js">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Today's Issue</title>
<link rel="stylesheet" type="text/css" href="../static/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="../static/css/et-lineicon.css" />
<link rel="stylesheet" type="text/css" href="../static/css/font-awesome.min.css" />
<link rel="stylesheet" type="text/css" href="../static/css/style.css" />
<link href='http://fonts.googleapis.com/css?family=Roboto:400,500,400italic,500italic,700' rel='stylesheet' type='text/css'>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div class="animationload">
<div class="loader">
Loading...
</div>
</div>
<section id="home">
<div class="content">
<div id="large-header" class="large-header">
<canvas id="demo-canvas"></canvas>
<div id="countdown_dashboard" class="home-main container">
<div class="row">
<div class="logo">
<img src="../static/images/logo-light.png" alt="logo" width="70">
<p>오 늘 의 학 교 는</p>
</div>
</div>
<div class="row">
<div class="col-md-3 col-sm-3 col-xs-6 dash-glob" data-scroll-reveal="enter bottom move 25px, after 0.3s">
<div class="dash days_dash">
<div class="digit">{{ data.total }}</div>
<span class="dash_title">새 글</span>
</div>
</div>
<div class="col-md-3 col-sm-3 col-xs-6 dash-glob" data-scroll-reveal="enter bottom move 25px, after 0.3s">
<div class="dash hours_dash">
<div class="digit">{{ data.positive }}</div>
<span class="dash_title">긍정</span>
</div>
</div>
<div class="col-md-3 col-sm-3 col-xs-6 dash-glob" data-scroll-reveal="enter bottom move 25px, after 0.3s">
<div class="dash minutes_dash">
<div class="digit">{{ data.neutral }}</div>
<span class="dash_title">중립</span>
</div>
</div>
<div class="col-md-3 col-sm-3 col-xs-6 dash-glob" data-scroll-reveal="enter bottom move 25px, after 0.3s">
<div class="dash seconds_dash">
<div class="digit">{{ data.negative }}</div>
<span class="dash_title">부정</span>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="contact" class="contact">
<!-- WordCloud FIG -->
</section>
<footer class="footer">
<div class="container text-center">
<div class="row">
<p class="copyright">Copyright© 2016 <a href="http://templatestock.co">Template Stock</p>
</div>
</div>
</footer>
<!-- JAVASCRIPTS -->
<script src="../static/js/jquery.min.js"></script>
<script src="../static/js/jquery.stellar.min.js"></script>
<script src="../static/js/jquery.nicescroll.min.js"></script>
<script src="../static/js/animated.js"></script>
<script src="../static/js/main.js"></script>
</body>
</html>
\ No newline at end of file