-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
29 lines (29 loc) · 15.3 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
<!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>Hogwarts Houses SVG Icons animations</title>
<link rel="icon" href="assets/magic-wand.png">
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Akaya+Kanadaka:regular" rel="stylesheet"/>
</head>
<body>
<div id="box" class="container">
<div class="icon gryffindor">
<svg id="lion" height="311px" viewBox="-31 0 521 511.83628" width="311px" xmlns="http://www.w3.org/2000/svg"><path d="m440.417969 209.585938c-6.796875.386718-13.441407-2.101563-18.3125-6.859376-4.871094-4.753906-7.515625-11.339843-7.289063-18.144531 0-32.597656-21.246094-50.515625-59.734375-50.515625-18.96875-.269531-37.136719 7.660156-49.832031 21.757813-10.4375 13.347656-14.035156 30.804687-9.730469 47.191406 2.886719 12.875 8.761719 24.890625 17.152344 35.070313 9.386719 12.886718 12.886719 17.664062-10.496094 37.460937-9.726562-4.09375-35.414062-18.859375-45.738281-62.890625 2.941406 4.59375 6.46875 8.78125 10.496094 12.460938 4.425781 3.917968 10.964844 4.269531 15.789062.851562 4.90625-3.316406 6.828125-9.613281 4.605469-15.105469-3.617187-10.523437-3.886719-21.910156-.765625-32.59375 2.40625-7.917969 5.460938-15.625 9.128906-23.042969 13.484375-29.183593 31.828125-69.117187-10.921875-118.78125-36.78125-42.753906-90.367187-38.828124-119.039062-32.683593-5.816407 1.265625-9.992188 6.371093-10.070313 12.324219-.082031 5.949218 3.949219 11.167968 9.726563 12.59375 6.988281 1.703124 13.8125 4.015624 20.394531 6.910156-19.058594-3.289063-38.667969-.824219-56.320312 7.082031-14.375 6.714844-28.160157 14.621094-41.214844 23.636719-5.183594 3.898437-6.585938 11.082031-3.242188 16.640625 13.398438 23.125 29.269532 32.34375 43.433594 25.429687 16.46875-8.191406 19.96875-5.972656 24.40625-1.535156.828125.726562 1.039062 1.933594.511719 2.902344-.511719 1.109375-1.707031 1.621094-3.5 1.363281-.253907 0-26.539063-2.304687-36.691407 9.472656-3.503906 4.15625-4.75 9.769531-3.328124 15.019531l.339843 1.449219c3.839844 15.617188 8.109375 26.625 16.640625 29.613281 4.324219 1.503907 9.117188.628907 12.628906-2.304687 6.863282-4.265625 14.089844-7.921875 21.589844-10.921875-4.910156 6.269531-10.242187 12.199219-15.957031 17.746094h-.085937c-1.960938 1.707031-3.839844 3.328125-5.632813 4.609375l-2.300781 1.621093c-4.078125 2.640626-7.566406 6.101563-10.242188 10.15625-4.875 7.652344-7.507812 16.523438-7.59375 25.597657-.183594 2.984375-.15625 5.980469.085938 8.960937.167968 2.644532.425781 5.289063.851562 8.105469.425782 2.816406 1.109375 5.71875 1.878906 8.875h-94.890624c-6.046876.003906-11.640626 3.21875-14.679688 8.449219l-9.8125 16.726562c-2.398438 4.265625-2.894531 9.34375-1.363281 13.992188 1.554687 4.589844 5.003906 8.285156 9.46875 10.15625l39.253906 16.46875c5.226563 2.195312 11.203125 1.628906 15.921875-1.511719s7.554688-8.4375 7.546875-14.105469l-.171875-2.300781c28.480469 5.429687 56.539062 12.871094 83.96875 22.269531h.085938c7.847656 2.730469 15.613281 5.71875 22.953124 8.960938.085938 0 .171876.085937.257813.085937.121094.113281.265625.203125.425781.253907.511719.257812 1.023438.429687 1.449219.683593h.085937c25.34375 11.433594 40.875 23.894531 44.972657 35.839844 2.386719 7.082031 4.863281 13.824219 7.421875 20.140625 1.878906 4.691406 3.753906 9.214844 5.71875 13.394531.683594 1.453125 1.277344 2.816407 1.960937 4.183594 13.824219 28.671875 29.441407 44.714844 50.089844 51.539063 15.53125 5.035156 18.773437 8.191406 19.542969 16.898437h-20.136719c-6.46875-.054687-12.402344 3.589844-15.277344 9.386719l-8.53125 16.722656c-2.648437 5.207031-2.386719 11.417969.679688 16.386719 3.109375 5.070312 8.644531 8.148437 14.59375 8.105469h64.425781c8.214844-.035157 15.242188-5.914063 16.726562-13.996094l14.507813-78.335938c1.441406-7.820312-2.792969-15.585937-10.15625-18.601562-15.277344-5.648438-26.921875-18.277344-31.316406-33.960938-8.023438-31.402344-8.109375-37.378906 7.335937-60.160156 1.878906-2.816406 3.925782-5.632812 5.976563-8.535156 15.527343-21.675782 36.863281-51.371094 1.449219-86.1875-11.945313-11.773438-16.640626-23.636719-12.203126-30.890625 4.914063-6.199219 13.359376-8.363281 20.652344-5.289063 5.628906 1.792969 6.738282 5.972656 7.765625 19.113282 1.109375 13.484374 2.644531 33.792968 26.964844 39.765624 40.277344 9.898438 51.796875-11.859374 52.308594-12.800781 1.324219-2.640625 1.191406-5.777343-.355469-8.296875-1.546875-2.519531-4.285156-4.0625-7.238281-4.074218zm-260.695313-133.890626-17.066406 8.535157c-1.179688.628906-2.5.953125-3.839844.9375-3.222656.03125-6.175781-1.796875-7.59375-4.691407-1.03125-2.011718-1.210937-4.351562-.507812-6.5.707031-2.148437 2.238281-3.925781 4.261718-4.933593l17.066407-8.535157c2.714843-1.382812 5.960937-1.207031 8.511719.457032 2.550781 1.664062 4.019531 4.566406 3.847656 7.605468-.171875 3.042969-1.957032 5.761719-4.679688 7.125zm0 0"/><path d="m226.402344 383.75c-2.5625-6.3125-5.035156-13.054688-7.425782-20.136719-4.097656-11.949219-19.625-24.40625-44.96875-35.839843h-.085937c-9.644531 1.449218-42.753906 9.128906-46.679687 44.03125-4.605469 41.898437 13.226562 56.320312 19.03125 61.097656 1.023437.769531 1.792968 1.28125 2.644531 1.878906 8.78125 4.953125 15.117187 13.324219 17.492187 23.125 1.058594 10.621094-2.304687 21.207031-9.300781 29.269531-2.121094 2.964844-5.921875 4.207031-9.386719 3.070313l-30.804687-9.726563-12.375 23.039063 74.328125-.257813 28.839844-63.570312c-16.125-10.753907-21.332032-26.113281-13.820313-40.789063 6.140625-12.203125 20.050781-15.191406 32.511719-15.191406zm0 0"/><path d="m29.195312 140.636719c7.109376.011719 13.46875 4.429687 15.957032 11.09375l21.417968 57.171875h39.851563c.085937-9.074219 2.71875-17.945313 7.59375-25.601563h-15.015625c-5.273438.023438-10.253906-2.40625-13.484375-6.570312l-54.613281-70.226563h-26.625l11.351562 34.132813zm0 0"/></svg>
<h2 id="title1" class="title">Gryffindor</h2>
</div>
<div class="icon slytherin">
<svg id="snake" height="311px" viewBox="0 -20 511.99966 511" width="411px" xmlns="http://www.w3.org/2000/svg"><path d="m60.296875 70.976562c-3.964844 1.203126-6.203125 5.390626-5 9.355469l3.617187 11.914063c1.203126 3.960937 5.390626 6.199218 9.355469 4.996094 3.964844-1.203126 6.203125-5.390626 4.996094-9.355469l-3.613281-11.914063c-1.203125-3.960937-5.394532-6.199218-9.355469-4.996094zm0 0"/><path d="m511.765625 299.371094c-.382813-9.628906-6.921875-17.628906-16.277344-19.910156-9.285156-2.261719-18.710937 1.796874-23.441406 10.105468-8.546875 15.003906-19.332031 28.085938-32.074219 38.921875-2.738281-11.597656-8.066406-20.921875-15.9375-27.804687-4.480468-3.914063-9.65625-6.933594-15.394531-9.25 1.132813-15.816406-4.332031-30.53125-15.617187-41.769532-16.3125-16.238281-42.871094-23.34375-75.375-20.34375 13.023437-28.535156 18.171874-60.375 15.300781-94.84375-1.460938-17.558593-6.765625-34.789062-15.769531-51.21875-1.988282-3.632812-6.546876-4.964843-10.179688-2.972656-3.632812 1.988282-4.964844 6.546875-2.972656 10.179688 7.984375 14.578125 12.6875 29.804687 13.972656 45.257812 2.9375 35.222656-3.148438 67.359375-18.050781 95.570313-27.984375 2.1875-57.609375-2.835938-85.738281-9.160157 11.207031-13.640624 19.503906-26.597656 24.851562-38.804687.824219.050781 20.523438 1.785156 32.5625-14.078125 12.921875-17.027344 11.148438-41-5.375-54.558594-11.570312-9.496094-27.214844-11.410156-40.503906-5.394531-3.363282-2.898437-7.113282-5.640625-11.285156-8.214844-23.308594-14.363281-51.105469-15.292969-82.621094-2.765625-22.144532 8.800782-45.726563 24.058594-70.082032 45.347656-5.527343 4.832032-13 6.335938-19.980468 4.03125-7.015625-2.316406-12.140625-8.003906-13.710938-15.21875-4.953125-22.753906-.734375-54.574218 20.230469-70.679687 34.570313-26.554687 68.996094-40.398437 101.121094-44.742187-1.601563 10.25.234375 20.769531 5.476562 30.09375 8.59375 15.296874 24.542969 23.90625 40.953125 23.90625 7.769532 0 15.648438-1.933594 22.894532-6.003907 12.550781-7.054687 20.960937-19.375 23.265624-33.179687 17.484376 8.730468 32.667969 20.492187 44.777344 34.175781 2.746094 3.101563 7.488282 3.390625 10.589844.644531s3.390625-7.484375.644531-10.585937c-27.621093-31.210938-68.023437-51.238281-110.847656-54.949219-49.710937-4.300781-100.894531 12.550781-148.011719 48.746094-26.289062 20.191406-31.875 57.625-25.75 85.765625 1.683594 7.738281 5.742188 14.460937 11.476563 19.402343-2.550781 8.367188-4.457031 18.019532-4.769531 28.625l-16.890626 11.707032c-3.402343 2.359375-4.25 7.03125-1.890624 10.4375 1.378906 1.988281 5.394531 5.5625 10.4375 1.890625l15.527343-10.765625c3.847657 3.089844 10.027344 7.703125 15.3125 12.410156 4.242188 3.777344 8.980469.851562 10.550781-1.078125 2.617188-3.210937 2.136719-7.933594-1.074218-10.550781 0 0-16.878906-13.664063-16.980469-13.746094.246094-7.863281 1.546875-15.148438 3.328125-21.65625 11.675781 3.363281 23.988281.660156 33.191406-7.386719 23.070313-20.164062 45.191406-34.53125 65.75-42.703125 26.871094-10.679687 50.15625-10.140625 69.210938 1.601563 14.480468 8.921875 22.433594 19.441406 24.316406 32.164062 3.558594 24.058594-15.675781 52.273438-33.097656 72.277344-3.378906-.8125-6.730469-1.628906-10.042969-2.433594-45.035156-10.972656-83.925781-20.445312-104.925781-.613281-19.894532 18.792969-26.324219 41.394531-18.492188 64.238281-45.660156 24.742188-39.394531 73.132813-31.894531 87.257813-19.09375 8.472656-32.453125 27.597656-32.453125 49.796875 0 30.03125 24.429688 54.460937 54.457031 54.460937h309.710938c46.578125 0 82.921875-13.238281 108.015625-39.339844 35.570312-37 41.15625-92.363281 39.582031-132.292968zm-284.152344-273.78125c-.488281 10.902344-6.542969 20.945312-16.222656 26.386718-15.328125 8.617188-34.804687 3.152344-43.421875-12.175781-4.191406-7.453125-5.183594-16.035156-2.925781-24.121093 22.492187-.9375 43.617187 2.761718 62.570312 9.910156zm29.121094 100.699218c10.128906 8.3125 11.605469 23.316407 3.292969 33.449219-4.046875 4.929688-9.703125 7.914063-15.773438 8.566407 2.128906-8.59375 2.632813-16.761719 1.488282-24.480469-1.199219-8.109375-4.210938-15.59375-8.964844-22.429688 6.898437-1.457031 14.238281.199219 19.957031 4.894531zm137.039063 160.851563c-17.542969-3.417969-38.464844-2.761719-60.5625-1.277344 17.113281-4.472656 30.816406-17.867187 35.5625-35.023437 5.269531 2.515625 25.222656 12.285156 25 36.300781zm-39.238282-41.15625c-3.789062 15.253906-17.644531 26.496094-33.851562 26.496094-16.109375 0-29.625-10.773438-33.65625-25.65625 8.183594-.035157 16.332031-.550781 24.375-1.683594 16.273437-2.292969 30.859375-1.960937 43.132812.84375zm-261.394531-19.828125c15.070313-14.234375 50.292969-5.65625 91.078125 4.28125 27.46875 6.691406 57.464844 13.984375 87.34375 15.898438 3.808594 21.765624 21.507812 38.425781 43.59375 40.832031-17.839844 1.332031-36.210938 2.636719-54.070312 2.386719-26.253907-.371094-54.242188-4.371094-81.191407-8.960938-87.570312-14.925781-97.507812-6.375-101.226562-5.574219-6.195313-17.503906-1.347657-33.921875 14.472656-48.863281zm-1.199219 61.960938c8.78125-.882813 18.429688-.792969 28.703125-.082032 6.796875 29.308594-15.304687 47.394532-35.84375 47.394532-15.523437 0-29.472656-9.804688-34.875-24.167969 7.703125-13.792969 21.019531-21.039063 42.015625-23.144531zm-48.671875 41.703124c9.703125 12.660157 24.980469 20.609376 41.53125 20.609376 28.8125 0 55.652344-22.753907 51.523438-60.917969 13.125 1.503906 27.007812 3.671875 41.25 5.898437 27.527343 4.308594 55.988281 8.757813 83.300781 9.140625 19.335938.269531 38.894531-1.1875 57.808594-2.601562 39.796875-2.972657 77.386718-5.78125 95.480468 10.03125 6.886719 6.019531 10.960938 14.746093 12.398438 26.570312-23.144531 15.25-50.898438 23.535157-79.542969 23.535157h-79.660156c1.066406-3.53125 1.617187-7.222657 1.617187-10.980469 0-20.929688-17.027343-37.957031-37.957031-37.957031-20.929687 0-37.957031 17.027343-37.957031 37.957031 0 3.78125.542969 7.464843 1.601562 10.980469 0 0-144.933593.171874-147.234374.46875-5.660157-8.574219-7.0625-19.535157-4.160157-32.734376zm335.605469 59.613282c0 19.015625-15.46875 34.488281-34.484375 34.488281-19.019531 0-34.488281-15.472656-34.488281-34.488281 0-4.226563.785156-8.425782 2.285156-12.347656h34.832031c9.621094 0 19.15625-.859376 28.484375-2.515626 2.210938 4.617188 3.371094 9.671876 3.371094 14.863282zm-168.027344-27.347656c-1.832031-3.34375-2.785156-7.078126-2.785156-10.980469 0-12.660157 10.296875-22.957031 22.957031-22.957031 12.660157 0 22.957031 10.296874 22.957031 22.957031 0 3.875-.972656 7.625-2.804687 10.980469zm250.523438 59.179687c-22.15625 23.050781-54.859375 34.738281-97.199219 34.738281h-207.347656c5.125-16.824218 20.640625-28.695312 38.941406-28.695312 11.039063 0 21.375 4.34375 29.101563 12.234375 2.898437 2.957031 7.644531 3.007812 10.605468.109375 2.960938-2.898438 3.007813-7.644532.109375-10.605469-10.570312-10.792969-24.710937-16.738281-39.816406-16.738281-26.609375 0-48.90625 18.359375-54.417969 43.695312h-86.886718c-21.757813 0-39.460938-17.703125-39.460938-39.460937 0-21.753907 17.703125-39.457031 39.457031-39.457031h242.019531c-1.035156 4.023437-1.574218 8.175781-1.574218 12.347656 0 27.289062 22.199218 49.488281 49.488281 49.488281 27.285156 0 49.484375-22.199219 49.484375-49.488281 0-6.300782-1.191406-12.472656-3.480469-18.238282 20.824219-5.773437 40.253907-15.6875 56.867188-29.25 15.140625-12.355468 27.863281-27.480468 37.816406-44.953124 2.148437-3.773438 5.789063-3.21875 6.855469-2.957032 1.089844.265625 4.667968 1.480469 4.84375 5.929688 1.460937 37.015625-3.496094 88.109375-35.40625 121.300781zm0 0"/></svg>
<h2 id="title2" class="title">Slytherin</h2>
</div>
<div class="icon ravenclaw">
<svg id="raven" height="312px" viewBox="0 0 512 512" width="312px" xmlns="http://www.w3.org/2000/svg"><path d="m277.479 226.171a8 8 0 0 1 1.305 10.069l-32.131 51.41c19.746-.744 56.113-3.068 88.152-10.309 19.537-22.521 56.207-72.691 49.857-103.643-2.057-10.024-8.57-17.347-19.911-22.387a8 8 0 0 1 -4.512-9.251c.348-1.394 8.828-34.441 34.1-59.717a8.008 8.008 0 0 1 4.088-2.188c1.252-.25 23.152-4.545 44.9-3.553-10.032-8.019-26.549-16.981-52.459-20.683a7.994 7.994 0 0 1 -5.525-3.481c-.543-.784-14.518-20.438-49.343-20.438-41.119 0-56.1 57.371-56.241 57.95a8.035 8.035 0 0 1 -2.194 3.8c-.263.255-26.928 26.265-59.6 71.276a739.365 739.365 0 0 0 -61.935 101.712c32.269-6.006 78.954-18.126 111.32-41.248a8 8 0 0 1 10.129.681zm74.521-162.171a8 8 0 1 1 -8 8 8 8 0 0 1 8-8z"/><path d="m117.054 436.905-17.238 43.095h55.089l35.088-75.188c-16.712 8.719-32.211 15.842-45.907 21.569-9.566 4-18.6 7.482-27.032 10.524z"/><path d="m159.31 341.437a194.407 194.407 0 0 0 66.241-50.213l22.6-36.166c-34.86 16.627-74.946 25.241-100.709 29.414a639.6 639.6 0 0 0 -25.652 63.481l7.388 3.694a147.27 147.27 0 0 0 30.132-10.21z"/><path d="m314.669 297.432a599.513 599.513 0 0 1 -79 6.536c-43.068 48.643-91.2 60.966-103.58 63.428l-61.089 67.196a522.223 522.223 0 0 0 67.435-23.192 605.205 605.205 0 0 0 176.234-113.968z"/><path d="m327.16 475.58a8.017 8.017 0 0 1 -10.74 3.58l-28.07-14.04-8.55 5.13a7.992 7.992 0 0 1 -11.38 8.91l-1.89-.95-14.41 8.65a8 8 0 1 1 -8.24-13.72l5.69-3.41-9.22-4.61-36.23 21.74a8 8 0 1 1 -8.24-13.72l34.02-20.41-19.18-44.73h-2.72l-1.51-12.1c10.61-5.96 21.61-12.53 32.87-19.79l-7.36 31.89h-3.87l18.07 42.16 19.63 9.81 12.07-7.24-19.18-44.73h-2.72l-4.95-39.61c15.06-10.19 30.49-21.59 46.01-34.33l-17.06 73.94h-3.87l18.07 42.16 29.38 14.68a8.017 8.017 0 0 1 3.58 10.74z"/></svg>
<h2 id="title3" class="title">Ravenclaw</h2>
</div>
</div>
<script src="mainscript.js"></script>
</body>
</html>