I moved main.css below materialize, but it still seems to be overwriting my main.CSS
If I force it off, I get the results I was expecting…
HTML
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>pianoMACHINE</title>
<meta name="description" content="remember when we all skinned our music players?">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<!-- Place favicon.ico in the root directory -->
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
<!-- Essential META Tags -->
<meta property="og:title" content="pianoMACHINE">
<meta property="og:description" content="remember when we all skinned our music players?">
<meta property="og:image" content="https://github.com/TurtleWolf/Responsive-Web-Design_-_Technical-Document/blob/master/CapturePreview.PNG?raw=true">
<meta property="og:url" content="https://turtlewolf.github.io/Responsive-Web-Design_-_Technical-Document/">
<meta name="twitter:card" content="summary_large_image">
<!-- Non-Essential, But Recommended -->
<meta property="og:site_name" content="TurtleWolfe.com">
<meta name="twitter:image:alt" content="TurtleWolfe.com">
<!-- Non-Essential, But Required for Analytics -->
<meta property="fb:app_id" content="your_app_id" />
<meta name="twitter:site" content="@website-TurtleWolfe">
<link rel="stylesheet" href="css/normalize.css">
<script src="js/vendor/modernizr-2.8.3.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN"
crossorigin="anonymous">
<link rel="stylesheet" href="css/main.css">
</head>
<body id="body">
<!--[if lt IE 8]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<div class="container">
<div class="row">
<div class="col s12">
<div id="main" class="card">
<div class="card-action">
<input id="vol-control" type="range" min="0" max="100" step="1" oninput="SetVolume(this.value)" onchange="SetVolume(this.value)"></input>
<h2 id="task-title">asdfg</h2>
<ul class="collection">
<li class="collection-item">
<p>
<label for="t-rex-roar-loop">
A
</label>
<br />
<!-- This time we use the source element instead of the src attribute -->
<audio id="t-rex-roar-loop" data-sound-id="A" loop controls>
<source type="audio/mpeg" src="https://github.com/TurtleWolf/pianoMACHINE/blob/master/SPN(LoopMp3)\ArabWham(SPN).mp3?raw=true" />
Your browser does not support the <code>audio</code> element.
</audio>
</p>
<a href="#" class="delete-item secondary-content">
<i class="fa fa-remove"></i>
</a>
</li>
<li class="collection-item">
<p>
<label for="t-rex-roar-loop">
S
</label>
<br />
<!-- This time we use the source element instead of the src attribute -->
<audio id="t-rex-roar-loop" data-sound-id="S" loop controls>
<source type="audio/mpeg" src="https://github.com/TurtleWolf/pianoMACHINE/blob/master/SPN(LoopMp3)\CrazyTown(SPN).mp3?raw=true" />
Your browser does not support the <code>audio</code> element.
</audio>
</p>
<a href="#" class="delete-item secondary-content">
<i class="fa fa-remove"></i>
</a>
</li>
<li class="collection-item">
<p>
<label for="t-rex-roar-loop">
D
</label>
<br />
<!-- This time we use the source element instead of the src attribute -->
<audio id="t-rex-roar-loop" data-sound-id="D" loop controls>
<source type="audio/mpeg" src="https://github.com/TurtleWolf/pianoMACHINE/blob/master/SPN(LoopMp3)\DooSoul(SPN).mp3?raw=true" />
Your browser does not support the <code>audio</code> element.
</audio>
</p>
<a href="#" class="delete-item secondary-content">
<i class="fa fa-remove"></i>
</a>
</li>
<li class="collection-item">
<p>
<label for="t-rex-roar-loop">
F
</label>
<br />
<!-- This time we use the source element instead of the src attribute -->
<audio id="t-rex-roar-loop" data-sound-id="F" loop controls>
<source type="audio/mpeg" src="https://github.com/TurtleWolf/pianoMACHINE/blob/master/SPN(LoopMp3)\DoYoThang(SPN).mp3?raw=true" />
Your browser does not support the <code>audio</code> element.
</audio>
</p>
<a href="#" class="delete-item secondary-content">
<i class="fa fa-remove"></i>
</a>
</li>
<li class="collection-item">
<p>
<label for="t-rex-roar-loop">
G
</label>
<br />
<!-- This time we use the source element instead of the src attribute -->
<audio id="t-rex-roar-loop" data-sound-id="G" loop controls>
<source type="audio/mpeg" src="https://github.com/TurtleWolf/pianoMACHINE/blob/master/SPN(LoopMp3)\HipHOP_Bap006.mp3?raw=true" />
Your browser does not support the <code>audio</code> element.
</audio>
</p>
<a href="#" class="delete-item secondary-content">
<i class="fa fa-remove"></i>
</a>
</li>
<li class="collection-item">
<p>
<label for="t-rex-roar-loop">
H
</label>
<br />
<!-- This time we use the source element instead of the src attribute -->
<audio id="t-rex-roar-loop" data-sound-id="H" loop controls>
<source type="audio/mpeg" src="https://github.com/TurtleWolf/pianoMACHINE/blob/master/SPN(LoopMp3)\K.I.S.S.(SPN).mp3?raw=true" />
Your browser does not support the <code>audio</code> element.
</audio>
</p>
<a href="#" class="delete-item secondary-content">
<i class="fa fa-remove"></i>
</a>
</li>
<li class="collection-item">
<p>
<label for="t-rex-roar-loop">
J
</label>
<br />
<!-- This time we use the source element instead of the src attribute -->
<audio id="t-rex-roar-loop" data-sound-id="J" loop controls>
<source type="audio/mpeg" src="https://github.com/TurtleWolf/pianoMACHINE/blob/master/SPN(LoopMp3)\Pimpish(SPN).mp3?raw=true" />
Your browser does not support the <code>audio</code> element.
</audio>
</p>
<a href="#" class="delete-item secondary-content">
<i class="fa fa-remove"></i>
</a>
</li>
<li class="collection-item">
<p>
<label for="t-rex-roar-loop">
K
</label>
<br />
<!-- This time we use the source element instead of the src attribute -->
<audio id="t-rex-roar-loop" data-sound-id="K" loop controls>
<source type="audio/mpeg" src="https://github.com/TurtleWolf/pianoMACHINE/blob/master/SPN(LoopMp3)\Rhodes(SPN).mp3?raw=true" />
Your browser does not support the <code>audio</code> element.
</audio>
</p>
<a href="#" class="delete-item secondary-content">
<i class="fa fa-remove"></i>
</a>
</li>
<li class="collection-item">
<p>
<label for="t-rex-roar-loop">
L
</label>
<br />
<!-- This time we use the source element instead of the src attribute -->
<audio id="t-rex-roar-loop" data-sound-id="L" loop controls>
<source type="audio/mpeg" src="https://github.com/TurtleWolf/pianoMACHINE/blob/master/SPN(LoopMp3)\Teflon(SPN).mp3?raw=true" />
Your browser does not support the <code>audio</code> element.
</audio>
</p>
<a href="#" class="delete-item secondary-content">
<i class="fa fa-remove"></i>
</a>
</li>
</ul>
</div><!-- backloops on the right collumn -->
<div class="card-action">
<input id="vol-control" type="range" min="0" max="100" step="1" oninput="SetVolume(this.value)" onchange="SetVolume(this.value)"></input>
<h2 id="task-title">Word on the Street, Chattanooga TN</h2>
<ul class="collection">
<li class="collection-item">
<p>
<label for="t-rex-roar-loop">
a
</label>
<br />
<!-- This time we use the source element instead of the src attribute -->
<audio id="t-rex-roar-loop" data-sound-id="a" controls>
<source type="audio/mpeg" src="https://github.com/TurtleWolf/pianoMACHINE/blob/master/mp3/a1.mp3?raw=true" />
Your browser does not support the <code>audio</code> element.
</audio>
</p>
<a href="#" class="delete-item secondary-content">
<i class="fa fa-remove"></i>
</a>
</li>
<li class="collection-item">
<p>
<label for="t-rex-roar-loop">
s
</label>
<br />
<!-- This time we use the source element instead of the src attribute -->
<audio id="t-rex-roar-loop" data-sound-id="s" controls>
<source type="audio/mpeg" src="https://github.com/TurtleWolf/pianoMACHINE/blob/master/mp3/a1s.mp3?raw=true" />
Your browser does not support the <code>audio</code> element.
</audio>
</p>
<a href="#" class="delete-item secondary-content">
<i class="fa fa-remove"></i>
</a>
</li>
<li class="collection-item">
<p>
<label for="t-rex-roar-loop">
d
</label>
<br />
<!-- This time we use the source element instead of the src attribute -->
<audio id="t-rex-roar-loop" data-sound-id="d" controls>
<source type="audio/mpeg" src="https://github.com/TurtleWolf/pianoMACHINE/blob/master/mp3/b1.mp3?raw=true" />
Your browser does not support the <code>audio</code> element.
</audio>
</p>
<a href="#" class="delete-item secondary-content">
<i class="fa fa-remove"></i>
</a>
</li>
<li class="collection-item">
<p>
<label for="t-rex-roar-loop">
f
</label>
<br />
<!-- This time we use the source element instead of the src attribute -->
<audio id="t-rex-roar-loop" data-sound-id="f" controls>
<source type="audio/mpeg" src="https://github.com/TurtleWolf/pianoMACHINE/blob/master/mp3/c1.mp3?raw=true" />
Your browser does not support the <code>audio</code> element.
</audio>
</p>
<a href="#" class="delete-item secondary-content">
<i class="fa fa-remove"></i>
</a>
</li>
<li class="collection-item">
<p>
<label for="t-rex-roar-loop">
g
</label>
<br />
<!-- This time we use the source element instead of the src attribute -->
<audio id="t-rex-roar-loop" data-sound-id="g" controls>
<source type="audio/mpeg" src="https://github.com/TurtleWolf/pianoMACHINE/blob/master/mp3/c1s.mp3?raw=true" />
Your browser does not support the <code>audio</code> element.
</audio>
</p>
<a href="#" class="delete-item secondary-content">
<i class="fa fa-remove"></i>
</a>
</li>
<li class="collection-item">
<p>
<label for="t-rex-roar-loop">
h
</label>
<br />
<!-- This time we use the source element instead of the src attribute -->
<audio id="t-rex-roar-loop" data-sound-id="h" controls>
<source type="audio/mpeg" src="https://github.com/TurtleWolf/pianoMACHINE/blob/master/mp3/c2.mp3?raw=true" />
Your browser does not support the <code>audio</code> element.
</audio>
</p>
<a href="#" class="delete-item secondary-content">
<i class="fa fa-remove"></i>
</a>
</li>
<li class="collection-item">
<p>
<label for="t-rex-roar-loop">
j
</label>
<br />
<!-- This time we use the source element instead of the src attribute -->
<audio id="t-rex-roar-loop" data-sound-id="j" controls>
<source type="audio/mpeg" src="https://github.com/TurtleWolf/pianoMACHINE/blob/master/mp3/d1.mp3?raw=true" />
Your browser does not support the <code>audio</code> element.
</audio>
</p>
<a href="#" class="delete-item secondary-content">
<i class="fa fa-remove"></i>
</a>
</li>
<li class="collection-item">
<p>
<label for="t-rex-roar-loop">
k
</label>
<br />
<!-- This time we use the source element instead of the src attribute -->
<audio id="t-rex-roar-loop" data-sound-id="k" controls>
<source type="audio/mpeg" src="https://github.com/TurtleWolf/pianoMACHINE/blob/master/mp3/d1s.mp3?raw=true" />
Your browser does not support the <code>audio</code> element.
</audio>
</p>
<a href="#" class="delete-item secondary-content">
<i class="fa fa-remove"></i>
</a>
</li>
<li class="collection-item">
<p>
<label for="t-rex-roar-loop">
l
</label>
<br />
<!-- This time we use the source element instead of the src attribute -->
<audio id="t-rex-roar-loop" data-sound-id="l" controls>
<source type="audio/mpeg" src="https://github.com/TurtleWolf/pianoMACHINE/blob/master/mp3/e1.mp3?raw=true" />
Your browser does not support the <code>audio</code> element.
</audio>
</p>
<a href="#" class="delete-item secondary-content">
<i class="fa fa-remove"></i>
</a>
</li>
</ul>
</div><!-- accent beats on the left collumn -->
</div>
</div>
</div>
</div>
<footer>
<a href="https://github.com/TurtleWolf/Responsive-Web-Design_-_Technical-Document/" rel="link">source code on
github.io</a><br />
<a href="https://turtlewolfe.com/" rel="link">Copyright 2018, TurtleWolfe.com</a>
</footer>
<script src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE="
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
<script src="app.js"></script>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-125846162-2"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() { dataLayer.push(arguments); }
gtag('js', new Date());
gtag('config', 'UA-125846162-2');
</script>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-125846162-2"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() { dataLayer.push(arguments); }
gtag('js', new Date());
gtag('config', 'UA-125846162-2');
</script>
</body>
</html>
CSS
* {
box-sizing: border-box;
}
*:before,
*:after {
box-sizing: border-box;
}
html,
.card-action {
color: yellow;
text-shadow: 4px 4px 10px rgba(0, 0, 0, 1);
height: 100%;
position: relative;
background: url(https://github.com/TurtleWolf/pianoMACHINE/blob/master/ChattanoogaBridge.jpg?raw=true)
no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.collection-item {
background-color: rgba(117, 190, 218, 0.5); /* 50% transparent */
}
a {
color: yellow;
text-shadow: 4px 4px 10px rgba(0, 0, 0, 1);
}
#backColor-container {
background-color: rgba(0, 0, 100, 0.6);
}
#head-container {
display: flex;
flex-direction: reverse;
width: 100%;
}
#navbar {
left: 0px;
width: 49%;
position: fixed; /* Set the navbar to fixed position */
top: 0; /* Position the navbar at the top of the page */
border: 1mm ridge rgb(333, 333, 333, 0.6);
} /* navbar */
header {
font-size: 2.5em;
text-align: right;
float: right;
}
#main-doc {
margin-top: 20%;
margin-left: 8%;
width: 55%;
border: double #32a1ce;
padding: 4%;
}
p {
color: yellow;
text-shadow: 4px 4px 10px rgba(0, 0, 0, 1);
height: 100%;
position: relative;
background: url(https://github.com/TurtleWolf/pianoMACHINE/blob/master/ChattanoogaBridge.jpg?raw=true)
no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
code {
background-color: #1565c0;
font: Inconsolata;
color: white;
}
@media (max-width: 1250px) {
/* @media (width <= 30em) {....} */
section {
margin-top: 15px;
border: 1mm ridge rgb(333, 333, 333, 0.6);
}
} /* end of media query 1250px */
footer {
position: fixed;
bottom: 0;
width: 100%;
background: url(https://github.com/TurtleWolf/Responsive-Web-Design_-_Technical-Document/blob/master/800px-Joy_Oil_gas_station_blueprints.jpg?raw=true)
no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}