🤖 Curiosidades de Tecnologia — História do Mascote do Android

Projeto desenvolvido durante os estudos de HTML5 e CSS3 .

---

📋 Sobre o Projeto

Página web sobre a história do mascote do Android, o famoso Bugdroid. O projeto aborda desde a primeira tentativa de criação do mascote em 2007 por Dan Morrill, passando pela versão oficial criada pela ilustradora Irina Blok, até a evolução histórica das versões do Android nomeadas com doces.

Este projeto foi desenvolvido como exercício prático do Curso em Vídeo de HTML5 e CSS3 com Gustavo Guanabara.

---

✨ Funcionalidades

• Layout responsivo com imagens adaptáveis para mobile e desktop
• Navegação com links e efeitos hover
• Vídeo do YouTube embutido com layout responsivo
• Fontes customizadas via Google Fonts e fonte local (Android)
• Variáveis CSS para paleta de cores consistente
• Gradientes e efeitos visuais com CSS puro
• Seção <aside> com lista das versões "adocicadas" do Android
• Tags semânticas HTML5: header, nav, main, article, aside, footer

---

🛠️ Tecnologias Utilizadas

• HTML5 — estrutura semântica completa
• CSS3 — estilização com variáveis, gradientes, pseudo-elementos e responsividade
• Google Fonts — Bebas Neue + Playwrite NZ Guides
• Fonte local — Android (idroid.otf)

---

📁 Estrutura do Projeto

android-history/
├── index.html          # Estrutura principal da página
├── style.css           # Estilização completa
├── idroid.otf          # Fonte customizada Android
├── .gitignore          # Ignora a fonte local do repositório
└── README.md           # Este arquivo

Nota: As imagens do projeto são referenciadas a partir de um diretório ../imagens/ externo — certifique-se de ter a pasta de imagens do curso para visualização completa.

---

🎨 Paleta de Cores

Variável	Cor	Uso
--cor0	#D0C6ED	Background da página
--cor1	#E277ED	Gradientes — rosa/roxo
--cor2	#77A5ED	Gradientes — azul
--cor3	#9477ED	Roxo médio
--cor4	#BB77ED	Destaques em <strong>
--cor5	#777FED	Cor principal — títulos e sombras

---

📚 O que aprendi neste projeto

• Estrutura semântica com tags HTML5
• Uso de variáveis CSS (--cor, --fonte)
• linear-gradient para fundos e efeitos
• picture + source para imagens responsivas
• Iframe responsivo com position absolute
• Pseudo-elementos ::after para ícone externo nos links
• columns no CSS para lista em duas colunas
• abbr com tooltip nativo do browser
• text-shadow e box-shadow para profundidade visual
• transition-duration para animações suaves no hover

---

🚀 Como Visualizar

Opção 1 — GitHub Pages

Acesse diretamente: https://danilo-guimaraes.github.io/Project-Android/

Opção 2 — Localmente

# Clone o repositório
git clone https://github.com/danilo-guimaraes/android-history.git

# Entre na pasta
cd android-history

# Abra no navegador (Linux)
xdg-open index.html

# Ou use a extensão Live Server no VSCode

---

📊 Status do Aprendizado

• HTML semântico — estrutura completa
• CSS variáveis e paleta de cores
• Gradientes e efeitos visuais
• Imagens responsivas com picture
• Iframe responsivo
• Pseudo-elementos e pseudo-classes
• Flexbox (próximo módulo)
• CSS Grid (em breve)
• Responsividade com Media Queries (em breve)

---

👤 Autor

Danilo Guimarães — Trainee Programmer | Fullstack Developer in Training | Aspiring AI Engineer

---

📜 Créditos

Conteúdo original criado por Gustavo Guanabara para o Curso em Vídeo. Adaptado e estilizado por Danilo Guimarães como exercício prático de HTML5 e CSS3.