-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.html
116 lines (113 loc) · 6.65 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
<!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>Sorting Hat</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/[email protected]/css/fontawesome.min.css" crossorigin="anonymous">
<link href='https://fonts.googleapis.com/css?family=Lato:300,400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="hat.css">
<!-- Branding Meta tags -->
<link rel="icon" href="./pics/favicon.ico" />
<meta
name="description"
content="Want to know which Hogwarts House would you fall into?
Come and let the Sorting Hat cast judgement upon you and win a README badge."
/>
<meta
name="keywords"
content="sorting, sorting-hat, harry potter, potterhead, badge,win, prafulla-codes,prafulla,shridhar-coder,shridhar, devavrat, Devavrat8492 "
/>
<meta name="mobile-web-app-capable" content="yes" />
<meta name="robots" content="follow" />
<!-- Open Graph-->
<meta property="og:type" content="website" />
<meta property="og:title" content="Sorting Hat" />
<meta property="og:url" content="https://gh-sorting-hat.netlify.app/" />
<!-- Twitter -->
<meta
name="twitter:image"
content="https://res.cloudinary.com/prafulla98/image/upload/v1636882019/gh-sorting-hat/gh_cover_oahn4t.png"
/>
<meta name="twitter:title" content="Sorting Hat" />
<meta
name="twitter:description"
content="Want to know which Hogwarts House would you fall into?
Come and let the Sorting Hat cast judgement upon you and win a README badge."
/>
<meta name="twitter:card" content="summary_large_image" />
<!-- Open Graph -->
<meta
property="og:image:secure_url"
itemprop="image"
content="https://res.cloudinary.com/prafulla98/image/upload/v1636882019/gh-sorting-hat/gh_cover_oahn4t.png"
/>
<meta
property="og:image"
itemprop="image"
content="https://res.cloudinary.com/prafulla98/image/upload/v1636882019/gh-sorting-hat/gh_cover_oahn4t.png"
/>
<meta property="og:image:width" content="600" />
<meta property="og:image:height" content="300" />
<meta
property="og:image:secure_url"
itemprop="image"
content="https://res.cloudinary.com/prafulla98/image/upload/v1636882536/gh-sorting-hat/ogimage_h9y4bm.png"
/>
<meta
property="og:image"
itemprop="image"
content="https://res.cloudinary.com/prafulla98/image/upload/v1636882536/gh-sorting-hat/ogimage_h9y4bm.png"
/>
<link rel="canonical" href="https://gh-sorting-hat.netlify.app/" />
<meta property="og:image:width" content="700" />
<meta property="og:image:height" content="700" />
<meta property="og:image:alt" content="OG Image of sorting-hat" />
<meta
property="og:description"
content="Want to know which Hogwarts House would you fall into?
Come and let the Sorting Hat cast judgement upon you and win a README badge."
/>
<meta property="og:site_name" content="https://gh-sorting-hat.netlify.app/" />
<!-- For Microsoft Edge -->
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="manifest" href="manifest.json" />
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<!-- Branding Meta tags Ends -->
</head>
<body>
<audio id='background_music' muted loop>
<source src="./sound/music1.mp3" type="audio/mpeg">
</audio>
<a href="https://github.com/prafulla-codes/sorting-hat" class="github-corner" target="_blank" aria-label="View source on GitHub"><svg width="80" height="80" viewBox="0 0 250 250" style="color:#fff; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a><style></style>
<div id="landing">
<svg id="hat-main" width="241" height="293" viewBox="0 0 241 293" xmlns="http://www.w3.org/2000/svg">
<path id="hat-bg" d="M233.469 256.375H7.53125C3.37023 256.375 0 260.472 0 265.531V283.844C0 288.903 3.37023 293 7.53125 293H233.469C237.63 293 241 288.903 241 283.844V265.531C241 260.472 237.63 256.375 233.469 256.375ZM110.406 238.063L105.438 146.5C105.438 146.5 107.68 168.634 105.438 183.125C104.481 189.306 108.241 198.161 108.241 198.161L109.412 219.75L110.406 238.063H210.875L170.202 122.677C167.293 114.432 166.977 105.177 169.312 96.6671L195.812 0L107.518 61.3412C96.3797 69.0792 87.5638 80.938 82.3542 95.1907L30.125 238.063H97.9062H110.406Z" />
<path id="hat-eye-left" d="M74.2103 136.476L69.067 156.524L113.887 164.234L74.2103 136.476Z"/>
<path id="hat-eye-right" d="M160.912 132.621L126.378 165.005L167.524 157.295L160.912 132.621Z"/>
<path id="hat-mouth" d="M96.253 198.161H68.3323L96.253 206.642L124.174 195.076L153.564 206.642L178.546 198.161H149.89L124.174 183.511L96.253 198.161Z"/>
</svg>
<h3 id="thoughts"></h3>
<button type="button" id="sort-btn"> SORT </button>
<div id="stars">
<p class="star"></p>
</div>
</div>
<script src="./confetti.js"></script>
<script src="hat.js"></script>
<script src="index.js"></script>
</body>
</html>