diff --git a/assets/css/styles.css b/assets/css/styles.css new file mode 100644 index 0000000..c7c82c8 --- /dev/null +++ b/assets/css/styles.css @@ -0,0 +1,49 @@ +@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600&display=swap'); + +* { + margin: 0; + padding: 0; + font-family: 'Open Sans', sans-serif; +} + +body { + height: 100vh; + background: linear-gradient(150deg, #D99EC9, #F6F0C4); + 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: #D3D3D3; + background: rgb(201, 77, 118); + 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; +} \ No newline at end of file diff --git a/assets/js/scripts.js b/assets/js/scripts.js new file mode 100644 index 0000000..a45fb73 --- /dev/null +++ b/assets/js/scripts.js @@ -0,0 +1,18 @@ +const horas = document.getElementById('horas'); +const minutos = document.getElementById('minutos'); +const segundos = document.getElementById('segundos'); + +const relogio = setInterval(function time(){ + let dateToday = new Date(); + let hr = dateToday.getHours(); + let min = dateToday.getMinutes(); + let seg = dateToday.getSeconds(); + + if (hr < 10) hr = '0' + hr; + if (min < 10) hr = '0' + min; + if (seg < 10) hr = '0' + seg; + + horas.textContent = hr; + minutos.textContent = min; + segundos.textContent = seg; +}) \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..3aca5ec --- /dev/null +++ b/index.html @@ -0,0 +1,35 @@ + + + +
+ + + + +