https://github.com/harukaionasao/galleria-sass

Projeto de galeria de fotos,utilizando Sass(pré-processador), otimizando o processo e diminuindo o tempo.
https://github.com/harukaionasao/galleria-sass

frontend preloader sass

Last synced: 8 days ago
JSON representation

Projeto de galeria de fotos,utilizando Sass(pré-processador), otimizando o processo e diminuindo o tempo.

• Host: GitHub
• URL: https://github.com/harukaionasao/galleria-sass
• Owner: HarukaIonaSao
• Created: 2023-02-05T17:38:29.000Z (almost 2 years ago)
• Default Branch: main-padrao-ssh-aula
• Last Pushed: 2024-09-11T11:39:25.000Z (2 months ago)
• Last Synced: 2024-09-11T17:19:44.039Z (2 months ago)
• Topics: frontend, preloader, sass
• Language: HTML
• Homepage: https://harukaionasao.github.io/Galleria-Sass/
• Size: 8.74 MB
• Stars: 3
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# 📸 Galleria

Bem-vindo ao **Galleria**, uma galeria de fotos estilosa construída com HTML, CSS e Sass! 🚀

## 🎯 Funcionalidades

- Navegação responsiva 🔄

- Cards de fotos interativos 📷

- Links para redes sociais 🔗

- Interface limpa e moderna 🎨

## 🛠️ Tecnologias Utilizadas

- **HTML5** 🖼️: Estrutura semântica do projeto.

- **CSS3** 🎨: Estilos responsivos e personalizações.

- **Sass (SCSS)** 💎: Pré-processador de CSS que melhora a organização e manutenção do código.

- **JavaScript** 💻: Scripts para acessibilidade e interações dinâmicas.

- **Font Awesome** 🎥: Ícones para redes sociais.

## 🚀 Pré-processamento com Sass

O projeto utiliza **Sass** para escrever estilos de forma mais eficiente e organizada. Aqui estão os principais benefícios de usar o Sass:

- 🌀 **Modularização**: Estilos divididos em diferentes arquivos para melhor organização.

- 🧬 **Variáveis**: Cores e tamanhos reutilizados ao longo do código, facilitando ajustes rápidos.

- 🎛️ **Mixins**: Blocos de código reutilizáveis, como centralização de flexbox e imagens de fundo.

- 🌐 **Responsividade**: Media queries dinâmicas para mobile first.

Exemplo de uso de **Sass** no projeto:

```scss

@use 'variables';

@use 'mixins';

.header {

  display: flex;

  justify-content: space-between;

  @include mixins.container;

  

  &-brand {

    color: variables.$primary-color;

    font-size: 3rem;

  }

}

```

https://user-images.githubusercontent.com/95101635/216840376-50f9e650-a130-4b30-9062-7dcd9ae58842.mp4