Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/daniel-portela/gradient
Projeto de cartões gradientes utilizando HTML5, CSS3 e SCSS para criar um conjunto de cartões com gradientes.
https://github.com/daniel-portela/gradient
css3 html5 responsive sass scss
Last synced: 14 days ago
JSON representation
Projeto de cartões gradientes utilizando HTML5, CSS3 e SCSS para criar um conjunto de cartões com gradientes.
- Host: GitHub
- URL: https://github.com/daniel-portela/gradient
- Owner: daniel-portela
- License: other
- Created: 2023-11-12T17:05:40.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2024-04-13T17:39:07.000Z (10 months ago)
- Last Synced: 2024-11-22T03:15:08.066Z (3 months ago)
- Topics: css3, html5, responsive, sass, scss
- Language: SCSS
- Homepage: https://gradientanimation.netlify.app/
- Size: 858 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
Projeto de cartões com gradientes
Este é um projeto de cartões desenvolvido utilizando HTML, CSS e SCSS para criar um conjunto de cartões com gradientes. Esses cartões são totalmente responsivos, proporcionando uma experiência visualmente agradável em dispositivos de diferentes tamanhos.
Tecnologias Utilizadas:
HTML5:
Utilizado para a estruturação do conteúdo dos cartões.
CSS3 e SCSS:
Utilizados para estilização dos elementos e aplicação dos gradientes.
Estrutura do Projeto:
O projeto consiste em um arquivo HTML (index.html) e um arquivo de estilo CSS (styles.css) gerado a partir do SCSS. A estrutura básica do HTML inclui um contêiner principal (container) que envolve todos os cartões. Cada cartão é representado por um artigo (article) com classes específicas para aplicação dos gradientes e estilos.
Estrutura do HTML:
Cada cartão é representado por um article com uma classe específica (card__article).
Os elementos visuais, como ícones e formas de gradiente, são adicionados dentro de cada cartão.
Cada cartão contém um título (card__title), uma descrição (card__description) e um botão (card__button).
Estilos e Gradientes
Os gradientes são aplicados utilizando propriedades CSS como background-image e linear-gradient. Cada cartão possui uma combinação única de cores e estilos de gradiente para criar uma aparência visualmente atraente. Além disso, são utilizadas classes adicionais para aplicar efeitos de escala (card__scale-1 e card__scale-2) e formas geométricas (card__shape-1, card__shape-2 e card__shape-3).
Responsividade:
O projeto foi desenvolvido com foco na responsividade, garantindo que os cartões se ajustem e mantenham uma boa aparência em dispositivos de diferentes tamanhos, desde smartphones até desktops. Isso é alcançado através do uso de unidades relativas e media queries para adaptar os estilos conforme necessário.
Como utilizar:
Para utilizar este projeto, basta incluir os arquivos HTML e CSS em seu projeto. Você pode personalizar os gradientes, estilos e conteúdo dos cartões conforme sua necessidade. Além disso, você pode estender este projeto adicionando mais cartões ou modificando a estrutura e estilos conforme desejado.
Sinta-se à vontade para explorar, modificar e utilizar este projeto de cartões com gradientes em seus próprios projetos!
Pré-requisitos:
Antes de começar, certifique-se de atender aos seguintes requisitos:
[Git](https://git-scm.com/downloads "Download Git") deve ser instalado em seu sistema operacional.
Execute localmente
Para executar o projeto localmente, execute este comando em seu git bash:
Linux e macOS:
```bash
git clone https://github.com/daniel-portela/gradient.git
```
Windows:
```bash
git clone https://github.com/daniel-portela/gradient.git
```
Depois de clonar o repositório, acesse o projeto com o seguinte comando:
```bash
cd nome-do-repositorio
```
```bash
Você pode abri-lo no VS Code digitando "code ."
```
Contato:
Se você tiver alguma dúvida, sugestão ou interesse em colaborar, não hesite em me contatar.
Email: [email protected]