🎬 YouTube

Um clone da interface do YouTube desenvolvido com HTML e CSS puro, focando em design responsivo e boas práticas de desenvolvimento web .

📸 Preview

Desktop

• Layout de duas colunas com vídeo principal e relacionados
• Navbar responsiva com busca centralizada
• Seção de interações (like, share, subscribe)

Mobile

• Layout adaptativo que empilha verticalmente
• Menu hamburger para navegação
• Otimizado para touch devices

🚀 Tecnologias Utilizadas

• HTML5 - Estrutura semântica
• CSS3 - Estilização e responsividade
• Flexbox - Layout moderno e flexível
• Media Queries - Responsividade para diferentes telas

🎯 Funcionalidades

✅ Implementadas

• Navbar responsiva
• Player de vídeo principal
• Informações do canal (avatar, nome, inscritos)
• Botões de interação (curtir, compartilhar, download)
• Descrição do vídeo
• Seção de vídeos relacionados
• Design responsivo (desktop, tablet, mobile)
• Hover effects nos botões

📱 Responsividade

Dispositivo
Breakpoint
Layout
Desktop
> 1024px
Duas colunas lado a lado
Tablet
768px - 1024px
Duas colunas adaptadas
Mobile
< 768px
Coluna única empilhada

🛠️ caso queira clonar

git clone https://github.com/oapache/youtube-clone.git

📁 Estrutura do Projeto

youtube-clone/
│
├── index.html                 # Página principal
├── assets/
│   ├── css/
│   │   └── global.css        # Estilos globais
│   └── img/
│       ├── logo-youtube.svg
│       ├── dio-img.svg
│       ├── dio-circle.svg
│       ├── video1.svg
│       └── ... (outros ícones)
└── README.md

🎨 Design System

Cores

• Primary : <span class="inline-block w-3 h-3 border-[0.5px] border-border-200 rounded flex-shrink-0 shadow-sm mr-1 align-middle"></span>#FF0000 (Vermelho YouTube)
• Background : <span class="inline-block w-3 h-3 border-[0.5px] border-border-200 rounded flex-shrink-0 shadow-sm mr-1 align-middle"></span>#F9F9F9 (Cinza claro)
• Text : <span class="inline-block w-3 h-3 border-[0.5px] border-border-200 rounded flex-shrink-0 shadow-sm mr-1 align-middle"></span>#333333 (Cinza escuro)
• Secondary : <span class="inline-block w-3 h-3 border-[0.5px] border-border-200 rounded flex-shrink-0 shadow-sm mr-1 align-middle"></span>#666666 (Cinza médio)

Tipografia

• Font Family : 'Roboto', sans-serif
• Base Size : 10px (através de font-size: 62.5%)
• Scale : rem units para responsividade

Spacing

• Base Unit : 1rem = 10px
• Small : 0.5rem - 1rem
• Medium : 1.5rem - 2rem
• Large : 3rem - 4rem

🔧 Principais Desafios Resolvidos

Layout Responsivo

• Problema : Width fixo que não se adaptava
• Solução : Flexbox com proporções dinâmicas (flex: 2 e flex: 1)

Posicionamento

• Problema : position: absolute causando overflow
• Solução : Layout baseado em flexbox e grid