LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code







  


	
	

13th

5th

17th

1st

9th

21st

10th

22nd

6th

18th

2nd

14th

3rd

19th

15th

23rd

11th

7th

8th

24th

16th

20th

12th

4th

CSS
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{font-size:100%;font:inherit;padding:0;border:0;margin:0;vertical-align:baseline}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}.clear{clear:both}
.sticky{}.bypostauthor{}.wp-caption{}.wp-caption-text{}.gallery-caption{}.alignright{}.alignleft{}.aligncenter{}

textarea:focus, input:focus{outline: none;}
*:focus {outline: none;}

body {
	width: 100%;
  float: left;
	font-family: 'Berkshire Swash', cursive;
	-webkit-font-smoothing: antialiased;
 	background-color: #131313;
}

.wrapper {
	width: 100%;
	height: 100vh;
	float: left;
	background-image: url(https://i.imgsafe.org/53/536fa07d70.jpeg);
	background-size: cover;
	background-position: bottom center;
	background-repeat: no-repeat;
	box-sizing: border-box;
}

.grid {
	width: 100%;
	height: 100%;
	float: left;
	border: 10px solid #FFFFFF;
	box-sizing: border-box;
}
.grid .item {
	width: 16.666%;
	height: 25%;
	border: 1px solid #FFFFFF;
	float: left;
	background-color: #BF3232;
	position: relative;
	box-sizing: border-box;
	-moz-transition: .25s ease-in;
    -o-transition: .25s ease-in;
    -webkit-transition: .25s ease-in;
    transition: .25s ease-in;
}
.grid .item.open {
	background-color: transparent;
	cursor: pointer;
}
.grid .item.open:hover {background-color: #BF3232;}

.grid .item p {
	font-size: 50px;
	color: #FFFFFF;
	text-align: center;
	margin: 0 auto;
	position: absolute;
	bottom: 10%;
	left: 0;
	right: 0;
	-moz-transition: .25s ease-in;
    -o-transition: .25s ease-in;
    -webkit-transition: .25s ease-in;
    transition: .25s ease-in;
}
.grid .item.open p {opacity: 0;}
.grid .item.open:hover p {opacity: 1;}



/* Below 768px */
@media screen and (max-width: 768px) {

.grid .item {
	width: 25%;
	height: 16.666%;
}
.grid .item p {font-size: 36px;}

}

/* Below 450px */
@media screen and (max-width: 450px) {

.grid .item p {font-size: 24px;}

}
JS
$(document).ready(function(){
	
  var date = new Date();
  var date = date.getDate();	

  for (i = 0; i < 25; i++) { 
    if (i <= date) {
      $(".day-"+i).addClass("open");
    }
  }

});

Description

Fully Responsive Live Advent Calendar! Each day another piece of the picture will be revealed. Using JS here to get the current date and reveal the calendar doors accordingly. Merry Christmas!
Term
Wed, 12/06/2017 - 19:43

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv