README.md

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:

   git clone <URL_DO_REPOSITORIO>
   

2. Navegue para o diretório do projeto:

   cd <NOME_DO_DIRETORIO>
   

3. Instale as dependências:

    npm install
   

4. Inicie o servidor de desenvolvimento:

    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.