Skip to content
This repository has been archived by the owner on May 15, 2022. It is now read-only.

Commit

Permalink
Feito Ex 4
Browse files Browse the repository at this point in the history
  • Loading branch information
@gmarcon83
gmarcon83 committed Apr 12, 2021
1 parent cd25b96 commit 33da1aa
Show file tree
Hide file tree
Showing 8 changed files with 267 additions and 6 deletions.
137 changes: 132 additions & 5 deletions Dia 52 - Bootstrap - Navbar, cards e carrosel/D52E3 - Carrousel/D52E3 - Carrosel.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,17 +27,144 @@
<div class="col-sm-8 m-auto">
<!--col-sm8 -->

<h1>Slider simples</h1>
<div class="carouse slide" data-ride="carousel"></div>
<h1>Slider sem controles</h1>
<div class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="img-fluid" src="img/imagem1.jpeg" alt="Imagem 1">
</div>
<div class="carousel-item">
<img class="img-fluid" src="img/imagem2.jpeg" alt="Imagem 1">
</div>
<div class="carousel-item">
<img class="img-fluid" src="img/imagem3.jpeg" alt="Imagem 1">
</div>
<div class="carousel-item">
<img class="img-fluid" src="img/imagem4.jpeg" alt="Imagem 1">
</div>
<div class="carousel-item">
<img class="img-fluid" src="img/imagem5.jpeg" alt="Imagem 1">
</div>
</div>
</div>

<h1>Slider com controles</h1>

<div id="carrossel-2" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="img-fluid" src="img/imagem1.jpeg" alt="Imagem 1">
</div>
<div class="carousel-item">
<img class="img-fluid" src="img/imagem2.jpeg" alt="Imagem 1">
</div>
<div class="carousel-item">
<img class="img-fluid" src="img/imagem3.jpeg" alt="Imagem 1">
</div>
<div class="carousel-item">
<img class="img-fluid" src="img/imagem4.jpeg" alt="Imagem 1">
</div>
<div class="carousel-item">
<img class="img-fluid" src="img/imagem5.jpeg" alt="Imagem 1">
</div>
</div>
<!-- Controles Slider -->
<a href="#carrossel-2" class="carousel-control-prev" data-slide="prev"><span
class="carousel-control-prev-icon" aria-hidden="true"></span></a>
<a href="#carrossel-2" class="carousel-control-next" data-slide="next"><span
class="carousel-control-next-icon" aria-hidden="true"></span></a>
</div>

<h1>Slider com controles/indicadores</h1>

<div id="carrossel-3" class="carousel slide" data-ride="carousel">
<!-- Indicadores -->
<ol class="carousel-indicators">
<li data-target="carrossel-3" data-slide-to="0"></li>
<li data-target="carrossel-3" data-slide-to="1"></li>
<li data-target="carrossel-3" data-slide-to="2"></li>
<li data-target="carrossel-3" data-slide-to="3"></li>
<li data-target="carrossel-3" data-slide-to="4"></li>
</ol>

<!-- Inner -->
<div class="carousel-inner">
<div class="carousel-item active">
<img class="img-fluid" src="img/imagem1.jpeg" alt="Imagem 1">
</div>
<div class="carousel-item">
<img class="img-fluid" src="img/imagem2.jpeg" alt="Imagem 1">
</div>
<div class="carousel-item">
<img class="img-fluid" src="img/imagem3.jpeg" alt="Imagem 1">
</div>
<div class="carousel-item">
<img class="img-fluid" src="img/imagem4.jpeg" alt="Imagem 1">
</div>
<div class="carousel-item">
<img class="img-fluid" src="img/imagem5.jpeg" alt="Imagem 1">
</div>
</div>
<!-- Controles Slider -->
<a href="#carrossel-3" class="carousel-control-prev" data-slide="prev"><span
class="carousel-control-prev-icon" aria-hidden="true"></span></a>
<a href="#carrossel-3" class="carousel-control-next" data-slide="next"><span
class="carousel-control-next-icon" aria-hidden="true"></span></a>
</div>

<h1>Slider com legendas</h1>

<div id="carrossel-4" class="carousel slide" data-ride="carousel">
<!-- Indicadores -->
<ol class="carousel-indicators">
<li data-target="carrossel-4" data-slide-to="0"></li>
<li data-target="carrossel-4" data-slide-to="1"></li>
<li data-target="carrossel-4" data-slide-to="2"></li>
<li data-target="carrossel-4" data-slide-to="3"></li>
<li data-target="carrossel-4" data-slide-to="4"></li>
</ol>

<!-- Inner -->
<div class="carousel-inner">
<div class="carousel-item active">
<img class="img-fluid" src="img/imagem1.jpeg" alt="Imagem 1">
<div class="carousel-caption">
<h2>Um Título</h2>
<p>Uma legenda para a imagem 1</p>
</div>
</div>
<div class="carousel-item">
<img class="img-fluid" src="img/imagem2.jpeg" alt="Imagem 1">
<div class="carousel-caption">
<h2>Um Título</h2>
<p>Uma legenda para a imagem 2</p>
</div>
</div>
<div class="carousel-item">
<img class="img-fluid" src="img/imagem3.jpeg" alt="Imagem 1">
<div class="carousel-caption">
<h2>Um Título</h2>
<p>Uma legenda para a imagem 3</p>
</div>
</div>
<div class="carousel-item">
<img class="img-fluid" src="img/imagem4.jpeg" alt="Imagem 1">
<div class="carousel-caption">
<h2>Um Título</h2>
<p>Uma legenda para a imagem 4</p>
</div>
</div>
<div class="carousel-item">
<img class="img-fluid" src="img/imagem5.jpeg" alt="Imagem 1">
<div class="carousel-caption">
<h2>Um Título</h2>
<p>Uma legenda para a imagem 5</p>
</div>
</div>
</div>
<!-- Controles Slider -->
<a href="#carrossel-4" class="carousel-control-prev" data-slide="prev"><span
class="carousel-control-prev-icon" aria-hidden="true"></span></a>
<a href="#carrossel-4" class="carousel-control-next" data-slide="next"><span
class="carousel-control-next-icon" aria-hidden="true"></span></a>
</div>

