cybercrew.github.io/events.html at master · cybercrew/cybercrew.github.io · 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
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta property="og:title" content="CyberCrew">
    <meta property="og:description" content="The IT Club of DPS Srinagar">
    <meta property="og:image" content="https://cybercrew-dps.vercel.app/assets/cclogo.png">
    <link rel="icon" href="./assets/favicon.png" type="image/x-icon">
    <script src="./scripts/three.min.js"></script>
    <script src="./scripts/jquery.min.js"></script>
    <script src="./scripts/typed.min.js"></script>
    <script src="./scripts/background.js"></script>
    <script src="./scripts/functions.js"></script>
    <link rel="stylesheet" href="./styles/index.css">
    <link rel="stylesheet" href="./styles/new.css">
    <title>CyberCrew Events | DPSSGR</title>
</head>
<body>
    <div class="header">
        <button class="headerButton clickable" onclick="window.location.href='.'">Home</button>
        <button class="headerButton clickable" onclick="window.location.href='events.html'">Events</button>
        <button class="headerButton clickable" onclick="window.location.href='https://techknow.dpssrinagar.com'">TechKnow</button>
        <div class="dropdown">
            <button class="dropbtn">Fields</button>
            <div class="dropdown-content">
                <a href="./Fields/Ai.html">AI</a>
                <a href="./Fields/Robtoics.html">Robotics</a>
                <a href="./Fields/Marketing.html">Digital Marketing</a>
                <a href="./Fields/App_Dev.html">App Development</a>
                <a href="./Fields/Game_Dev.html">Game Development</a>
                <a href="./Fields/Web_Dev.html">Web Development</a>
                <a href="./Fields/GraphicDesign.html">Graphic Design</a>
                <a href="./Fields/VideoEditing.html">Video Editing</a>
            </div>
        </div>
    </div>

    <div class="events-container">
        <button class="slider-btn prev"> < </button>
        <div class="carousel">
            <div class="event-card active">
                <div class="event-content">
                    <h3 class="event-title">TechKnow 2025</h3>
                    <p class="event-date">Coming Soon - 2025</p>
                    <p class="event-description">Join us for TechKnow 2025, where innovation meets inspiration. Learn From Industry Experts </p>
                    <!-- <a href="https://techknow.dpssrinagar.com/" class="event-link" > Registration  </a> -->
                     <p class="event-date"> Register Soon</p>
                </div>
            </div>

            <div class="event-card next">
                <img src="https://i3.ytimg.com/vi/-4cDp0vIh4Y/maxresdefault.jpg" alt="TechKnow 2024" class="event-image">
                <div class="event-content">
                    <h3 class="event-title">TechKnow 2024</h3>
                    <p class="event-date">Past Event - 2024</p>
                    <p class="event-description">Discover the future of technology at TechKnow 2024. Featuring workshops, competitions, and networking opportunities.</p>
                    <a href="https://www.youtube.com/watch?v=-4cDp0vIh4Y" class="event-link">Learn More →</a>
                </div>
            </div>
            <div class="event-card">
                <img src="https://i.ytimg.com/vi/p4L9jNrLWzM/hq720.jpg" alt="TechKnow 2023" class="event-image">
                <div class="event-content">
                    <h3 class="event-title">TechKnow 2023</h3>
                    <p class="event-date">Past Event - 2023</p>
                    <p class="event-description">Relive the highlights of TechKnow 2023, where we celebrated technology and innovation with amazing speakers and events.</p>
                    <a href="https://www.youtube.com/watch?v=p4L9jNrLWzM" class="event-link">Learn More →</a>
                </div>
            </div>
        </div>
        <button class="slider-btn next"> > </button>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const carousel = document.querySelector('.carousel');
            const cards = Array.from(document.querySelectorAll('.event-card'));
            const prevBtn = document.querySelector('.slider-btn.prev');
            const nextBtn = document.querySelector('.slider-btn.next');
            let currentIndex = 0;

            function updateCards() {
                cards.forEach((card, index) => {
                    card.className = 'event-card';
                    if (index === currentIndex) {
                        card.classList.add('active');
                    } else if (index === (currentIndex + 1) % cards.length) {
                        card.classList.add('next');
                    } else if (index === (currentIndex - 1 + cards.length) % cards.length) {
                        card.classList.add('prev');
                    }
                });
            }

            prevBtn.addEventListener('click', () => {
                currentIndex = (currentIndex - 1 + cards.length) % cards.length;
                updateCards();
            });

            nextBtn.addEventListener('click', () => {
                currentIndex = (currentIndex + 1) % cards.length;
                updateCards();
            });

            updateCards();
        });
    </script>
</body>
</html>