easter-egg-vault.html

---
layout: default
title: "Easter Egg Vault"
permalink: easter-eggs
exclude-header: true
exclude-footer: false
footer-other: true
sort-order: 3
---

<section class="easter-egg-vault-container grid-container">
  <h1>Achievements</h1>
  <div class="progress-card grid-x align-center">
    <div class="cell small-10 medium-4 image-container small-order-2 medium-order-1">
      <img src="/img/achievement-card.png" alt="Achievement Card" class="lightmode-flip">
      <img src="/img/achievement-card-dark.png" alt="Achievement Card" class="darkmode-flip">
    </div>
    <div class="cell medium-4 text-container small-order-1 medium-order-2 align-middle grid-x">
      <div class="cell">
        <p><span id="easter-egg-unlocked-value">0</span>/{{site.easter-eggs | size}}</p>
        <p>Completed</p>
      </div>
    </div>
  </div>
  <p class="intro-description">Through out my site there are several easter eggs. As you find them check back and see what remains to be found.</p>
  <div class="grid-x grid-margin-x grid-margin-y" id="easter-egg-achievement-container">
    {%- for egg in site.easter-eggs -%}
    <div class="achievement-card cell small-6 medium-4" id="{{egg.title | strip | downcase | replace: " ", '-'}}">
      <div class="content-container">
        <div class="icon-container">
          <div class="empty-icon">
            <i class="fas fa-lock"></i>
          </div>
          <div class="unlocked-icon">
            {{egg.icon}}
          </div>
        </div>
        <p class="easter-egg-name">{{egg.title}}</p>
      <p class="easter-egg-description">{{egg.description}}</p>
      </div>
    </div>
    {%- endfor -%}
  </div>
</section>