diff --git a/01 - JavaScript Drum Kit/index-FINISHED.html b/01 - JavaScript Drum Kit/index-FINISHED.html old mode 100644 new mode 100755 diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index-START.html old mode 100644 new mode 100755 index 4070d32767..8d7ac5acb6 --- a/01 - JavaScript Drum Kit/index-START.html +++ b/01 - JavaScript Drum Kit/index-START.html @@ -58,7 +58,24 @@ diff --git a/01 - JavaScript Drum Kit/index.html b/01 - JavaScript Drum Kit/index.html new file mode 100755 index 0000000000..a18f2bc2ca --- /dev/null +++ b/01 - JavaScript Drum Kit/index.html @@ -0,0 +1,83 @@ + + + + + JS Drum Kit + + + + + +
+
+ A + clap +
+
+ S + hihat +
+
+ D + kick +
+
+ F + openhat +
+
+ G + boom +
+
+ H + ride +
+
+ J + snare +
+
+ K + tom +
+
+ L + tink +
+
+ + + + + + + + + + + + + + + diff --git a/01 - JavaScript Drum Kit/style.css b/01 - JavaScript Drum Kit/style.css old mode 100644 new mode 100755 diff --git a/02 - JS + CSS Clock/index-FINISHED.html b/02 - JS + CSS Clock/index-FINISHED.html old mode 100644 new mode 100755 index db653a5340..36c420f534 --- a/02 - JS + CSS Clock/index-FINISHED.html +++ b/02 - JS + CSS Clock/index-FINISHED.html @@ -2,7 +2,7 @@ - JS + CSS Clock + Document @@ -42,7 +42,7 @@ position: relative; padding:2rem; box-shadow: - 0 0 0 4px rgba(0,0,0,0.1), + 0 0 0px 4px rgba(0,0,0,0.1), inset 0 0 0 3px #EFEFEF, inset 0 0 10px black, 0 0 10px rgba(0,0,0,0.2); @@ -84,15 +84,13 @@ const minsDegrees = ((mins / 60) * 360) + 90; minsHand.style.transform = `rotate(${minsDegrees}deg)`; - const hour = now.getHours(); - const hourDegrees = ((hour / 12) * 360) + 90; + const hour = now.getMinutes(); + const hourDegrees = ((mins / 12) * 360) + 90; hourHand.style.transform = `rotate(${hourDegrees}deg)`; } setInterval(setDate, 1000); - setDate(); - diff --git a/02 - JS + CSS Clock/index-START.html b/02 - JS + CSS Clock/index-START.html old mode 100644 new mode 100755 index 2712384201..592db16927 --- a/02 - JS + CSS Clock/index-START.html +++ b/02 - JS + CSS Clock/index-START.html @@ -2,7 +2,7 @@ - JS + CSS Clock + Document @@ -42,7 +42,7 @@ position: relative; padding:2rem; box-shadow: - 0 0 0 4px rgba(0,0,0,0.1), + 0 0 0px 4px rgba(0,0,0,0.1), inset 0 0 0 3px #EFEFEF, inset 0 0 10px black, 0 0 10px rgba(0,0,0,0.2); @@ -61,12 +61,35 @@ background:black; position: absolute; top:50%; + transform-origin: 100%; + transform: rotate(90deg); + transition: all 0.05s; + transition-timing-function: cubic-bezier(0, 2.7, .58, 1); } diff --git a/02 - JS + CSS Clock/index.html b/02 - JS + CSS Clock/index.html new file mode 100755 index 0000000000..36c420f534 --- /dev/null +++ b/02 - JS + CSS Clock/index.html @@ -0,0 +1,96 @@ + + + + + Document + + + + +
+
+
+
+
+
+
+ + + + + + + diff --git a/03 - CSS Variables/index-FINISHED.html b/03 - CSS Variables/index-FINISHED.html old mode 100644 new mode 100755 index c3217fc003..9401d7b339 --- a/03 - CSS Variables/index-FINISHED.html +++ b/03 - CSS Variables/index-FINISHED.html @@ -57,6 +57,11 @@

Update CSS Variables with JS

