-
Notifications
You must be signed in to change notification settings - Fork 5
/
contact.html
81 lines (72 loc) · 4.03 KB
/
contact.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>IT Club - Department of Computer Applications</title>
<link rel="stylesheet" href="./css/index.css">
<script src="https://cdn.tailwindcss.com"></script>
<link rel="icon" href="./public/img/fav.ico" type="image/x-icon">
<!---LeafletJS Maps--->
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin="" />
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"
integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
<!----FontAwesome--->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body class="flex flex-col min-h-screen bg-gray-100">
<script src="./script/Header.js"></script>
<section id="contact" class="bg-gray-100 py-8">
<div class="container mx-auto pb-4">
<h2 class="text-2xl mx-2 md:text-5xl text-center mb-10 rounded-lg font-bold">We are here to connect<br>you along
the way</h2>
<div class="info-container items-center md:items-start flex md:flex-row flex-col gap-x-5 gap-y-5">
<a href="https://maps.app.goo.gl/6JgYrHa3tKVu6RR56" target="_blank">
<div id="map" class="md:h-64 md:w-96 h-48 w-72 rounded-lg shadow-sm shadow-blue-950"></div>
</a>
<div class="card-social bg-slate-200 md:h-64 md:w-96 h-48 w-72 p-3 rounded-lg shadow-sm shadow-blue-950 m-auto">
<h2 class="text-2xl font-bold md:py-5 py-2">Email Support</h2>
<p href="#" class="text-blue-500 text-5xl"><i class="fa fa-envelope"></i></p>
<p class="hidden md:block py-4">Connect us via Email, we'll reach you out</p>
<p class="md:hidden py-2">Connect us via Email</p>
<p class="font-bold md:text-xl">iicsrmofficial[at]gmail[dot]com</p>
</div>
<div class="card-social bg-slate-200 md:h-64 md:w-96 h-48 w-72 p-3 rounded-lg shadow-sm shadow-blue-950 m-auto">
<h2 class="text-2xl font-bold md:py-6 md:mb-4 py-4">Social Media</h2>
<div class="flex space-x-4 mb-2 justify-center">
<!-- Instagram -->
<a href="https://www.instagram.com/itclubcomputerapplications_srm"
class="text-blue-500 active:text-blue-700 hover:text-blue-700 text-5xl cursor-pointer"><i
class="fa fa-instagram"></i></a>
<!-- Twitter -->
<a href="https://x.com/IIC_SRMIST"
class="text-blue-500 active:text-blue-700 hover:text-blue-700 text-5xl cursor-pointer"><i
class="fa fa-twitter"></i></a>
<!-- LinkedIn -->
<a href="https://www.linkedin.com/company/itclub-computer-applications-srmist-delhi-ncr/"
class="text-blue-500 active:text-blue-700 hover:text-blue-700 text-5xl cursor-pointer"><i
class="fa fa-linkedin"></i></a>
<!-- GitHub -->
<a href="https://github.com/iicsrm-official"
class="text-blue-500 active:text-blue-700 hover:text-blue-700 text-5xl cursor-pointer"><i
class="fa fa-github"></i></a>
</div>
<p class="pt-5">Connect us via Social Media</p>
</div>
</div>
</div>
</section>
<p class="my-4 bg-gray-300 p-2 text-center text-sm md:text-lg">Delhi-NCR Campus, Delhi-Meerut Road, Modinagar,
Ghaziabad-201204 (U.P.)</p>
<script>
var map = L.map('map').setView([28.797546281215926, 77.53692433267125], 13);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors'
}).addTo(map);
L.marker([28.797546281215926, 77.53692433267125]).addTo(map)
.bindPopup('SRM Institute of Science and Technology, Delhi NCR Campus, Ghaziabad')
.openPopup();
</script>
<script src="./script/Footer.js"></script>
</body>