-
Notifications
You must be signed in to change notification settings - Fork 0
/
contact.html
116 lines (111 loc) · 6.63 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
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
<!DOCTYPE html>
<html lang="en" class="scroll-smooth">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="icon" href="/images/icon-profile.svg">
<link rel="mask-icon" href="/images/mask-icon.svg" color=”#94a3b8">
<link rel="stylesheet" href="css/style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@100;200;300&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@100;300;600&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@400&display=swap" rel="stylesheet">
<title>S Ganga Prasath | Robotics, Behavior, Soft-matter</title>
</head>
<body class="bg-slate-100 flex flex-col mx-auto bg-[url('/images/bg-full.png')] bg-repeat-x">
<!-- Outermost container -->
<div class="flex flex-col mx-auto space-y-2 max-w-4xl my-10">
<!-- Top-bar -->
<!-- <ul class="flex flex-row items-baseline justify-between text-xs uppercase font-serif font-regular text-slate-500 dark:text-gray-400"> -->
<ul
class="flex flex-col items-center justify-center text-xl font-sans font-normal text-slate-500 dark:text-gray-400 -mb-3 md:flex-row md:justify-end">
<li class="mr-2">
<a href="/index.html" class="inline-block py-2 px-2 hover:text-indigo-400 duration-500 active">home</a>
</li>
<!-- <li class="mr-0 opacity-0 -mb-10 md:mb-0 md:opacity-100">
<a href="#" class="inline-block py-2 px-2">|</a>
</li> -->
<li class="mr-2">
<a href="/academic.html" class="inline-block py-2 px-2 hover:text-indigo-400 duration-500">résumé</a>
</li>
<!-- <li class="mr-1 opacity-0 -mb-10 md:mb-0 md:opacity-100">
<a href="#" class="inline-block py-2 px-2">|</a>
</li> -->
<li class="mr-2">
<a href="/courses.html" class="inline-block py-2 px-2 hover:text-indigo-400 duration-500">courses</a>
</li>
<!-- <li class="mr-1 opacity-0 -mb-10 md:mb-0 md:opacity-100">
<a href="#" class="inline-block py-2 px-2">|</a>
</li> -->
<li class="mr-2">
<a href="/pubs.html" class="inline-block py-2 px-2 hover:text-indigo-400 duration-500">publications</a>
</li>
<!-- <li class="mr-1 opacity-0 -mb-10 md:mb-0 md:opacity-100">
<a href="#" class="inline-block py-2 px-2">|</a>
</li> -->
<li class="mr-2">
<a href="/projects.html" class="inline-block py-2 px-2 hover:text-indigo-400 duration-500">projects</a>
</li>
<!-- <li class="mr-1 opacity-0 -mb-10 md:mb-0 md:opacity-100">
<a href="#" class="inline-block py-2 px-2">|</a>
</li> -->
<li class="mr-2"></li>
<a href="/contact.html" class="inline-block py-2 px-2 hover:text-indigo-400 duration-500">contact</a>
</li>
</ul>
<!-- Container except top-bar -->
<div class="container flex flex-col space-y-10">
<div
class="relative flex flex-col items-center justify-center pt-0 pb-10 bg-gradient-to-tl from-slate-200 to-slate-50 text-black rounded-3xl shadow-md shadow-slate-400 border-[1px] border-slate-200 overflow-hidden">
<div
class="flex flex-col items-center justify-center space-y-4 mx-14 my-4 md:flex-row md:items-start md:space-y-0 md:space-x-6">
<section id="about-me">
<!-- Profile icon -->
<div
class="absolute w-12 h-12 top-[20px] left-3 transform translate-x-px border-1 rounded-full">
<img src="images/icon-contact.svg" alt="" class="h-20 ml-2 mr-1 opacity-70" />
</div>
<!-- Title -->
<div class="absolute left-8 top-6 mt-6 ml-16 mb-4 text-2xl font-normal">
Contact
</div>
<div class="grid grid-cols-1 justify-items-center ml-20 mr-10 mt-20 md:grid-cols-2 gap-3 font-serif text-sm">
<div>
<p class="text-center md:text-left font-bold md:px-16">Office:</p>
<p class="text-center md:text-left font-light md:px-16">
227A, Mechanical Sciences Block <br />
<a href="mailto:sgangaprasath@smail.iitm.ac.in" class="text-indigo-500 hover:text-color-indigo-800">
sgangaprasath@smail.iitm.ac.in</a><br/>
Ph: (044) 2257 4086
</p>
<p class="text-center mt-4 md:text-left font-bold text-md font-mono md:px-16">INTERFACE lab:</p>
<p class="text-center md:text-left font-light text-md font-mono md:px-16">
123, Krishna Chivukula Block <br />
Ph: (044) 2257 5202 <br />
IIT Madras Campus <br />
Chennai - 600 036.
</p>
</div>
<div>
<iframe
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3887.7122602135637!2d80.2307312!3d12.9902467!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3a52677fc2aa5e79%3A0x803f6dd62d082508!2sMechanical%20Sciences%20Block!5e0!3m2!1sen!2sin!4v1722092039043!5m2!1sen!2sin"
width="325" height="250"></iframe>
</div>
</div>
</section>
</div>
</div>
</div>
</div>
<footer class="py-2">
<div
class="container flex flex-col items-center justify-center mx-auto space-y-16 md:flex-row md:space-y-0 md:items-center">
<div class="font-serif text-xs">© S Ganga Prasath | Theme developed with <a
href="https://tailwindcss.com"
class="text-indigo-500 hover:text-color-indigo-800"><code>tailwindcss</code></a>
</div>
</footer>
</body>
</html>