Giter VIP home page Giter VIP logo

lucasreis0 / calmariaspa Goto Github PK

View Code? Open in Web Editor NEW
1.0 1.0 0.0 16.24 MB

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.

Home Page: https://calmariaspar.vercel.app

HTML 22.25% SCSS 52.55% CSS 25.20%
aninhamento css extend html mediaqueries mixins partials placeholders sass

calmariaspa's Introduction

Projeto de Estilização com SASS

SASS Logo

ℹ️ 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.

Screenshot do Projeto


Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.