</div>
<!--/col-sm8 -->
Expand Down
134 changes: 134 additions & 0 deletions Dia 52 - Bootstrap - Navbar, cards e carrosel/D52E4 - EX Dia/D52E4 - ExFinal.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,134 @@
<!DOCTYPE html>
<html lang=pt-br>

<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<meta name='viewport' content='width=device-width, initial-scale=1, shrink-to-fit=no'>
<meta name="Author" content="Giovanni Marcon">

<title>Cards</title>

<!-- CDN CSS Bootstrap -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">

<!-- CDN jQuery -->
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.6.0.slim.js"></script>

</head>

<body>
<header style="background-color: #e3f2fd; height: 60px;">
<nav class="navbar navbar-expand-lg navbar-light container">
<a class="navbar-brand" href="#">Imocentro</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown"
aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Imóveis</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Condições</a>
</li>
</ul>
</div>
</nav>
</header>

<main class="container mt-4" style="min-height: calc(100vh - 154px);">
<!--Container -->
<div class="row">
<!--Row -->
<div class="col-sm-8 m-auto">
<!--col-sm8 -->

<h1 class="lead">Conheça nossos imoveis!</h1>
<div id="carrossel-4" class="carousel slide" data-ride="carousel">
<!-- Indicadores -->
<ol class="carousel-indicators">
<li data-target="carrossel-4" data-slide-to="0"></li>
<li data-target="carrossel-4" data-slide-to="1"></li>
<li data-target="carrossel-4" data-slide-to="2"></li>
<li data-target="carrossel-4" data-slide-to="3"></li>
<li data-target="carrossel-4" data-slide-to="4"></li>
</ol>

<!-- Inner -->
<div class="carousel-inner">
<div class="carousel-item active">
<img class="img-fluid" src="img/imagem1.jpeg" alt="Imagem 1">
<div class="carousel-caption">
<h2>Um Título</h2>
<p>Uma legenda para a imagem 1</p>
</div>
</div>
<div class="carousel-item">
<img class="img-fluid" src="img/imagem2.jpeg" alt="Imagem 1">
<div class="carousel-caption">
<h2>Um Título</h2>
<p>Uma legenda para a imagem 2</p>
</div>
</div>
<div class="carousel-item">
<img class="img-fluid" src="img/imagem3.jpeg" alt="Imagem 1">
<div class="carousel-caption">
<h2>Um Título</h2>
<p>Uma legenda para a imagem 3</p>
</div>
</div>
<div class="carousel-item">
<img class="img-fluid" src="img/imagem4.jpeg" alt="Imagem 1">
<div class="carousel-caption">
<h2>Um Título</h2>
<p>Uma legenda para a imagem 4</p>
</div>
</div>
<div class="carousel-item">
<img class="img-fluid" src="img/imagem5.jpeg" alt="Imagem 1">
<div class="carousel-caption">
<h2>Um Título</h2>
<p>Uma legenda para a imagem 5</p>
</div>
</div>
</div>
<!-- Controles Slider -->
<a href="#carrossel-4" class="carousel-control-prev" data-slide="prev"><span
class="carousel-control-prev-icon" aria-hidden="true"></span></a>
<a href="#carrossel-4" class="carousel-control-next" data-slide="next"><span
class="carousel-control-next-icon" aria-hidden="true"></span></a>
</div>

</div>
<!--/col-sm8 -->
</div>
<!--/Row -->
</main>

<footer style="background-color: #e3f2fd; height: 70px;">
<div class="container pt-3 d-flex justify-content-center">
<form class="form-inline">
<div class="input-group mr-sm-2">
<input class="form-control" type="text" placeholder="E-mail">
<div class="input-group-append">
<button class="btn btn-primary" type="submit">Cadastrar</button>
</div>
</div>

</form>
</div>
</footer>

<!-- CDN JS Bootstrap -->
<script src=" https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous">
</script>
</body>

</html>
Binary file added Dia 52 - Bootstrap - Navbar, cards e carrosel/D52E4 - EX Dia/img/imagem1.jpeg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added Dia 52 - Bootstrap - Navbar, cards e carrosel/D52E4 - EX Dia/img/imagem2.jpeg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added Dia 52 - Bootstrap - Navbar, cards e carrosel/D52E4 - EX Dia/img/imagem3.jpeg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added Dia 52 - Bootstrap - Navbar, cards e carrosel/D52E4 - EX Dia/img/imagem4.jpeg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added Dia 52 - Bootstrap - Navbar, cards e carrosel/D52E4 - EX Dia/img/imagem5.jpeg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion _Bootstrap - Texto.txt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ Alinhamento vertical
Headings

.h1 até .h6 => A mesma formatação dos headings, mas sem semântica;
.display-1 até .display-6 => Um cabeçalho com mais destaque
.display-1 até .display-4 => Um cabeçalho com mais destaque


Estilos
Expand Down

0 comments on commit 33da1aa

Please sign in to comment.