- 
+
-
+
+
Literais
Valores fixos para representar dados primários, como números, strings, booleanos, arrays, objetos e expressões regulares.
- +
- 
+
-
+
+
Variáveis
Usadas para armazenar dados; declaradas com var, let ou const, podendo ser modificadas.
- +
- 
+
-
+
+
Operadores
Realizam operações em operandos, incluindo aritméticos, de comparação e lógicos.
- +
- .png)
+
-
+
+
Expressões
Combinações de valores, variáveis e operadores avaliáveis para produzir um valor.
- +
- 
+
-
+
+
Palavras-chave
Definem a estrutura e lógica do código, como if, else, for, function, entre outras.
- +
- 
+
-
+
+
Comentários
Trechos ignorados pelo interpretador; úteis para documentar e anotar o código.
- +
- 
+
-
+
+
Tipos de dados
Números, strings, booleanos, arrays, objetos, funções, null e undefined.
- - + +
- 
+
-
-
+
Funções
-Blocos de código reutilizáveis que executam tarefas específicas, definidos com functio
+Blocos de código reutilizáveis que executam tarefas específicas.
- +
-
- 
+
+
+
+
-
-
Identificadores
Nomes para variáveis, funções, etc., começam com letra, sublinhado ou cifrão.
- +
Anterior
@@ -108,8 +104,15 @@
+
+Identificadores
Próximo
+
+ ![Modal Image]()
+
+
+
-
+
diff --git a/readme.md b/readme.md
index 5137d88..16ea79e 100644
--- a/readme.md
+++ b/readme.md
@@ -1,38 +1,94 @@
-# Paginação usando HTML, CSS e JavaScript
+# 📚 Paginação e Modal com HTML, CSS e JavaScript
-Este projeto consiste em uma implementação simples de paginação desenvolvida com HTML, CSS e JavaScript. Ele demonstra como criar uma interface de usuário para exibir uma lista de itens divididos em várias páginas, permitindo ao usuário navegar facilmente entre elas.
-
+
+O projeto de **paginação** e **modal** interativo, desenvolvido com **HTML**, **CSS** e **JavaScript**. Este projeto demonstra como implementar uma interface de usuário elegante e funcional para visualizar e navegar por uma lista de itens com capacidade de expansão de texto e visualização de imagens em modal.
-## 🌟 Funcionalidades
+## 🚀 Recursos
-- **Exibição de Cartões:** Cada cartão exibe informações sobre sintaxe JavaScript, cobrindo tópicos como literais, variáveis, operadores, expressões, palavras-chave, comentários, tipos de dados, funções e identificadores.
+- **Paginação Dinâmica**: Navegue facilmente entre diferentes páginas de itens com botões de navegação.
+- **Modal Interativo**: Amplie e visualize imagens em um modal com efeito de zoom.
+- **Expansão de Texto**: Expanda ou contraia descrições adicionais dos itens com um clique.
+- **Design Responsivo**: Layout otimizado para diferentes tamanhos de tela.
-- **Paginação Interativa:** Os cartões são exibidos em páginas, permitindo ao usuário navegar utilizando botões "Anterior" e "Próximo", além de links numéricos para acessar páginas específicas.
+## 🎨 Layout e Estilo
-- **Descrições Completas:** Ao clicar no botão "Ver Mais" em cada cartão, é exibida a descrição completa do tópico, proporcionando mais informações sobre o conceito abordado.
+- **Design Limpo e Moderno**: Usamos uma paleta de cores sóbria e moderna com uma fonte legível para uma ótima experiência de usuário.
+- **Animações Elegantes**: Transições suaves para interações como clique, hover e visualização de modais.
-- **Expansão de Imagens:** Ao clicar em uma imagem dentro de um cartão, ela é expandida para uma visualização maior, facilitando a observação de detalhes.
+## 📦 Instalação
-## 🚀 Como Usar
+Para executar este projeto localmente, siga estas etapas:
-1. **Clone ou Baixe o Repositório:** Clone o repositório para o seu computador local usando o seguinte comando no terminal:
+1. **Clone o Repositório**
```bash
- git clone https://github.com/seu-usuario/pagination-using-html-css-js.git
+ git clone https://github.com/usuario/repositorio.git
```
+2. **Acesse o Diretório do Projeto**
-2. **Abra o Arquivo `index.html`:** Abra o arquivo `index.html` em um navegador da web para iniciar o aplicativo de paginação.
+ ```bash
+ cd repositorio
+ ```
+3. **Abra o Arquivo HTML no Navegador**
+
+ Simplesmente abra o arquivo `index.html` em seu navegador preferido.
+
+## 🛠️ Estrutura do Projeto
+
+- **index.html**: O arquivo principal que contém a estrutura HTML.
+- **styles.css**: Arquivo de estilos para o design e layout.
+- **script.js**: Contém a lógica para a navegação, modais e interações.
+- **expand.js**: Funções adicionais para expansão de texto e outros comportamentos.
+
+## 🖼️ Como Funciona
+
+1. **Paginação**: Os itens são divididos em páginas. Você pode navegar entre páginas usando os botões "Anterior" e "Próximo".
+2. **Modal**: Clique em uma imagem para abrir o modal com um efeito de zoom. Clique no botão de fechar (X) para fechar o modal.
+3. **Expansão de Texto**: Clique no botão "Ver Mais" para expandir ou contrair a descrição dos itens.
+
+## 💻 Tecnologia
+
+- **HTML5**: Estrutura e conteúdo da página.
+- **CSS3**: Estilos e animações.
+- **JavaScript**: Interatividade e lógica dinâmica.
+
+## 📱 Responsividade
+
+O projeto é responsivo e otimizado para dispositivos móveis. Os cartões e botões se ajustam automaticamente a diferentes tamanhos de tela.
+
+## 🤝 Contribuição
+
+Se você deseja contribuir para este projeto, siga as etapas abaixo:
+
+1. **Faça um Fork do Repositório**
+2. **Crie uma Branch para suas Alterações**
+
+ ```bash
+ git checkout -b minha-nova-feature
+ ```
+3. **Faça as Alterações Necessárias e Commit**
+
+ ```bash
+ git commit -am 'Adicionei uma nova feature'
+ ```
+4. **Envie para o Repositório Remoto**
+
+ ```bash
+ git push origin minha-nova-feature
+ ```
+5. **Abra um Pull Request**
+
+ Descreva suas alterações e envie para revisão.
+
+## 📜 Licença
-3. **Navegue pelos Cartões:** Utilize os botões "Anterior" e "Próximo" ou clique nos links numéricos para navegar pelas diferentes páginas de cartões.
+Este projeto está licenciado sob a [MIT License](LICENSE). Veja o arquivo LICENSE para mais detalhes.
-4. **Veja Descrições Completas:** Clique no botão "Ver Mais" em qualquer cartão para expandir e ver a descrição completa do respectivo tópico.
+## 📧 Contato
-5. **Expandir Imagens:** Clique em uma imagem dentro de um cartão para visualizá-la em tamanho maior, facilitando a visualização de detalhes.
+Para perguntas ou comentários, sinta-se à vontade para entrar em contato:
-## Autor ✍️
-
-Este projeto foi desenvolvido por [Thomas Nascimento].
-
-
+- **Email**: developer.thomas@outlook.com.br
+- **GitHub**: devthm
diff --git a/src/expand.js b/src/expand.js
index c9d23f0..e564236 100644
--- a/src/expand.js
+++ b/src/expand.js
@@ -1,21 +1,83 @@
-const cards = document.querySelectorAll('.card');
+document.addEventListener('DOMContentLoaded', () => {
+ const cards = document.querySelectorAll('.card');
+ const btnMore = document.querySelectorAll('.btn-more');
+ const modal = document.getElementById('modal');
+ const modalImg = document.getElementById('modal-img');
+ const modalClose = document.getElementById('close');
+ const pageLinks = document.querySelectorAll('.page-link');
+ const prevButton = document.getElementById('prev');
+ const nextButton = document.getElementById('next');
+ const itemsPerPage = 3;
+ let currentPage = 1;
-cards.forEach((card) => {
- const img = card.querySelector('img');
- img.addEventListener('click', () => {
- expandImage(img);
+ // Expande ou contrai o texto do card
+ btnMore.forEach(button => {
+ button.addEventListener('click', () => {
+ const card = button.closest('.card');
+ card.classList.toggle('expanded');
+ });
});
-});
-function expandImage(img) {
- img.classList.toggle('expanded'); // Adiciona ou remove a classe de expansão
-
- // Centraliza a imagem quando expandida
- if (img.classList.contains('expanded')) {
- // Adiciona uma classe ao body para permitir o overflow hidden
- document.body.classList.add('modal-open');
- } else {
- // Remove a classe do body quando a imagem é recolhida
- document.body.classList.remove('modal-open');
- }
-}
+ // Abre o modal com a imagem
+ document.querySelectorAll('.card-image').forEach(image => {
+ image.addEventListener('click', () => {
+ modalImg.src = image.src;
+ modal.classList.add('show');
+ });
+ });
+
+ // Fecha o modal
+ modalClose.addEventListener('click', () => {
+ modal.classList.remove('show');
+ });
+
+ // Função para exibir a página selecionada
+ const showPage = (page) => {
+ cards.forEach((card, index) => {
+ const start = (page - 1) * itemsPerPage;
+ const end = page * itemsPerPage;
+ card.style.display = (index >= start && index < end) ? 'block' : 'none';
+ });
+ updatePagination();
+ };
+
+ // Função para atualizar a navegação de paginação
+ const updatePagination = () => {
+ pageLinks.forEach(link => {
+ link.classList.remove('active');
+ if (parseInt(link.dataset.page) === currentPage) {
+ link.classList.add('active');
+ }
+ });
+ prevButton.style.display = currentPage === 1 ? 'none' : 'inline';
+ nextButton.style.display = currentPage === pageLinks.length ? 'none' : 'inline';
+ };
+
+ // Eventos de navegação
+ pageLinks.forEach(link => {
+ link.addEventListener('click', (e) => {
+ e.preventDefault();
+ currentPage = parseInt(link.dataset.page);
+ showPage(currentPage);
+ });
+ });
+
+ prevButton.addEventListener('click', (e) => {
+ e.preventDefault();
+ if (currentPage > 1) {
+ currentPage--;
+ showPage(currentPage);
+ }
+ });
+
+ nextButton.addEventListener('click', (e) => {
+ e.preventDefault();
+ if (currentPage < pageLinks.length) {
+ currentPage++;
+ showPage(currentPage);
+ }
+ });
+
+ // Mostrar a primeira página ao carregar
+ showPage(currentPage);
+});
diff --git a/src/script.js b/src/script.js
index 7dfcb0b..096f0d1 100644
--- a/src/script.js
+++ b/src/script.js
@@ -1,96 +1,75 @@
-const cardsPerPage = 3;
-const dataContainer = document.querySelector('.card-container');
-const pagination = document.getElementById('pagination');
-const prevButton = document.getElementById('prev');
-const nextButton = document.getElementById('next');
-const pageNumbers = document.getElementById('page-numbers');
-const pageLinks = document.querySelectorAll('.page-link');
-const cards = Array.from(dataContainer.querySelectorAll('.card'));
-const totalPages = Math.ceil(cards.length / cardsPerPage);
-let currentPage = 1;
+document.addEventListener("DOMContentLoaded", () => {
+ // Selecionar todos os botões "Ver Mais"
+ const btnMoreButtons = document.querySelectorAll('.btn-more');
+ // Selecionar todas as descrições completas
+ const fullDescriptions = document.querySelectorAll('.full-description');
+ // Selecionar todos os elementos "card"
+ const cards = document.querySelectorAll('.card');
+ // Selecionar elementos de paginação
+ const pageLinks = document.querySelectorAll('.page-link');
+ const prevButton = document.getElementById('prev');
+ const nextButton = document.getElementById('next');
+ const itemsPerPage = 3;
+ let currentPage = 1;
-function displayPage(page) {
- const startIndex = (page - 1) * cardsPerPage;
- const endIndex = page * cardsPerPage;
- cards.forEach((card, index) => {
- card.style.display = (index >= startIndex && index < endIndex) ? 'block' : 'none';
+ // Função para mostrar/esconder descrição completa
+ btnMoreButtons.forEach(button => {
+ button.addEventListener('click', () => {
+ const card = button.parentElement;
+ const fullDescription = card.querySelector('.full-description');
+ const isVisible = !fullDescription.classList.contains('hidden');
+ fullDescription.classList.toggle('hidden', isVisible);
+ button.textContent = isVisible ? 'Ver Mais' : 'Ver Menos';
+ });
});
-}
-function updatePagination() {
- pageNumbers.textContent = `Page ${currentPage} of ${totalPages}`;
- prevButton.disabled = currentPage === 1;
- nextButton.disabled = currentPage === totalPages;
+ // Função para exibir a página selecionada
+ const showPage = (page) => {
+ cards.forEach((card, index) => {
+ const start = (page - 1) * itemsPerPage;
+ const end = page * itemsPerPage;
+ card.style.display = (index >= start && index < end) ? 'block' : 'none';
+ });
+ updatePagination();
+ };
- // Remove a classe 'active' de todos os elementos da página
- pageLinks.forEach((link) => {
- link.classList.remove('active');
- });
-
- // Adiciona a classe 'active' ao link da página atual
- pageLinks[currentPage - 1].classList.add('active');
-}
-
-prevButton.addEventListener('click', () => {
- currentPage > 1 && displayPage(--currentPage) && updatePagination();
-});
+ // Função para atualizar a navegação de paginação
+ const updatePagination = () => {
+ pageLinks.forEach(link => {
+ link.classList.remove('active');
+ if (parseInt(link.dataset.page) === currentPage) {
+ link.classList.add('active');
+ }
+ });
+ prevButton.style.display = currentPage === 1 ? 'none' : 'inline';
+ nextButton.style.display = currentPage === pageLinks.length ? 'none' : 'inline';
+ };
-nextButton.addEventListener('click', () => {
- currentPage < totalPages && displayPage(++currentPage) && updatePagination();
-});
+ // Eventos de navegação
+ pageLinks.forEach(link => {
+ link.addEventListener('click', (e) => {
+ e.preventDefault();
+ currentPage = parseInt(link.dataset.page);
+ showPage(currentPage);
+ });
+ });
-pageLinks.forEach((link, index) => {
- link.addEventListener('click', (e) => {
+ prevButton.addEventListener('click', (e) => {
e.preventDefault();
- const page = index + 1;
- if (page !== currentPage) {
- displayPage(page);
- currentPage = page;
- updatePagination();
+ if (currentPage > 1) {
+ currentPage--;
+ showPage(currentPage);
}
});
-});
-
-function expandImage(card) {
- const img = card.querySelector('img');
- img.classList.add('expanded');
- setTimeout(() => {
- img.classList.remove('expanded');
- }, 2000); // Fechar após 2 segundos
-}
-cards.forEach((card) => {
- card.addEventListener('click', () => {
- expandImage(card);
-
- // Adiciona temporizador para fechar a imagem após 10 segundos
- setTimeout(() => {
- const img = card.querySelector('img');
- img.classList.remove('expanded');
- }, 10000); // Fechar após 10 segundos
+ nextButton.addEventListener('click', (e) => {
+ e.preventDefault();
+ if (currentPage < pageLinks.length) {
+ currentPage++;
+ showPage(currentPage);
+ }
});
- // Adiciona um evento de clique para cada botão "Ver Mais"
- card.querySelector('.btn-more').addEventListener('click', () => {
- const fullDescription = card.querySelector('.full-description');
-
- // Alternar a visibilidade da descrição completa
- fullDescription.classList.toggle('visible');
- });
+ // Mostrar a primeira página ao carregar
+ showPage(currentPage);
});
-
-// Adicionar a lógica fornecida para destacar a página atual na paginação
-function updatePagination() {
- // Remove a classe 'active' de todos os links de página
- pageLinks.forEach((link) => {
- link.classList.remove('active');
- });
-
- // Adiciona a classe 'active' ao link da página atual
- const currentPageLink = document.querySelector(`.page-link[data-page="${currentPage}"]`);
- currentPageLink.classList.add('active');
-}
-
-// Inicialize a paginação e a lógica de destaque da página atual
-updatePagination();
-displayPage(currentPage);
diff --git a/src/styles.css b/src/styles.css
index eda8dd3..1d6d994 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -1,8 +1,11 @@
body {
- font-family: Roboto, sans-serif;
+ font-family: 'Roboto', sans-serif;
margin: 0;
padding: 0;
background: linear-gradient(135deg, #000000f3, #000000fb);
+ display: flex;
+ flex-direction: column;
+ min-height: 100vh;
}
header {
@@ -13,95 +16,134 @@ header {
font-size: 24px;
font-weight: bold;
text-transform: uppercase;
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+ animation: fadeIn 1s ease-in-out;
+}
+
+
+
+.scrollable {
+ overflow-y: auto;
+ overflow-x: hidden;
+ max-height: 100vh;
+}
+
+::-webkit-scrollbar {
+ display: none;
+}
+
+html {
+ scrollbar-width: none;
}
+body {
+ -ms-overflow-style: none;
+}
+
+
.hidden {
display: none;
}
.data-container {
- max-width: 1200px;
- margin: 0 auto;
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
padding: 20px;
}
.card-container {
display: flex;
flex-wrap: wrap;
- justify-content: space-between;
gap: 20px;
+ justify-content: center;
+ max-width: 1200px;
+ margin: 0 auto;
}
.card {
- flex: 0 0 calc(33.33% - 20px);
+ flex: 1 1 calc(33.33% - 20px);
border: 1px solid #ddd;
border-radius: 10px;
- box-shadow: 0 2px 20px 0px rgba(0, 0, 0, 0.1);
+ box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
background-color: #fff;
text-align: center;
cursor: pointer;
- transition: transform 0.3s ease-in-out;
+ transition: transform 0.3s ease, box-shadow 0.3s ease;
+ overflow: hidden;
+ animation: cardFadeIn 1s ease-in-out;
}
.card:hover {
- transform: translateY(-5px);
+ transform: translateY(-10px);
+ box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
}
.card img {
- max-width: 100%;
+ width: 100%;
height: auto;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
+ transition: transform 0.3s ease;
+}
+
+.card img.expanded {
+ transform: scale(1.1);
}
.card h3 {
margin: 10px 0;
- font-size: 18px;
+ font-size: 22px;
text-transform: capitalize;
+ color: #333;
}
.card p {
- font-size: 14px;
- margin-bottom: 15px;
-}
-.card img.expanded {
- transform: scale(2.1); /* Aumenta o tamanho da imagem em 10% */
- transition: transform 0.3s ease-in-out; /* Adiciona uma transição suave */
+ font-size: 16px;
+ color: #666;
+ margin: 0 10px 15px;
}
.btn-more {
background-color: #050505;
color: white;
border: none;
- padding: 8px 16px;
- border-radius: 4px;
+ padding: 12px 24px;
+ border-radius: 5px;
cursor: pointer;
- transition: background-color 0.3s, color 0.3s;
+ transition: background-color 0.3s, color 0.3s, transform 0.3s;
+ font-size: 16px;
+ animation: buttonPulse 1.5s infinite;
}
.btn-more:hover {
background-color: #edf704;
color: #050505;
+ transform: scale(1.05);
}
.pagination {
text-align: center;
- margin-top: 2rem;
+ margin-top: 1rem;
+ animation: fadeIn 1s ease-in-out;
+ margin-bottom: 2rem;
}
.pagination a {
color: #edf704;
- padding: 8px 16px;
+ padding: 12px 24px;
text-decoration: none;
border: 1px solid #ffffff;
margin: 0 5px;
- border-radius: 4px;
+ border-radius: 5px;
transition: background-color 0.3s, color 0.3s;
+ font-size: 16px;
}
.pagination a:hover {
background-color: #edf704;
- color: rgb(0, 0, 0);
+ color: #050505;
}
.page-numbers {
@@ -111,9 +153,10 @@ header {
.page-numbers a {
margin: 0 5px;
}
+
.pagination a.active {
- background-color: #edf704; /* Cor de fundo para a página ativa */
- color: #050505; /* Cor do texto para a página ativa */
+ background-color: #edf704;
+ color: #050505;
}
.modal {
@@ -123,22 +166,274 @@ header {
transform: translate(-50%, -50%);
background-color: rgba(0, 0, 0, 0.8);
z-index: 9999;
- display: none;
+ display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
+ opacity: 0;
+ transition: opacity 0.3s ease;
+}
+
+.modal.show {
+ opacity: 1;
+ display: flex;
}
.modal img {
- max-width: 80%;
- max-height: 80%;
+ max-width: 90%;
+ max-height: 90%;
+ border-radius: 10px;
+ box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
+ animation: zoomIn 0.5s ease-in-out;
}
-/* Adicione esta classe para mostrar a descrição completa */
-.full-description.visible {
- display: block;
+
+.full-description {
+ max-width: 90%;
+ margin: 0 auto;
+ text-align: center;
+ padding: 20px;
+ background-color: #fff;
+ border-radius: 10px;
+ box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
+ transition: opacity 0.3s ease, transform 0.3s ease;
+ opacity: 0;
+ transform: translateY(20px);
}
.full-description.show {
- display: block;
+ opacity: 1;
+ transform: translateY(0);
+}
+
+/* Animações */
+@keyframes fadeIn {
+ from {
+ opacity: 0;
+ transform: translateY(20px);
+ }
+ to {
+ opacity: 1;
+ transform: translateY(0);
+ }
+}
+
+@keyframes cardFadeIn {
+ from {
+ opacity: 0;
+ transform: translateY(10px);
+ }
+ to {
+ opacity: 1;
+ transform: translateY(0);
+ }
+}
+
+@keyframes buttonPulse {
+ 0% {
+ transform: scale(1);
+ }
+ 50% {
+ transform: scale(1.1);
+ }
+ 100% {
+ transform: scale(1);
+ }
+}
+
+@keyframes zoomIn {
+ from {
+ transform: scale(0.8);
+ opacity: 0;
+ }
+ to {
+ transform: scale(1);
+ opacity: 1;
+ }
+}
+
+/* Responsividade */
+@media (max-width: 1200px) {
+ .card {
+ flex: 1 1 calc(50% - 20px);
+ }
+}
+
+@media (max-width: 768px) {
+ .card {
+ flex: 1 1 100%;
+ }
+
+ .btn-more {
+ padding: 10px 15px;
+ font-size: 14px;
+ }
+
+ .pagination a {
+ padding: 8px 12px;
+ font-size: 14px;
+ }
+}
+
+@media (max-width: 480px) {
+ header {
+ font-size: 20px;
+ }
+
+ .card h3 {
+ font-size: 18px;
+ }
+
+ .card p {
+ font-size: 14px;
+ }
+
+ .btn-more {
+ padding: 8px 12px;
+ font-size: 14px;
+ }
+
+ .pagination a {
+ padding: 6px 10px;
+ font-size: 14px;
+ }
+
+ .modal img {
+ max-width: 80%;
+ }
+
+ .full-description {
+ padding: 15px;
+ }
+}
+.zoomable {
+ cursor: pointer;
+ transition: transform 0.3s ease;
+}
+
+.zoomable.zoomed {
+ transform: scale(1.5);
+ z-index: 1000;
+}
+
+.modal {
+ position: fixed;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ background-color: rgba(0, 0, 0, 0.8);
+ z-index: 9999;
+ display: none;
+ justify-content: center;
+ align-items: center;
+ width: 100%;
+ height: 100%;
+ opacity: 0;
+ transition: opacity 0.3s ease;
+}
+
+.modal.show {
+ opacity: 1;
+ display: flex;
+}
+
+.modal img {
+ max-width: 90%;
+ max-height: 90%;
+ border-radius: 10px;
+ box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
+}
+
+.close-btn {
+ position: absolute;
+ top: 20px;
+ right: 20px;
+ background-color: white;
+ border: none;
+ border-radius: 50%;
+ padding: 10px;
+ cursor: pointer;
+ font-size: 20px;
+}
+.documentation-link {
+ text-decoration: none;
+ color: #edf704;
+ font-weight: bold;
+}
+
+.documentation-icon {
+ margin-left: 5px;
+ color: #007bff;
+ font-size: 16px;
+ vertical-align: middle;
+}
+
+.documentation-link:hover .documentation-icon {
+ color: #0056b3;
+}
+
+.documentation-link:hover {
+ text-decoration: underline;
+}
+
+.card {
+ border: 1px solid #ddd;
+ border-radius: 8px;
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+ padding: 15px;
+ margin: 10px;
+ background-color: #fff;
+ transition: box-shadow 0.3s ease;
+}
+
+.card:hover {
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+}
+
+.btn-more {
+
+ color: #fff;
+ border: none;
+ border-radius: 5px;
+ padding: 10px 15px;
+ cursor: pointer;
+ font-size: 16px;
+ margin-top: 10px;
+ transition: background-color 0.3s ease;
+}
+
+.btn-more:hover {
+ background-color: #0056b3;
+}
+
+.card-container {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: center;
+}
+strong {
+ font-weight: bold;
+ color: #000000;
+ font-size: 1.1em;
+ text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
+}
+
+.close-btn {
+ position: absolute;
+ top: 20px;
+ right: 20px;
+ background-color: #fff;
+ border: none;
+ border-radius: 50%;
+ padding: 10px;
+ cursor: pointer;
+ font-size: 24px;
+ color: #333;
+ transition: background-color 0.3s, color 0.3s;
+ z-index: 1000;
+}
+
+.close-btn:hover {
+ background-color: #ddd;
+ color: #000;
}