https://github.com/elis-vasconcelos/responsive-card
Responsive nature article card. The technologies used are html css and javascript (with DOM API).
https://github.com/elis-vasconcelos/responsive-card
css dom-api html javascript responsive-web-design
Last synced: about 1 month ago
JSON representation
Responsive nature article card. The technologies used are html css and javascript (with DOM API).
- Host: GitHub
- URL: https://github.com/elis-vasconcelos/responsive-card
- Owner: Elis-Vasconcelos
- Created: 2024-12-04T22:20:50.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-12-05T23:46:11.000Z (over 1 year ago)
- Last Synced: 2025-10-19T10:31:19.216Z (8 months ago)
- Topics: css, dom-api, html, javascript, responsive-web-design
- Language: CSS
- Homepage:
- Size: 858 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Responsividade Web - Card de Artigo e Modal
## Descrição
Este projeto consiste em um **card de artigo sobre a natureza**, implementado de forma responsiva, e um **modal de compartilhamento de redes sociais**, também responsivo. Ambos os elementos foram criados utilizando **HTML**, **CSS** e **JavaScript (DOM API)**.
A aplicação adapta-se a diferentes tamanhos de tela, garantindo uma boa experiência de usuário tanto em dispositivos móveis quanto em desktops. O menu de redes sociais funciona como um **menu hambúrguer**, que pode ser aberto e fechado ao clicar no ícone de seta.
## Funcionalidades
- **Card de Artigo Responsivo:** O card apresenta informações sobre um artigo de forma clara e bem estruturada, com imagens e texto ajustando-se adequadamente conforme o tamanho da tela.
- **Modal de Compartilhamento:** Um modal que permite compartilhar o conteúdo nas redes sociais, acionado por um botão dentro do card. O modal é exibido de forma responsiva e se adapta ao tamanho da tela.
- **Menu Hambúrguer:** Um menu de navegação para as redes sociais, que pode ser aberto e fechado clicando no botão com a setinha.
## Requisitos Implementados
- O **card de artigo** foi implementado conforme o design especificado no **mockup**.
- A aplicação é **totalmente responsiva**, ajustando-se a diferentes resoluções de tela.
- O **menu hambúrguer** foi criado e funciona corretamente para abrir e fechar ao clicar no ícone de seta.
- **Animações** foram aplicadas ao menu hambúrguer, tornando a experiência de navegação mais interativa.
- **Animações** foram adicionadas ao menu hambúrguer, incluindo transições suaves na abertura e fechamento.
## Aplicação em funcionamento
### Desktop
### Mobile
## Como Usar
1. Clone este repositório no seu computador.
2. Abra o arquivo `index.html` em um navegador para visualizar a aplicação.
3. O **card de artigo** e o **modal de compartilhamento** estarão visíveis na tela.
4. Clique no **menu hambúrguer** para abrir e fechar a navegação das redes sociais.