vikingeducation · oaksofmamre · Sep 10, 2017 · Sep 12, 2017 · Sep 12, 2017 · Sep 13, 2017
diff --git a/README.md b/README.md
@@ -1,2 +1,8 @@
 # assignment_royalty_free_music_player
 Ushering in the reign of Royalty Free Music w/ JavaScript.
+
+==
+
+Usage: http-server (or some other http server that is running on your localhost)
+
+by Dennis C
diff --git a/css/reset.css b/css/reset.css
@@ -0,0 +1,48 @@
+/* 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;
+}
diff --git a/css/style.css b/css/style.css
@@ -0,0 +1,160 @@
+:root {
+  --green: #1db954;
+  --grey: #a2a2a2;
+}
+
+body {
+    font-family: sans-serif;
+    background: darkgrey;
+}	
+
+.flex-outer-container {
+	display: flex;
+	flex-flow: row nowrap;	
+	justify-content: center;
+}
+
+.flex-inner-container {
+	display: flex;
+	flex-flow: column nowrap;
+	margin-top: 50px;
+	width: 800px;
+}
+
+.hide {
+	display: none;
+	/*
+	visibility: hidden;
+	*/
+}
+
+.show {
+	display: block;
+}
+
+/* header */
+header {
+	font-weight: bolder;
+	font-size: xx-large;
+	border: 1px solid var(--grey);
+	background: var(--green);
+	color: white;
+	height: 65px;
+	flex: 0 0 0;
+}
+
+header img {
+	float: left;
+	margin: 11px 15px 0 15px;
+}
+
+header h1 {
+	margin-top: 15px;
+}
+
+/* main */
+main ul li {
+	border: 1px solid var(--grey);
+	background: white;
+	cursor: pointer;
+}
+
+main li p {
+	margin-top: 5px;
+}
+
+main li p.song {
+	color: black;
+	font-size: large;
+}
+
+main li p.artist {
+	margin-top: 5px;
+	color: var(--grey);
+	font-size: 15px;
+}
+
+.flex-songs {
+	display: flex;
+	flex-flow: column nowrap;
+}
+
+main li span {
+	float: left;
+	margin-left: 15px;
+	margin-top: 5px;
+	margin-right: 5px;	
+}
+
+main li span.main-play-icon {
+	background-image:url('/images/main_play_grey.png');
+	background-size: 50px;
+	height: 50px;
+	width: 50px;
+
+}
+
+main li span.main-pause-icon {
+	background-image:url('/images/main_pause_grey.png');
+	background-size: 50px;
+	height: 50px;
+	width: 50px;
+}	
+
+/* footer */
+footer {
+	border: 1px solid var(--grey);
+	color: black;
+	height: 90px;
+	background: black;
+	color: white;
+}
+
+footer span {
+	cursor: pointer;
+	float: left;
+}
+
+footer span#footer-back-icon {
+	background-image:url('/images/footer_left_white.png');
+	background-size: 28px;
+	height: 28px;
+	width: 28px;
+	margin-top: 30px;
+	margin-left: 25px;
+}
+
+footer span#footer-play-icon {
+	background-image:url('/images/footer_play_white.png');
+	background-size: 65px;
+	height: 65px;
+	width: 65px;
+	margin-top: 15px;
+	margin-left: 9px;
+}
+
+footer span#footer-forward-icon {
+	background-image:url('/images/footer_right_white.png');
+	background-size: 28px;
+	height: 28px;
+	width: 28px;
+	margin-top: 30px;
+	margin-left: 10px;
+}
+
+footer p {
+	margin-left: 190px;
+}
+
+footer p#footer-song {
+	font-size: xx-large;
+	font-weight: bolder;
+	margin-top: 10px;
+}
+
+footer p#footer-artist {
+	font-size: large;
+	font-weight: bold;
+	margin-top: 7px;
+	color: var(--grey);
+}
diff --git a/images/footer_left_white.png b/images/footer_left_white.png
diff --git a/images/footer_pause_white.png b/images/footer_pause_white.png
diff --git a/images/footer_play_white.png b/images/footer_play_white.png
diff --git a/images/footer_right_white.png b/images/footer_right_white.png
diff --git a/images/headphones_black.png b/images/headphones_black.png
diff --git a/images/main_pause_grey.png b/images/main_pause_grey.png
diff --git a/images/main_play_grey.png b/images/main_play_grey.png
diff --git a/index.html b/index.html
@@ -0,0 +1,118 @@
+<!--
+Usage: This code needs to be viewed after a localhost http server has been started
+-->
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<title>Royalty Free Music Player</title>
+
+<!-- Hand-crafted CSS -->
+<!--
+	<link rel="stylesheet" type="text/css" href="css/reset.css">
+	<link rel="stylesheet" type="text/css" href="css/style.css">
+-->	
+
+<!-- SASS-generated CSS -->
+	<link rel="stylesheet" type="text/css" href="./sass/main.css">
+
+	<script src="https://code.jquery.com/jquery-2.2.4.min.js"
+			integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
+			crossorigin="anonymous"></script>
+	<script type="text/javascript" src="scripts/script.js"></script>
+
+	<!-- the below three lines are a fix to get HTML5 semantic elements working in old versions of Internet Explorer-->
+    <!--[if lt IE 9]>
+      <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script>
+    <![endif]-->
+</head>	
+
+<body>
+
+
+	<div class="flex-outer-container">	
+		<div class="flex-inner-container">
+			<header>
+				<img src="images/headphones_black.png" height="43" width="43">
+				<h1>Royalty Free Music Player</h1>
+			</header>
+
+			<main>
+				<ul class="flex-songs">
+					<li class="main-song-block">
+						<span class="main-icon main-play-icon"></span>
+						<p class="song">Applause</p>
+						<p class="artist">The People</p>
+						<audio controls class="hide">
+							<source src="songs/Applause.mp3" type="audio/mpeg">
+							<source src="songs/Applause.ogg" type="audio/mpeg">
+							Your browser does not support HTML5 audio.
+						</audio>	
+					</li>
+					<li class="main-song-block">
+						<span class="main-icon main-play-icon"></span>
+						<p class="song">Birds</p>
+						<p class="artist">The Eagles</p>
+						<audio controls class="hide">
+							<source src="songs/Birds.mp3" type="audio/mpeg">
+							<source src="songs/Birds.ogg" type="audio/mpeg">
+							Your browser does not support HTML5 audio.
+						</audio>	
+					</li>
+					<li class="main-song-block">
+						<span class="main-icon main-play-icon"></span>
+						<p class="song">Dog</p>
+						<p class="artist">The Canines</p>
+						<audio controls class="hide">
+							<source src="songs/Dog.mp3" type="audio/mpeg">
+							<source src="songs/Dog.ogg" type="audio/mpeg">
+							Your browser does not support HTML5 audio.
+						</audio>	
+					</li>
+					<li class="main-song-block">
+						<span class="main-icon main-play-icon"></span>
+						<p class="song">Integrales Disko Them</p>
+						<p class="artist">Keith Jars</p>
+						<audio controls class="hide">
+							<source src="songs/Keith-Integrales.mp3" type="audio/mpeg">
+							<source src="songs/Keith-Integrales.ogg" type="audio/mpeg">
+							Your browser does not support HTML5 audio.
+						</audio>	
+					</li>
+					<li class="main-song-block">
+						<span class="main-icon main-play-icon"></span>
+						<p class="song">Dem Druck Erlieget Die Natur</p>
+						<p class="artist">MIT Concert Choir</p>
+						<audio controls class="hide">
+							<source src="songs/MIT-Der.mp3" type="audio/mpeg">
+							<source src="songs/MIT-Der.ogg" type="audio/mpeg">
+							Your browser does not support HTML5 audio.
+						</audio>	
+					</li>
+					<li class="main-song-block">
+						<span class="main-icon main-play-icon"></span>
+						<p class="song">Seashore</p>
+						<p class="artist">The Atlantic</p>
+						<audio controls class="hide">
+							<source src="songs/Seashore.mp3" type="audio/mpeg">
+							<source src="songs/Seashore.ogg" type="audio/mpeg">
+							Your browser does not support HTML5 audio.
+						</audio>	
+					</li>
+				</ul>
+			</main>
+
+			<footer id="footer-song-block">
+				<span id="footer-back-icon"></span>
+				<span id="footer-play-icon"></span>
+				<span id="footer-forward-icon"></span>
+				<p id="footer-song">Dem Druck Erlieget Die Natur</p>
+				<p id="footer-artist">MIT Concert Choir</p>
+			</footer>
+		</div>	<!-- flex-inner-container -->
+	</div>	<!-- flex-outer-container -->
+
+
+
+</body>
+</html>
diff --git a/mockups/when nothing playing.png b/mockups/when nothing playing.png
diff --git a/mockups/when song playing.png b/mockups/when song playing.png
diff --git a/sass/.sass-cache/26935e172d057160e23388bc67e0c04a34adcbec/_reset.scssc b/sass/.sass-cache/26935e172d057160e23388bc67e0c04a34adcbec/_reset.scssc
diff --git a/sass/.sass-cache/6d79f3764afe2eaca346c9cc768f858191eac197/main.scssc b/sass/.sass-cache/6d79f3764afe2eaca346c9cc768f858191eac197/main.scssc
diff --git a/sass/.sass-cache/87e835958defb2a5b25858e603628efb82ba22c9/_colors.scssc b/sass/.sass-cache/87e835958defb2a5b25858e603628efb82ba22c9/_colors.scssc