This repository has been archived by the owner on Sep 6, 2020. It is now read-only.
/
index.html
125 lines (102 loc) · 5.97 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
<!doctype html>
<html lang="en">
<head>
<title>NYUAD IM</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,
initial-scale=1, user-scalable=no, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous"> -->
<link rel="stylesheet" type="text/css" href="./css/bootstrap.min.css">
<!-- Custom CSS -->
<link rel="stylesheet" type="text/css" href="./css/main.css">
<link rel="stylesheet" type="text/css" href="./css/landing.css">
<link rel="stylesheet" type="text/css" href="./css/posts.css">
<link rel="stylesheet" type="text/css" href="./css/header.css">
<link rel="stylesheet" type="text/css" href="./css/overlay.css">
<!-- FONTS -->
<link href="https://fonts.googleapis.com/css?family=Karla|PT+Sans|Source+Sans+Pro" rel="stylesheet">
<!-- Builtin JS -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
<!-- P5 Libraries -->
<script type="text/javascript" src="/js/p5/p5.js"></script>
<script type="text/javascript" src="/js/p5/p5.dom.js"></script>
<script type="text/javascript" src="/js/p5/p5.sound.js"></script>
<script type="text/javascript" src="/js/sketches/sketch.js"></script>
<!-- Custom JS -->
<script> const TARGET_URL = '../resources/data/announcements.json' </script>
<script type="text/javascript" src="/js/main.js"></script>
<script type="text/javascript" src="/js/fetch.js"></script>
<script type="text/javascript" src="/js/landing.js"></script>
</head>
<body>
<div class='description-center' id='description-center'>
<iframe width="100%" height="100%" src="https://www.youtube.com/embed/YwRGvnerj_w?rel=0&showinfo=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>
<!-- HEADER SECTION -->
<div class="container-fluid header-container" id="header">
<!-- JS Script will inject this from /html/navigation.html :) -->
</div>
<!-- SKETCH SECTION -->
<div class="container-fluid sketch-container">
<div id="canvas-container">
</div>
</div>
<!-- ANNOUNCEMENT SECTION -->
<div class="announcement-container" id="announcement">
<div class="announcement-close" onclick='closeAnnouncement()'>X</div>
<div class="announcement-title" id="a-title">Save the Date!</div>
<div class="announcement-message">
<div class="announcement-description" id="a-description">
</div>
</div>
<div class="announcement-date" id="a-date"></div>
<div class="announcement-location" id="a-location"></div>
<a class="announcement-link" id="a-link"></a>
</div>
</div>
<!-- DESCRIPTION BLOCKS -->
<div class='description-left' id='description-left'>
<p>IM is a community of makers, artists, designers, developers, coders, hackers, producers, educators, and creative technologists. IM is about creating experiences for people that are delightful, insightful, magical, critical, unsettling, encouraging, and thought provoking. IM explores the ways we connect, participate, collaborate, and communicate with one another. IM involves making, breaking, sharing, playing, presenting, reflecting, repeating, rewinding and revising. IM is art, design, communications, engineering, computer science, and more.</p>
<br>
<p>If you're looking for a more detailed account, head over to our <b><a href='./about'>ABOUT</a></b> page. If you'd rather take a look at our projects, we'd recommend our <b><a href='./gallery'>GALLERY</a></b>.</p>
</div>
<div class='description-right' id='description-right'>
<p>Take one of our classes. Stop by by the Lab and say hello. Attend our End-of-Semester Show. Come to one of our weekly workshops. Be a DJ on our <a href="http://radio.nyuad.im">web radio</a>. Join the DiscoVR Student Group. Come to <a href="http://openstudios.nyuad.im">Open Studios</a>. Apply for 24X.</p>
<br>
<p> Sign up for our <a href="https://docs.google.com/forms/d/e/1FAIpQLScFC9I9xPLBowQq1N06vHFl4JcZjzuXV1nCINA1MbMCaMp5fw/viewform?c=0&w=1">mailing list</a>. Follow us on <a href="https://www.facebook.com/groups/IMNYUAD/">facebook</a>, <a href="https://www.instagram.com/im_nyuad/">instagram</a>, and <a href="https://twitter.com/NYUAD_IM">twitter</a>. Help us design and build our web page. Suggest other events, activities, and opportunities you would like to see and do!</p>
<br>
<p>All of that can be found at our <b><a href='./activities'>ACTIVITIES</a></b> page, where you can browse through a list of all our shows, workshops, and events.</p>
</div>
<!-- ACTION BUTTONS SECTION -->
<div class="container-fluid button-container">
<div class='button-center'>
<button onclick="descriptionToggle(this)" class="action-button">
WHAT IS IM?
</div>
</button>
<div class='button-center'>
<button onclick="experienceToggle(this)" class="action-button">
SEE FOR YOURSELF
</button>
</div>
<div class='button-center'>
<button onclick="participationToggle(this)" class="action-button">
WHAT CAN I DO?
</button>
</div>
</div>
<!-- FOOTER SECTION -->
<div class="container-fluid footer-container" id="footer">
</div>
<!-- OVERLAY SECTION -->
<div id="overlay-background"></div>
<div id="overlay-description" class="overlay"></div>
<div id="overlay-examples" class="overlay"></div>
<div id="overlay-participation" class="overlay"></div>
</body>
</html>