Skip to content

Commit

Permalink
commit inicial
Browse files Browse the repository at this point in the history
  • Loading branch information
@Sln-GR
Sln-GR authored Nov 4, 2024
0 parents commit 93a888b
Show file tree
Hide file tree
Showing 9 changed files with 588 additions and 0 deletions.
100 changes: 100 additions & 0 deletions a-cards.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,100 @@
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap - Cards</title>
<link rel="stylesheet" href="./lib/bootstrap.min.css">
<style>
.card-img-overlay {
background-color: rgba(0,0,0, 0.5);
}
</style>
</head>
<body>
<h1>Bootstrap - Cards</h1>
<div class="container">
<div class="row">
<div class="col-4">
<article class="card">
<header class="card-header">
Criando um card
</header>
<img src="https://via.placeholder.com/100x100" alt="">
<div class="card-body">
<h4 class="card-title">Cards do bootstrap</h4>
<p class="card-text">
Utilizando a semantica correta article, header e footer!
</p>
<a href="#" class="btn btn-primary">Leia mais</a>
</div>
<footer class="card-footer">
Postado em <time>02/11/2024</time>
</footer>
</article>
</div>
<div class="col-4">
<div class="card">
<img src="https://i.pinimg.com/originals/8e/0d/56/8e0d568f9f5c2ff9c1dbd9696f808a3f.jpg" alt="">
<div class="card-body">
<h4 class="card-title">Título do Card</h4>
<h5 class="card-subtitle">Subtítulo</h5>
<p class="card-text">
Adicionando uma imagem ao card!
</p>
<a href="#" class="btn btn-primary">Botão link</a>
</div>
</div>
</div>
<div class="col-4">
<div class="card text-bg-dark">
<div class="card-header">
Cabeçalho do header
</div>
<img src="https://via.placeholder.com/100x100" alt="">
<div class="card-body">
<h4 class="card-title">Título do Card</h4>
<h5 class="card-subtitle">Subtítulo</h5>
<p class="card-text">
No mundo profissional, poderiamos utilizar em um blog! Nesse card usamos a classe text-bg-dark também!
</p>
<a href="#" class="btn btn-primary">Botão link</a>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-4">
<div class="card text-bg-dark">
<img src="https://st2.depositphotos.com/6544740/9337/i/450/depositphotos_93376372-stock-photo-sunset-over-sea-pier.jpg" alt="">
<div class="card-img-overlay">
<h4 class="card-title">Título do Card</h4>
<h5 class="card-subtitle">Subtítulo</h5>
<p class="card-text">
Trocamos a classe card-body por card-img-overlay! + text-bg-dark para o texto ficar branco!
</p>
<p class="card-text">
Abrir uma tag style para melhorar a legibilidade,
.card-img-overlay { background-color: rgba (0,0,0, 0.7)}
</p>
<a href="#" class="btn btn-primary">Botão link</a>
</div>
</div>
</div>
<div class="container d-flex justify-content-end">
<div class="row">
<div class="col">
<div>
<button type="button" class="btn btn-warning ">
<a style="text-decoration: none; color: #fff;" href="./index.html">Voltar ao Index</a>
</button>
</div>
</div>
</div>
</div>
</div>


<script src="./lib/bootstrap.bundle.min.js"></script>
</body>
</html>
66 changes: 66 additions & 0 deletions b-carousel.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,66 @@
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Carousel</title>
<link rel="stylesheet" href="lib/bootstrap.min.css">

<style>
.carousel-item img {
height: 60vw;
}
</style>

</head>
<body>
<div class="container">
<div id="carousel-exemplo" class="carousel carousel-fade slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div data-bs-interval="3000" class="carousel-item active" >
<img class="d-block w-100" src="https://c.pxhere.com/photos/dd/b4/cat_face_eyes_portrait_face_cat_pet_mieze_kitten-393851.jpg!d">
<div class="carousel-caption">
<h2>Foto de um gato</h2>
</div>
</div>
<div data-bs-interval="3000" class="carousel-item">
<img class="d-block w-100" src="https://upload.wikimedia.org/wikipedia/commons/9/94/Gato_(2)_REFON.jpg">
<div class="carousel-caption">
<h2>Foto de um gato</h2>
</div>
</div>
<div data-bs-interval="3000" class="carousel-item">
<img class="d-block w-100" src="https://www.zooplus.pt/magazine/wp-content/uploads/2021/03/kitten-sitzt-boden-768x512-1.jpeg">
<div class="carousel-caption">
<h2>Foto de um gato</h2>
</div>
</div>
</div>
<button data-bs-target="#carousel-exemplo" data-bs-slide="prev" class="carousel-control-prev" type="button">
<span class="carousel-control-prev-icon"></span>
</button>
<button data-bs-target="#carousel-exemplo" data-bs-slide="next" class="carousel-control-next" type="button">
<span class="carousel-control-next-icon"></span>
</button>
<div class="carousel-indicators">
<button class="active" type="button" data-bs-target="#carousel-exemplo" data-bs-slide-to="0"></button>
<button type="button" data-bs-target="#carousel-exemplo" data-bs-slide-to="1"></button>
<button type="button" data-bs-target="#carousel-exemplo" data-bs-slide-to="2"></button>
</div>
</div>
</div>
<div class="container d-flex justify-content-end">
<div class="row">
<div class="col">
<div>
<button type="button" class="btn btn-warning ">
<a style="text-decoration: none; color: #fff;" href="./index.html">Voltar ao Index</a>
</button>
</div>
</div>
</div>
</div>

