https://github.com/nicolasraf/blog_ads-balatro
This website is a project for the Internet programming course, where it is an idea for a simple blog themed around the atmosphere of the game Balatro.
https://github.com/nicolasraf/blog_ads-balatro
blog css frontend html web
Last synced: 6 months ago
JSON representation
This website is a project for the Internet programming course, where it is an idea for a simple blog themed around the atmosphere of the game Balatro.
- Host: GitHub
- URL: https://github.com/nicolasraf/blog_ads-balatro
- Owner: NicolasRaf
- Created: 2025-05-04T13:17:07.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-07-20T21:55:06.000Z (12 months ago)
- Last Synced: 2025-07-20T22:21:33.199Z (12 months ago)
- Topics: blog, css, frontend, html, web
- Language: CSS
- Homepage: https://arthurv10.github.io/Trabalho-PII---24-04-2025/index.html
- Size: 38.6 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 🌟 Projeto PII — Blog ADS Estilo Balatro 🃏
Bem-vindo ao **Blog ADS Balatro IFPI**, uma experiência lúdica em forma de site, desenvolvida para a disciplina de **Programação para Internet (PII)**. Como num baralho místico, cada carta — sejam posts, authores ou links — revela segredos e curiosidades do IFPI, trazendo animações, vídeos e interatividade que evocam o espírito do jogo Balatro.
## 🌐 Acesso Online
**Navegue pela jornada de cartas!** [Clique Aqui](https://arthurv10.github.io/Trabalho-PII---24-04-2025/index.html)🎴
## 🃏 Tema e Atmosfera
- **Fonte e Paleta:** Tipografia customizada “Balatro” combinada com tons escuros e detalhes em amarelo-ouro, criando um contraste dramático.
- **Animações de Carta:** Efeitos de flutuar, brilho e perspectiva aplicados a cada botão-carta, com transições suaves ao revelar conteúdo.
- **Interatividade Imersiva:** Uso de `fetch` dinâmico para carregar seções, hover que desliza informações e rotação 3D de links.
## 🗂 Estrutura do Repositório
```bash
├── src/
│ ├── assets/
│ │ ├── background/
│ │ ├── cards/
│ │ ├── cursor/
│ │ ├── fonts/
│ │ └── UI/
│ └── components/
│ ├── authors/
│ │ ├── authors.css
│ │ └── authors.html
│ ├── insertPost/
│ │ ├── insertPost.css
│ │ └── insertPost.html
│ ├── links/
│ │ ├── links.css
│ │ ├── links.html
│ │ └── links.js
│ ├── main/
│ │ ├── main.js
│ │ └── style.css
│ └── posts/
│ ├── posts.css
│ ├── posts.html
│ └── posts.js
├── .gitignore
├── index.html
└── README.md
```
## ✨ Funcionalidades Principais
### 1. Landing Page
- Vídeo de fundo fullscreen para imersão total.
- Botões estilizados como cartas que disparam animações de subida (`@keyframes`).
### 2. post
- Exibição de formulários, tabelas e listas exemplificando boas práticas de HTML5 e CSS3.
- Navegação suave entre categorias de conteúdo.
### 3. authores
- Grid responsivo de cartas, cada uma com foto de perfil.
- Ao passar o mouse, informações deslizam para cima num efeito de hover, revelando e-mail, descrição e ícones de GitHub/LinkedIn.
### 4. Links Externos
- Cartas flutuantes que giram conforme a posição do cursor, evidenciando documentação e recursos úteis (HTML, CSS, frameworks).
## 🤝 Créditos & authores
- [Arthur Vieira](https://github.com/ArthurV10)
- [Iglésio Júnior](https://github.com/iglesiojunior)
- [Nícolas Rafael](https://github.com/NicolasRaf)
***Que comecem as revelações! 🂡***