WEBから引っ張ってきたHTMLのハンバーガーメニューを編集して動作させたい

前提

昨日から学校の課題で仕方なくHTMLを始めた者です。
知識がとても浅はかなのでご承知願います。
提出が来週なので自分で勉強をする時間がありません。
投げやりのように感じる方もいらっしゃるかと存じますが、ご協力をお願い申し上げます。

###実現したいこと

1
1http://photoshopvip.net/97481#fullscreen
2にある「Simple Radial Menu」というハンバーガーメニューを実行する。

2
1ハンバーガーメニュをクリックしたら上のサイトと同じようなボタン4つを均等に配置する。
2ボタンは「音符」「車」「映画」「Menu」をイメージさせるもの。(画像参照)
3[音符](1c2d55fa11a0a766ef9a36a551502e6e.png)
4[車](f4601306420a72ed3f35eb362bcb24d4.png)
5[映画](c709fa5730cdac8dee5aea273edbe8d6.png)
6[Menu](aa81cc6bdf60345a5cdc09e403dac060.png)
7そのボタンから指定したリンク先にジャンプする

3
1エフェクトやアニメーションは指定したサイトと同じにする。

要望が多くてすいません。
どうかよろしくお願い申し上げます。

問題

[画像１](93a21b41f07bf6ace9d23e3d5c1611fa.png)
画像１の結果になりました。
画像からわかるようにこれではハンバーガーメニューが表示されていません。
また、ボタンが出来上がっておりません。

該当のソースコード

html
1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <title></title>
6</head>
7<body>
8<div class="menu">
9    <div class="btn trigger">
10        <span class="line"></span>
11    </div>
12    <div class="icons">
13        <div class="rotater">
14            <div class="btn btn-icon">
15                <i class="fa fa-codepen"></i>
16            </div>
17        </div>
18        <div class="rotater">
19            <div class="btn btn-icon">
20                <i class="fa fa-facebook"></i>
21            </div>
22        </div>
23        <div class="rotater">
24            <div class="btn btn-icon">
25                <i class="fa fa-google-plus"></i>
26            </div>
27        </div>
28        <div class="rotater">
29            <div class="btn btn-icon">
30                <i class="fa fa-twitter"></i>
31            </div>
32        </div>
33        <div class="rotater">
34            <div class="btn btn-icon">
35                <i class="fa fa-dribbble"></i>
36            </div>
37        </div>
38        <div class="rotater">
39            <div class="btn btn-icon">
40                <i class="fa fa-linkedin"></i>
41            </div>
42        </div>
43        <div class="rotater">
44            <div class="btn btn-icon">
45                <i class="fa fa-github"></i>
46            </div>
47        </div>
48        <div class="rotater">
49            <div class="btn btn-icon">
50                <i class="fa fa-behance"></i>
51            </div>
52        </div>
53    </div>
54</div>
55    <style type="text/css">
56        @import "compass/css3"
57*, *:before, *:after {
58  box-sizing: border-box;
59  margin: 0;
60  padding: 0;
61}
62html, body {
63  height: 100%;
64  overflow: hidden;
65}
66body {
67  background:
68    linear-gradient(45deg, hsla(352, 96%, 45%, 1) 0%, hsla(352, 96%, 45%, 0) 70%),
69    linear-gradient(135deg, hsla(253, 95%, 42%, 1) 10%, hsla(253, 95%, 42%, 0) 80%),
70    linear-gradient(225deg, hsla(179, 91%, 45%, 1) 10%, hsla(179, 91%, 45%, 0) 80%),
71    linear-gradient(315deg, hsla(119, 96%, 49%, 1) 100%, hsla(119, 96%, 49%, 0) 70%);
72}
73.absolute-center {
74  position: absolute;
75  top: 50%;
76  left: 50%;
77  transform: translateX(-50%) translateY(-50%);
78}
79.menu {
80  @extend .absolute-center;
81  width: 5em;
82  height: 5em;
83
84  .btn {
85    position: absolute;
86    top: 0;
87    left: 0;
88    width: 100%;
89    height: 100%;
90    border-radius: 50%;
91    background: rgba(255,255,255, 0.15);
92    opacity: 0;
93    z-index: -10;
94    cursor: pointer;
95    transition: opacity 1s, z-index 0.3s, transform 1s;
96    transform: translateX(0);
97
98    .fa {
99      @extend .absolute-center;
100      font-size: 3em;
101      transition: color 0.3s;
102    }
103
104    &:hover .fa {
105      color: rgba(255,255,255, 0.7);
106    }
107
108    &.trigger {
109      opacity: 1;
110      z-index: 100;
111      cursor: pointer;
112      transition: transform 0.3s;
113
114      &:hover {
115        transform: scale(1.2);
116
117        .line {
118          background-color: rgba(255,255,255, 0.7);
119
120          &:before, &:after {
121            background-color: rgba(255,255,255, 0.7);
122          }
123        }
124      }
125
126      .line {
127        @extend .absolute-center;
128        width: 60%;
129        height: 6px;
130        background: #000;
131        border-radius: 6px;
132        transition: background-color 0.3s, height 0.3s, top 0.3s;
133
134        &:before, &:after {
135          content: "";
136          display: block;
137          position: absolute;
138          left: 0;
139          width: 100%;
140          height: 6px;
141          background: #000;
142          border-radius: 6px;
143          transition: background-color 0.3s, transform 0.3s;
144        }
145        &:before {
146          top: -12px;
147          transform-origin: 15% 100%;
148        }
149        &:after {
150          top: 12px;
151          transform-origin: 25% 30%;
152        }
153      }
154    }
155  }
156
157  .rotater {
158    position: absolute;
159    top: 0;
160    left: 0;
161    width: 100%;
162    height: 100%;
163    transform-origin: 50% 50%;
164  }
165
166  &.active {
167
168    .btn-icon {
169      opacity: 1;
170      z-index: 50;
171    }
172
173    .trigger {
174
175      .line {
176        height: 0px;
177        top: 45%;
178
179        &:before {
180          transform: rotate(45deg);
181          width: 110%;
182        }
183        &:after {
184          transform: rotate(-45deg);
185          width: 110%;
186        }
187      }
188    }
189  }
190}
191
192$numOfElems: 8;
193
194@for $i from 1 through $numOfElems {
195  $deg: 360deg / $numOfElems;
196  .rotater:nth-child(#{$i}) {
197    transform: rotate($deg/-2 + $deg * ($i - 1));
198  }
199
200  .menu.active {
201    .rotater:nth-child(#{$i}) .btn-icon {
202      transform: translateY(-10em) rotate($deg/2 - $deg * ($i - 1));
203    }
204  }
205}
206    </style>
207    <script type="javascript">
208        $(document).ready(function() {
209  $(".trigger").click(function() {
210    $(".menu").toggleClass("active");
211  });
212});
213    </script>
214</body>
215</html>

試したこと

上記のソースコードを入力して見ました。

補足情報

実行したブラウザは
Google Chrome(Version 79.0.3945.130 (Official Build) (64-bit))
です。
OSはWindows 10 HOMEの最新バージョンです。

Takumiboo

2020/01/24 09:30

推奨していない質問 https://teratail.com/help/avoid-asking 「コードをください・デバッグしてください等の丸投げの質問何かを作りたいのでコードを書いてほしい、学校の課題を解いてほしい等の質問は、具体的にプログラミングで困っている質問ではないと考え、推奨していません。」