diff --git a/index.html b/index.html index 45faaf7..1fe340c 100644 --- a/index.html +++ b/index.html @@ -34,9 +34,10 @@

Headphones Recommended


SELECT A SCENE BELOW

-
+ +
+
-
diff --git a/main.js b/main.js index ec29e5c..1db184f 100644 --- a/main.js +++ b/main.js @@ -5,6 +5,6 @@ const video = document.querySelector("#video"); function changeScene(source) { document.getElementById("audio").src = "./audio/" + source + ".mp3"; document.getElementById("video").src = "./video/" + source + ".mp4"; - document.getElementById("infoText").style.display = "none"; + document.getElementById("infoPanel").style.display = "none"; document.getElementById('container').style.display = 'flex'; } \ No newline at end of file diff --git a/styles.css b/styles.css index 75a38ae..c9464f8 100644 --- a/styles.css +++ b/styles.css @@ -40,6 +40,10 @@ body { min-height: 50px; } +.sceneSelect{ + display: flex; +} + .sceneSelect button, .timerButton { font-size: 24pt; border-radius: 50%; @@ -52,10 +56,13 @@ body { width: 70px; cursor: pointer; margin: 0 2px 0 2px; - color: rgba(0, 0, 0, 0.75) + color: rgba(0, 0, 0, 0.75); + display: flex; + justify-content: center; + align-items: center; } -.sceneSelect button:hover { +.sceneSelect button:hover, .timerButton:hover { color: #ffffff; background-color: #000000; } @@ -111,12 +118,12 @@ body { #container{ height: 85%; justify-content: center; - align-items: center; + align-items: flex-start; display: none; } #app{ - height: 90%; + height:auto; width: 90%; max-height: 500px; max-width: 600px; @@ -128,6 +135,7 @@ body { border-radius: 10px; background-color: rgba(0, 0, 0, 0.7); text-align: center; + padding: 10px; } #first{ @@ -143,6 +151,9 @@ body { #second{ height: 30%; + display: flex; + align-items: center; + justify-content: space-around; } #third{ @@ -161,4 +172,14 @@ body { display: flex; flex-direction: column; align-items: center; + text-transform: capitalize; +} + +#timer-label{ + font-size: 30px; + text-transform: uppercase; +} + +#time-left{ + font-size: 72px; } \ No newline at end of file diff --git a/timer.js b/timer.js index 61b587d..bf63e4e 100644 --- a/timer.js +++ b/timer.js @@ -200,7 +200,7 @@ class App extends React.Component{
-
+