portfolio/events.html at main · Asifdotexe/portfolio · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
---
layout: base.njk
title: Events
permalink: /events/
---
<!-- ABOUT -->
                <article class="events active" data-page="events">
                    <header>
                        <h2 class="h2 article-title">Events</h2>
                    </header>

                    <section class="events">
                        <ul class="filter-list">
                            <li class="filter-item">
                                <button class="active" data-filter-btn>
                                    All
                                </button>
                            </li>
                            <li class="filter-item">
                                <button data-filter-btn>Organized</button>
                            </li>
                            <li class="filter-item">
                                <button data-filter-btn>Attended</button>
                            </li>
                        </ul>

                        <div class="filter-select-box">
                            <button class="filter-select" data-select>
                                <div class="select-value" data-selecct-value>
                                    Select category
                                </div>
                                <div class="select-icon">
                                    <span>&#9660;</span>
                                </div>
                            </button>
                            <ul class="select-list">
                                <li class="select-item">
                                    <button data-select-item>All</button>
                                </li>
                                <li class="select-item">
                                    <button data-select-item>Organized</button>
                                </li>
                                <li class="select-item">
                                    <button data-select-item>Attended</button>
                                </li>
                            </ul>
                        </div>

                        <ul class="event-posts-list" id="events-list">
                            {% for event in events %}
                            <li class="event-post-item active fade-in-up" style="animation-delay: {{ loop.index0 * 0.1 }}s;" data-filter-item data-category="{{ event.type | default('organized') | lower }}">
                                <a href="{{ event.url }}">
                                    <figure class="event-banner-box">
                                        <img src="{{ event.image }}" alt="{{ event.title }}" loading="lazy">
                                    </figure>
                                    <div class="event-content">
                                        <div class="event-meta">
                                            <p class="event-category">{{ event.category }}</p>
                                            <span class="dot"></span>
                                            <time datetime="{{ event.date }}">{{ event.formattedDate }}</time>
                                        </div>
                                        <h3 class="h3 event-item-title">{{ event.title }}</h3>
                                        <p class="event-text">{{ event.description }}</p>
                                    </div>
                                </a>
                            </li>
                            {% endfor %}
                        </ul>
                    </section>
                </article>