01 Weihnachtskalender mit CSS Grid

In this example below you will see how to do a 01 Weihnachtskalender mit CSS Grid with some HTML / CSS and Javascript

.wrapper { display: grid; grid: repeat(6, 240px) / repeat(4, 1fr); grid-gap: 24px 12px;

Thumbnail
This awesome code was written by hmmh, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright hmmh ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>01 Weihnachtskalender mit CSS Grid</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class="support-grid"></div>
<div class="title">
  <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/merry-xmas.svg">
</div>
<section class="wrapper">
  <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>
<footer><a href="http://webdesign.tutsplus.com/tutorials/how-to-build-a-festive-advent-calendar-with-css-grid--cms-30070">
    ☃️
  </a>
</footer>
  
  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/hmmh/01-weihnachtskalender-mit-css-grid-pLWbjZ */
@charset "UTF-8";
/* falls der Browser CSS Grids nicht supported */
.support-grid {
  display: block;
  color: #afafaf;
  background: #19212a;
  text-align: center;
  padding: 20px;
}
.support-grid:after {
  content: "😢 Sorry, CSS Grid is unsupported in your browser.";
}
@supports (display: grid) {
  .support-grid {
    display: none;
  }
}

body {
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/snow-bg.svg) no-repeat top center #82d8cb;
  background-size: cover;
}

.title {
  display: flex;
  align-items: center;
  justify-content: center;
}
.title img {
  width: 200px;
  height: auto;
}

/* door styles */
input {
  display: none;
}
input:checked + .door {
  transform: rotateY(180deg);
}

label {
  perspective: 1000px;
  transform-style: preserve-3d;
  cursor: pointer;
  display: flex;
  min-height: 100%;
  width: 100%;
  height: 120px;
}
label:hover .door {
  border-color: #385052;
}

.door {
  width: 100%;
  transform-style: preserve-3d;
  transition: all 300ms;
  border: 2px dashed transparent;
  border-radius: 10px;
}
.door div {
  position: absolute;
  height: 100%;
  width: 100%;
  backface-visibility: hidden;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  /* typography */
  font-family: 'Kalam', cursive;
  color: #385052;
  font-size: 2em;
  font-weight: bold;
  text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.2);
}
.door .back {
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  background-color: #2e313d;
  transform: rotateY(180deg);
}

/* footer styles */
footer {
  text-align: center;
  padding: 2em 0;
}
footer a {
  color: #2e313d;
}
footer a:hover {
  text-decoration: none;
}

.day-1 .back {
  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/child.svg);
}

.day-2 .back {
  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/donut.svg);
}

.day-3 .back {
  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/santa.svg);
}

.day-4 .back {
  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/child-3.svg);
}

.day-5 .back {
  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/book.svg);
}

.day-6 .back {
  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/snowflake.svg);
}

.day-7 .back {
  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/gift.svg);
}

.day-8 .back {
  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/stocking.svg);
}

.day-9 .back {
  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/gift.svg);
}

.day-10 .back {
  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/bird.svg);
}

.day-11 .back {
  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/snowman.svg);
}

.day-12 .back {
  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/child-2.svg);
}

.day-13 .back {
  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/holly.svg);
}

.day-14 .back {
  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/horse.svg);
}

.day-15 .back {
  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/book.svg);
}

.day-16 .back {
  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/bird.svg);
}

.day-17 .back {
  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/stocking.svg);
}

.day-18 .back {
  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/donut.svg);
}

.day-19 .back {
  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/child.svg);
}

.day-20 .back {
  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/holly.svg);
}

.day-21 .back {
  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/snowflake-2.svg);
}

.day-22 .back {
  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/santa.svg);
}

.day-23 .back {
  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/child-2.svg);
}

.day-24 .back {
  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/tree.svg);
}

.wrapper {
  width: 96%;
  max-width: 900px;
  margin: 2% auto;
}

/* CSS Grid Styles */


/*Downloaded from https://www.codeseek.co/hmmh/01-weihnachtskalender-mit-css-grid-pLWbjZ */
/*
AUFGABE:
-------
Nutze die CSS Grid-Eigenschaften und ordne die Tage in einem 4x6 Raster (4 Spalten & 6 Reihen) an.
1. Gib den Spalten dafür eine Breite von 120px und eine Höhe von 120px.
   (grid-template-columns & grid-template-rows)
   
2. Gib den Spalten nun einen Abstand von 12px zueinander.
   (grid-column-gap & grid-row-gap)
   
3. Verdoppel nund die Breite und Höhe der Spalte auf 240px. Ebenso den Abstand dazwischen auf 24px. 

4. Füge nun einen Abstand zwischen den Reihen von 48px hinzu.

5. Ordnet die Spalten nun so nebeneinander an, dass die 4 Spalten immer die volle Wrapper-Breite ausnutzen, incl. Abstand dazwischen. Es darf also kein horizontaler Scrollbalken dargestellt zu sehen sein. Die Höhe bleibt bei 240px & der Abstand bei 24px.

6. Vereinfache nun die Grid-Definitionen aus Aufgabe 5, so dass du Wiederholungen vermeidest. Oder schau, ob es für bestimmte Anweisungen Shortcuts gibt.

7. Bekommst du es responsive erweitert, so dass das Grid ab ca. 768px 6 Spalten und 4 Reihen hat? Natürlich sollte die Wrapper-Breite voll ausgenutzt werden. Die Höhe der Spalten und Abstände kannst du selbst anpassen.
   
   
HINWEIS:
--------
1. Zum Lösen dieser Aufgaben benötigst du folgende Eigenschaften:
- grid-template-columns
- grid-template-rows
- grid-column-gap
- grid-row-gap
- fraction
- repeat()
- grid-gap
- grid

2. Ein vollständiger Guide für CSS Grids zum Nachlesen der Eigenschaften, findest du unter: 
https://css-tricks.com/snippets/css/complete-guide-grid/ 
*/

Comments