vikingeducation · bpgallagher · Jun 28, 2018 · Jul 1, 2018
diff --git a/README.md b/README.md
diff --git a/README.txt b/README.txt
@@ -0,0 +1,3 @@
+A Pen created at CodePen.io. You can find this one at https://codepen.io/bpgallagher/pen/qKgqxa.
+
+
diff --git a/css/style.css b/css/style.css
@@ -0,0 +1,173 @@
+/* http://meyerweb.com/eric/tools/css/reset/ 
+   v2.0 | 20110126
+   License: none (public domain)
+*/
+
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed, 
+figure, figcaption, footer, header, hgroup, 
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font-size: 100%;
+  font: inherit;
+  vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure, 
+footer, header, hgroup, menu, nav, section {
+  display: block;
+}
+body {
+  line-height: 1;
+}
+ol, ul {
+  list-style: none;
+}
+blockquote, q {
+  quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+  content: '';
+  content: none;
+}
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+html, body {
+  font-family: "Open Sans";
+  height: 100%; }
+
+.page-header {
+  background-color: #E8E8E8;
+  padding: 10px;
+  border-bottom: 1px solid black;
+  border-radius: 2px; }
+  .page-header h1 {
+    margin: 0;
+    font-size: 36px;
+    font-weight: bold;
+    line-height: 1.5em;
+    color: #444; }
+    .page-header h1 .glyphicon {
+      padding: 10px; }
+
+#playlist li .glyphicon {
+  font-size: 2.5em;
+  color: #aaa;
+  line-height: 1.5em;
+  cursor: pointer; }
+
+.song {
+  display: inline-block; }
+  .song .song-title {
+    margin-top: 0;
+    margin-bottom: 5px;
+    font-size: 24px; }
+  .song .song-artist {
+    margin-top: 0;
+    color: #aaa;
+    font-size: 14px; }
+
+.ctrls {
+  background-color: #2C2C2C;
+  color: white;
+  padding-top: 20px;
+  padding-bottom: 20px;
+  border-radius: 2px; }
+  .ctrls .glyphicon {
+    font-size: 2.5em;
+    padding-left: 10px;
+    cursor: pointer; }
+  .ctrls .song {
+    padding-left: 20px; }
+
+/*# sourceMappingURL=styles.css.map */
+html, body {
+  font-family: "Open Sans";
+  height: 100%;
+}
+.page-header {
+  background-color: #E8E8E8;
+  padding: 10px;
+  border-bottom: 1px solid black;
+  border-radius: 2px;
+
+  h1 {
+    margin: 0;
+    font-size: 36px;
+    font-weight: bold;
+    line-height: 1.5em;
+    color: #444;
+
+    .glyphicon {
+      padding: 10px;
+    }
+  }
+}
+
+#playlist {
+  li {
+
+    .glyphicon {
+      font-size: 2.5em;
+      color: #aaa;
+      line-height: 1.5em;
+      cursor: pointer;
+    }
+
+  }
+}
+
+.song {
+  display: inline-block;
+
+  .song-title {
+    margin-top: 0;
+    margin-bottom: 5px;
+    font-size: 24px;
+  }
+
+  .song-artist {
+    margin-top: 0;
+    color: #aaa;
+    font-size: 14px;
+   }
+}
+
+.ctrls {
+  background-color: #2C2C2C;
+  color: white;
+  padding-top: 20px;
+  padding-bottom: 20px;
+  border-radius: 2px;
+
+  .glyphicon {
+    font-size: 2.5em;
+    padding-left: 10px;
+    cursor: pointer;
+  }
+
+  .song {
+    padding-left: 20px;
+  }
+}
+	{
+	"version": 3,
+	"mappings": "AAAA,UAAW;EACT,WAAW,EAAE,WAAW;EACxB,MAAM,EAAE,IAAI;;AAEd,YAAa;EACX,gBAAgB,EAAE,OAAO;EACzB,OAAO,EAAE,IAAI;EACb,aAAa,EAAE,eAAe;EAC9B,aAAa,EAAE,GAAG;EAElB,eAAG;IACD,MAAM,EAAE,CAAC;IACT,SAAS,EAAE,IAAI;IACf,WAAW,EAAE,IAAI;IACjB,WAAW,EAAE,KAAK;IAClB,KAAK,EAAE,IAAI;IAEX,0BAAW;MACT,OAAO,EAAE,IAAI;;AAQf,uBAAW;EACT,SAAS,EAAE,KAAK;EAChB,KAAK,EAAE,IAAI;EACX,WAAW,EAAE,KAAK;EAClB,MAAM,EAAE,OAAO;;AAMrB,KAAM;EACJ,OAAO,EAAE,YAAY;EAErB,iBAAY;IACV,UAAU,EAAE,CAAC;IACb,aAAa,EAAE,GAAG;IAClB,SAAS,EAAE,IAAI;EAGjB,kBAAa;IACX,UAAU,EAAE,CAAC;IACb,KAAK,EAAE,IAAI;IACX,SAAS,EAAE,IAAI;;AAInB,MAAO;EACL,gBAAgB,EAAE,OAAO;EACzB,KAAK,EAAE,KAAK;EACZ,WAAW,EAAE,IAAI;EACjB,cAAc,EAAE,IAAI;EACpB,aAAa,EAAE,GAAG;EAElB,iBAAW;IACT,SAAS,EAAE,KAAK;IAChB,YAAY,EAAE,IAAI;IAClB,MAAM,EAAE,OAAO;EAGjB,YAAM;IACJ,YAAY,EAAE,IAAI",
+	"sources": ["styles.scss"],
+	"names": [],
+	"file": "styles.css"
+	}
diff --git a/index.html b/index.html
@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<html lang="en" >
+
+<head>
+  <meta charset="UTF-8">
+  <title>Viking Royalty Free Music Player</title>
+
+
+
+      <link rel="stylesheet" href="css/style.css">
+
+
+</head>
+
+<body>
+
+  <!DOCTYPE html>
+<html>
+<head>
+  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
+
+  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
+
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700" rel="stylesheet">
+  <link rel="stylesheet" type="text/css" href="styles.css">
+
+  <script type="text/javascript" src="songs.js"></script>
+  <script type="text/javascript" src="player.js"></script>
+  <script type="text/javascript" src="view.js"></script>
+  <title>Royalty Free Music Player</title>
+</head>
+
+<body class="container">
+
+    <header class="row">
+      <div class="page-header col-xs-8 col-xs-offset-2">
+        <h1><span class="glyphicon glyphicon-headphones" aria-hidden="true"></span>Royalty Free Music Player</h1>
+      </div>
+    </header>
+
+    <div class="row">
+      <ul id="playlist" class="list-group">
+        <!-- Playlist songs will be added here by the Javascript -->
+      </ul>
+    </div>
+
+    <footer class="row">
+      <div class="ctrls col-xs-8 col-xs-offset-2">
+        <span class="glyphicon glyphicon-step-backward" aria-hidden="true" id="ctrl-prev"></span>
+        <span class="glyphicon glyphicon-play" aria-hidden="true" id="ctrl-play" data-index="-1"></span>
+        <span class="glyphicon glyphicon-step-forward" aria-hidden="true" id="ctrl-next"></span>
+        <div class="song" id="song-info">
+          <p class="song-title"> </p>
+          <p class="song-artist"> </p>
+        </div>
+      </div>
+    </footer>
+
+
+</body>
+</html>
+
+
+
+    <script  src="js/index.js"></script>
+
+
+
+
+</body>
+
+</html>
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		A Pen created at CodePen.io. You can find this one at https://codepen.io/bpgallagher/pen/qKgqxa.