https://github.com/rubendvb/css-flexbox-grid
https://github.com/rubendvb/css-flexbox-grid
Last synced: 6 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/rubendvb/css-flexbox-grid
- Owner: Rubendvb
- Created: 2022-05-24T04:40:40.000Z (about 4 years ago)
- Default Branch: master
- Last Pushed: 2022-06-04T19:29:47.000Z (about 4 years ago)
- Last Synced: 2025-01-21T02:09:45.308Z (over 1 year ago)
- Language: HTML
- Homepage: css-flexbox-grid-nine.vercel.app
- Size: 5.73 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Link do resultado final
[Acesse aqui](https://css-flexbox-grid-10ma5v82j-rubendvb.vercel.app/)
# Guia de estilos
Toda a estilização que será usada no projeto dentro do figma.
[Link do projeto no figma](https://www.figma.com/file/ibWktwVpnog76rMYOdVhks/Dispondo-elementos-com-flexbox-e-grid?node-id=54%3A2358)
## Fonte
```html
Open Sans:
```
## Cores
corpo: `#1D232A`
cabeçalho: `#1D232A`
cabeçalho mobile: `#15191C`
menu lateral: `#15191C`
cartão: `#2C343A`
fonte: `#FFFFFF`
fonte alternativa: `#95999C`
links: `#0480DC`
botão: `#0480DC`
sombras: `0px 4px 4px rgba(0, 0, 0, 0.16)`
## Ícones
Estão dentro do arquivo de fonte `icones.ttf`. Para usar, primeiro importe a fonte no projeto usando `@font-face` e depois utilize os códigos abaixo para exibir o ícone.
```css
@font-face {
font-family: 'icones';
src: url(../font/icones.ttf);
}
```
> Cuidado com a localização do arquivo `icones.ttf`
Camisas = `\e900`
Carrinho = `\e901`
Inicio = `\e902`
Integrantes = `\e903`
Menu = `\e904`
Moeda = `\e905`
Notificação = `\e906`
Pico = `\e908`
Picos = `\e909`
Pinturas = `\e90a`
Play = `\e90b`
Relogio = `\e90c`
Seta-baixo = `\e90d`
Videos = `\e90e`
Visualizacao = `\e90f`
## Espaçamentos
Espaço interno botão: `8px`
Espaço entre elementos do botão: `8px`
Espaço entre elementos: `16px/8px`
Espaçamento interno do corpo: `16px`
Espaçamento entre o título do cartão de recentes e seus itens: `24px`
## Tamanhos
Tamanho do dispositivo mobile: `360px`
Tamanho do dispositivo desktop: `1440px`
Largura máxima do conteúdo principal: `1120px`
Largura máxima de um cartão desktop: `256px`
Altura mínima de um cartão: `320px`