diff --git a/README.md b/README.md new file mode 100644 index 0000000..74c050d --- /dev/null +++ b/README.md @@ -0,0 +1,67 @@ +# Repositório de Aulas de CSS - Bootcamp React Fullstack TNT + +Este repositório contém os códigos das aulas de CSS do Bootcamp React Fullstack TNT. O projeto visa demonstrar a aplicação de técnicas de estilização e layout em projetos React, utilizando diversas abordagens de CSS para criar interfaces atraentes e funcionais. + +## Estrutura do Projeto + +O projeto é composto pelos seguintes componentes principais: + +- **Navbar**: Um componente de navegação no topo da página, estilizado para oferecer uma experiência de usuário intuitiva. +- **BlogContent**: Componente para exibir postagens de blog, com um layout flexível para imagem e texto. +- **Footer**: Componente de rodapé que fornece informações de direitos autorais e é fixado na parte inferior da página. +- **Media**: Componente para exibir tabelas com notas de alunos e calcular médias, aplicando estilização condicional para aprovação e reprovação. +- **Produtos**: Componente para exibir produtos com preços e descontos, com estilização para destacar informações importantes. + +## Tecnologias Utilizadas + +- **React**: Biblioteca JavaScript para construir interfaces de usuário. +- **CSS**: Folhas de estilo em cascata para estilização e layout dos componentes. +- **Vite**: Ferramenta de construção rápida para desenvolvimento com React. + +## Componentes + +### Navbar + +O componente `Navbar` oferece um menu de navegação no topo da página, utilizando Flexbox para o alinhamento dos itens e garantindo um design responsivo. + +### BlogContent + +O componente `BlogContent` exibe uma postagem de blog, incluindo uma imagem e texto formatado. O layout é ajustado para criar uma apresentação visual agradável. + +### Footer + +O `Footer` é um componente simples de rodapé, que fornece informações de direitos autorais e é fixado na parte inferior da página. + +### Media + +O componente `Media` exibe uma tabela com as notas dos alunos, calculando a média e utilizando estilização condicional para destacar aprovações e reprovações. + +### Produtos + +O `Produtos` é um componente que mostra produtos com preços e descontos, aplicando estilos para distinguir entre produtos com desconto e sem desconto. + +## Como Rodar o Projeto + +1. Clone o repositório: + ```bash + git clone + +2. Navegue para o diretório do projeto: + ```bash + cd + +3. Instale as dependências: + ```bash + npm install + +3. Inicie o servidor de desenvolvimento: + ```bash + npm run dev + +## Contribuições +Se você deseja contribuir para o projeto, sinta-se à vontade para abrir uma issue ou enviar um pull request. Qualquer melhoria ou correção é bem-vinda! + +## Licença +Este projeto está licenciado sob a Licença MIT. + +