LUCASREIS0/calmariaSpa

Este projeto utiliza o pré-processador SASS para estilizar um site de forma eficiente, aplicando conceitos como modularização de código, variáveis e mixins para criar uma experiência visualmente atraente e consistente para os usuários.

Projeto de Estilização com SASS

ℹ️ Sobre o Projeto

Este projeto é resultado da formação Aprofunde seus conhecimentos em CSS da Alura, com foco no curso SASS e CSS: estilizando um site. O objetivo central foi aplicar os recursos avançados do pré-processador SASS para estilizar um site, priorizando a modularização, utilização de variáveis, mixins e partials.

🎯 Objetivo

O principal objetivo deste projeto foi utilizar o pré-processador SASS para criar folhas de estilos de fácil manutenção, modularizar o código e aplicar estilos consistentes em diferentes seções de um site.

🔧 Funcionalidades

• Modularização de Código: Organização dos estilos em partials para facilitar a manutenção.
• Otimização com Variáveis: Utilização de variáveis para cores, tamanhos e outras propriedades.
• Criação de Mixins: Códigos reutilizáveis para estilização dinâmica de seções e textos.
• Estilos Avançados: Implementação de estilos para seções específicas, como Serviços e Desconto.
• Pseudo-classes e Parent Selector: Aplicação de estilos avançados para interatividade.
• Reutilização de Código: Utilização de @Extend para evitar repetição e manter o código limpo.
• Posicionamento e Estilização: Posicionamento de imagens e estilização de formulários.

🧠 Aprendizados em SASS e CSS

Durante o desenvolvimento deste projeto, adquiri conhecimentos sólidos em:

• Modularização e Organização de Código: Utilizando partials e imports para manter o código organizado e escalável.
• Otimização de Estilos: Através de variáveis e mixins para reduzir a repetição e facilitar a manutenção.
• Estilização Avançada: Aplicando pseudo-classes e Parent Selector para estilização dinâmica.
• Sintaxe Recuada: Utilizando a sintaxe recuada para melhor legibilidade do código.

🚀 Como Executar

Para executar este projeto localmente, siga estas etapas:

1. Clone o Repositório: git clone https://github.com/seu-usuario/seu-projeto.git
2. Instale o SASS: npm install -g sass (caso ainda não tenha instalado).
3. Navegue até o Diretório do Projeto: cd seu-projeto
4. Compile o SASS para CSS: sass --watch scss:css
5. Abra o Arquivo HTML: Abra o arquivo index.html no seu navegador preferido.

🔗 Versão Hospedada

Uma versão hospedada deste projeto está disponível aqui.

👤 Autor

Desenvolvido por Lucas Reis.

---