Giter VIP home page Giter VIP logo

leonardoalmir / skate Goto Github PK

View Code? Open in Web Editor NEW
1.0 1.0 0.0 10.33 MB

Nosso trabalho nesse projeto foi montar uma página de comunidade de skate, usamos Flex box e Grid. Além disso, este layout está todo dentro do Figma (o link para o figma está no README deste repositório). A seguir você terá o link para acessar a página do projeto:

Home Page: https://leonardoalmir.github.io/skate/

License: MIT License

CSS 41.06% HTML 57.96% JavaScript 0.98%
css-variables flexbox font-face git grid icons media-queries pseudo-elements reset-css template-areas

skate's Introduction

Guia de estilos

Toda a estilização que será usada no projeto dentro do figma.

Link do projeto no figma

Fonte

Open Sans:
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&display=swap">

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.

@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

skate's People

Contributors

leonardoalmir avatar

Stargazers

 avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.