-
Notifications
You must be signed in to change notification settings - Fork 6
/
Copy pathindex.html
135 lines (125 loc) · 5.26 KB
/
index.html
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
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MECMUNSoc</title>
<link rel="stylesheet" href="style.css">
<link rel="shortcut icon" href="res/images/MECMUNSoc-transparent.png" type="image/x-icon">
<meta property="og:title" content="MECMUNSoc">
<meta property="og:image" content="https://github.com/mecmunsoc.png">
<meta property="og:description" content="The Official Website Of MUNSoc at MEC">
<meta property="og:site_name" content="MECMUNSoc">
<meta property="og:url" content="munsoc.mec.ac.in">
</head>
<body>
<!-- Navbar -->
<nav class="navbar" id="navbar">
<a>
<img src="res/images/MECMUNSoc-transparent.png" alt="mecmun logo">
<span class="ms-2 text-light fs-4">MUNSOC</span>
</a>
<ul>
<li><a href="#Home">Home</a></li>
<li><a href="#About">About</a></li>
<li><a href="#Events">Events</a></li>
<li><a href="#AboutUs">About Us</a></li>
<li><a href="#Contact">Contact</a></li>
</ul>
<button>Register!</button>
</nav>
<!-- Landing Page -->
<section id="Home" class="landing page">
<div class="social-box floaty">
<img src="res/icons/instagram.svg" alt="instagram"></img>
<img src="res/icons/gmail.svg" alt="gmail"></img>
<img src="res/icons/facebook.svg" alt="facebook"></img>
</div>
<div class="description">
<h1 class="title">
<span>Welcome to MEC</span>
<span><span class="highlight">MUN</span>Soc - Empowering</span>
<span>Tomorrow's Leaders!</span>
</h1>
<p class="subtitle">
Join us in developing your diplomatic and leadership skills through Model United
Nations.
Experience the art of debate and negotiation on a global scale.</p>
<button class="fancy-button">
<img src="res/icons/send.svg" alt="send-arrow">
<span>Learn More</span>
</button>
</div>
<img class="logo" src="res/images/MECMUNSoc-transparent.png" alt="">
</section>
<!-- About Page -->
<section id="About" class="about page">
<h1>
About MEC <span class="highlight">MUNSoc</span>
</h1>
<div>
<p>
MEC MUNSoc is the official Model United Nations society of MEC (Model Engineering College). We
provide a
platform for students to engage in thought-provoking debates, simulate international diplomacy, and
tackle
global challenges. Our society encourages the development of leadership, public speaking,
negotiation, and
teamwork skills, making students well-rounded global citizens.
</p>
<h2>Our Mission</h2>
<p>
Our mission is to inspire and empower the next generation of leaders by fostering an understanding
of diplomacy and
international relations. Through rigorous debate and collaboration, we aim to cultivate skills
essential for students to influence
positive change in the world.
</p>
<h2>
Vision</h2>
<p>
We envision MEC MUNSoc as a leading force in shaping future diplomats, policymakers, and
changemakers who will contribute
to a more peaceful, equitable, and sustainable world.
</p>
</div>
</section>
<!-- Events Page -->
<section id="Events" class="events page">
<h1 class="page-title">Upcoming Events</h1>
<div class="featured-event">
<p>Featured Event</p>
</div>
<div class="carousel-container">
<div class="carousel">
<div class="carousel-item" id="event-1"></div>
<div class="carousel-item" id="event-2"></div>
<div class="carousel-item" id="event-3"></div>
<div class="carousel-item" id="event-4"></div>
</div>
<div class="carousel-dots">
<span class="dot active" data-index="0"></span>
<span class="dot" data-index="1"></span>
<span class="dot" data-index="2"></span>
<span class="dot" data-index="3"></span>
</div>
</div>
</section>
<!--Image Carousel-->
<section id="ImageCarousel" class="imagepage">
<h1 class="carousel-heading">Past Events</h1>
<div class="carousel">
<div class="carousel-images" id="carouselImages">
<!-- Images will be injected here by JavaScript -->
</div>
<div class="carousel-controls">
<div class="carousel-control" id="prevBtn">❮</div>
<div class="carousel-control" id="nextBtn">❯</div>
</div>
<div class="carousel-indicator" id="carouselIndicator"></div>
</div>
</section>
<script src="res/scripts/image_carousel.js"></script>
<script src="res/scripts/events_carousel.js"></script>
</body>
</html>