/sofa-card-page

This is a page and couch card that was made during rocketseat challenge #02.

Primary LanguageCSS

Sofá Margot II - Rosé

Este projeto é uma página web que apresenta um produto, o sofá Margot II - Rosé. A página inclui uma imagem do produto, informações sobre o produto e um botão para adicionar o produto à cesta de compras.


Tecnologias   |    Projeto   |    Otimização   |    Layout   |    Instalação   |    Como usar   |    Licença


License


projeto DevLinks


🚀 Tecnologias

Esse projeto foi desenvolvido com as seguintes tecnologias:

  • HTML e CSS
  • JavaScript
  • Git e Github
  • Figma
  • Font Awesome para ícones
  • Google Fonts para fontes



💻 Projeto

O projeto "Sofa Card Page" é um projeto que foi desenvolvido como desafio #2 no boraCodar da Rocketseat. O projeto consiste em uma página de venda com um sofá Margot II - Rosé, onde a página exibe um botão de view 360º para analisar melhor os detalhes do sofá.





⏰ Otimização


  • Utilizado CSS Grid e Flexbox para organizar a estrutura da página.
  • Utilizado variáveis CSS para definir cores, fontes e tamanhos.
  • Utilizado o atributo srcset da tag img para carregar imagens otimizadas para diferentes tamanhos de tela.
  • Utilizado o atributo async ou defer para carregar scripts de forma assíncrona.
  • Utilizado uma ferramenta de minificação para reduzir o tamanho do código HTML, CSS e JS.
  • Utilizado uma ferramenta de pré-processamento para escrever CSS de forma mais eficiente e organizada.



🔖 Layout


Você pode visualizar o layout do projeto através DESSE LINK. É necessário ter conta no Figma para acessá-lo.




💾 Instalação


  1. Faça o clone do repositório: git clone https://github.com/euvitordev/sofa-card-page.git.
  2. Entre na pasta do projeto: cd -sofa-card-page.
  3. Abra o arquivo index.html no seu navegador.

📖 Como usar


  1. Clique no botão "ADICIONAR À CESTA" para adicionar o produto à cesta de compras.
  2. Clique no botão com ícone de street-view para alternar entre a visão geral e a visão detalhada do produto.



📝 Licença


Esse projeto está sob a License




🇧🇷 Créditos


Este projeto foi desenvolvido por Vitor Lucas




📧 Contato


Se tiver alguma dúvida ou sugestão, entre em contato através do Entre em contato.




Instagram   |    Github   |    LinkedIn   |    Youtube   |    Discord


Feito com ❤ por Vitor Lucas