mecmunsoc.github.io/index.html at main · Rinu-sunny/mecmunsoc.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
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
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>MECMUN</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <!-- Navbar -->
    <nav class="navbar navbar-expand-lg sticky-top" id="navbar">
        <div class="container-fluid">
            <a class="navbar-brand d-flex align-items-center" href="#" id="logo"><img
                    src="https://github.com/mecmunsoc.png" alt="mecmun logo">
                <span class="ms-2 text-light fs-4">MUNSOC</span></a>
            <!-- <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
                data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
                aria-label="Toggle navigation">
                <span><i class="fa-solid fa-bars" style="color: white; font-size: 42px; "></i></span>
            </button> -->
            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav me-auto w-auto mb-2 mb-lg-0 me-2">
                    <li class="nav-item">
                        <a class="nav-link active text-light fs-5" aria-current="page" href="#home">Home</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link text-light fs-5" href="#About">About</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link text-light fs-5" href="#Events">Events</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link text-light fs-5" href="#AboutUs">About Us</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link text-light fs-5" href="#Contact">Contact</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link text-light fs-5" href="#Blog">Blog</a>
                    </li>
                </ul>
                <form class="d-flex me-5" role="search">
                    <button class="btn btn-outline-warning fs-5 " type="submit">Register!</button>
                </form>
            </div>
        </div>
    </nav>

    <!-- Landing Page -->
    <section id="Landing-Page" class="landing page">
        <div class="social-box">
            <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="https://github.com/mecmunsoc.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>
      <script src="res/scripts/events_carousel.js"></script>
</body>

</html>