Convocation_Website/index1.html at master · SuchetaVadakkepat10/Convocation_Website · 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
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Convocation 2022 | IIITDM Kancheepuram</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
  <!-- link fontawesome -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css"
    integrity="sha512-1sCRPdkRXhBV2PBLUdRb4tMg1w2YPf37qatUFeS7zlBy7jJI8Lf4VHwWfZZfpXtYSLy85pkm9GaYVYMfw5BC1A=="
    crossorigin="anonymous" referrerpolicy="no-referrer" />
  <link rel="stylesheet" href="./assets/css/custom.css">
  <link rel="stylesheet" href="./assets/css/index.css">
</head>

<body>
  <!-- Start of Navigation bar -->
  <nav class="navbar navbar-expand-lg bg-primary navbar-dark fixed-top">
    <div class="container-fluid p-0">
      <button class="navbar-toggler mx-2 mb-2" type="button" data-bs-toggle="collapse"
        data-bs-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false"
        aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse rounded-bottom" id="navbarTogglerDemo01">
        <ul class="navbar-nav m-auto mb-lg-0 bg-primary px-2">
          <li class="nav-item">
            <a class="nav-link active" aria-current="page" href="index.html">Home</a>
          </li>
          <li class="nav-item">
            <a href="guidelines.html" class="nav-link">Guidelines</a>
          </li>
          <li class="nav-item">
            <a href="/data/Invitation_Card_10th_Convocation_IIITDM_Kancheepuram.pdf" target="_blank"
              class="nav-link">Invitation</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="/data/graduands.pdf" target="_blank">Graduands</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>
  <!-- End of Navigation bar -->

  <!--  -->
  <section>
    <!-- Carousel -->
    <div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="false">
      <div class="carousel-inner">
        <div class="carousel-item active">
          <img src="/images/campuslow.jpeg">
          <div class="bg-primary rounded carousel-caption" style="--bs-bg-opacity: .5;">
            <h4>Welcome to</h4>
            <h3>10th Convocation</h3>
            <h4> of IIITDM Kancheepuram</h4>
          </div>
        </div>
      </div>
    </div>
  </section>
  <section class="text_section">
    <!-- Modal for vids -->
    <!-- <div class="modal fade" id="exampleModalToggle" aria-hidden="true" aria-labelledby="exampleModalToggleLabel"
      tabindex="-1">
      <div class="modal-dialog modal-lg modal-dialog-centered">
        <div class="modal-content">
          <div class="modal-body">
            <iframe width="100%" height="600px" src="/data/teaser.mp4" title="video player" frameborder="0"
              allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
              allowfullscreen></iframe>
          </div>
        </div>
      </div>
    </div>
    <div class="modal fade" id="exampleModalToggle" aria-hidden="true" aria-labelledby="exampleModalToggleLabel"
      tabindex="-1">
      <div class="modal-dialog modal-lg modal-dialog-centered">
        <div class="modal-content">
          <div class="modal-body">
            <iframe width="100%" height="600px" src="/data/invitation.mp4" title="video player" frameborder="0"
              allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
              allowfullscreen></iframe>
          </div>
        </div>
      </div>
    </div>

    <div class="row justify-content-around">
      <div class="col">
        <a class="btn btn-primary" data-bs-toggle="modal" href="#exampleModalToggle" role="button">View Convocation
          Teaser</a>
      </div>
      <div>
        <a class="btn btn-primary" data-bs-toggle="modal" href="#exampleModalToggle" role="button">View Convocation
          Invitation</a>
      </div>
    </div>
    </div> -->

    <div class="row mt-lg-5">
      <div class="col-12 col-lg-6 mt-3">
        <video width="100%" src="/data/invitation.mp4" controls></video>
        <h4 class="text-center">Convocation Invitation</h4>
      </div>

      <div class="col-12 col-lg-6 mt-3">
        <video width="100%" src="/data/teaser.mp4" controls></video>
        <h4 class="text-center">Convocation Teaser</h4>
      </div>
    </div>

    <div class="container mb-lg-5">
      <hr>
    </div>

    <!-- About us -->
    <div class="about-us mt-lg-5">
      <img src="/images/campuslow.jpeg" alt="" class="visual">
      <div class="description">
        <h2>About IIITDM Kancheepuram</h2>
        <p>Indian Institute of Information Technology Design & Manufacturing Kancheepuram (IIITDM) is a Centre of
          Excellence for technical education and research established in 2007 by the Ministry of Human Resource
          Development, Government of India to pursue design and manufacturing oriented engineering education and
          research and to promote the competitive advantage of Indian products in global markets.
        </p>
      </div>
    </div>

    <!-- Guests and speeches -->
    <div class="guests-and-speech container">
      <h2 class="mt-lg-5">Chief Guest</h2>
      <div class="container">
        <hr>
      </div>
      <!-- <h2>Lorem Ipsum</h2> -->
      <!-- <div class="guest-speech">
        <img class="rounded mx-auto w-25" src="/images/nirmalasitaraman.jpeg" alt="...">
        <div class="speech">
          <h3>Nirmala Sitaraman</h3>
          <h4>Minister of finance</h4>
          <p>Nirmala Sitharaman (born 18 August 1959) is an Indian economist and politician serving as the Minister of
            Finance and Corporate Affairs of India since 2019. She is a member of the Rajya Sabha, upper house of the
            Indian Parliament, since 2014. Sitharaman formerly served as the Defence Minister of India, thereby becoming
            India's second female defence minister and also the second female finance minister after Indira Gandhi and
            first full-time female Finance Minister.</p>
        </div>
      </div> -->
      <div class="row justify-content-around align-items-center">
        <div class="row">
          <h5 class="text-center">Honourable Union Minister of Finance and Corporate Affairs</h5>
        </div>
        <div class="col-sm-4 d-flex justify-content-center">
          <img class="rounded img-thumbnail" style="height: 350px;" src="/images/nirmalasitaraman.jpeg" alt="...">
        </div>
        <div class="col-sm-6">
          <div class="speech">
            <h3>Smt. Nirmala Sitharaman</h3>
            <p>Smt. Nirmala Sitharaman (born 18 August 1959) is an Indian economist and politician serving as the
              Minister of Finance and Corporate Affairs of India since 2019.</p>
          </div>
        </div>
      </div>

      <h2 class="mt-lg-5">In the gracious presence of</h2>
      <div class="container">
        <hr>
      </div>
      <div class="row justify-content-between">
        <div class="col col-sm-5">
          <h6>Chairman, BoG, <br> IIITDM Kancheepuram</h6>
          <img class="rounded img-thumbnail" style="height: 250px;" src="/images/sadagopan.jpg" alt="">
          <h4>Prof. S. Sadagopan</h4>
        </div>

        <div class="col col-sm-5">
          <h6>Director, <br> IIITDM Kancheepuram</h6>
          <img class="rounded img-thumbnail" style="height: 250px;" src="/images/director.jpg" alt="">
          <h4>Prof. D V L N Somayajulu</h4>
        </div>

      </div>
    </div>

    <!-- Venue -->
    <div class="container venue">
      <h2 class="mt-lg-5">Venue</h2>
      <div class="container">
        <hr>
      </div>
      <h3 class="text-center">IIITDM Kancheepuram</h3>
      <div class="map">
        <iframe
          src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3890.0825889464145!2d80.13515541511653!3d12.837939521269945!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3a525851fbcd3b6b%3A0x9f1067aa71e3898e!2sIndian%20Institute%20of%20Information%20Technology%2C%20Design%20and%20Manufacturing%2C%20Kancheepuram!5e0!3m2!1sen!2sin!4v1659786801694!5m2!1sen!2sin"
          width="" height="450" style="border:0;" allowfullscreen="" loading="lazy"
          referrerpolicy="no-referrer-when-downgrade"></iframe>
      </div>
    </div>
  </section>
  <section>

    <!-- Footer -->
    <div class="footer .d-sm-none .d-md-block bg-primary text-bg-primary">
      <div class="d-flex justify-content-between align-items-center px-3" style="height: 50px">
        <!-- Footer row -->
        <div>
          <a href="https://www.facebook.com/iiitdmk/">
            <i class="fa-brands fa-lg fa-facebook"></i>
          </a>
          <a href="https://www.instagram.com/iiitdm_official/">
            <i class="fa-brands fa-lg fa-instagram"></i>
          </a>
          <a href="https://twitter.com/iiitdm_official">
            <i class="fa-brands fa-lg fa-twitter"></i>
          </a>
          <a href="https://www.youtube.com/channel/UC-lHJZR3Gqxm24_v9FnMVkw">
            <i class="fa-brands fa-lg fa-youtube"></i>
          </a>
        </div>
        <div>
          &copy; Made by <a href="http://www.cse.iiitdm.ac.in/csclub">CS Club</a> for IIITDMK
        </div>
        <div>
          <a href="#">
            <i class="fa fa-lg fa-angle-up"></i>
          </a>
        </div>
      </div>
    </div>
  </section>
  <script src="/node_modules/bootstrap/dist/js/bootstrap.js"></script>
  <script src="/node_modules/bootstrap/dist/js/bootstrap.js.map"></script>
</body>

</html>