https://github.com/gustavosachetto/desafio-frontend

Desafio frontend elaborado pela Frontend Mentor, que consiste no desenvolvimento de um site.
https://github.com/gustavosachetto/desafio-frontend

html5 javascript jquery sass sass-framework

Last synced: about 1 month ago
JSON representation

Desafio frontend elaborado pela Frontend Mentor, que consiste no desenvolvimento de um site.

• Host: GitHub
• URL: https://github.com/gustavosachetto/desafio-frontend
• Owner: GustavoSachetto
• License: mit
• Created: 2023-10-11T18:42:53.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2024-07-21T21:19:28.000Z (6 months ago)
• Last Synced: 2024-12-19T00:41:19.318Z (about 1 month ago)
• Topics: html5, javascript, jquery, sass, sass-framework
• Language: SCSS
• Homepage: https://gustavosachetto.github.io/Desafio-frontend/
• Size: 281 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Desafio-frontend

![image](https://github.com/user-attachments/assets/12d80765-79b3-4f64-8a7e-978f25f70c3f)

## Sobre

Esse site é a resolução de um desafio front-end elaborado pelo [Frontend Mentor](https://www.frontendmentor.io). 

Na qual o intuito do projeto é desenvolver o site responsivo utilizando qualquer tecnologia com base no design proposto.

* __Link de acesso:__ https://gustavosachetto.github.io/Desafio-frontend/

## Tecnologias

Neste projeto utilizei __HTML, CSS e SASS__. Decidi trabalhar com __SASS__ (pré-processador CSS), para explorar funcionalidades que não são permitidas no CSS padrão. 

Abaixo está alguns tópicos de estudo do SASS que foram colocados em prática no projeto.

* Declaração de variáveis

* Mixins e include

* Criação de Funções

* Selecionando parentes 

* Declaração de propriedades

* Responsividade

* Configuração do mapeador (style.scss para style.css)

## O desafio

Seu desafio é criar esse componente de introdução e fazer com que ele tenha a aparência mais próxima possível do design.

Você pode usar qualquer ferramenta que quiser para ajudar a completar o desafio. Então, se você tem algo que gostaria de praticar, sinta-se à vontade para tentar.

Seus usuários devem ser capazes de:

* Veja o layout ideal para o site dependendo do tamanho da tela do seu dispositivo

* Veja os estados de foco para todos os elementos interativos na página

* Crie a forma de fundo usando código

## Resultado

### Desktop:

![Desafio front-end](https://github.com/user-attachments/assets/ac4c47fe-f2e6-4105-ab5c-9cb723992a75)

### Mobile:

![image](https://github.com/user-attachments/assets/c135cb63-2768-4fb6-b466-bb401a14f134)

**************