Dashboard Temp Share Shortlinks Frames API

HTMLify

events.html
Views: 33 | Author: karbonsites 
 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
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
<!DOCTYPE html>
<html lang="en" data-theme="light">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Events - CampusConnect</title>
    <link rel="stylesheet" href="style.css">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
    <div class="app-shell">
        <!-- Fixed Top Navigation -->
        <nav class="top-nav">
            <div class="container nav-content">
                <div class="logo-nav">CampusConnect</div>
                <div class="nav-actions-simple">
                    <button id="theme-toggle-events" class="theme-toggle-btn-small mr-2">
                        <span class="material-icons">brightness_4</span>
                    </button>
                    <a href="feed.html" class="btn btn-ghost"><span class="material-icons">arrow_back</span></a>
                </div>
            </div>
        </nav>

        <!-- Main Content Area -->
        <main class="feed-container container">
            <h2 class="page-title fade-in-up">Upcoming Campus Events</h2>
            <div class="event-list">
                <!-- Event Card 1 -->
                <article class="event-card">
                    <div class="event-date">
                        <span class="day">28</span>
                        <span class="month">NOV</span>
                    </div>
                    <div class="event-details">
                        <h3>Annual Tech Fest: Innovate 2025</h3>
                        <p class="location"><span class="material-icons">location_on</span> Main Auditorium, IITM Campus</p>
                        <p class="time"><span class="material-icons">schedule</span> 10:00 AM - 5:00 PM</p>
                        <div class="event-tags">
                            <span class="tag">#Tech</span>
                            <span class="tag">#Hackathon</span>
                        </div>
                    </div>
                    <div class="event-actions">
                        <button class="btn btn-primary btn-small">Interested</button>
                        <span class="points-potential">+20 Points</span>
                    </div>
                </article>

                <!-- Event Card 2 -->
                <article class="event-card delay-1">
                    <div class="event-date">
                        <span class="day">05</span>
                        <span class="month">DEC</span>
                    </div>
                    <div class="event-details">
                        <h3>Guest Lecture: Scaling Startups in India</h3>
                        <p class="location"><span class="material-icons">location_on</span> MBA Lecture Hall B</p>
                        <p class="time"><span class="material-icons">schedule</span> 4:00 PM</p>
                        <div class="event-tags">
                            <span class="tag">#Alumni</span>
                            <span class="tag">#Business</span>
                        </div>
                    </div>
                    <div class="event-actions">
                        <button class="btn btn-secondary btn-small">Attending</button>
                        <span class="points-potential">+5 Points</span>
                    </div>
                </article>
            </div>
        </main>

        <!-- Fixed Bottom Navigation -->
        <nav class="bottom-nav">
            <a href="feed.html" class="nav-item" title="Home"><span class="material-icons">home</span><span class="nav-text">Home</span></a>
            <a href="search.html" class="nav-item" title="Search"><span class="material-icons">search</span><span class="nav-text">Search</span></a>
            <button class="nav-item create-btn" title="Create Post"><span class="material-icons">add_box</span><span class="nav-text">Post</span></button>
            <a href="events.html" class="nav-item active" title="Events"><span class="material-icons">event</span><span class="nav-text">Events</span></a>
            <a href="profile.html" class="nav-item" title="Profile"><span class="material-icons">person</span><span class="nav-text">Profile</span></a>
        </nav>
    </div>
    <script src="script.js"></script>

  <a href="https://karbonsites.space/home" target="_blank" id="karbon-promo-banner">
      <span>✨</span>
      <div>Built with <b>Karbon Sites</b></div>
  </a>
</body>
</html>

Share this file: