-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathart.html
51 lines (51 loc) · 3.49 KB
/
art.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>The French Dispatch on 35mm Interaction</title>
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Imperial+Script&display=swap" rel="stylesheet">
<link rel="icon" type="image/png" href="./film favicon.png">
<link rel="stylesheet" href="style.css">
</head>
<body style="background-image: url(./assests/art\ background.jpg);">
<div id="app">
<div class="cast"><a href="index.html" style="color: rgb(255, 255, 255);"><h4>The French Dispatch </h4></a></div>
<div class="navigation" class="title" style="grid-template-columns: repeat(3, 1fr);">
<a href="dining.html" style="color:rgb(103, 223, 197); font-size: clamp(1rem, 2vw, 3.5rem);
;"><h2>The Private Dining<br>Room of the Police<br>Commissioner<br><span class="title" style="font-size: clamp(1rem, 2vw, 3rem); margin-top: 10px;">Robert Wright</span></h2></a>
<img class="illustration" src="./assests/brushes.png" style="width: 14vw; height: auto; justify-content: center; align-items: center; position: relative">
<a href="manifesto.html"class="link" style="color: gold;font-size: clamp(1rem, 2.5vw, 4rem);
"><h2>Revisions to<br>a Manifesto<br><span>by Lucinda Krementz</h2></a></span>
</div>
<div class="overlay" class="overlay2"></div>
<div class="film-strip-wrapper">
<div class="film-strip">
<div class="film-images film-images-copy">
<img src="./assests/art/art1.jpg" alt="Image 1">
<img src="./assests/art/art2.jpg" alt="Image 2">
<img src="./assests/art/art3.jpg" alt="Image 3">
<img src="./assests/art/art4.jpg" alt="Image 4">
<img src="./assests/art/art5.jpg" alt="Image 5">
<img src="./assests/art/art6.jpg" alt="Image 6">
<img src="./assests/art/art7.jpg" alt="Image 7">
<img src="./assests/art/art8.jpg" alt="Image 8">
<img src="./assests/art/art9.jpg" alt="Image 9">
<img src="./assests/art/art10.jpg" alt="Image 10">
<img src="./assests/art/art11.jpg" alt="Image 11">
<img src="./assests/art/art12.jpg" alt="Image 12">
</div>
</div>
<div class="sound-control">
<div class="status-text status-on" style="position: fixed; text-align: left; font-size: clamp(1rem, 1.5vw, 2.5rem); font-family: Futura,Trebuchet MS,Arial,sans-serif; font-style: italic; margin-bottom: 20px; color: gold; z-index: 11; font-variant-caps: all-small-caps; line-height: 85%;">♬ Simone, Naked, Cell Block-J Hobby Room<br> by Alexandre Desplat</div>
<div class="status-text status-off"></div>
<img id="toggleSound" src="./play pause button.png" alt="Play/Pause">
<audio id="backgroundMusic" src="./Simone, Naked, Cell Block-J Hobby Room.mp3" loop></audio>
</div>
<div> <p id="nametag">BY HYNING GAN FOR INTERACTION LAB @PARSONSSCHOOLOFDESIGN W JAKE PFAHL</p></div>
</div>
<script src="script.js"></script>
</body>
</html>