https://github.com/monicaquintal/spotify-clone
Projeto desenvolvido na Seção 7 (Bootstrap 4 & Design responsivo) do Curso de Desenvolvimento Web Completo 2022.
https://github.com/monicaquintal/spotify-clone
bootstrap css html
Last synced: 4 months ago
JSON representation
Projeto desenvolvido na Seção 7 (Bootstrap 4 & Design responsivo) do Curso de Desenvolvimento Web Completo 2022.
- Host: GitHub
- URL: https://github.com/monicaquintal/spotify-clone
- Owner: monicaquintal
- Created: 2022-10-29T23:58:42.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2022-11-08T01:02:39.000Z (over 2 years ago)
- Last Synced: 2025-01-06T08:21:39.540Z (5 months ago)
- Topics: bootstrap, css, html
- Language: HTML
- Homepage: https://monicaquintal.github.io/spotify-clone
- Size: 1.09 MB
- Stars: 1
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
Awesome Lists containing this project
README
🎧 Spotify Clone
Seção 7: Bootstrap 4 & Design responsivo
Curso Desenvolvimento Web Completo 2022
### Aula 01:
- preparação do ambiente;
- inserindo fav icon no <title>;
- criação do topo/capa da página (navbar, logo, menu hamburguer, combinação de backgrounds, gradiente linear, background-attachment).
### Aula 02:
- finalizando a capa;
- ajuste da barra de navegação;
- configuração dos links:
- sobrescrevendo configuração padrão do bootstrap (nesse caso, em relação à cor dos links da barra de navegação e da borda do menu sanduiche) - verificar clicando com o botão direita sobre ele na página, e clicando inspecionar - identificar a qual classes deve se referir (especificidade);
- inserindo o divisor na barra de navegação.
- criando a seção "Música para todos" (home) - grid, título, botões;
- tornando a fonte do h1 responsiva de acordo com dispositivo (utilizando media queries):
- disponibilizado também o link do site para conversão de pixels para em.
- estilização dos botões.
### Aula 03:
- inclusão dos conteúdos;
- criação da seção "serviços", utilizando grids específicos;
- subdivisão do grid;
- imagens com layout fluido;
- aplicação de estilização específica para o bloco;
- rotacionando a row (iphones);
- quando a imagem ultrapassa o limite da tela:
- atributo "overflow-x: hidden" esconde a barra de rolagem horizontal (o y esconde a vertical).
### Aula 04:
- criando o rodapé;
- conteúdo extra: utilização do menu "Inspecionar", e visualização do site em dispositivos de tamanhos diferentes.
### Aula 05:
- criação do Carousel Slider, a partir do conteúdo desenvolvido na aula de [Estudo Carousel](https://github.com/monicaquintal/estudoCarousel). 🎠