Skip to content

Commit 894858e

Browse files
StructuralWizardStructuralWizard
committed
remove bootstrap
1 parent 54fa34d commit 894858e

File tree

1 file changed

+2
-331
lines changed

1 file changed

+2
-331
lines changed

‎docs/Day4/index.md‎

Lines changed: 2 additions & 331 deletions
Original file line numberDiff line numberDiff line change
@@ -1398,336 +1398,7 @@ You can visualise this code in [W3Schools html web testing](https://www.w3school
13981398
13991399
{% raw %}
14001400
```html
1401-
<!DOCTYPE html>
1402-
<html lang="pt-br">
1403-
<head>
1404-
<meta charset="UTF-8">
1405-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
1406-
<title>Mostruário de Bootstrap e Tailwind CSS</title>
1407-
<!-- Fonte Inter do Google Fonts -->
1408-
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
1409-
<!-- Bootstrap CSS -->
1410-
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
1411-
<!-- Tailwind CSS CDN -->
1412-
<script src="https://cdn.tailwindcss.com"></script>
1413-
<style>
1414-
body {
1415-
font-family: 'Inter', sans-serif;
1416-
background-color: #f8f9fa; /* Fundo cinza claro */
1417-
}
1418-
.section-header {
1419-
border-bottom: 2px solid #e0e0e0;
1420-
padding-bottom: 1rem;
1421-
margin-bottom: 2rem;
1422-
font-weight: 600;
1423-
color: #343a40;
1424-
}
1425-
.card {
1426-
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
1427-
border-radius: 0.75rem; /* Cantos mais arredondados */
1428-
overflow: hidden;
1429-
transition: transform 0.2s ease-in-out;
1430-
}
1431-
.card:hover {
1432-
transform: translateY(-5px);
1433-
}
1434-
.btn-custom {
1435-
background-image: linear-gradient(to right, #6a11cb 0%, #2575fc 100%);
1436-
border: none;
1437-
color: white;
1438-
padding: 0.75rem 1.5rem;
1439-
border-radius: 0.5rem;
1440-
transition: all 0.3s ease;
1441-
}
1442-
.btn-custom:hover {
1443-
transform: translateY(-2px);
1444-
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
1445-
color: white; /* Garante que o texto permaneça branco ao passar o mouse */
1446-
}
1447-
/* Estilos personalizados para melhor espaçamento e estética */
1448-
.container-fluid {
1449-
padding-left: 1rem;
1450-
padding-right: 1rem;
1451-
}
1452-
.container {
1453-
padding-top: 3rem;
1454-
padding-bottom: 3rem;
1455-
}
1456-
</style>
1457-
</head>
1458-
<body>
1459-
1460-
<!-- Seção da Barra de Navegação -->
1461-
<nav class="navbar navbar-expand-lg bg-white shadow-sm py-3 px-4">
1462-
<div class="container-fluid">
1463-
<a class="navbar-brand text-lg font-bold text-gray-800" href="#">Mostruário Bootstrap</a>
1464-
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
1465-
<span class="navbar-toggler-icon"></span>
1466-
</button>
1467-
<div class="collapse navbar-collapse" id="navbarNav">
1468-
<ul class="navbar-nav ms-auto space-x-4">
1469-
<li class="nav-item">
1470-
<a class="nav-link text-gray-700 hover:text-blue-600 font-medium" aria-current="page" href="#layout">Layout</a>
1471-
</li>
1472-
<li class="nav-item">
1473-
<a class="nav-link text-gray-700 hover:text-blue-600 font-medium" href="#components">Componentes</a>
1474-
</li>
1475-
<li class="nav-item">
1476-
<a class="nav-link text-gray-700 hover:text-blue-600 font-medium" href="#forms">Formulários</a>
1477-
</li>
1478-
<li class="nav-item">
1479-
<a class="nav-link text-gray-700 hover:text-blue-600 font-medium" href="#utilities">Utilitários</a>
1480-
</li>
1481-
</ul>
1482-
</div>
1483-
</div>
1484-
</nav>
1485-
1486-
<!-- Seção de Herói -->
1487-
<div class="bg-gradient-to-r from-blue-600 to-purple-700 text-white py-20 px-4 text-center rounded-b-lg shadow-lg">
1488-
<div class="container mx-auto">
1489-
<h1 class="text-5xl font-extrabold mb-4">Explore o Poder do Bootstrap</h1>
1490-
<p class="text-xl mb-8 opacity-90">Um template abrangente mostrando recursos essenciais do Bootstrap e design responsivo.</p>
1491-
<button class="btn btn-lg btn-custom shadow-md hover:shadow-xl">Começar</button>
1492-
</div>
1493-
</div>
1494-
1495-
<main class="container mx-auto mt-12 px-4 md:px-0">
1496-
1497-
<!-- Seção de Layout -->
1498-
<section id="layout" class="mb-12 bg-white p-6 rounded-lg shadow-md">
1499-
<h2 class="text-3xl section-header mb-8">1. Layout e Sistema de Grade</h2>
1500-
<div class="row g-4">
1501-
<div class="col-md-6 col-lg-4">
1502-
<div class="p-4 bg-blue-100 border border-blue-300 rounded-md text-blue-800 h-full flex items-center justify-center">
1503-
<p class="text-lg font-medium">Coluna 1 (col-md-6 col-lg-4)</p>
1504-
</div>
1505-
</div>
1506-
<div class="col-md-6 col-lg-4">
1507-
<div class="p-4 bg-green-100 border border-green-300 rounded-md text-green-800 h-full flex items-center justify-center">
1508-
<p class="text-lg font-medium">Coluna 2 (col-md-6 col-lg-4)</p>
1509-
</div>
1510-
</div>
1511-
<div class="col-md-6 col-lg-4">
1512-
<div class="p-4 bg-yellow-100 border border-yellow-300 rounded-md text-yellow-800 h-full flex items-center justify-center">
1513-
<p class="text-lg font-medium">Coluna 3 (col-md-6 col-lg-4)</p>
1514-
</div>
1515-
</div>
1516-
<div class="col-md-12">
1517-
<div class="p-4 bg-purple-100 border border-purple-300 rounded-md text-purple-800 h-full flex items-center justify-center">
1518-
<p class="text-lg font-medium">Coluna de Largura Total (col-md-12)</p>
1519-
</div>
1520-
</div>
1521-
</div>
1522-
<p class="mt-6 text-gray-700">Demonstra o sistema de grade responsivo do Bootstrap, adaptando colunas para diferentes tamanhos de tela.</p>
1523-
</section>
1524-
1525-
<!-- Seção de Componentes -->
1526-
<section id="components" class="mb-12 bg-white p-6 rounded-lg shadow-md">
1527-
<h2 class="text-3xl section-header mb-8">2. Componentes Principais</h2>
1528-
1529-
<!-- Cards -->
1530-
<h3 class="text-2xl font-semibold mb-4 text-gray-800">2.1 Cards</h3>
1531-
<div class="row g-4 mb-8">
1532-
<div class="col-md-6 col-lg-4">
1533-
<div class="card h-full">
1534-
<img src="https://placehold.co/600x400/FF5733/ffffff?text=Imagem+1" class="card-img-top w-full h-48 object-cover" alt="Imagem do Card 1">
1535-
<div class="card-body">
1536-
<h5 class="card-title text-xl font-semibold mb-2">Título do Card Um</h5>
1537-
<p class="card-text text-gray-700">Texto de exemplo rápido para construir sobre o título do card e compor a maior parte do conteúdo do card.</p>
1538-
<a href="#" class="btn btn-primary bg-blue-500 hover:bg-blue-600 border-none rounded-md px-4 py-2">Ir para algum lugar</a>
1539-
</div>
1540-
</div>
1541-
</div>
1542-
<div class="col-md-6 col-lg-4">
1543-
<div class="card h-full">
1544-
<img src="https://placehold.co/600x400/33FF57/ffffff?text=Imagem+2" class="card-img-top w-full h-48 object-cover" alt="Imagem do Card 2">
1545-
<div class="card-body">
1546-
<h5 class="card-title text-xl font-semibold mb-2">Título do Card Dois</h5>
1547-
<p class="card-text text-gray-700">Outro exemplo de card com um conteúdo um pouco mais longo para mostrar a consistência da altura do card.</p>
1548-
<a href="#" class="btn btn-success bg-green-500 hover:bg-green-600 border-none rounded-md px-4 py-2">Saiba mais</a>
1549-
</div>
1550-
</div>
1551-
</div>
1552-
<div class="col-md-6 col-lg-4">
1553-
<div class="card h-full">
1554-
<img src="https://placehold.co/600x400/5733FF/ffffff?text=Imagem+3" class="card-img-top w-full h-48 object-cover" alt="Imagem do Card 3">
1555-
<div class="card-body">
1556-
<h5 class="card-title text-xl font-semibold mb-2">Título do Card Três</h5>
1557-
<p class="card-text text-gray-700">Este card demonstra uma imagem no topo e conteúdo de corpo padrão.</p>
1558-
<a href="#" class="btn btn-warning bg-yellow-500 hover:bg-yellow-600 border-none rounded-md px-4 py-2">Ver detalhes</a>
1559-
</div>
1560-
</div>
1561-
</div>
1562-
</div>
1563-
1564-
<!-- Botões -->
1565-
<h3 class="text-2xl font-semibold mb-4 text-gray-800">2.2 Botões</h3>
1566-
<div class="flex flex-wrap gap-3 mb-8 items-center">
1567-
<button type="button" class="btn btn-primary rounded-lg px-4 py-2 shadow-md">Primário</button>
1568-
<button type="button" class="btn btn-secondary rounded-lg px-4 py-2 shadow-md">Secundário</button>
1569-
<button type="button" class="btn btn-success rounded-lg px-4 py-2 shadow-md">Sucesso</button>
1570-
<button type="button" class="btn btn-danger rounded-lg px-4 py-2 shadow-md">Perigo</button>
1571-
<button type="button" class="btn btn-warning rounded-lg px-4 py-2 shadow-md">Aviso</button>
1572-
<button type="button" class="btn btn-info rounded-lg px-4 py-2 shadow-md">Info</button>
1573-
<button type="button" class="btn btn-light rounded-lg px-4 py-2 shadow-md">Claro</button>
1574-
<button type="button" class="btn btn-dark rounded-lg px-4 py-2 shadow-md">Escuro</button>
1575-
<button type="button" class="btn btn-link rounded-lg px-4 py-2">Link</button>
1576-
<button type="button" class="btn btn-outline-primary rounded-lg px-4 py-2">Contorno Primário</button>
1577-
<button type="button" class="btn btn-custom rounded-lg px-4 py-2">Gradiente Personalizado</button>
1578-
</div>
1579-
1580-
<!-- Alertas -->
1581-
<h3 class="text-2xl font-semibold mb-4 text-gray-800">2.3 Alertas</h3>
1582-
<div class="mb-8 space-y-3">
1583-
<div class="alert alert-primary rounded-lg p-3" role="alert">
1584-
Um alerta primário simples—confira!
1585-
</div>
1586-
<div class="alert alert-secondary rounded-lg p-3" role="alert">
1587-
Um alerta secundário simples—confira!
1588-
</div>
1589-
<div class="alert alert-success rounded-lg p-3" role="alert">
1590-
Um alerta de sucesso simples—confira!
1591-
</div>
1592-
<div class="alert alert-danger rounded-lg p-3" role="alert">
1593-
Um alerta de perigo simples—confira!
1594-
</div>
1595-
<div class="alert alert-warning rounded-lg p-3" role="alert">
1596-
Um alerta de aviso simples—confira!
1597-
</div>
1598-
<div class="alert alert-info rounded-lg p-3" role="alert">
1599-
Um alerta de informação simples—confira!
1600-
</div>
1601-
</div>
1602-
1603-
<!-- Modais -->
1604-
<h3 class="text-2xl font-semibold mb-4 text-gray-800">2.4 Modais</h3>
1605-
<button type="button" class="btn btn-primary rounded-lg px-4 py-2 shadow-md" data-bs-toggle="modal" data-bs-target="#exampleModal">
1606-
Lançar modal de demonstração
1607-
</button>
1608-
1609-
<!-- Estrutura do Modal -->
1610-
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
1611-
<div class="modal-dialog rounded-lg">
1612-
<div class="modal-content rounded-lg shadow-lg">
1613-
<div class="modal-header border-b border-gray-200">
1614-
<h5 class="modal-title text-xl font-semibold" id="exampleModalLabel">Título do modal</h5>
1615-
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
1616-
</div>
1617-
<div class="modal-body text-gray-700">
1618-
Este é um exemplo de conteúdo de modal. Você pode colocar qualquer conteúdo HTML aqui, como formulários, imagens ou texto.
1619-
</div>
1620-
<div class="modal-footer border-t border-gray-200">
1621-
<button type="button" class="btn btn-secondary rounded-lg px-4 py-2" data-bs-dismiss="modal">Fechar</button>
1622-
<button type="button" class="btn btn-primary rounded-lg px-4 py-2">Salvar alterações</button>
1623-
</div>
1624-
</div>
1625-
</div>
1626-
</div>
1627-
</section>
1628-
1629-
<!-- Seção de Formulários -->
1630-
<section id="forms" class="mb-12 bg-white p-6 rounded-lg shadow-md">
1631-
<h2 class="text-3xl section-header mb-8">3. Formulários</h2>
1632-
<form>
1633-
<div class="mb-4">
1634-
<label for="exampleInputEmail1" class="form-label text-gray-700 font-medium">Endereço de email</label>
1635-
<input type="email" class="form-control rounded-md p-2 border border-gray-300 focus:ring focus:ring-blue-200" id="exampleInputEmail1" aria-describedby="emailHelp">
1636-
<div id="emailHelp" class="form-text text-sm text-gray-500 mt-1">Nós nunca compartilharemos seu email com ninguém.</div>
1637-
</div>
1638-
<div class="mb-4">
1639-
<label for="exampleInputPassword1" class="form-label text-gray-700 font-medium">Senha</label>
1640-
<input type="password" class="form-control rounded-md p-2 border border-gray-300 focus:ring focus:ring-blue-200" id="exampleInputPassword1">
1641-
</div>
1642-
<div class="mb-4 form-check">
1643-
<input type="checkbox" class="form-check-input rounded-sm" id="exampleCheck1">
1644-
<label class="form-check-label text-gray-700" for="exampleCheck1">Me marque</label>
1645-
</div>
1646-
<div class="mb-4">
1647-
<label for="formControlTextarea1" class="form-label text-gray-700 font-medium">Exemplo de área de texto</label>
1648-
<textarea class="form-control rounded-md p-2 border border-gray-300 focus:ring focus:ring-blue-200" id="formControlTextarea1" rows="3"></textarea>
1649-
</div>
1650-
<div class="mb-4">
1651-
<label for="formFile" class="form-label text-gray-700 font-medium">Exemplo de entrada de arquivo padrão</label>
1652-
<input class="form-control rounded-md p-2 border border-gray-300 focus:ring focus:ring-blue-200" type="file" id="formFile">
1653-
</div>
1654-
<div class="mb-4">
1655-
<label for="formSelect" class="form-label text-gray-700 font-medium">Opção de seleção</label>
1656-
<select class="form-select rounded-md p-2 border border-gray-300 focus:ring focus:ring-blue-200" aria-label="Default select example" id="formSelect">
1657-
<option selected>Abra este menu de seleção</option>
1658-
<option value="1">Um</option>
1659-
<option value="2">Dois</option>
1660-
<option value="3">Três</option>
1661-
</select>
1662-
</div>
1663-
<button type="submit" class="btn btn-primary rounded-lg px-4 py-2 shadow-md">Enviar</button>
1664-
</form>
1665-
</section>
1666-
1667-
<!-- Seção de Utilitários -->
1668-
<section id="utilities" class="mb-12 bg-white p-6 rounded-lg shadow-md">
1669-
<h2 class="text-3xl section-header mb-8">4. Classes Utilitárias</h2>
1670-
1671-
<!-- Tipografia -->
1672-
<h3 class="text-2xl font-semibold mb-4 text-gray-800">4.1 Tipografia</h3>
1673-
<p class="h1 text-blue-700 mb-2">h1. Título Bootstrap</p>
1674-
<p class="h2 text-green-700 mb-2">h2. Título Bootstrap</p>
1675-
<p class="h3 text-purple-700 mb-2">h3. Título Bootstrap</p>
1676-
<p class="lead text-lg text-gray-700 mb-2">Este é um parágrafo de destaque, indicando um elemento de texto mais proeminente.</p>
1677-
<p class="text-muted text-gray-500 mb-2">Este texto está silenciado.</p>
1678-
<p class="font-bold mb-2">Este texto está em negrito usando o font-bold do Tailwind.</p>
1679-
<p class="text-decoration-underline mb-8">Este texto está sublinhado.</p>
1680-
1681-
<!-- Espaçamento (Margem e Preenchimento) -->
1682-
<h3 class="text-2xl font-semibold mb-4 text-gray-800">4.2 Espaçamento</h3>
1683-
<div class="bg-blue-100 p-4 mb-4 rounded-md">
1684-
<div class="bg-blue-300 p-2 m-4 rounded-md">
1685-
<p class="text-blue-900">Esta div tem margem `m-4` do Tailwind.</p>
1686-
</div>
1687-
</div>
1688-
<div class="bg-green-100 p-4 mb-8 rounded-md">
1689-
<div class="bg-green-300 py-3 px-5 rounded-md">
1690-
<p class="text-green-900">Esta div tem preenchimento `py-3 px-5` do Tailwind.</p>
1691-
</div>
1692-
</div>
1693-
1694-
<!-- Cores -->
1695-
<h3 class="text-2xl font-semibold mb-4 text-gray-800">4.3 Cores</h3>
1696-
<div class="flex flex-wrap gap-4 mb-8">
1697-
<div class="p-4 rounded-md text-white bg-primary shadow-md">Cor Primária</div>
1698-
<div class="p-4 rounded-md text-white bg-secondary shadow-md">Cor Secundária</div>
1699-
<div class="p-4 rounded-md text-white bg-success shadow-md">Cor de Sucesso</div>
1700-
<div class="p-4 rounded-md text-white bg-danger shadow-md">Cor de Perigo</div>
1701-
<div class="p-4 rounded-md text-dark bg-warning shadow-md">Cor de Aviso</div>
1702-
<div class="p-4 rounded-md text-white bg-info shadow-md">Cor de Informação</div>
1703-
<div class="p-4 rounded-md text-dark bg-light shadow-md border">Cor Clara</div>
1704-
<div class="p-4 rounded-md text-white bg-dark shadow-md">Cor Escura</div>
1705-
<div class="p-4 rounded-md text-white bg-gradient-to-r from-pink-500 to-red-500 shadow-md">Gradiente Personalizado</div>
1706-
</div>
1707-
1708-
<!-- Sombras -->
1709-
<h3 class="text-2xl font-semibold mb-4 text-gray-800">4.4 Sombras</h3>
1710-
<div class="flex flex-wrap gap-6 mb-8">
1711-
<div class="p-6 bg-white rounded-lg shadow-sm">Sombra Pequena</div>
1712-
<div class="p-6 bg-white rounded-lg shadow-md">Sombra Média</div>
1713-
<div class="p-6 bg-white rounded-lg shadow-lg">Sombra Grande</div>
1714-
<div class="p-6 bg-white rounded-lg shadow-xl">Sombra Extra Grande</div>
1715-
<div class="p-6 bg-white rounded-lg shadow-2xl">Sombra 2XL</div>
1716-
</div>
1717-
</section>
1718-
1719-
</main>
1720-
1721-
<!-- Rodapé -->
1722-
<footer class="bg-gray-800 text-white text-center py-8 mt-12 rounded-t-lg shadow-inner">
1723-
<p class="text-sm">&copy; 2024 Mostruário Bootstrap. Todos os direitos reservados.</p>
1724-
<p class="text-xs opacity-75 mt-2">Construído com Bootstrap e Tailwind CSS</p>
1725-
</footer>
1726-
1727-
<!-- Pacote JavaScript do Bootstrap -->
1728-
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
1729-
</body>
1730-
</html>
1401+
placeholder
17311402
```
17321403
{% raw %}
17331404
</details>
@@ -1745,7 +1416,7 @@ placeholder
17451416
</details>
17461417
17471418
1748-
## Markdown, Jekyll e Ruby<a href="#top" class="back-to-top-link" aria-label="Back to Top">↑</a>
1419+
## 📝Markdown, 👻Jekyll e 💎Ruby<a href="#top" class="back-to-top-link" aria-label="Back to Top">↑</a>
17491420
17501421
### O que é Markdown?
17511422

0 commit comments

Comments
 (0)