{% extends 'base/base.html' %}
{% load static %}

{% block title %}Timeline{% endblock %}
{% block head %}
<link rel="stylesheet" href="{% static "css/home/timeline.css" %}">
<link rel="stylesheet" href="{% static "css/home/index.css" %}">
{% endblock %}

{% block content %}
{% include "base/navbar.html" %}

<section class="cd-timeline js-cd-timeline">
    <div class="container max-width-lg cd-timeline__container">
        <div class="cd-timeline__block">
            <div class="cd-timeline__img cd-timeline__img--picture">
                <img src={% static "images/timeline/cd-icon-picture.svg" %} alt="Picture">
            </div> <!-- cd-timeline__img -->

            <div class="cd-timeline__content text-component">
                <h2>Python Discord is created</h2>
                <p class="color-contrast-medium">lorem ipsum</p>

                <div class="flex justify-between items-center">
                    <span class="cd-timeline__date">Jan 8th, 2017</span>
                    <a href="#0" class="btn btn--subtle">Read more</a>
                </div>
            </div> <!-- cd-timeline__content -->
        </div> <!-- cd-timeline__block -->

        <div class="cd-timeline__block">
            <!-- ... -->
            <div class="cd-timeline__img cd-timeline__img--picture">
                <img src={% static "images/timeline/cd-icon-picture.svg" %} alt="Picture">
            </div> <!-- cd-timeline__img -->

            <div class="cd-timeline__content text-component">
                <h2>Python Discord hits 1,000 members</h2>
                <p class="color-contrast-medium">lorem ipsum</p>

                <div class="flex justify-between items-center">
                    <span class="cd-timeline__date">Nov 10th, 2017</span>
                    <a href="#0" class="btn btn--subtle">Read more</a>
                </div>
            </div> <!-- cd-timeline__content -->
        </div> <!-- cd-timeline__block -->

        <div class="cd-timeline__block">
            <!-- ... -->
            <div class="cd-timeline__img cd-timeline__img--picture">
                <img src={% static "images/timeline/cd-icon-picture.svg" %} alt="Picture">
            </div> <!-- cd-timeline__img -->

            <div class="cd-timeline__content text-component">
                <h2>Our logo is born. Thanks Aperture!</h2>
                <p class="color-contrast-medium">picture here?</p>

                <div class="flex justify-between items-center">
                    <span class="cd-timeline__date">Feb 3rd, 2018</span>
                    <a href="#0" class="btn btn--subtle">Read more</a>
                </div>
            </div> <!-- cd-timeline__content -->
        </div> <!-- cd-timeline__block -->

        <div class="cd-timeline__block">
            <!-- ... -->
            <div class="cd-timeline__img cd-timeline__img--picture">
                <img src={% static "images/timeline/cd-icon-picture.svg" %} alt="Picture">
            </div> <!-- cd-timeline__img -->

            <div class="cd-timeline__content text-component">
                <h2>PyDis hits 2,000 members; pythondiscord.com and @Python are live</h2>
                <p class="color-contrast-medium">lorem ipsum</p>

                <div class="flex justify-between items-center">
                    <span class="cd-timeline__date">Mar 4th, 2018</span>
                    <a href="#0" class="btn btn--subtle">Read more</a>
                </div>
            </div> <!-- cd-timeline__content -->
        </div> <!-- cd-timeline__block -->

        <div class="cd-timeline__block">
            <!-- ... -->
            <div class="cd-timeline__img cd-timeline__img--picture">
                <img src={% static "images/timeline/cd-icon-picture.svg" %} alt="Picture">
            </div> <!-- cd-timeline__img -->

            <div class="cd-timeline__content text-component">
                <h2>First code jam with the theme “snakes”</h2>
                <p class="color-contrast-medium">lorem ipsum</p>

                <div class="flex justify-between items-center">
                    <span class="cd-timeline__date">Mar 23rd, 2018</span>
                    <a href="#0" class="btn btn--subtle">Read more</a>
                </div>
            </div> <!-- cd-timeline__content -->
        </div> <!-- cd-timeline__block -->

        <div class="cd-timeline__block">
            <!-- ... -->
            <div class="cd-timeline__img cd-timeline__img--picture">
                <img src={% static "images/timeline/cd-icon-picture.svg" %} alt="Picture">
            </div> <!-- cd-timeline__img -->

            <div class="cd-timeline__content text-component">
                <h2>The privacy policy is created</h2>
                <p class="color-contrast-medium">lorem ipsum</p>

                <div class="flex justify-between items-center">
                    <span class="cd-timeline__date">May 21st, 2018</span>
                    <a href="#0" class="btn btn--subtle">Read more</a>
                </div>
            </div> <!-- cd-timeline__content -->
        </div> <!-- cd-timeline__block -->

        <div class="cd-timeline__block">
            <!-- ... -->
            <div class="cd-timeline__img cd-timeline__img--picture">
                <img src={% static "images/timeline/cd-icon-picture.svg" %} alt="Picture">
            </div> <!-- cd-timeline__img -->

            <div class="cd-timeline__content text-component">
                <h2>Do You Even Python and PyDis merger</h2>
                <p class="color-contrast-medium">lorem ipsum</p>

                <div class="flex justify-between items-center">
                    <span class="cd-timeline__date">Jun 9th, 2018</span>
                    <a href="#0" class="btn btn--subtle">Read more</a>
                </div>
            </div> <!-- cd-timeline__content -->
        </div> <!-- cd-timeline__block -->

        <div class="cd-timeline__block">
            <!-- ... -->
            <div class="cd-timeline__img cd-timeline__img--picture">
                <img src={% static "images/timeline/cd-icon-picture.svg" %} alt="Picture">
            </div> <!-- cd-timeline__img -->

            <div class="cd-timeline__content text-component">
                <h2>PyDis hits 5,000 members</h2>
                <p class="color-contrast-medium">lorem ipsum</p>

                <div class="flex justify-between items-center">
                    <span class="cd-timeline__date">Jun 20th, 2018</span>
                    <a href="#0" class="btn btn--subtle">Read more</a>
                </div>
            </div> <!-- cd-timeline__content -->
        </div> <!-- cd-timeline__block -->

        <div class="cd-timeline__block">
            <!-- ... -->
            <div class="cd-timeline__img cd-timeline__img--picture">
                <img src={% static "images/timeline/cd-icon-picture.svg" %} alt="Picture">
            </div> <!-- cd-timeline__img -->

            <div class="cd-timeline__content text-component">
                <h2>PyDis is now partnered with Discord; the vanity URL discord.gg/python is created</h2>
                <p class="color-contrast-medium">lorem ipsum</p>

                <div class="flex justify-between items-center">
                    <span class="cd-timeline__date">Jul 10th, 2018</span>
                    <a href="#0" class="btn btn--subtle">Read more</a>
                </div>
            </div> <!-- cd-timeline__content -->
        </div> <!-- cd-timeline__block -->

        <div class="cd-timeline__block">
            <!-- ... -->
            <div class="cd-timeline__img cd-timeline__img--picture">
                <img src={% static "images/timeline/cd-icon-picture.svg" %} alt="Picture">
            </div> <!-- cd-timeline__img -->

            <div class="cd-timeline__content text-component">
                <h2>First Hacktoberfest PyDis event; @SeasonalBot is created</h2>
                <p class="color-contrast-medium">lorem ipsum</p>

                <div class="flex justify-between items-center">
                    <span class="cd-timeline__date">Oct 1st, 2018</span>
                    <a href="#0" class="btn btn--subtle">Read more</a>
                </div>
            </div> <!-- cd-timeline__content -->
        </div> <!-- cd-timeline__block -->

        <div class="cd-timeline__block">
            <!-- ... -->
            <div class="cd-timeline__img cd-timeline__img--picture">
                <img src={% static "images/timeline/cd-icon-picture.svg" %} alt="Picture">
            </div> <!-- cd-timeline__img -->

            <div class="cd-timeline__content text-component">
                <h2>PyDis hits 10,000 members</h2>
                <p class="color-contrast-medium">lorem ipsum</p>

                <div class="flex justify-between items-center">
                    <span class="cd-timeline__date">Nov 24th, 2018</span>
                    <a href="#0" class="btn btn--subtle">Read more</a>
                </div>
            </div> <!-- cd-timeline__content -->
        </div> <!-- cd-timeline__block -->

        <div class="cd-timeline__block">
            <!-- ... -->
            <div class="cd-timeline__img cd-timeline__img--picture">
                <img src={% static "images/timeline/cd-icon-picture.svg" %} alt="Picture">
            </div> <!-- cd-timeline__img -->

            <div class="cd-timeline__content text-component">
                <h2>django-simple-bulma is released on PyPi</h2>
                <p class="color-contrast-medium">lorem ipsum</p>

                <div class="flex justify-between items-center">
                    <span class="cd-timeline__date">Dec 19th, 2018</span>
                    <a href="#0" class="btn btn--subtle">Read more</a>
                </div>
            </div> <!-- cd-timeline__content -->
        </div> <!-- cd-timeline__block -->

        <div class="cd-timeline__block">
            <!-- ... -->
            <div class="cd-timeline__img cd-timeline__img--picture">
                <img src={% static "images/timeline/cd-icon-picture.svg" %} alt="Picture">
            </div> <!-- cd-timeline__img -->

            <div class="cd-timeline__content text-component">
                <h2>PyDis hits 15,000 members; the “hot ones special” video is released</h2>
                <p class="color-contrast-medium">lorem ipsum</p>

                <div class="flex justify-between items-center">
                    <span class="cd-timeline__date">Apr 8th, 2019</span>
                    <a href="#0" class="btn btn--subtle">Read more</a>
                </div>
            </div> <!-- cd-timeline__content -->
        </div> <!-- cd-timeline__block -->

        <div class="cd-timeline__block">
            <!-- ... -->
            <div class="cd-timeline__img cd-timeline__img--picture">
                <img src={% static "images/timeline/cd-icon-picture.svg" %} alt="Picture">
            </div> <!-- cd-timeline__img -->

            <div class="cd-timeline__content text-component">
                <h2>the Django rewrite of pythondiscord.com is now live!</h2>
                <p class="color-contrast-medium">lorem ipsum</p>

                <div class="flex justify-between items-center">
                    <span class="cd-timeline__date">Sep 15, 2019</span>
                    <a href="#0" class="btn btn--subtle">Read more</a>
                </div>
            </div> <!-- cd-timeline__content -->
        </div> <!-- cd-timeline__block -->

        <div class="cd-timeline__block">
            <!-- ... -->
            <div class="cd-timeline__img cd-timeline__img--picture">
                <img src={% static "images/timeline/cd-icon-picture.svg" %} alt="Picture">
            </div> <!-- cd-timeline__img -->

            <div class="cd-timeline__content text-component">
                <h2>flake8-annotations is released on PyPI</h2>
                <p class="color-contrast-medium">lorem ipsum</p>

                <div class="flex justify-between items-center">
                    <span class="cd-timeline__date">Sep 25th, 2019</span>
                    <a href="#0" class="btn btn--subtle">Read more</a>
                </div>
            </div> <!-- cd-timeline__content -->
        </div> <!-- cd-timeline__block -->

        <div class="cd-timeline__block">
            <!-- ... -->
            <div class="cd-timeline__img cd-timeline__img--picture">
                <img src={% static "images/timeline/cd-icon-picture.svg" %} alt="Picture">
            </div> <!-- cd-timeline__img -->

            <div class="cd-timeline__content text-component">
                <h2>The code of conduct is created</h2>
                <p class="color-contrast-medium">lorem ipsum</p>

                <div class="flex justify-between items-center">
                    <span class="cd-timeline__date">Oct 26th, 2019</span>
                    <a href="#0" class="btn btn--subtle">Read more</a>
                </div>
            </div> <!-- cd-timeline__content -->
        </div> <!-- cd-timeline__block -->

        <div class="cd-timeline__block">
            <!-- ... -->
            <div class="cd-timeline__img cd-timeline__img--picture">
                <img src={% static "images/timeline/cd-icon-picture.svg" %} alt="Picture">
            </div> <!-- cd-timeline__img -->

            <div class="cd-timeline__content text-component">
                <h2>PyDis hits 30,000 members</h2>
                <p class="color-contrast-medium">lorem ipsum</p>

                <div class="flex justify-between items-center">
                    <span class="cd-timeline__date">Dec 22nd, 2019</span>
                    <a href="#0" class="btn btn--subtle">Read more</a>
                </div>
            </div> <!-- cd-timeline__content -->
        </div> <!-- cd-timeline__block -->

        <div class="cd-timeline__block">
            <!-- ... -->
            <div class="cd-timeline__img cd-timeline__img--picture">
                <img src={% static "images/timeline/cd-icon-picture.svg" %} alt="Picture">
            </div> <!-- cd-timeline__img -->

            <div class="cd-timeline__content text-component">
                <h2>PyDis sixth code jam with the theme “Ancient technology” and the technology Kivy</h2>
                <p class="color-contrast-medium">lorem ipsum</p>

                <div class="flex justify-between items-center">
                    <span class="cd-timeline__date">Jan 17, 2020</span>
                    <a href="#0" class="btn btn--subtle">Read more</a>
                </div>
            </div> <!-- cd-timeline__content -->
        </div> <!-- cd-timeline__block -->

        <div class="cd-timeline__block">
            <!-- ... -->
            <div class="cd-timeline__img cd-timeline__img--picture">
                <img src={% static "images/timeline/cd-icon-picture.svg" %} alt="Picture">
            </div> <!-- cd-timeline__img -->

            <div class="cd-timeline__content text-component">
                <h2>The new help channel system is live</h2>
                <p class="color-contrast-medium">lorem ipsum</p>

                <div class="flex justify-between items-center">
                    <span class="cd-timeline__date">Apr 5th, 2020</span>
                    <a href="#0" class="btn btn--subtle">Read more</a>
                </div>
            </div> <!-- cd-timeline__content -->
        </div> <!-- cd-timeline__block -->

        <div class="cd-timeline__block">
            <!-- ... -->
            <div class="cd-timeline__img cd-timeline__img--picture">
                <img src={% static "images/timeline/cd-icon-picture.svg" %} alt="Picture">
            </div> <!-- cd-timeline__img -->

            <div class="cd-timeline__content text-component">
                <h2>Python Discord hits 40,000 members, and is now bigger than Liechtenstein.</h2>
                <p class="color-contrast-medium">picture here?</p>

                <div class="flex justify-between items-center">
                    <span class="cd-timeline__date">Apr 14, 2020</span>
                    <a href="#0" class="btn btn--subtle">Read more</a>
                </div>
            </div> <!-- cd-timeline__content -->
        </div> <!-- cd-timeline__block -->

        <div class="cd-timeline__block">
            <!-- ... -->
            <div class="cd-timeline__img cd-timeline__img--picture">
                <img src={% static "images/timeline/cd-icon-picture.svg" %} alt="Picture">
            </div> <!-- cd-timeline__img -->

            <div class="cd-timeline__content text-component">
                <h2>PyDis Game Jam 2020 with the “Three of a Kind” theme and Arcade as the technology</h2>
                <p class="color-contrast-medium">lorem ipsum</p>

                <div class="flex justify-between items-center">
                    <span class="cd-timeline__date">Apr 17th, 2020</span>
                    <a href="#0" class="btn btn--subtle">Read more</a>
                </div>
            </div> <!-- cd-timeline__content -->
        </div> <!-- cd-timeline__block -->

        <div class="cd-timeline__block">
            <!-- ... -->
            <div class="cd-timeline__img cd-timeline__img--picture">
                <img src={% static "images/timeline/cd-icon-picture.svg" %} alt="Picture">
            </div> <!-- cd-timeline__img -->

            <div class="cd-timeline__content text-component">
                <h2>ModMail is now live</h2>
                <p class="color-contrast-medium">lorem ipsum</p>

                <div class="flex justify-between items-center">
                    <span class="cd-timeline__date">May 25th, 2020</span>
                    <a href="#0" class="btn btn--subtle">Read more</a>
                </div>
            </div> <!-- cd-timeline__content -->
        </div> <!-- cd-timeline__block -->

        <div class="cd-timeline__block">
            <!-- ... -->
            <div class="cd-timeline__img cd-timeline__img--picture">
                <img src={% static "images/timeline/cd-icon-picture.svg" %} alt="Picture">
            </div> <!-- cd-timeline__img -->

            <div class="cd-timeline__content text-component">
                <h2>Python Discord is now listed on python.org/community</h2>
                <p class="color-contrast-medium">lorem ipsum</p>

                <div class="flex justify-between items-center">
                    <span class="cd-timeline__date">May 28th, 2020</span>
                    <a href="#0" class="btn btn--subtle">Read more</a>
                </div>
            </div> <!-- cd-timeline__content -->
        </div> <!-- cd-timeline__block -->

        <div class="cd-timeline__block">
            <!-- ... -->
            <div class="cd-timeline__img cd-timeline__img--picture">
                <img src={% static "images/timeline/cd-icon-picture.svg" %} alt="Picture">
            </div> <!-- cd-timeline__img -->

            <div class="cd-timeline__content text-component">
                <h2>Python Discord Public Statistics are now live</h2>
                <p class="color-contrast-medium">lorem ipsum</p>

                <div class="flex justify-between items-center">
                    <span class="cd-timeline__date">Jun 4th, 2020</span>
                    <a href="#0" class="btn btn--subtle">Read more</a>
                </div>
            </div> <!-- cd-timeline__content -->
        </div> <!-- cd-timeline__block -->

        <div class="cd-timeline__block">
            <!-- ... -->
            <div class="cd-timeline__img cd-timeline__img--picture">
                <img src={% static "images/timeline/cd-icon-picture.svg" %} alt="Picture">
            </div> <!-- cd-timeline__img -->

            <div class="cd-timeline__content text-component">
                <h2>PyDis summer code jam 2020 with the theme “Early Internet” and Django as the technology</h2>
                <p class="color-contrast-medium">lorem ipsum</p>

                <div class="flex justify-between items-center">
                    <span class="cd-timeline__date">Jul 31st, 2020</span>
                    <a href="#0" class="btn btn--subtle">Read more</a>
                </div>
            </div> <!-- cd-timeline__content -->
        </div> <!-- cd-timeline__block -->

        <div class="cd-timeline__block">
            <!-- ... -->
            <div class="cd-timeline__img cd-timeline__img--picture">
                <img src={% static "images/timeline/cd-icon-picture.svg" %} alt="Picture">
            </div> <!-- cd-timeline__img -->

            <div class="cd-timeline__content text-component">
                <h2>Python Discord is now the new home of the PyWeek event!</h2>
                <p class="color-contrast-medium">lorem ipsum</p>

                <div class="flex justify-between items-center">
                    <span class="cd-timeline__date">Aug 16th, 2020</span>
                    <a href="#0" class="btn btn--subtle">Read more</a>
                </div>
            </div> <!-- cd-timeline__content -->
        </div> <!-- cd-timeline__block -->

        <div class="cd-timeline__block">
            <!-- ... -->
            <div class="cd-timeline__img cd-timeline__img--picture">
                <img src={% static "images/timeline/cd-icon-picture.svg" %} alt="Picture">
            </div> <!-- cd-timeline__img -->

            <div class="cd-timeline__content text-component">
                <h2>Python Discord hits 100,000 members.</h2>
                <p class="color-contrast-medium">lorem ipsum</p>

                <div class="flex justify-between items-center">
                    <span class="cd-timeline__date">Sep ??, 2020</span>
                    <a href="#0" class="btn btn--subtle">Read more</a>
                </div>
            </div> <!-- cd-timeline__content -->
        </div> <!-- cd-timeline__block -->
    </div>
</section> <!-- cd-timeline -->

<script src="{% static "js/timeline/main.js" %}"></script>
{% endblock %}