-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
165 lines (157 loc) · 9.61 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
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
<!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" />
<!-- SEO -->
<title>Gruikzz ! Something went wrong... - Pork Punk</title>
<meta name="description" content="The page you were looking for was not found. Please check the URL, use the search bar or return to the home page." />
<!-- Favicon -->
<link rel="shortcut icon" href="./assets/images/favicon.ico" type="image/x-icon" />
<link rel="icon" href="./assets/images/favicon.ico" type="image/x-icon" />
<!-- Open Graph -->
<meta
property="og:title"
content="Gruikzz ! Something went wrong... - Pork Punk"
/>
<meta
property="og:description"
content="The page you were looking for was not found. Please check the URL, use the search bar or return to the home page."
/>
<meta property="og:site_name" content="Pork Punk" />
<meta property="og:type" content="website" />
<meta
property="og:url"
content="https://aelweak.github.io/porkpunk/"
/>
<meta
property="og:image"
content="https://aelweak.github.io/porkpunk/assets/images/previewOG.webp"
/>
<meta name="theme-color" content="#c82878" />
<!-- Twitter card -->
<meta name="twitter:card" content="summary_large_image" />
<!-- Style(s) -->
<link rel="preload" href="./assets/fonts/outfit.woff2" as="font" type="font/woff2" crossorigin>
<link rel="stylesheet" href="./styles/style.css" />
<!-- Script(s) -->
<script defer src="./scripts/script.js"></script>
</head>
<body>
<header>
<nav>
<ul class="main-nav">
<li class="main-logo">
<a href="#"><img src="./assets/images/logo.svg" alt="Go back to homepage"/></a>
</li>
<li><a href="#">Home</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Videos</a></li>
<li><a href="#" class="tours">Upcoming Tours</a></li>
<li class="nav-hamburger">
<button type="button">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512"
>
<path d="M80 160h352M80 256h352M80 352h352" />
</svg>
<span class="visually-hidden">Open menu</span>
</button>
</li>
</ul>
</nav>
</header>
<main>
<div class="pigs-container">
<div class="words-container">
<div class="words-left"></div>
<div class="words-right"></div>
</div>
<div class="heads-container">
<img class="pigs-helmet-light" src="./assets/images/pigs_helmet-light.webp"/>
<img class="pigs-heads" src="./assets/images/pigs_heads.webp"/>
</div>
<img class="pigs-bodies" src="./assets/images/pigs_bodies.webp"/>
</div>
<h1>Err<span>o</span>r.</h1>
<form action="#">
<label for="search"
>You should <span>search for something else :</span></label
>
<div class="search-container">
<input
type="search"
id="search"
class="search-input"
placeholder="Pork Punk's album, song, news, ..."
/>
<button type="submit" class="search-submit">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 38.91 38.91"><path d="M39.91,36.43,29.22,25.73a15.12,15.12,0,1,0-3.77,3.77l10.7,10.69a2.47,2.47,0,0,0,3.5,0l.26-.26A2.49,2.49,0,0,0,39.91,36.43Zm-23.09-9.5a9.83,9.83,0,1,1,9.83-9.82A9.82,9.82,0,0,1,16.82,26.93Z" transform="translate(-1.72 -2)"/></svg>
<span class="visually-hidden">Submit search</span></a>
</button>
</div>
</form>
<p>or... <a href="#" class="go-back">Go back to homepage</a></p>
<div class="backgrounds-container">
<div class="background-planet"></div>
<div class="background-lights"></div>
</div>
</main>
<footer>
<div class="social-container">
<a href="#"
><svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 448 512"
>
<path
d="M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z"
/>
</svg>
<span class="visually-hidden">Go to Pork Punk's Instagram page</span></a
><a href="#">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512"
>
<path
d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"
/>
</svg>
<span class="visually-hidden">Go to Pork Punk's Twitter page</span></a
>
</a>
<a href="#">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 576 512"
>
<path
d="M549.655 124.083c-6.281-23.65-24.787-42.276-48.284-48.597C458.781 64 288 64 288 64S117.22 64 74.629 75.486c-23.497 6.322-42.003 24.947-48.284 48.597-11.412 42.867-11.412 132.305-11.412 132.305s0 89.438 11.412 132.305c6.281 23.65 24.787 41.5 48.284 47.821C117.22 448 288 448 288 448s170.78 0 213.371-11.486c23.497-6.321 42.003-24.171 48.284-47.821 11.412-42.867 11.412-132.305 11.412-132.305s0-89.438-11.412-132.305zm-317.51 213.508V175.185l142.739 81.205-142.739 81.201z"
/>
</svg>
<span class="visually-hidden">Go to Pork Punk's Youtube page</span></a
>
</a>
<a href="#">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 496 512"
>
<path
d="M248 8C111.1 8 0 119.1 0 256s111.1 248 248 248 248-111.1 248-248S384.9 8 248 8zm100.7 364.9c-4.2 0-6.8-1.3-10.7-3.6-62.4-37.6-135-39.2-206.7-24.5-3.9 1-9 2.6-11.9 2.6-9.7 0-15.8-7.7-15.8-15.8 0-10.3 6.1-15.2 13.6-16.8 81.9-18.1 165.6-16.5 237 26.2 6.1 3.9 9.7 7.4 9.7 16.5s-7.1 15.4-15.2 15.4zm26.9-65.6c-5.2 0-8.7-2.3-12.3-4.2-62.5-37-155.7-51.9-238.6-29.4-4.8 1.3-7.4 2.6-11.9 2.6-10.7 0-19.4-8.7-19.4-19.4s5.2-17.8 15.5-20.7c27.8-7.8 56.2-13.6 97.8-13.6 64.9 0 127.6 16.1 177 45.5 8.1 4.8 11.3 11 11.3 19.7-.1 10.8-8.5 19.5-19.4 19.5zm31-76.2c-5.2 0-8.4-1.3-12.9-3.9-71.2-42.5-198.5-52.7-280.9-29.7-3.6 1-8.1 2.6-12.9 2.6-13.2 0-23.3-10.3-23.3-23.6 0-13.6 8.4-21.3 17.4-23.9 35.2-10.3 74.6-15.2 117.5-15.2 73 0 149.5 15.2 205.4 47.8 7.8 4.5 12.9 10.7 12.9 22.6 0 13.6-11 23.3-23.2 23.3z"
/>
</svg>
<span class="visually-hidden">Go to Pork Punk's Spotify page</span></a
>
</a>
</div>
<p>
Contest #3 : 404 error page -
<a class="link-lrdw" href="https://discord.com/channels/655077317911117860/1041772720066674760/1067006280704720996" target="_blank">Le Repaire du Web (Discord)</a>
</p>
</footer>
</body>
</html>