Skip to content

mariac1995/HTML---CSS

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

1 Commit
 
 
 
 
 
 
 
 

Repository files navigation

Product Preview Card Component

Este projeto é uma implementação do desafio "Product preview card component" do Frontend Mentor. Trata-se de um cartão de visualização de produto responsivo, exibindo informações sobre um perfume, incluindo imagem, preço e botão de adicionar ao carrinho.

Tecnologias Utilizadas

  • HTML5: Estrutura da página.
  • CSS3: Estilização responsiva e design do componente.
  • Google Fonts: Fontes Fraunces e Montserrat para tipografia.

Arquivos do Projeto

  • index.html: Arquivo principal HTML contendo a estrutura do cartão de produto.
  • style.css: Arquivo de estilos CSS para layout, cores e responsividade.
  • images/: Pasta com imagens e ícones:
    • image-product-desktop.jpg: Imagem principal do produto.
    • icon-cart.svg: Ícone original do carrinho (preto).
    • icon-cart-white.svg: Ícone do carrinho em branco (modificado para o botão).
    • favicon-32x32.png: Ícone do favicon.
    • placeholder.txt: Arquivo placeholder.

Como Visualizar

Abra o arquivo index.html em qualquer navegador moderno. O design é responsivo e se adapta a dispositivos móveis e desktop.

Funcionalidades

  • Exibição de imagem do produto.
  • Informações do produto: categoria, nome, descrição e preços.
  • Botão "Add to Cart" com ícone do carrinho em branco sobre fundo verde.
  • Design responsivo para telas menores.

Personalizações

O botão foi modificado para ter o ícone do carrinho em branco, conforme solicitado, mantendo o texto "Add to Cart" em branco e o fundo verde.

Créditos

Desafio original: Frontend Mentor - Product Preview Card Component

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published