-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
125 lines (99 loc) · 6.91 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>SEA Admit Map</title>
<meta charset="utf-8" />
<link rel="shortcut icon" href="#">
<link rel="stylesheet" href="style/styleIndex.css">
<!-- <meta name="viewport" content="width=device-width, initial-scale=1"> -->
<body>
<!-- Leaflet's css-->
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
<!-- Leaflet's JavaScript-->
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<!-- add scrollama -->
<script src="https://unpkg.com/intersection-observer"></script>
<!-- scrollama -->
<script src='./js/scrollama.js'></script>
<!-- note: we are using a customized version of scrollama that the dev made here:
https://github.com/russellgoldenberg/scrollama/issues/122 -->
</head>
<body>
<header>
<div class="left1"> <a href="About.html"> About </a> </div>
<div class="left2"> <a href="CulturalOrgs.html"> Cultural Organizations</a> </div>
<div class="right1"> <a href="SEAsources.html"> SEAsources </a> </div>
<div class="right2"> <a href="ContactUs.html"> Contact Us </a> </div>
</header>
<!-- <div id = "landing">
<p> <h1>Welcome to the SEA Admit Weekend People of Color Virtual Tour! </h1></p>
<img src = "images/landingpic.png" alt = "Group picture of SEA Admit Weekend(?)">
</div> -->
<div class="hero-image">
<div class="hero-text">
<h1>Welcome to SEA Admit Weekend!</h1>
<h2>This is a webpage filled with cultural affimation stories made by Southeast Asian Bruins!</h2>
<p>Feel free to check our resources above! For tours, please click the "Main Tour" button below or the specialized tour buttons below that!</p>
<BUTTON TYPE="button" ONCLICK="alert('V.1: The main tour is currently the tour below! We plan on adding personalized tours for each cultural organizations at a later date when we gain more responses.')">Click me for the main tour!</BUTTON>
</div>
</div>
<!-- <div id = "selection">
<p>Select the stories you want to see</p>
</div> -->
<!-- <div id = "temp-buttons"></div> -->
<div id = "tour">
<div id = "story-image">
<img src = "images/royce.jpg" alt = "Royce Hall">
</div>
<div id = "map"> </div>
<div id = "sidebar">
<!-- <div class = "story" index= "0">
<h2>Story 1 </h2>
<div class="btn-group">
<button onclick="window.location.href='About.html';">Apple</button>
<button onclick="window.location.href='About.html';">Samsung</button>
<button onclick="window.location.href='About.html';">Sony</button>
</div>
<p>Praesent risus nisl, tempor nec turpis vitae, iaculis condimentum justo. Etiam elementum, magna a volutpat ultricies, massa odio semper nunc, vel tincidunt erat enim accumsan orci. Duis cursus, velit at laoreet sagittis, sapien orci sollicitudin sem, quis sollicitudin nisi quam auctor magna. Donec sed aliquam nisi, et mattis enim. Suspendisse facilisis vulputate sodales. Ut molestie orci in ipsum vehicula fermentum. Sed venenatis egestas posuere. Phasellus at tempus sem. Aliquam orci diam, accumsan ut quam at, molestie rutrum magna.</p>
</div>
<div class = "story" index= "1">
<h2>Story 2</h2>
<p>asdfkasdbfkjasdvfaiweyfvaoihdfb</p>
</div>
<div class = "story" index= "2">
<h2>Story 3</h2>
<p>Story 3 here</p>
</div>
<div class = "story" index= "3">
<h2>Story 4</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum quis elit commodo, lacinia turpis molestie, tristique dolor. Aliquam erat volutpat. Praesent sollicitudin at eros id elementum. Sed volutpat vel augue sed facilisis. Sed in risus vitae est interdum mattis id imperdiet nibh. Nam id mi id nisl dictum dignissim. Sed scelerisque eu orci quis rutrum. Nulla lobortis arcu quis ante pulvinar, sed hendrerit ligula sollicitudin. In non justo ante. Fusce dignissim quis arcu ut faucibus. Cras malesuada ligula vel gravida feugiat. Suspendisse potenti. Pellentesque malesuada consectetur bibendum. Aenean auctor nunc quis purus cursus, quis porttitor neque iaculis. Maecenas nibh turpis, consectetur non sodales in, iaculis quis tellus.
Ut diam augue, consectetur id arcu a, accumsan vehicula tortor. Curabitur et nisi enim. Phasellus blandit quam quis tortor interdum tincidunt. Sed dictum in metus in elementum. Donec sit amet rhoncus felis. Quisque lorem ipsum, rutrum ac justo ut, hendrerit scelerisque mauris. Proin placerat suscipit arcu, nec elementum odio consequat eget. Sed porta metus in rutrum tempor. Donec ligula nisi, tincidunt et consequat vitae, lobortis vel turpis. Maecenas at tellus eu ipsum tempor ornare sit amet a ante. Praesent nec enim felis. Vivamus ultrices volutpat sem, a fringilla felis hendrerit eget. Integer imperdiet erat vitae bibendum eleifend. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum interdum lectus sit amet leo luctus maximus. Suspendisse augue arcu, elementum mattis porta nec, ultrices in nisl.</p>
</div>
<div class = "story" index= "4"> </div> -->
<!-- </div> -->
</div>
<div id = "closing">
<p> <h4>Thank you for completing the tour! </h4></p>
<p> <h4>Resources (placeholders)</h4></p>
<ul>
<li><a href = "./CulturalOrgs.html">Cultural Organizations at UCLA</a></li>
<li><a href = "./SEAsources.html">SEAsources</a></li>
</ul>
</div>
<div id="clubModal">
<!-- // is the cool black blackground: theBlackModalThingy -->
<!-- <div id="myModal" class ="modal"> -->
<!-- the content that sits above the cool background: coolModalContent -->
<!-- <div class="modal-content">TEST MODAL</div> -->
<!-- </div> -->
<!-- here is what your target should look like: -->
<!-- <div id="clubModal_vsu" class="theBlackModalThingy"> -->
<!-- <div class="modal-content"> All the cool VSU stuff</div> -->
</div>
</div>
<footer><h5>Asian American Studies 191A, Spring 2021</h5></footer>
<script src="js/init.js"></script>
<script src="js/scroll.js"></script>
</body>
</html>