-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathpop-art.html
113 lines (108 loc) · 12.5 KB
/
pop-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
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
<!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>Responsice Layout</title>
<link href="pop-art.css" rel="stylesheet" />
</head>
<body>
<header>
<nav>
<ul class="ul">
<svg onclick="redirectLogo()" class="svg" xmlns="http://www.w3.org/2000/svg" width="314.147" height="32" viewBox="0 0 314.147 32"><g transform="translate(-11781.292 3055)"><path d="M236.16,23.6v-8h3.2v8a1.6,1.6,0,0,1-3.2,0Zm-13.44,1.6V22h3.2a1.6,1.6,0,1,1,0,3.2Zm0,0a9.592,9.592,0,0,1-9.6-9.6h3.2a6.392,6.392,0,0,0,6.4,6.4v3.2Zm-23.039,0V22a6.395,6.395,0,0,0,6.4-6.4h3.2a9.593,9.593,0,0,1-9.6,9.6Zm0,0a9.592,9.592,0,0,1-9.6-9.6h3.2a6.392,6.392,0,0,0,6.4,6.4v3.2ZM183.04,23.6v-8h3.2v8a1.6,1.6,0,1,1-3.2,0Zm-16,0v-8h3.2v8a1.6,1.6,0,1,1-3.2,0ZM153.6,22a6.4,6.4,0,1,0,0-12.8V6a9.6,9.6,0,1,1,0,19.2Zm0,3.2a9.6,9.6,0,1,1,0-19.2h0V9.2a6.4,6.4,0,1,0,0,12.8v3.2Zm-23.04,0a9.6,9.6,0,0,1-4.8-1.283,9.6,9.6,0,0,1-14.4-8.317v-8a1.6,1.6,0,0,1,3.2,0v8a6.406,6.406,0,0,0,8.534,6.036A9.564,9.564,0,0,1,120.96,15.6v-8a1.6,1.6,0,0,1,3.2,0v8a6.373,6.373,0,0,0,1.6,4.234,6.382,6.382,0,0,0,1.6-4.234v-8a1.6,1.6,0,0,1,3.2,0v8a9.575,9.575,0,0,1-2.134,6.036A6.4,6.4,0,0,0,136.96,15.6v-8a1.6,1.6,0,0,1,3.2,0v8a9.591,9.591,0,0,1-9.6,9.6ZM65.28,23.6V7.6a1.6,1.6,0,0,1,3.2,0v16a1.6,1.6,0,1,1-3.2,0Zm-8.32,0V7.6a1.6,1.6,0,0,1,3.2,0v16a1.6,1.6,0,1,1-3.2,0Zm-8.32,0v-.843a9.567,9.567,0,0,1-6.4,2.444h0V22a6.4,6.4,0,1,0,0-12.8V6h0a9.591,9.591,0,0,1,9.6,9.6v8a1.6,1.6,0,1,1-3.2,0ZM38.5,24.446A9.6,9.6,0,0,1,42.24,6h0V9.2a6.4,6.4,0,1,0,0,12.8v3.2A9.543,9.543,0,0,1,38.5,24.446ZM19.2,25.2a9.594,9.594,0,0,1-4.8-1.283A9.569,9.569,0,0,1,9.6,25.2h0A9.592,9.592,0,0,1,0,15.6v-8a1.6,1.6,0,0,1,3.2,0v8a6.406,6.406,0,0,0,8.534,6.036A9.564,9.564,0,0,1,9.6,15.6v-8a1.6,1.6,0,0,1,3.2,0v8a6.381,6.381,0,0,0,1.6,4.234A6.382,6.382,0,0,0,16,15.6v-8a1.6,1.6,0,0,1,3.2,0v8a9.564,9.564,0,0,1-2.134,6.036A6.4,6.4,0,0,0,25.6,15.6v-8a1.6,1.6,0,0,1,3.2,0v8a9.592,9.592,0,0,1-9.6,9.6Zm73.6-5.76V15.6h0a4.8,4.8,0,0,1,4.8-4.8v1.92a2.886,2.886,0,0,0-2.716,1.921H97.6a.96.96,0,1,1,0,1.92H94.72v2.88a.96.96,0,1,1-1.92,0Zm-6.72.96a4.8,4.8,0,0,1,0-9.6h0a4.8,4.8,0,0,1,0,9.6Zm0-1.921A2.88,2.88,0,1,0,83.2,15.6,2.883,2.883,0,0,0,86.08,18.48Zm138.241.32a1.6,1.6,0,1,1,0-3.2h8a3.2,3.2,0,0,1-3.2,3.2Zm11.839-3.2a9.592,9.592,0,0,1,9.6-9.6h0V9.2a6.392,6.392,0,0,0-6.4,6.4Zm-7.04,0a6.395,6.395,0,0,0-6.4-6.4V6a9.591,9.591,0,0,1,9.6,9.6Zm-16,0a9.594,9.594,0,0,1,9.6-9.6h0V9.2a6.392,6.392,0,0,0-6.4,6.4Zm-7.04,0a6.395,6.395,0,0,0-6.4-6.4V6a9.563,9.563,0,0,1,6.4,2.444V1.6a1.6,1.6,0,1,1,3.2,0V15.2h-.008q.008.2.008.4Zm-16,0a9.594,9.594,0,0,1,9.6-9.6h0V9.2a6.392,6.392,0,0,0-6.4,6.4Zm-7.04,0a6.395,6.395,0,0,0-6.4-6.4V6a9.591,9.591,0,0,1,9.6,9.6Zm-16,0a9.592,9.592,0,0,1,9.6-9.6h0V9.2a6.392,6.392,0,0,0-6.4,6.4ZM97.6,10.8a.96.96,0,1,1,0,1.92ZM245.76,6a1.6,1.6,0,0,1,0,3.2Z" transform="translate(11848.079 -3054.6)" fill="#001219"/><g transform="translate(11781.292 -3055)"><rect width="4.438" height="32.548" rx="2.219" transform="translate(0.861 2.219) rotate(-30)" fill="#ca6702"/><rect width="4.438" height="32.548" rx="2.219" transform="translate(29.369 30.406) rotate(-150)" fill="#94d2bd"/><g transform="translate(21.233 23.539)" fill="#e9d8a6" stroke="#001219" stroke-width="1"><rect width="4.31" height="6.688" rx="2.155" stroke="none"/><rect x="0.5" y="0.5" width="3.31" height="5.688" rx="1.655" fill="none"/></g><g transform="translate(46.627 32) rotate(180)" fill="none"><path d="M16.28.911a1.51,1.51,0,0,1,2.772,0L34.931,27.922c.944,1.606.114,4-1.386,4H1.787c-1.5,0-2.33-2.4-1.386-4Z" stroke="none"/><path d="M 17.66568183898926 2.499462127685547 L 2.124996185302734 28.93543815612793 C 1.935707092285156 29.2574348449707 1.991481781005859 29.69390869140625 2.085159301757812 29.92488861083984 L 33.24621200561523 29.92488861083984 C 33.33988571166992 29.69390678405762 33.39565658569336 29.25743675231934 33.20637512207031 28.93544960021973 L 17.66568183898926 2.499462127685547 M 17.66568565368652 1.9073486328125e-06 C 18.18023300170898 1.9073486328125e-06 18.69478034973145 0.3035545349121094 19.05167579650879 0.9106597900390625 L 34.93052673339844 27.92188835144043 C 35.87477493286133 29.52813911437988 35.04493713378906 31.92488861083984 33.54453659057617 31.92488861083984 L 1.786827087402344 31.92488861083984 C 0.2864341735839844 31.92488861083984 -0.5434036254882812 29.52813911437988 0.4008369445800781 27.92188835144043 L 16.27969551086426 0.9106597900390625 C 16.6365909576416 0.3035545349121094 17.15113830566406 1.9073486328125e-06 17.66568565368652 1.9073486328125e-06 Z" stroke="none" fill="#001219"/></g><g transform="translate(40.979 32) rotate(180)" fill="none"><path d="M16.28.911a1.51,1.51,0,0,1,2.772,0L34.931,27.922c.944,1.606.114,4-1.386,4H1.787c-1.5,0-2.33-2.4-1.386-4Z" stroke="none"/><path d="M 17.66568183898926 2.499462127685547 L 2.124996185302734 28.93543815612793 C 1.935707092285156 29.2574348449707 1.991481781005859 29.69390869140625 2.085159301757812 29.92488861083984 L 33.24621200561523 29.92488861083984 C 33.33988571166992 29.69390678405762 33.39565658569336 29.25743675231934 33.20637512207031 28.93544960021973 L 17.66568183898926 2.499462127685547 M 17.66568565368652 1.9073486328125e-06 C 18.18023300170898 1.9073486328125e-06 18.69478034973145 0.3035545349121094 19.05167579650879 0.9106597900390625 L 34.93052673339844 27.92188835144043 C 35.87477493286133 29.52813911437988 35.04493713378906 31.92488861083984 33.54453659057617 31.92488861083984 L 1.786827087402344 31.92488861083984 C 0.2864341735839844 31.92488861083984 -0.5434036254882812 29.52813911437988 0.4008369445800781 27.92188835144043 L 16.27969551086426 0.9106597900390625 C 16.6365909576416 0.3035545349121094 17.15113830566406 1.9073486328125e-06 17.66568565368652 1.9073486328125e-06 Z" stroke="none" fill="#001219"/></g><g transform="translate(35.331 32) rotate(180)" fill="none"><path d="M16.28.911a1.51,1.51,0,0,1,2.772,0L34.931,27.922c.944,1.606.114,4-1.386,4H1.787c-1.5,0-2.33-2.4-1.386-4Z" stroke="none"/><path d="M 17.66568183898926 2.499462127685547 L 2.124996185302734 28.93543815612793 C 1.935707092285156 29.2574348449707 1.991481781005859 29.69390869140625 2.085159301757812 29.92488861083984 L 33.24621200561523 29.92488861083984 C 33.33988571166992 29.69390678405762 33.39565658569336 29.25743675231934 33.20637512207031 28.93544960021973 L 17.66568183898926 2.499462127685547 M 17.66568565368652 1.9073486328125e-06 C 18.18023300170898 1.9073486328125e-06 18.69478034973145 0.3035545349121094 19.05167579650879 0.9106597900390625 L 34.93052673339844 27.92188835144043 C 35.87477493286133 29.52813911437988 35.04493713378906 31.92488861083984 33.54453659057617 31.92488861083984 L 1.786827087402344 31.92488861083984 C 0.2864341735839844 31.92488861083984 -0.5434036254882812 29.52813911437988 0.4008369445800781 27.92188835144043 L 16.27969551086426 0.9106597900390625 C 16.6365909576416 0.3035545349121094 17.15113830566406 1.9073486328125e-06 17.66568565368652 1.9073486328125e-06 Z" stroke="none" fill="#001219"/></g></g></g></svg>
<li class="li lists" id="li" ><a class="a" href="index.html#collections">Collections</a></li>
<li class="li lists" id="li" ><a class="a" href="">About</a></li>
<li class="li lists" id="li" ><a class="a" href="">Contact</a></li>
<li class="li lists" id="li" ><a class="a" href="">Donate</a></li>
</ul>
</nav>
<div class="container-image">
<section id="banner">
<picture>
<source srcset="images/banner/banner-837.png " media="(min-width:650px ) and ( max-width:944px)">
<source srcset="images/banner/banner-1200.png " media="(min-width:945px)">
<img src="/images/banner/banner-300.png" alt="banner ">
</picture>
</section>
</div>
</header>
<section id="popart">
<h2>Pop Art</h2>
<ul>
<li >
<figure>
<img src="pop-art-images/1-place.jpg" alt="Pop Art: This must be the place" />
<figcaption><a href="#">The Place</a></figcaption>
</figure>
</li>
<li>
<figure>
<img src="pop-art-images/2-lippy.jpg" alt="A face showing a nose and blue lips on a white background." />
<figcaption><a href="#">Lippy</a></figcaption>
</figure>
</li>
<li>
<figure>
<img src="pop-art-images/3-skull.jpg" alt="Mexican Sugar skull." />
<figcaption><a href="#">Sugar</a></figcaption>
</figure>
</li>
<li >
<figure>
<img src="pop-art-images/4-yell.jpg" alt="Red, orange, green, and yellow wedges converging on a point." />
<figcaption><a href="#">Rebel Yell</a></figcaption>
</figure>
</li>
<li>
<figure>
<img src="pop-art-images/5-fork.jpg" alt="Fork on a green background." />
<figcaption><a href="#">Fork It Up</a></figcaption>
</figure>
</li>
<li>
<figure>
<img src="pop-art-images/6-drip.jpg" alt="Rainbow paint colors dripping down a wall." />
<figcaption><a href="#">Drip</a></figcaption>
</figure>
</li>
<li>
<figure>
<img src="pop-art-images/7-invade.jpg" alt="Orange space invader on a yellow wall." />
<figcaption><a href="#">Invade</a></figcaption>
</figure>
</li>
<li>
<figure>
<img src="pop-art-images/8-school.jpg" alt="Woman in sunglasses close up." />
<figcaption><a href="#">Too Cool for School</a></figcaption>
</figure>
</li>
<li>
<figure>
<img src="pop-art-images/9-doors.jpg" alt="Garage door painted to look like a Doors album cover." />
<figcaption><a href="#">(not) The Doors</a></figcaption>
</figure>
</li>
</ul>
</section>
<nav>
<footer>
<div class="social">
<h3>Stay Connected!</h3>
<a href=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="40" height="40" viewBox="0 0 40 40"><defs><clipPath id="clip-facebook-icon"><rect width="40" height="40"/></clipPath></defs><g id="facebook-icon" clip-path="url(#clip-facebook-icon)"><g id="Group_336" data-name="Group 336" transform="translate(-558 -4361)"><circle id="Ellipse_542" data-name="Ellipse 542" cx="20" cy="20" r="20" transform="translate(558 4361)" fill="#005f73"/><path id="Path_353" data-name="Path 353" d="M246.261,353.416h-2.231v7.991H240.7v-7.991H239.13V350.6H240.7v-1.829a3.958,3.958,0,0,1,.256-1.445,2.807,2.807,0,0,1,1.006-1.335,3.511,3.511,0,0,1,2.085-.585l2.469.018v2.743h-1.792a.709.709,0,0,0-.457.146.77.77,0,0,0-.238.622V350.6h2.523Z" transform="translate(335.158 4027.593)" fill="#f5f5f5"/></g></g></svg></a>
<a href=""><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="40" height="40" viewBox="0 0 40 40"><defs> <clipPath id="clip-instagram-icon"> <rect width="40" height="40"/></clipPath></defs><g id="instagram-icon" clip-path="url(#clip-instagram-icon)"><g id="Group_337" data-name="Group 337" transform="translate(-638 -4361)"><circle id="Ellipse_543" data-name="Ellipse 543" cx="20" cy="20" r="20" transform="translate(638 4361)" fill="#005f73"/><path id="instagram" d="M6.64,2h6.72A4.643,4.643,0,0,1,18,6.64v6.72A4.64,4.64,0,0,1,13.36,18H6.64A4.643,4.643,0,0,1,2,13.36V6.64A4.64,4.64,0,0,1,6.64,2M6.48,3.6A2.88,2.88,0,0,0,3.6,6.48v7.04A2.878,2.878,0,0,0,6.48,16.4h7.04a2.88,2.88,0,0,0,2.88-2.88V6.48A2.878,2.878,0,0,0,13.52,3.6H6.48M14.2,4.8a1,1,0,1,1-1,1,1,1,0,0,1,1-1M10,6a4,4,0,1,1-4,4,4,4,0,0,1,4-4m0,1.6A2.4,2.4,0,1,0,12.4,10,2.4,2.4,0,0,0,10,7.6Z" transform="translate(648 4371)" fill="#f5f5f5"/></g></g></svg></a>
</div>
<address>
<h3>Wall of Wander <br>RBC Plaza <br>60 South 6TH Street <br>17 octobre</h3>
</address>
</footer>
</nav>
<script>
function redirectLogo () {
window.location.href = "index.html"
}
</script>
</body>
</html>