margin-bottom: 50px; } + a { + color: var(--base); + text-decoration: none; + } + input { width:100px; } diff --git a/03 - CSS Variables/index-START.html b/03 - CSS Variables/index-START.html old mode 100644 new mode 100755 index 7171607a8b..4b36471e31 --- a/03 - CSS Variables/index-START.html +++ b/03 - CSS Variables/index-START.html @@ -21,6 +21,21 @@

Update CSS Variables with JS

diff --git a/04 - Array Cardio Day 1/index-FINISHED.html b/04 - Array Cardio Day 1/index-FINISHED.html old mode 100644 new mode 100755 index ede883f1f9..850a61a7d9 --- a/04 - Array Cardio Day 1/index-FINISHED.html +++ b/04 - Array Cardio Day 1/index-FINISHED.html @@ -5,7 +5,6 @@ Array Cardio 💪 -

Psst: have a look at the JavaScript Console 💁

diff --git a/05 - Flex Panel Gallery/index-FINISHED.html b/05 - Flex Panel Gallery/index-FINISHED.html old mode 100644 new mode 100755 index 243f8a221d..adb9060f5f --- a/05 - Flex Panel Gallery/index-FINISHED.html +++ b/05 - Flex Panel Gallery/index-FINISHED.html @@ -44,6 +44,7 @@ background-position:center; flex: 1; justify-content: center; + align-items: center; display: flex; flex-direction: column; } diff --git a/05 - Flex Panel Gallery/index-START.html b/05 - Flex Panel Gallery/index-START.html old mode 100644 new mode 100755 index e1d643ad5c..04ae3a3bbe --- a/05 - Flex Panel Gallery/index-START.html +++ b/05 - Flex Panel Gallery/index-START.html @@ -24,9 +24,15 @@ .panels { min-height:100vh; overflow: hidden; + display: flex; } .panel { + flex: 1; + justify-content: center; + align-items: center; + display: flex; + flex-direction: column; background:#6B0F9C; box-shadow:inset 0 0 0 5px rgba(255,255,255,0.1); color:white; @@ -54,6 +60,23 @@ margin:0; width: 100%; transition:transform 0.5s; + flex: 1 0 auto; + display: flex; + justify-content: center; + align-items: center; + } + + .panel > *:first-child { + transform: translateY(-100%); + } + .panel > *:last-child { + transform: translateY(100%); + } + .panel.open-active > *:first-child { + transform: translateY(0); + } + .panel.open-active > *:last-child { + transform: translateY(0); } .panel p { @@ -67,6 +90,7 @@ } .panel.open { + flex: 5; font-size:40px; } @@ -107,7 +131,19 @@ diff --git a/06 - Type Ahead/index-FINISHED.html b/06 - Type Ahead/index-FINISHED.html old mode 100644 new mode 100755 index 5902b43936..53c36248b0 --- a/06 - Type Ahead/index-FINISHED.html +++ b/06 - Type Ahead/index-FINISHED.html @@ -20,7 +20,7 @@ const cities = []; fetch(endpoint) .then(blob => blob.json()) - .then(data => cities.push(...data)); + .then(data => cities.push(...data)) function findMatches(wordToMatch, cities) { return cities.filter(place => { diff --git a/06 - Type Ahead/index-START.html b/06 - Type Ahead/index-START.html old mode 100644 new mode 100755 index 1436886918..82d5a02f36 --- a/06 - Type Ahead/index-START.html +++ b/06 - Type Ahead/index-START.html @@ -15,7 +15,47 @@ diff --git a/06 - Type Ahead/style.css b/06 - Type Ahead/style.css old mode 100644 new mode 100755 index 36dc55f30e..155164bae9 --- a/06 - Type Ahead/style.css +++ b/06 - Type Ahead/style.css @@ -22,6 +22,7 @@ margin: 0; text-align: center; outline:0; + border:0; border: 10px solid #F7F7F7; width: 120%; left: -10%; diff --git a/07 - Array Cardio Day 2/index-FINISHED.html b/07 - Array Cardio Day 2/index-FINISHED.html old mode 100644 new mode 100755 index c8e5b25d3b..e39d35f79a --- a/07 - Array Cardio Day 2/index-FINISHED.html +++ b/07 - Array Cardio Day 2/index-FINISHED.html @@ -2,10 +2,9 @@ - Array Cardio 💪💪 + Document -

Psst: have a look at the JavaScript Console 💁

diff --git a/08 - Fun with HTML5 Canvas/index-FINISHED.html b/08 - Fun with HTML5 Canvas/index-FINISHED.html old mode 100644 new mode 100755 diff --git a/08 - Fun with HTML5 Canvas/index-START.html b/08 - Fun with HTML5 Canvas/index-START.html old mode 100644 new mode 100755 index 37c148df07..3237b37be9 --- a/08 - Fun with HTML5 Canvas/index-START.html +++ b/08 - Fun with HTML5 Canvas/index-START.html @@ -7,6 +7,50 @@ + +
+
+ +

This is an inbox layout.

+
+
+ +

Check one item

+
+
+ +

Hold down your Shift key

+
+
+ +

Check a lower item

+
+
+ +

Everything inbetween should also be set to checked

+
+
+ +

Try do it with out any libraries

+
+
+ +

Just regular JavaScript

+
+
+ +

Good Luck!

+
+
+ +

Don't forget to tweet your result!

+
+
+ + + + diff --git a/11 - Custom Video Player/scripts.js b/11 - Custom Video Player/scripts.js old mode 100644 new mode 100755 index e69de29bb2..19e4248477 --- a/11 - Custom Video Player/scripts.js +++ b/11 - Custom Video Player/scripts.js @@ -0,0 +1,52 @@ +// Get our elements on the page +const player = document.querySelector('.player'); +const video = player.querySelector('.viewer'); +const progress = player.querySelector('.progress'); +const progressBar = player.querySelector('.progress__filled'); +const toggle = player.querySelector('.toggle'); +const skipButtons = player.querySelectorAll('[data-skip]'); +const ranges = player.querySelectorAll('.player__slider'); +// Build our functions +function togglePlay() { + // if (video.paused) { + // video.play(); + // } else { + // video.pause(); + // } + const method = video.paused ? 'play' : 'pause'; + video[method](); +} +function updateButton() { + const icon = this.paused ? '►' : '❚ ❚'; + toggle.textContent = icon; +} +function skip() { + video.currentTime += parseFloat(this.dataset.skip); +} +function handleRangeUpdate() { + video[this.name] = this.value; +} +function handleProgress() { + const percent = (video.currentTime / video.duration) * 100; + progressBar.style.flexBasis = `${percent}%`; +} +function scrub(e) { + const scrubTime = (e.offsetX / progress.offsetWidth) * video.duration; + video.currentTime = scrubTime; + console.log(e); +} +// Hook up the event listeners +video.addEventListener('click', togglePlay); +video.addEventListener('play', updateButton); +video.addEventListener('pause', updateButton); +video.addEventListener('timeupdate', handleProgress); + +toggle.addEventListener('click', togglePlay); +skipButtons.forEach(button => button.addEventListener('click', skip)); +ranges.forEach(range => range.addEventListener('change', handleRangeUpdate)); + +let mousedown = false; +progress.addEventListener('click', scrub); +progress.addEventListener('mousemove', (e) => mousedown && scrub(e)); +progress.addEventListener('mousedown', () => mousedown = true); +progress.addEventListener('mouseup', () => mousedown = false); diff --git a/12 - Key Sequence Detection/index-START.html b/12 - Key Sequence Detection/index-START.html index 8cab786140..ff7146104c 100644 --- a/12 - Key Sequence Detection/index-START.html +++ b/12 - Key Sequence Detection/index-START.html @@ -7,6 +7,17 @@ diff --git a/13 - Slide in on Scroll/index-START.html b/13 - Slide in on Scroll/index-START.html index 0b9fb8fccb..1674737d53 100644 --- a/13 - Slide in on Scroll/index-START.html +++ b/13 - Slide in on Scroll/index-START.html @@ -58,6 +58,27 @@

Slide in on Scroll

}; } + const sliderImages = document.querySelectorAll('.slide-in'); + + function checkSlide(e) { + sliderImages.forEach(sliderImage => { + // halfway through image height + const slideInAt = (window.scrollY + window.innerHeight) - sliderImage.height / 2; + // bottom of image + const imageBottom = sliderImage.offsetTop + sliderImage.height; + + const isHalfShown = slideInAt > sliderImage.offsetTop; + const isNotScrolledPast = window.scrollY < imageBottom; + if (isHalfShown && isNotScrolledPast) { + sliderImage.classList.add('active'); + } else { + sliderImage.classList.remove('active'); + } + }); + } + + window.addEventListener('scroll', debounce(checkSlide)); + diff --git a/17 - Sort Without Articles/index-START.html b/17 - Sort Without Articles/index-START.html index cfaf3e0440..60a231aebd 100644 --- a/17 - Sort Without Articles/index-START.html +++ b/17 - Sort Without Articles/index-START.html @@ -43,8 +43,18 @@ diff --git a/18 - Adding Up Times with Reduce/index-START.html b/18 - Adding Up Times with Reduce/index-START.html index 3eaee0f3ef..0d7d7f9736 100644 --- a/18 - Adding Up Times with Reduce/index-START.html +++ b/18 - Adding Up Times with Reduce/index-START.html @@ -182,6 +182,24 @@ diff --git a/19 - Webcam Fun/index.html b/19 - Webcam Fun/index.html index d4ffc4dc2a..cb2d1b18a4 100755 --- a/19 - Webcam Fun/index.html +++ b/19 - Webcam Fun/index.html @@ -10,7 +10,7 @@
- +
diff --git a/19 - Webcam Fun/scripts.js b/19 - Webcam Fun/scripts.js index 00355f5a9c..bebc4c3b20 100644 --- a/19 - Webcam Fun/scripts.js +++ b/19 - Webcam Fun/scripts.js @@ -3,3 +3,99 @@ const canvas = document.querySelector('.photo'); const ctx = canvas.getContext('2d'); const strip = document.querySelector('.strip'); const snap = document.querySelector('.snap'); + +function getVideo() { + navigator.mediaDevices.getUserMedia({video: true, audio: false}) + .then(localMediaStream => { + console.log(localMediaStream); + video.src = window.URL.createObjectURL(localMediaStream); + video.play(); + }) + .catch(err => { + console.error("OH NOO!!!", err) + }) +}; + +function paintToCanvas() { + const width = video.videoWidth; + const height = video.videoHeight; + canvas.width = width; + canvas.height = height; + + return setInterval(() => { + ctx.drawImage(video, 0, 0, width, height); + // Take pixels out + let pixels = ctx.getImageData(0, 0, width, height); + // Fuck with pixels + // pixels = redEffect(pixels); + // pixels = rgbSplit(pixels); + // ctx.globalAlpha = 0.1; + pixels = greenScreen(pixels); + // Put em' back + ctx.putImageData(pixels, 0, 0); + }, 30); +} + +function takePhoto() { + // play sound + snap.currentTime = 0; + snap.play(); + + // take data out of canvas + const data = canvas.toDataURL('image/jpeg'); + const link = document.createElement('a'); + link.href = data; + link.setAttribute('download', 'handsome'); + link.innerHTML = `Webcam photo`; + strip.insertBefore(link, strip.firstChild); +} + +function redEffect(pixels) { + for (let i = 0; i < pixels.data.length; i += 4) { + pixels.data[i + 0] += 100; + pixels.data[i + 1] -= 50; + pixels.data[i + 2] *= 0.5; + } + return pixels; +} + +function rgbSplit(pixels) { + for (let i = 0; i < pixels.data.length; i += 4) { + pixels.data[i - 150] = pixels.data[i + 0]; + pixels.data[i + 100] = pixels.data[i + 1]; + pixels.data[i - 150] = pixels.data[i + 2]; + } + return pixels; +} + +function greenScreen(pixels) { + const levels = {}; + + document.querySelectorAll('.rgb input').forEach((input) => { + levels[input.name] = input.value; + }); + + for (let i = 0; i < pixels.data.length; i += 4) { + red = pixels.data[i + 0]; + green = pixels.data[i + 1]; + blue = pixels.data[i + 2]; + alpha = pixels.data[i + 3]; + + if ( + red >= levels.rmin + && green >= levels.gmin + && blue >= levels.bmin + && red <= levels.rmax + && green <= levels.gmax + && blue <= levels.bmax + ) { + // set pixel to completely transparent + pixels.data[i + 3] = 0; + } + } + return pixels; +} + +getVideo(); + +video.addEventListener('canplay', paintToCanvas); diff --git a/20 - Speech Detection/index-START.html b/20 - Speech Detection/index-START.html index d3395cca35..8dd87812cd 100644 --- a/20 - Speech Detection/index-START.html +++ b/20 - Speech Detection/index-START.html @@ -12,6 +12,28 @@ diff --git a/21 - Geolocation/index-START.html b/21 - Geolocation/index-START.html index a1b981b1cd..3291b07739 100644 --- a/21 - Geolocation/index-START.html +++ b/21 - Geolocation/index-START.html @@ -57,6 +57,14 @@

/*Compass: https://thenounproject.com/search/?q=compass&i=592352*/ diff --git a/22 - Follow Along Link Highlighter/index-START.html b/22 - Follow Along Link Highlighter/index-START.html index 8476112b5e..0cbf658361 100644 --- a/22 - Follow Along Link Highlighter/index-START.html +++ b/22 - Follow Along Link Highlighter/index-START.html @@ -27,7 +27,27 @@ - diff --git a/23 - Speech Synthesis/index-START.html b/23 - Speech Synthesis/index-START.html index e890008d36..f86d992c78 100644 --- a/23 - Speech Synthesis/index-START.html +++ b/23 - Speech Synthesis/index-START.html @@ -35,6 +35,37 @@

The Voiceinator 5000

const options = document.querySelectorAll('[type="range"], [name="text"]'); const speakButton = document.querySelector('#speak'); const stopButton = document.querySelector('#stop'); + + msg.text = document.querySelector('[name="text"]').value; + + function populateVoices() { + voices = this.getVoices(); + const voiceOptions = voices + .filter(voice => voice.lang.includes('en')) + .map(voice => ``) + .join(''); + voicesDropdown.innerHTML = voiceOptions; + } + function setVoice() { + msg.voice = voices.find(voice => voice.name === this.value); + toggle(); + } + function toggle(startOver = true) { + speechSynthesis.cancel(); + if (startOver) { + speechSynthesis.speak(msg); + } + } + function setOption(e) { + console.log(this.name, this.value); + msg[this.name] = this.value; + toggle(); + } + speechSynthesis.addEventListener('voiceschanged', populateVoices); + voicesDropdown.addEventListener('change', setVoice); + options.forEach(option => option.addEventListener('change', setOption)); + speakButton.addEventListener('click', toggle); + stopButton.addEventListener('click', () => toggle(false)); diff --git a/24 - Sticky Nav/index-START.html b/24 - Sticky Nav/index-START.html index e7bc67e9a5..846e9db72e 100644 --- a/24 - Sticky Nav/index-START.html +++ b/24 - Sticky Nav/index-START.html @@ -54,7 +54,18 @@

A story about getting lost.

diff --git a/24 - Sticky Nav/style-START.css b/24 - Sticky Nav/style-START.css index c6d59a31b3..a3db8925c4 100644 --- a/24 - Sticky Nav/style-START.css +++ b/24 - Sticky Nav/style-START.css @@ -23,6 +23,10 @@ body { transition: transform 0.5s; } +.fixed-nav .site-wrap { + transform: scale(1); +} + header { text-align: center; height:50vh; @@ -48,6 +52,11 @@ nav { z-index: 1; } +.fixed-nav nav { + position: fixed; + box-shadow: 0 5px rgba(0,0,0,0.1); +} + nav ul { margin: 0; padding:0; @@ -72,6 +81,10 @@ li.logo { font-size: 30px; } +.fixed-nav li.logo { + max-width: 500px; +} + li.logo a { color:black; } diff --git a/25 - Event Capture, Propagation, Bubbling and Once/index-START.html b/25 - Event Capture, Propagation, Bubbling and Once/index-START.html index 98f5e070c4..7bec715d6c 100644 --- a/25 - Event Capture, Propagation, Bubbling and Once/index-START.html +++ b/25 - Event Capture, Propagation, Bubbling and Once/index-START.html @@ -39,7 +39,17 @@ diff --git a/26 - Stripe Follow Along Nav/index-START.html b/26 - Stripe Follow Along Nav/index-START.html index 9780d0d1ac..431b2be141 100644 --- a/26 - Stripe Follow Along Nav/index-START.html +++ b/26 - Stripe Follow Along Nav/index-START.html @@ -208,6 +208,35 @@

Cool

diff --git a/27 - Click and Drag/index-START.html b/27 - Click and Drag/index-START.html index b8609315f7..18e9bd5df4 100644 --- a/27 - Click and Drag/index-START.html +++ b/27 - Click and Drag/index-START.html @@ -35,6 +35,36 @@ diff --git a/28 - Video Speed Controller/index-START.html b/28 - Video Speed Controller/index-START.html index c4cbd4259a..943fb9fd1f 100644 --- a/28 - Video Speed Controller/index-START.html +++ b/28 - Video Speed Controller/index-START.html @@ -15,6 +15,22 @@ diff --git a/29 - Countdown Timer/scripts-START.js b/29 - Countdown Timer/scripts-START.js index e69de29bb2..ce52cc9eeb 100644 --- a/29 - Countdown Timer/scripts-START.js +++ b/29 - Countdown Timer/scripts-START.js @@ -0,0 +1,50 @@ +let countdown; +const timerDisplay = document.querySelector('.display__time-left'); +const endTime = document.querySelector('.display__end-time'); +const buttons = document.querySelectorAll('[data-time]'); + +function timer(seconds) { + clearInterval(countdown); + const now = Date.now(); + const then = now + seconds * 1000; + displayTimeLeft(seconds); + displayEndTime(then); + countdown = setInterval(() => { + const secondsLeft = Math.round((then - Date.now()) / 1000); + // check if we should stop it + if (secondsLeft < 0) { + clearInterval(countdown); + return; + } + // display it + displayTimeLeft(secondsLeft); + }, 1000); +} + +function displayTimeLeft(seconds) { + const minutes = Math.floor(seconds / 60); + const remainderSeconds = seconds % 60; + const display = `${minutes}:${remainderSeconds < 10 ? '0' : ''}${remainderSeconds}`; + document.title = display; + timerDisplay.textContent = display; +} + +function displayEndTime(timestamp) { + const end = new Date(timestamp); + const hour = end.getHours(); + const minutes = end.getMinutes(); + endTime.textContent = `Be back at ${hour > 12 ? hour - 12 : hour }:${minutes < 10 ? '0' : ''}${minutes}`; +} + +function startTimer() { + const seconds = parseInt(this.dataset.time); + timer(seconds); +} + +buttons.forEach(button => button.addEventListener('click', startTimer)); +document.customForm.addEventListener('submit', function(e) { + e.preventDefault(); + const mins = this.minutes.value; + timer(mins * 60); + this.reset(); +}); diff --git a/30 - Whack A Mole/index-START.html b/30 - Whack A Mole/index-START.html index 2014ff458c..22a2095b8a 100644 --- a/30 - Whack A Mole/index-START.html +++ b/30 - Whack A Mole/index-START.html @@ -36,7 +36,53 @@

Whack-a-mole! 0

const holes = document.querySelectorAll('.hole'); const scoreBoard = document.querySelector('.score'); const moles = document.querySelectorAll('.mole'); + let lastHole; + let timeUp = false; + let score = 0; + function randomTime(min, max) { + return Math.round(Math.random() * (max - min) + min); + } + + function randomHole(holes) { + const idx = Math.floor(Math.random() * holes.length); + const hole = holes[idx]; + if (hole == lastHole) { + console.log("Same one, bro"); + return randomHole(holes); + } + lastHole = hole; + return hole; + } + + function peep() { + const time = randomTime(200, 1000); + const hole = randomHole(holes); + hole.classList.add('up'); + setTimeout(() => { + hole.classList.remove('up'); + if (!timeUp) peep(); + }, time); + } + + function startGame() { + scoreBoard.textContent = 0; + timeUp = false; + score = 0; + peep(); + setTimeout(() => { + timeUp = true; + }, 10000); + } + + function bonk(e) { + if (!e.isTrusted) return; // cheater! + score++; + this.classList.remove('up'); + scoreBoard.textContent = score; + } + + moles.forEach(mole => mole.addEventListener('click', bonk)); diff --git a/30 - Whack A Mole/style.css b/30 - Whack A Mole/style.css index 8fec3f5d8e..a768d349d0 100644 --- a/30 - Whack A Mole/style.css +++ b/30 - Whack A Mole/style.css @@ -20,7 +20,15 @@ h1 { line-height:1; margin-bottom: 0; } - +button { + display: block; + margin: 2rem auto 0; + font-size: 3rem; + background: black; + border: none; + color: white; +} +} .score { background:rgba(255,255,255,0.2); padding:0 3rem;