https://github.com/pitercoding/horacolor

PT-BR: Um projeto web utilizando JS, CSS e HTML. Site dinâmico que muda a cor de fundo e a imagem exibida de acordo com a hora do dia. EN: A ​​web project using JS, CSS and HTML. Dynamic website that changes the background color and the displayed image according to the time of day.
https://github.com/pitercoding/horacolor

css desenvolvimento-web get-element-styles get-hour html javascript media-queries projeto-de-iniciante responsive-design

Last synced: 10 days ago
JSON representation

PT-BR: Um projeto web utilizando JS, CSS e HTML. Site dinâmico que muda a cor de fundo e a imagem exibida de acordo com a hora do dia. EN: A ​​web project using JS, CSS and HTML. Dynamic website that changes the background color and the displayed image according to the time of day.

• Host: GitHub
• URL: https://github.com/pitercoding/horacolor
• Owner: pitercoding
• License: mit
• Created: 2025-05-15T17:43:48.000Z (12 months ago)
• Default Branch: main
• Last Pushed: 2025-05-15T17:49:08.000Z (12 months ago)
• Last Synced: 2026-05-03T15:39:19.621Z (10 days ago)
• Topics: css, desenvolvimento-web, get-element-styles, get-hour, html, javascript, media-queries, projeto-de-iniciante, responsive-design
• Language: CSS
• Homepage: https://pitercoding.github.io/horacolor/
• Size: 718 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# 🕒 Horacolor 🎨

Um projeto web simples e dinâmico que muda a cor de fundo e a imagem exibida de acordo com a hora do dia.

## Visão Geral 🔍

Este projeto demonstra como usar JavaScript para criar um site interativo que reage ao tempo real. Ao carregar a página, o site exibirá uma mensagem com a hora atual, uma imagem correspondente ao período do dia (manhã, tarde ou noite) e alterará a cor de fundo de acordo.

O design foi pensado para ser **responsivo**, adaptando-se a diferentes tamanhos de tela, desde smartphones até PCs, utilizando **Media Queries** em CSS.

Este projeto foi construído utilizando:

* **HTML:** Para a estrutura da página.

* **CSS:** Para o estilo visual, incluindo responsividade (via Media Queries) e o formato circular da imagem.

* **JavaScript:** Para a lógica dinâmica de detecção da hora e alteração do conteúdo e estilo.

## Como Usar ▶️

Basta abrir o arquivo `index.html` no seu navegador web para ver o projeto em ação.

## Funcionalidades ⚙️

* Exibe a hora atual na tela.

* Muda a imagem principal para refletir a manhã, tarde ou noite.

* Altera a cor de fundo da página de acordo com o período do dia.

* Apresenta uma saudação personalizada ("Bom dia!", "Boa tarde!", "Boa noite!").

* **Design responsivo**, garantindo uma boa experiência em diversos dispositivos através do uso de **Media Queries**.

## Tecnologias Utilizadas 🧰

* HTML

* CSS

* JavaScript

## Status do Projeto 🚧

Pronto por hora mas caso apareça uma nova ideia, irei implementar.

## Sobre o Desenvolvedor 👨‍💻

Olá! Sou um estudante de Ciências da Computação em constante aprendizado. Este projeto, "Horacolor", faz parte da minha jornada de desenvolvimento web e exploração das tecnologias front-end.

Sinta-se à vontade para explorar o código e fornecer feedback!

## Contato 📬

[LinkedIn](https://www.linkedin.com/in/piter-gomes-4a39281a1/)

[GitHub](https://github.com/pitercoding)

---

Criado por Piter Gomes.