<section class='grid-1'>
<div class='title'></div>
<div class='day-1'>
<label>
<input type='checkbox'>
<div class='door'>
<div class='front'>1</div>
<div class='back'></div>
</div>
</input>
</label>
</div>
<div class='day-2'>
<label>
<input type='checkbox'>
<div class='door'>
<div class='front'>2</div>
<div class='back'></div>
</div>
</input>
</label>
</div>
<div class='day-3'>
<label>
<input type='checkbox'>
<div class='door'>
<div class='front'>3</div>
<div class='back'></div>
</div>
</input>
</label>
</div>
<div class='day-4'>
<label>
<input type='checkbox'>
<div class='door'>
<div class='front'>4</div>
<div class='back'></div>
</div>
</input>
</label>
</div>
<div class='day-5'>
<label>
<input type='checkbox'>
<div class='door'>
<div class='front'>5</div>
<div class='back'></div>
</div>
</input>
</label>
</div>
<div class='day-6'>
<label>
<input type='checkbox'>
<div class='door'>
<div class='front'>6</div>
<div class='back'></div>
</div>
</input>
</label>
</div>
<div class='day-7'>
<label>
<input type='checkbox'>
<div class='door'>
<div class='front'>7</div>
<div class='back'></div>
</div>
</input>
</label>
</div>
<div class='day-8'>
<label>
<input type='checkbox'>
<div class='door'>
<div class='front'>8</div>
<div class='back'></div>
</div>
</input>
</label>
</div>
<div class='day-9'>
<label>
<input type='checkbox'>
<div class='door'>
<div class='front'>9</div>
<div class='back'></div>
</div>
</input>
</label>
</div>
<div class='day-10'>
<label>
<input type='checkbox'>
<div class='door'>
<div class='front'>10</div>
<div class='back'></div>
</div>
</input>
</label>
</div>
<div class='day-11'>
<label>
<input type='checkbox'>
<div class='door'>
<div class='front'>11</div>
<div class='back'></div>
</div>
</input>
</label>
</div>
<div class='day-12'>
<label>
<input type='checkbox'>
<div class='door'>
<div class='front'>12</div>
<div class='back'></div>
</div>
</input>
</label>
</div>
<div class='day-13'>
<label>
<input type='checkbox'>
<div class='door'>
<div class='front'>13</div>
<div class='back'></div>
</div>
</input>
</label>
</div>
<div class='day-14'>
<label>
<input type='checkbox'>
<div class='door'>
<div class='front'>14</div>
<div class='back'></div>
</div>
</input>
</label>
</div>
<div class='day-15'>
<label>
<input type='checkbox'>
<div class='door'>
<div class='front'>15</div>
<div class='back'></div>
</div>
</input>
</label>
</div>
<div class='day-16'>
<label>
<input type='checkbox'>
<div class='door'>
<div class='front'>16</div>
<div class='back'></div>
</div>
</input>
</label>
</div>
<div class='day-17'>
<label>
<input type='checkbox'>
<div class='door'>
<div class='front'>17</div>
<div class='back'></div>
</div>
</input>
</label>
</div>
<div class='day-18'>
<label>
<input type='checkbox'>
<div class='door'>
<div class='front'>18</div>
<div class='back'></div>
</div>
</input>
</label>
</div>
<div class='day-19'>
<label>
<input type='checkbox'>
<div class='door'>
<div class='front'>19</div>
<div class='back'></div>
</div>
</input>
</label>
</div>
<div class='day-20'>
<label>
<input type='checkbox'>
<div class='door'>
<div class='front'>20</div>
<div class='back'></div>
</div>
</input>
</label>
</div>
<div class='day-21'>
<label>
<input type='checkbox'>
<div class='door'>
<div class='front'>21</div>
<div class='back'></div>
</div>
</input>
</label>
</div>
<div class='day-22'>
<label>
<input type='checkbox'>
<div class='door'>
<div class='front'>22</div>
<div class='back'></div>
</div>
</input>
</label>
</div>
<div class='day-23'>
<label>
<input type='checkbox'>
<div class='door'>
<div class='front'>23</div>
<div class='back'></div>
</div>
</input>
</label>
</div>
<div class='day-24'>
<label>
<input type='checkbox'>
<div class='door'>
<div class='front'>24</div>
<div class='back'></div>
</div>
</input>
</label>
</div>
</section>
body {
background: #82d8cb;
}
/* mobile first grid layout */
.grid-1 {
display: grid;
width: 96%;
max-width: 900px;
margin: 2% auto;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: auto;
grid-gap: 25px;
grid-template-areas: "t t t"
"d23 d20 d12"
"d2 d14 d4"
"d5 d22 d16"
"d1 d7 d9"
"d10 d11 d18"
"d13 d3 d15"
"d6 d17 d8"
"d19 d24 d21";
}
/* media query */
@media only screen and (min-width: 500px) {
.grid-1 {
grid-template-columns: repeat(6, 1fr);
grid-template-areas: "t t t d2 d7 d8"
"t t t d4 d11 d12"
"t t t d19 d9 d13"
"d6 d1 d24 d24 d21 d20"
"d17 d18 d24 d24 d5 d22"
"d3 d23 d16 d14 d10 d15";
}
}
/* individual items */
.title {
grid-area: t;
}
.day-1 {
grid-area: d1;
}
.day-2 {
grid-area: d2;
}
.day-3 {
grid-area: d3;
}
.day-4 {
grid-area: d4;
}
.day-5 {
grid-area: d5;
}
.day-6 {
grid-area: d6;
}
.day-7 {
grid-area: d7;
}
.day-8 {
grid-area: d8;
}
.day-9 {
grid-area: d9;
}
.day-10 {
grid-area: d10;
}
.day-11 {
grid-area: d11;
}
.day-12 {
grid-area: d12;
}
.day-13 {
grid-area: d13;
}
.day-14 {
grid-area: d14;
}
.day-15 {
grid-area: d15;
}
.day-16 {
grid-area: d16;
}
.day-17 {
grid-area: d17;
}
.day-18 {
grid-area: d18;
}
.day-19 {
grid-area: d19;
}
.day-20 {
grid-area: d20;
}
.day-21 {
grid-area: d21;
}
.day-22 {
grid-area: d22;
}
.day-23 {
grid-area: d23;
}
.day-24 {
grid-area: d24;
}
/* door styles */
.grid-1 input {
display: none;
}
label {
perspective: 1000px;
transform-style: preserve-3d;
cursor: pointer;
display: flex;
min-height: 100%;
width: 100%;
height: 120px;
}
.door {
width: 100%;
transform-style: preserve-3d;
transition: all 300ms;
border: 2px dashed transparent;
}
.door div {
position: absolute;
height: 100%;
width: 100%;
backface-visibility: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.door .back {
background-color: #2e313d;
transform: rotateY(180deg);
}
label:hover .door {
border-color: #385052;
}
:checked + .door {
transform: rotateY(180deg);
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.