{% include master/head.html %}
{% include master/header.html %}

<script src="/assets/js/tab-switcher.js"></script>

<banner>
    <img src="/assets/images/Christmas with Friends.png">
</banner>
<div class="content">
    <h1 id="for-banner">{{page.title}}</h1>
    <section id="extra-menu">
        <button onclick="toTab('2021', this, 'var(--blue-light)'); document.getElementById('extra-placeholder').style.display = 'none';" class="tab">2021</button>
        <button onclick="toTab('2022', this, 'var(--blue-light)'); document.getElementById('extra-placeholder').style.display = 'none';" class="tab">2022</button>
    </section>
    <section id="extra-placeholder">
        <p>Select a year to see content</p>
    </section>
    {{ content }}
    {% include master/footer.html %}
</div>
<style>
#Portfolio {background: var(--blue-light);}
</style>