Add music player

1 year ago · 3dd764fdc5
4 changed files with 27 additions and 4 deletions
--- a/boomer.mp3
+++ b/boomer.mp3
--- a/index.css
+++ b/index.css
@ -9,7 +9,7 @@ body {
  display: flex;
  flex-direction: column;
  position: relative;
-  top: 370px;
+  top: 428px;
  margin: 0 auto;
 }
 .wishes form {
@ -227,6 +227,13 @@ body {
  top: 0;
 }
 .audio {
  position: absolute;
  left: 50%;
  margin-left: -137px;
  top: 450px;
 }
 .balloon {
  height: 125px;
  width: 105px;
--- a/index.php
+++ b/index.php
@ -8,6 +8,11 @@
 		<link rel="preconnect" href="https://fonts.googleapis.com">
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 <link href="https://fonts.googleapis.com/css2?family=Patrick+Hand&display=swap" rel="stylesheet">
 <script>
  window.onload = function() {
    var context = new AudioContext();
  }
  </script>
 	</head>
 <body>
 	<h1 class="title">Happy Birthday Prime!</h1>
@ -26,7 +31,11 @@
 				<div class="flame"></div>
 		</div>
 	</div>
-	
+	<div class="audio">
    <audio controls>
      <source src="boomer.mp3">
    </audio>
 </div>
 <div class="wishes">
 	<script crossorigin src="https://unpkg.com/@memorista/client-ui@2/dist/index.bundle.js"></script>
--- a/index.scss
+++ b/index.scss
@ -8,7 +8,7 @@ body {
    display: flex;
    flex-direction: column;
    position: relative;
-    top: 370px;
+    top: 428px;
    margin: 0 auto;
    form {
@ -274,6 +274,13 @@ body {
    top:0;
  }
  .audio {
    position: absolute;
    left: 50%;
    margin-left: -137px;
    top: 450px;
  }
  .balloon {
    height: 125px;
    width: 105px;