From efaff774563f96192f38374fb64c2fbd65dfd6ff Mon Sep 17 00:00:00 2001 From: Owen Jow Date: Thu, 15 Oct 2015 15:59:57 -0700 Subject: [PATCH] (Slightly) repositioned the audio visualizer --- css/style.css | 143 +++++++++++++++++++++++++++----------------------- 1 file changed, 78 insertions(+), 65 deletions(-) diff --git a/css/style.css b/css/style.css index ce27839..dd125ff 100644 --- a/css/style.css +++ b/css/style.css @@ -6,8 +6,39 @@ font-weight: bold; } -div#mp3_player { width:500px; height:60px; background:#000; padding:5px; margin:50px auto; } -div#mp3_player > canvas{ width:500px; height:50px; background:#000000; float:left; } +@keyframes blink { + 0% { opacity:1; } + 50% { opacity:0; } + 100% { opacity:1; } +} + +@-webkit-keyframes blink { + 0% { opacity:1; } + 50% { opacity:0; } + 100% { opacity:1; } +} + +@-moz-keyframes blink { + 0% { opacity:1; } + 50% { opacity:0; } + 100% { opacity:1; } +} + +div#mp3_player { + width: 500px; + height: 60px; + background: #000; + padding: 5px; + padding-left: 13.5px; + margin: 50px auto; +} + +div#mp3_player > canvas { + width: 500px; + height: 50px; + background: #000000; + float: left; +} h1 { font-family: 'aight'; @@ -31,57 +62,6 @@ span { margin-right: auto; } -#directive { - border-top: 2px solid #ead06c; - padding-top: 7.5px; -} - -#typed { - font-family: 'Roboto Condensed'; - color: #ead06c; - font-size: 70px; - margin-left: 10px; /* otherwise the cursor makes it look a little off-center */ -} - -#drake { - position: absolute; - left: 10px; - top: 360px; - cursor: pointer; -} - -#cole { - position: absolute; - right: 121px; - top: 350px; - cursor: pointer; -} - -#kanye { - position: absolute; - right: 0px; - top: -20px; - cursor: pointer; -} - -#kendrick { - position: absolute; - left: 10px; - top: 50px; - cursor: pointer; -} - -#start { - height: 50px; - border-radius: 1px; - border: 0px solid #ead06c; - width: 120px; - height: 70px; - margin: auto; - margin-top: 130px; - text-align: center; -} - button { background: #ead06c; color: black; @@ -146,20 +126,53 @@ div p { animation: blink 0.7s infinite; } -@keyframes blink { - 0% { opacity:1; } - 50% { opacity:0; } - 100% { opacity:1; } +#directive { + border-top: 2px solid #ead06c; + padding-top: 7.5px; } -@-webkit-keyframes blink { - 0% { opacity:1; } - 50% { opacity:0; } - 100% { opacity:1; } +#typed { + font-family: 'Roboto Condensed'; + color: #ead06c; + font-size: 70px; + margin-left: 10px; /* otherwise the cursor makes it look a little off-center */ } -@-moz-keyframes blink { - 0% { opacity:1; } - 50% { opacity:0; } - 100% { opacity:1; } +#drake { + position: absolute; + left: 10px; + top: 360px; + cursor: pointer; +} + +#cole { + position: absolute; + right: 121px; + top: 350px; + cursor: pointer; +} + +#kanye { + position: absolute; + right: 0px; + top: -20px; + cursor: pointer; +} + +#kendrick { + position: absolute; + left: 10px; + top: 50px; + cursor: pointer; +} + +#start { + height: 50px; + border-radius: 1px; + border: 0px solid #ead06c; + width: 120px; + height: 70px; + margin: auto; + margin-top: 130px; + text-align: center; }