-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
64 lines (54 loc) · 2.88 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
<!DOCTYPE html>
<html lang="en">
<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">
<title>Art Dose</title>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!-- Header -->
<h1>Art Dose</h1>
<p>Hey! 👋</p>
<p>This is a simple app to randomly explore works of art from <a href="https://www.metmuseum.org/" target="_blank" class="altLink">The Metropolitan Museum Of Art's</a> collection.</p>
<p>Click the following button and you'll be presented with a piece. If you'd like to know more about the piece, just follow the link provided. Have fun!</p>
<button type="button" class="button" id="fetchArt">Give Me Art</button>
<figure id="pictureDisplay" class="pictureDisplay hidden">
<div class="mainPictureContainer">
<a href="" target="_blank" class="zoom"><img src="" alt="" class="mainPicture"></a>
</div>
<figcaption class="caption"></figcaption>
<!-- Controls -->
<nav class="imageControls hidden">
<!-- Left -->
<svg width="24" height="24" fill="none" viewBox="0 0 24 24" id="left" class="imageSwitch hidden">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13.25 8.75L9.75 12L13.25 15.25"></path>
</svg>
<!-- Zoom -->
<a href="" target="_blank" class="zoom"><svg width="24" height="24" fill="none" viewBox="0 0 24 24">
<circle cx="11" cy="11" r="6.25" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"></circle>
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M15.5 15.5L19.25 19.25"></path>
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M11 8.75V13.25"></path>
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13.25 11L8.75 11"></path>
</svg></a>
<!-- Right -->
<svg width="24" height="24" fill="none" viewBox="0 0 24 24" id="right" class="imageSwitch hidden">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M10.75 8.75L14.25 12L10.75 15.25"></path>
</svg>
</nav>
<!-- Carousel -->
<nav class="thumbnailCarousel">
<ul class="slider"></ul>
</nav>
</figure>
<!-- Piece info -->
<aside class="hidden">For more info on the piece, go <a href="" class="altLink" id="moreInfo" target="_blank">here.</a></aside>
<!-- Footer -->
<footer class="mainFooter">
<span>made with ❤️ by <a href="https://borjamarti.netlify.app/" class="link">borjaMartí</a>, thanks to <a href="https://metmuseum.github.io/" class="altLink">The MET's api</a></span>
</footer>
<script type="text/javascript" src="js/main.js"></script>
</body>
</html>