<script src="./lib/bootstrap.bundle.min.js"></script>
</body>
</html>
80 changes: 80 additions & 0 deletions c-modal-popup.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,80 @@
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Modal - Pop-up!</title>
<link rel="stylesheet" href="./lib/bootstrap.min.css">
</head>
<body>
<button class="btn btn-success" data-bs-toggle="modal" data-bs-target="#exemplo-modal">
Abri modal
</button>
<div id="exemplo-modal" class="modal">
<div class="modal-dialog">
<div class="modal-content"> <!--Divide-se em cabeçalho corpo e rodapé-->
<div class="modal-header">
<h5>Título da Modal</h5>
</div>
<div class="modal-body">
<p>
Esse é um parágrafo de um pop-up. Ele fecha ao clicar fora dele!
</p>
</div>
<div class="modal-footer">
<h5>Rodapé da modal</h5>
</div>
</div>
</div>
</div>

<button class="btn btn-success" data-bs-toggle="modal" data-bs-target="#exemplo-modal-static">
Abrir Modal Static
</button>
<div id="exemplo-modal-static" class="modal" data-bs-backdrop="static">
<div class="modal-dialog">
<div class="modal-content"> <!--Divide-se em cabeçalho corpo e rodapé-->
<div class="modal-header">
<h5>Título da Modal</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
<div class="modal-body">
<p>
Essa modal não fecha ao clicar fora dela! Clique no X
em cancelar ou confirmar!
</p>
</div>
<div class="modal-footer">
<button class="btn btn-danger" type="button" data-bs-dismiss="modal">Cancelar</button>
<button class="btn btn-success" type="button" data-bs-dismiss="modal">Confirmar</button>

</div>
</div>
</div>
</div>
<div class="container d-flex justify-content-center p-5">
<div class="row">
<div class="col">
<div>
<button type="button" class="btn btn-warning ">
<a style="text-decoration: none; color: #fff;" href="./index.html">Voltar ao Index</a>
</button>
</div>
</div>
</div>
</div>



<script src="./lib/bootstrap.bundle.min.js"></script>
<script> // Mostra a modal automaticamente depois que carrega toda a página
document.addEventListener('DOMContentLoaded', function() {
const modalExemplo = new bootstrap.Modal('#exemplo-modal')

setTimeout(function() {
modalExemplo.show()
}, 1000)
})
</script>
</body>
</html>
63 changes: 63 additions & 0 deletions d-dropdown-menu.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,63 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Menu Dropdown!</title>
<link rel="stylesheet" href="./lib/bootstrap.min.css">
</head>
<body>
<div class="container mt-3">
<div class="d-inline-block">
<div class="dropdown">
<button data-bs-toggle="dropdown" class="btn btn-primary dropdown-toggle">
Cadastrar
</button>
<ul class="dropdown-menu dropdown-menu-dark">
<li class="dropdown-item">
<a href="#">Novo usuário</a>
</li>
<li class="dropdown-item">
<a href="#">Novo fornecedor</a>
</li>
<li class="dropdown-item">
<a href="#">Novo funcionário</a>
</li>
</ul>
</div>
</div>
<div class="d-inline-block ml-2">
<div class="btn-group">
<button class="btn btn-primary">
Cadastrar
</button>
<button class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown"></button>
<ul class="dropdown-menu dropdown-menu-dark">
<li class="dropdown-item">
<a href="#">Novo usuário</a>
</li>
<li class="dropdown-item">
<a href="#">Novo fornecedor</a>
</li>
<li class="dropdown-item">
<a href="#">Novo funcionário</a>
</li>
</ul>
</div>
</div>
</div>
<div class="container d-flex justify-content-center p-5">
<div class="row">
<div class="col">
<div>
<button type="button" class="btn btn-warning ">
<a style="text-decoration: none; color: #fff;" href="./index.html">Voltar ao Index</a>
</button>
</div>
</div>
</div>
</div>

<script src="./lib/bootstrap.bundle.min.js"></script>
</body>
</html>
Loading

0 comments on commit 93a888b

Please sign in to comment.