https://github.com/arlesson-sales/cordel-moderno
Resolução do desafio proposto pelo curso de HMTL5 e CSS3 do canal Curso em video. Uma pagina que faz a exibição de um cordel escrito por Milton Duarte, com efeitos de paralax.
https://github.com/arlesson-sales/cordel-moderno
css css3 cursoemvideo html html5 trabalho
Last synced: about 2 months ago
JSON representation
Resolução do desafio proposto pelo curso de HMTL5 e CSS3 do canal Curso em video. Uma pagina que faz a exibição de um cordel escrito por Milton Duarte, com efeitos de paralax.
- Host: GitHub
- URL: https://github.com/arlesson-sales/cordel-moderno
- Owner: Arlesson-Sales
- Created: 2025-03-28T15:45:00.000Z (about 2 months ago)
- Default Branch: master
- Last Pushed: 2025-03-28T19:00:46.000Z (about 2 months ago)
- Last Synced: 2025-03-28T19:39:06.812Z (about 2 months ago)
- Topics: css, css3, cursoemvideo, html, html5, trabalho
- Language: HTML
- Homepage: https://arlesson-sales.github.io/Cordel-Moderno/
- Size: 707 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Cordel Moderno
Projeto desenvolvido como parte do desafio proposto pelo curso de HTML5 e CSS3 do [Curso em Vídeo](https://www.cursoemvideo.com). Trata-se de uma página web que exibe um cordel escrito por Milton Duarte, com efeitos de paralaxe.
## 📝 Sobre o projeto
Este projeto apresenta o poema "Cordel Moderno" de Milton Duarte, com um design responsivo que inclui:
- Efeitos de paralaxe em seções com imagens de fundo
- Tipografia estilizada
- Layout adaptável para diferentes tamanhos de tela
- Seções com contraste entre fundo claro e escuro
## 🛠 Tecnologias utilizadas
- HTML5
- CSS3 (com variáveis CSS)
- Google Fonts (Passion One e Sriracha)
- Design responsivo com media queries
- Efeitos de paralaxe com `background-attachment: fixed`
## 📱 Responsividade
O projeto foi desenvolvido com três breakpoints para se adaptar a diferentes tamanhos de tela:
1. Telas maiores que 600px
2. Telas menores que 600px (ajuste no tamanho da fonte e espaçamento)
3. Telas menores que 500px (redução do tamanho do título principal)
4. Telas menores que 400px (ajuste no rodapé)
## ✨ Recursos especiais
- Efeito de texto flutuante sobre imagens com sombra
- Links estilizados com efeito hover
- Fontes personalizadas para títulos e conteúdo
- Espaçamento vertical proporcional à altura da viewport
## 🔗 Links
- [Poema original no Recanto das Letras](https://www.recantodasletras.com.br/poesias/3186743)
- [Curso em Vídeo](https://www.cursoemvideo.com)
- [Gustavo Guanabara no GitHub](https://github.com/gustavoguanabara)