DPAMVirtualExperience/historian.html at master · aaprilfoolss/DPAMVirtualExperience · 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
<!-- Code written by April LaRosa (https://github.com/aaprilfoolss) -->

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>The Historian</title>
    <link rel="icon" type="image/x-icon" href="dpam.svg">
    <link rel="stylesheet" href="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=Roboto+Condensed&family=Source+Sans+Pro&display=swap" rel="stylesheet">
  </head>
  <body class="results">
    <header>
      <h1><a href="index.html">DPAM Virtual Experience</a></h1>
      <span>In partnership with the <a href="https://resources.depaul.edu/art-museum/Pages/default.aspx">DePaul Art Museum</a></span>
    </header>
    <div class="hero" style="background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1)),
    url(images/5091.jpg); background-size: cover; height: 130px; margin: 0 1em -30px;"></div>
    <div>
    <div>
      <span>You Matched With</span>
      <h2>The Historian!</h2>
    </div>
    <section>
      <p>
        Blast from the past! You look for historically important art, and often seek to understand the context. You may be an art history nerd, very knowledgeable (or hope to become very knowledgeable) about art of all kinds, a lifelong learner, and community focused.
        <br><br>
        <i>Desktop and fullscreen recommended for tour.</i>
      </p>
      <div class="tour">
        <iframe style="position:absolute; top:0; left:0; width:100%; height:100%;" src="https://aaprilfoolss.github.io/3DVista" name="DPAM Virtual Experience" width="100%" height="100%" frameborder="0" allowfullscreen="true" allow="fullscreen; accelerometer; gyroscope; magnetometer; vr; xr; xr-spatial-tracking; autoplay; camera; microphone"></iframe>
      </div>
      <p class="disclaimer">
        <i>All of the art reflected is exclusively online.</i>
      </p>
    </section>
  </body>
</html>