border-radius: 50%; / Makes it perfectly round /
display: block;
margin: auto;
padding: 5px;
width: 300px;
height: 300px;
}
msg {
text-align: center;
padding: 5px;
}
h1 {
font-size: 35pt;
}
SCRIPT :
window.alert('Site em construção!')
function carregar() {
var msg = window.document.getElementById('msg');
var img = window.document.getElementById('imagem');
var quote = window.document.getElementById('quote');
var titulo = window.document.getElementById('titulo');
// data e hora atual:
var data = new Date();
var hora = data.getHours();
var minutos = data.getMinutes();
msg.innerHTML = Agora são exatamente ${hora}:${minutos}!
if(hora > 0 && hora <= 12) {
//MANHÃ, 0h(meia noite) até 12h(meio dia)
titulo.innerText = 'Bom Dia!'
quote.innerText = 'Que hoje seja um EXCELENTE dia.'
img.src = 'Fotos/Untitled design - Manhã.png'
document.body.style.background ='#e9c48a'
} else if(hora <= 12 && hora >= 18) {
//TARDE, 12hr(meio dia) até 18h
titulo.innerText = 'Boa Tarde!'
quote.innerText = 'Daily Quote: Espero que esteja tendo um bom dia.'
img.src = 'Fotos/Untitled design - Tarde.png'
document.body.style.background = '#ebca91'
} else {
//NOITE!
titulo.innerText = 'Boa Noite!'
quote.innerText = 'Daily Quote: Você foi muito bem hoje, hora de descançar.'
img.src = 'Fotos/Untitled design - Noite.png'
document.body.style.background = '#4f5f73'
}
HTML:
<!DOCTYPE html>
Turno do Dia
Uma mensagem
CSS:
body { background-color: #cde8b5; font: normal 15pt; padding: 150px; padding-left: 15%; }
header { color: white; text-align: center; }
section { background: whitesmoke; border-radius: 20px; padding: 15px; width: 500px; margin: auto; box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.3); }
footer { color: white; text-align: center; }
imagem {
border-radius: 50%; / Makes it perfectly round / display: block; margin: auto; padding: 5px; width: 300px; height: 300px; }
msg {
text-align: center; padding: 5px; }
h1 { font-size: 35pt; }
SCRIPT :
window.alert('Site em construção!')
function carregar() { var msg = window.document.getElementById('msg'); var img = window.document.getElementById('imagem'); var quote = window.document.getElementById('quote'); var titulo = window.document.getElementById('titulo');
// data e hora atual:
var data = new Date(); var hora = data.getHours(); var minutos = data.getMinutes();
msg.innerHTML =
Agora são exatamente ${hora}:${minutos}!if(hora > 0 && hora <= 12) { //MANHÃ, 0h(meia noite) até 12h(meio dia) titulo.innerText = 'Bom Dia!' quote.innerText = 'Que hoje seja um EXCELENTE dia.' img.src = 'Fotos/Untitled design - Manhã.png' document.body.style.background ='#e9c48a'
}