diff --git a/assets/css/style.css b/assets/css/style.css new file mode 100644 index 0000000..f782cf4 --- /dev/null +++ b/assets/css/style.css @@ -0,0 +1,49 @@ +@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;1,400;1,600&family=Poppins:wght@300;500;800&display=swap'); + +* { + margin: 0; + padding: 0; + font-family: 'Open Sans' sans-serif; +} + +body { + height: 100vh; + background: linear-gradient(120deg, #ffe53bd8, #ff2525da); + display: flex; + align-items: center; + justify-content: center; +} + +.relogio{ + display: flex; + align-items: center; + justify-content: space-around; + height: 200px; + width: 550px; + background: transparent; + border-radius: 3px; + box-shadow: 0px 8px 10px rgba(0, 0, 0, .5); +} + +.relogio div{ + height: 170px; + width: 150px; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + color: #fff; + background: rgba(5, 5, 5, .9); + box-shadow: 5px 5px 15px rgba(0, 0, 0, .7); + border-radius: 7px; + letter-spacing: 3px; +} + +.relogio span{ + font-weight: bolder; + font-size: 60px; +} + +.relogio span.tempo { + font-size: 10px; +} diff --git a/assets/js/script.js b/assets/js/script.js new file mode 100644 index 0000000..35db0bc --- /dev/null +++ b/assets/js/script.js @@ -0,0 +1,19 @@ +const horas = document.getElementById('horas') +const minutos = document.getElementById('minutos') +const segundos = document.getElementById('segundos') + +const relogio = setInterval(function time(){ + let dataToday = new Date(); + let hr = dataToday.getHours(); + let min = dataToday.getMinutes(); + let s = dataToday.getSeconds(); + +if(hr < 10) hr = '0' + hr; +if(min < 10) min = '0' + min; +if(s < 10) s = '0' + s; + + horas.textContent = hr; + minutos.textContent = min; + segundos.textContent = s; + +}) \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..3b505eb --- /dev/null +++ b/index.html @@ -0,0 +1,35 @@ + + + +
+ + + + +