Template
Clique no player e confira o vídeo de introdução.
Nesta etapa, você deverá resolver o desafio 1:
Para isso, você estudará os seguintes conteúdos:
Siga em frente e bons estudos!
O conteúdo é exibido em janela “Modal”. Dentro do “Modal” é possível incluir textos, imagens, ícones, gráficos, etc. com uso moderado. Os modais são posicionados acima de todos os elementos do documento e remove a rolagem do plano de fundo da página.
<div class="col-md-6">
<div id="highlight-img" class="highlight-dark" name="highlight-img">
<a href="#" id="item-spot1" class="highlight-spot" style="width: 25%; height: 38%;"
data-bs-toggle="modal" data-bs-target="#exampleModal-1"></a>
<a href="#" id="item-spot2" class="highlight-spot" style="width: 17%; height: 26%;"
data-bs-toggle="modal" data-bs-target="#exampleModal-2"></a>
<img src="libs/img/aula-1/10.png" class="img-fluid" alt="">
</div>
</div>
<div class="modal fade" id="exampleModal-1" tabindex="-1" aria-labelledby="exampleModalLabel"
aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Título</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Fechar</button>
</div>
</div>
</div>
</div>
Sed aliquet tellus in imperdiet commodo. Aenean consequat tellus vitae arcu laoreet interdum tooltip volutpat urna in tellus pulvinar, quis tooltip. Sed aliquet tellus in imperdiet commodo. Aenean consequat tellus vitae arcu laoreet interdum. Nam eleifend, metus sed viverra convallis, magna risus tolltip sollicitudin orci, at vehicula Tooltip ligula velit commodo enim.
<div class="col-md-6 content">
<div class="row align-items-center">
<div class="col-md-10">
<h3>Recurso</h3>
<h1>Texto/Tooltips</h1>
</div>
<p>Sed aliquet tellus in imperdiet commodo. Aenean consequat tellus vitae arcu laoreet
interdum <a href="#/" data-bs-toggle="tooltip" title=""
data-bs-original-title="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
style="white-space: nowrap;">tooltip</a> volutpat urna in tellus pulvinar, quis
<a href="#/" data-bs-toggle="tooltip" title=""
data-bs-original-title="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
rel="tooltip" style="white-space: nowrap;">tooltip</a>. Sed aliquet tellus in
imperdiet commodo.
Aenean consequat tellus vitae arcu laoreet interdum. Nam eleifend, metus sed viverra
convallis, magna risus <a href="#/" data-bs-toggle="popover"
data-bs-trigger="hover focus" title="Titulo" data-bs-placement="top"
data-bs-content="Texto. Lorem ipsum dolor sit amet, sed do adipiscing elit ut labore et dolore magna
aliqua.">tolltip</a>
sollicitudin orci, at vehicula <a href="#/" data-bs-toggle="popover"
data-bs-html="true" data-bs-trigger="hover focus" data-bs-placement="top"
data-bs-content="<img class='img-fluid' src='libs/img/_template/gifs/OneDrive.gif'>">Tooltip</a>
ligula velit commodo enim.
</p>
<div class="text-center text-lg-start">
<span class="d-inline-block" tabindex="0" data-bs-toggle="popover"
data-bs-trigger="hover focus"
data-bs-content="Lorem ipsum dolor sit amet, consectetur adipiscing elit.">
<a
class="btn-read-more d-inline-flex align-items-center justify-content-center align-self-center
clickable"><span>Tooltip</span><i
class="bi bi-arrow-right"></i></a>
</span>
</div>
</div>
</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non dolor sagittis, lobortis tortor tincidunt, fermentum sem. Etiam commodo, id dignissim ex dictum eget. Proin luctus arcu sit amet nisi mollis tincidunt. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sed lacus lobortis, sagittis nisi sit amet, hendrerit orci.
<div class="col-md-6">
<a class="imghvr-fade click-zoom" data-fancybox data-caption=""
href="libs/img/aula-1/6.png"><img id="slider-img" src="libs/img/aula-1/6.png" alt=""
class="img-fluid">
<figcaption><i class="bi bi-zoom-in zoom-dance zoom"></i></figcaption>
</a>
</div>
texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto
<div class="jarallax">
<img class="jarallax-img" src="libs/img/_template/parallax/parallax-1.jpg" alt="">
<div class="demo-table">
<div class="demo-table-cell">
<h1>Recurso
Parallax</h1>
<div class="col-md-5 content
center">
<p>
texto texto texto texto texto texto texto texto texto texto texto texto texto texto
texto texto
</p>
</div>
</div>
</div>
</div>
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur?
<div
class="col-xl-5 col-md-6 video-box d-flex justify-content-center
align-items-stretch position-relative">
<img src="/libs/img/aula-1/16.jpg" class="img-fluid">
</div>
<div class="row col-md-12
vertab-container">
<div class="col-lg-3
col-md-3 col-sm-3 vertab-menu">
<div class="list-group">
<a href="#" class="list-group-item text-left"> Tab 1 </a>
<a href="#" class="list-group-item text-left"> Tab 2 </a>
<a href="#" class="list-group-item text-left"> Tab 3 </a>
<a href="#" class="list-group-item text-left"> Tab 4 </a>
<a href="#" class="list-group-item text-left"> Tab 5 </a>
</div>
</div>
<div id="accordion" class="col-lg-9
col-md-9 col-sm-9 col-xs-12 vertab-accordion panel-group">
<div class="vertab-content">
<div class="panel-heading">
<h4 class="panel-title" data-bs-toggle="collapse" data-bs-parent="#accordion"
data-bs-target="#collapse1">
<span>Tab 1</span>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse">
<div class="panel-body">
<div class="row
align-items-center">
<div class="col-md-8">
<span>In vitae nulla nibh. Integer maximus rhoncus erat, in fermentum
lectus malesuada quis. Nulla leo magna, consequat et pretium non,
tristique ut justo. Ut in ullamcorper tortor. Duis dignissim
nisi
non auctor sagittis. Morbi eget nisl non sem scelerisque commodo et
sit amet nulla. Suspendisse viverra faucibus ultricies. Praesent
augue mi, congue ut mattis eu, interdum ut massa.</span>
<span>In vitae nulla nibh. Integer maximus rhoncus erat, in fermentum
lectus malesuada quis. Nulla leo magna, consequat et pretium non,
tristique ut justo. Ut in ullamcorper tortor. Duis dignissim
nisi
non auctor sagittis. Morbi eget nisl non sem scelerisque commodo et
sit amet nulla.</span>
</div>
<div class="col-md-4">
<img src="libs/img/aula-1/7.jpg" alt="" class="img-fluid
center">
</div>
</div>
</div>
</div>
</div>
<div class="vertab-content">
<div class="panel-heading" data-bs-toggle="collapse" data-bs-parent="#accordion"
data-bs-target="#collapse2">
<h4 class="panel-title">Tab 2</h4>
</div>
<div id="collapse2" class="panel-collapse collapse">
<div class="panel-body">
<span>Pellentesque dolor lorem, feugiat nec est et, luctus dignissim diam.
Vestibulum at fringilla nulla, vel fermentum dui. Praesent
rhoncus hendrerit
risus, vitae tincidunt justo pellentesque in. Morbi pretium
ipsum ut odio
malesuada convallis. Etiam eu ipsum vitae erat vehicula sodales. Sed dapibus
pretium purus, ac pretium sapien dapibus at. Pellentesque
dolor lorem,
feugiat nec est et, luctus dignissim diam. Vestibulum at
fringilla nulla,
vel fermentum dui. Praesent rhoncus hendrerit risus, vitae tincidunt justo
pellentesque in. Morbi pretium ipsum ut odio malesuada
convallis. Etiam eu
ipsum vitae erat vehicula sodales. Sed dapibus pretium purus, ac pretium
sapien dapibus at. Pellentesque dolor lorem, feugiat nec est
et, luctus
dignissim diam. Vestibulum at fringilla nulla, vel fermentum
dui. Praesent
rhoncus hendrerit risus, vitae tincidunt justo pellentesque in. Morbi
pretium ipsum ut odio malesuada convallis. Etiam eu ipsum vitae erat
vehicula sodales. Sed dapibus pretium purus, ac pretium sapien dapibus at.
Pellentesque dolor lorem, feugiat nec est et, luctus dignissim diam.
Vestibulum at fringilla nulla, vel fermentum dui. Praesent
rhoncus hendrerit
risus, vitae tincidunt justo pellentesque in. Morbi pretium
ipsum ut odio
malesuada convallis. Etiam eu ipsum vitae erat vehicula sodales. Sed dapibus
pretium purus, ac pretium sapien dapibus at.</span>
</div>
</div>
</div>
<div class="vertab-content">
<div class="panel-heading">
<h4 class="panel-title" data-bs-toggle="collapse" data-bs-parent="#accordion"
data-bs-target="#collapse3">
<span>Tab 3</span>
</h4>
</div>
<div id="collapse3" class="panel-collapse collapse">
<div class="panel-body">
<span>Quisque aliquet vitae arcu ac pharetra. Suspendisse at erat at lacus
lobortis sodales sed et dolor. Maecenas egestas felis sit amet rhoncus
hendrerit. Nam condimentum diam vitae dictum euismod. Suspendisse sit amet
egestas lectus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Integer nisl nulla, porta quis pulvinar et, semper a diam.</span>
</div>
</div>
</div>
<div class="vertab-content">
<div class="panel-heading">
<h4 class="panel-title" data-bs-toggle="collapse" data-bs-parent="#accordion"
data-bs-target="#collapse4">
<span>Tab 4</span>
</h4>
</div>
<div id="collapse4" class="panel-collapse collapse">
<div class="panel-body">
<span>Nunc condimentum ipsum ultricies augue blandit ultricies. Pellentesque
velit purus, pretium et diam et, volutpat fermentum lorem. Quisque quam
nulla, finibus in quam eu, tempor dictum risus. Nullam
molestie ante eu
mauris convallis, non volutpat nibh tincidunt.</span>
</div>
</div>
</div>
<div class="vertab-content">
<div class="panel-heading">
<h4 class="panel-title" data-bs-toggle="collapse" data-bs-parent="#accordion"
data-bs-target="#collapse5">
<span>Tab 5</span>
</h4>
</div>
<div id="collapse5" class="panel-collapse collapse">
<div class="panel-body">
<span>In in rutrum arcu, eget euismod massa. Donec et
mollis erat. Praesent
iaculis nunc sit amet ante ultricies congue. Maecenas venenatis ut dolor
eget malesuada. Pellentesque pharetra convallis est. Donec efficitur dolor,
ac ullamcorper lorem laoreet non.</span>
</div>
</div>
</div>
</div>
</div>
Sed sit amet vulputate magna, vel semper libero. Pellentesque ornare imperdiet erat eu efficitur.
<div class="box
importante">
<div class="row">
<div class="d-block
d-sm-none">
<div class="icon">
<i class="bi bi-exclamation-circle text-center vermelhoimportante2"></i>
</div>
</div>
<div class="col-lg-10
col-md-12">
<h3>Importante!</h3>
<p>Sed sit amet vulputate magna, vel semper libero. Pellentesque ornare
imperdiet erat
eu efficitur.</p>
</div>
<div class="d-none
d-lg-block d-xl-block d-xxl-block">
<div class="icon
">
<i class="bi bi-exclamation-circle vermelhoimportante"></i>
</div>
</div>
</div>
</div>
Sed sit amet vulputate magna, vel semper libero. Pellentesque ornare imperdiet erat eu efficitur.
<div class="box
saibamais">
<div class="row">
<div class="d-block
d-sm-none">
<div class="icon">
<i class="bi bi-zoom-in verdesaibamais2"></i>
</div>
</div>
<div class="col-lg-10
col-md-12">
<h3>Saiba mais...</h3>
<p>Sed sit amet vulputate magna, vel semper libero. Pellentesque ornare
imperdiet erat
eu efficitur.</p>
</div>
<div class="d-none
d-lg-block d-xl-block d-xxl-block">
<div class="icon
">
<i class="bi bi-zoom-in verdesaibamais"></i>
</div>
</div>
</div>
</div>
Sed sit amet vulputate magna, vel semper libero. Pellentesque ornare imperdiet erat eu efficitur.
<div class="box
dica">
<div class="row">
<div class="d-block
d-sm-none">
<div class="icon">
<i class="bi bi-lightbulb-fill laranjadica2"></i>
</div>
</div>
<div class="col-lg-10
col-md-12">
<h3>Dica</h3>
<p>Sed sit amet vulputate magna, vel semper libero. Pellentesque ornare
imperdiet erat
eu efficitur.</p>
</div>
<div class="d-none
d-lg-block d-xl-block d-xxl-block">
<div class="icon
">
<i class="bi bi-lightbulb-fill laranjadica"></i>
</div>
</div>
</div>
</div>
Sed sit amet vulputate magna, vel semper libero. Pellentesque ornare imperdiet erat eu efficitur.
<div class="box
vcsabia">
<div class="row">
<div class="d-block
d-sm-none">
<div class="icon">
<i class="bi bi-question-circle-fill lilasvcsabia2"></i>
</div>
</div>
<div class="col-lg-10
col-md-12">
<h3>Você Sabia?</h3>
<p>Sed sit amet vulputate magna, vel semper libero. Pellentesque ornare
imperdiet erat
eu efficitur.</p>
</div>
<div class="d-none
d-lg-block d-xl-block d-xxl-block">
<div class="icon">
<i class="bi bi-question-circle-fill lilasvcsabia"></i>
</div>
</div>
</div>
</div>
Sed sit vulputate vulputate magna, vel semper libero. Pellentesque ornare imperdiet erat eu efficitur.
Sed sit amet vulputate magna, vel semper libero. Pellentesque ornare imperdiet erat eu efficitur.
<div class="box pdf">
<div class="row">
<div class="d-block
d-sm-none">
<div class="icon">
<i class="bi
bi-file-earmark-arrow-down-fill cinzapdf2"></i>
</div>
</div>
<div class="col-lg-10
col-md-12">
<h3>Pdf</h3>
<p>Sed sit amet
vulputate magna, vel semper libero. Pellentesque ornare
imperdiet
erat
eu efficitur.</p>
<p>Sed sit amet
vulputate magna, vel semper libero. Pellentesque ornare
imperdiet
erat
eu efficitur.</p>
</div>
<div class="d-none d-lg-block
d-xl-block d-xxl-block">
<div class="icon">
<i class="bi
bi-file-earmark-arrow-down-fill cinzapdf"></i>
</div>
</div>
</div>
</div>
Sed sit amet vulputate magna, vel semper libero. Pellentesque ornare imperdiet erat eu efficitur. Duis suscipit et purus nec malesuada. Nullam faucibus ullamcorper lorem, a facilisis ligula vestibulum maximus. Aenean risus nisl, cursus vel est ac, commodo euismod nisl.
<div class="box1">
<h3>Estilo box 1</h3>
<p>Sed sit amet vulputate
magna, vel semper libero. Pellentesque ornare imperdiet
erat eu efficitur. Duis suscipit et purus nec malesuada. Nullam faucibus
ullamcorper lorem, a facilisis ligula vestibulum maximus. Aenean risus nisl,
cursus vel est ac, commodo euismod nisl.</p>
</div>
Clique aqui para conhecer um exemplo de mapa.
<div class="box2">
<h3>Estilo box 2</h3>
<p>Sed sit amet vulputate
magna, vel semper libero. Pellentesque ornare imperdiet
erat eu efficitur. Duis suscipit et purus nec malesuada. Nullam faucibus
ullamcorper lorem, a facilisis ligula vestibulum maximus. Aenean risus nisl,
cursus vel est ac, commodo euismod nisl.</p>
</div>
Sed sit amet vulputate magna, vel semper libero. Pellentesque ornare imperdiet erat eu efficitur. Duis suscipit et purus nec malesuada. Nullam faucibus ullamcorper lorem, a facilisis ligula vestibulum maximus. Aenean risus nisl, cursus vel est ac, commodo euismod nisl.
<div class="box3">
<h3>Estilo box 3</h3>
<p>Sed sit amet vulputate
magna, vel semper libero. Pellentesque ornare imperdiet erat
eu efficitur. Duis suscipit et purus nec malesuada. Nullam faucibus ullamcorper
lorem, a facilisis ligula vestibulum maximus. Aenean risus nisl, cursus vel est ac,
commodo euismod nisl.</p>
</div>
Sed sit amet vulputate magna, vel semper libero. Pellentesque ornare imperdiet erat eu efficitur. Duis suscipit et purus nec malesuada. Nullam faucibus ullamcorper lorem, a facilisis ligula vestibulum maximus. Aenean risus nisl, cursus vel est ac, commodo euismod nisl.
<div class="box4">
<h3>Estilo box 4</h3>
<p>Sed sit amet vulputate
magna, vel semper libero. Pellentesque ornare imperdiet erat
eu efficitur. Duis suscipit et purus nec malesuada. Nullam faucibus ullamcorper
lorem, a facilisis ligula vestibulum maximus. Aenean risus nisl, cursus vel est ac,
commodo euismod nisl.</p>
</div>
Sed sit amet vulputate magna, vel semper libero. Pellentesque ornare imperdiet erat eu efficitur. Duis suscipit et purus nec malesuada. Nullam faucibus ullamcorper lorem, a facilisis ligula vestibulum maximus. Aenean risus nisl, cursus vel est ac, commodo euismod nisl.
<div class="box5">
<h3>Estilo box 5</h3>
<p>Sed sit amet vulputate
magna, vel semper libero. Pellentesque ornare imperdiet
erat eu efficitur. Duis suscipit et purus nec malesuada. Nullam faucibus
ullamcorper lorem, a facilisis ligula vestibulum maximus. Aenean risus nisl,
cursus vel est ac, commodo euismod nisl.</p>
</div>
Sed orci risus, imperdiet nec tempus at, auctor in turpis. Etiam elementum, massa sit amet vehicula scelerisque, nisl velit bibendum dui, vel lobortis arcu metus ac lacus. Duis tincidunt purus quis nibh fermentum, quis tempus elit blandit.
Nome do Autor
<div class="col-lg-12 col-md-12">
<div class="section-section"
style="margin-top:
40px;">
<h3 class="text-center">Box Citação</h3>
</div>
<div class="box-citacao">
<q>Sed orci risus,
imperdiet nec tempus at, auctor in turpis. Etiam elementum, massa
sit amet vehicula scelerisque, nisl velit bibendum dui, vel lobortis arcu metus
ac lacus. Duis tincidunt purus quis nibh fermentum, quis tempus elit
blandit.<span class="closequotes"> </span></q>
<p class="autor">Nome do Autor</p>
</div>
</div>
Donec fermentum, massa vitae euismod pretium, neque eros congue massa, ac dignissim nibh nibh quis nunc.
Sed aliquet tellus in imperdiet commodo. Aenean consequat tellus vitae arcu laoreet interdum.
Nam eleifend, metus sed viverra convallis, magna risus sollicitudin orci, at vehicula ligula velit commodo enim.
Phasellus cursus vitae odio quis varius. Donec eu imperdiet velit. Quisque vitae pharetra ligula. Nunc venenatis dolor sollicitudin, hendrerit dui non, mollis.
<div class="row gy-4">
<div class="col-md-10
offset-md-1">
<div id="timelinevertical">
<div class="periodos">
<div class="data">
<div class="data_cont">
<h5>Laoreet sit
amet</h5>
<p>Donec fermentum,
massa vitae euismod pretium, neque eros congue massa, ac
dignissim nibh nibh quis nunc.</p>
</div>
</div>
<div class="data">
<div class="data_cont">
<h5>Laoreet sit
amet</h5>
<p>Sed aliquet tellus
in imperdiet commodo. Aenean consequat tellus vitae
arcu laoreet interdum.</p>
</div>
</div>
<div class="data">
<div class="data_cont">
<h5>Laoreet sit
amet</h5>
<p>Nam eleifend, metus
sed viverra convallis, magna risus sollicitudin orci,
at vehicula ligula velit commodo enim.</p>
</div>
</div>
<div class="data">
<div class="data_cont">
<h5>Laoreet sit
amet</h5>
<p>Phasellus cursus
vitae odio quis varius. Donec eu imperdiet velit.
Quisque vitae pharetra ligula. Nunc venenatis dolor sollicitudin,
hendrerit dui non, mollis.</p>
</div>
</div>
</div>
</div>
</div>
</div>
Corpo do texto
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. sudo arp-scan -l.Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<div class="row gx-0">
<div class="section-title">
<h1>Título da Seção</h1>
</div>
<div class="section-level1">
<h2>Subtítulo nível 1</h2>
</div>
<div class="section-level2">
<h3><span>Subtítulo nível 2</span></h3>
</div>
<div class="section-level3">
<h3><span>Subtítulo nível 3</span></h3>
</div>
<div class="section-level4">
<h4><span>Subtítulo nível 4</span></h4>
</div>
<p>Corpo do texto</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
fugiat nulla pariatur. <span class="marker-animation text-white"
data-ma_repeat="true" data-ma_OPTIONNAME="1" style="padding-top: .3em;">sudo
arp-scan
-l.</span>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum.</p>
</div>
Feugiat pretium nibh ipsum consequat. Tempus iaculis urna id volutpat lacus laoreet non curabitur gravida. Venenatis lectus magna fringilla urna porttitor rhoncus dolor purus non.
Dolor sit amet consectetur adipiscing elit pellentesque habitant morbi. Id interdum velit laoreet id donec ultrices. Fringilla phasellus faucibus scelerisque eleifend donec pretium. Est pellentesque elit ullamcorper dignissim. Mauris ultrices eros in cursus turpis massa tincidunt dui.
Eleifend mi in nulla posuere sollicitudin aliquam ultrices sagittis orci. Faucibus pulvinar elementum integer enim. Sem nulla pharetra diam sit amet nisl suscipit. Rutrum tellus pellentesque eu tincidunt. Lectus urna duis convallis convallis tellus. Urna molestie at elementum eu facilisis sed quis
Molestie a iaculis at erat pellentesque adipiscing commodo. Dignissim suspendisse in est ante in. Nunc vel risus commodo viverra maecenas accumsan. Sit amet nisl suscipit adipiscing bibendum est. Purus gravida quis blandit turpis cursus in.
Laoreet sit amet cursus sit amet dictum sit amet justo. Mauris vitae ultricies leo integer malesuada nunc vel. Tincidunt eget nullam non nisi est sit amet. Turpis nunc eget lorem dolor sed. Ut venenatis tellus in metus vulputate eu scelerisque.
<div class="accordion-list">
<ul>
<li>
<i class="bx bx-help-circle
icon-help"></i> <a data-bs-toggle="collapse"
class="collapsed"
data-bs-target="#accordion-list-1">Non consectetur a erat nam at
lectus urna duis? <i class="bx bx-chevron-down
icon-show"></i><i
class="bx bx-chevron-up
icon-close"></i></a>
<div id="accordion-list-1" class="collapse" data-bs-parent=".accordion-list">
<p>Feugiat pretium nibh
ipsum consequat. Tempus iaculis urna id volutpat lacus
laoreet non curabitur gravida. Venenatis lectus magna fringilla urna porttitor
rhoncus dolor purus non.</p>
</div>
</li>
<li>
<i class="bx bx-help-circle
icon-help"></i> <a data-bs-toggle="collapse"
data-bs-target="#accordion-list-2" class="collapsed">Feugiat scelerisque varius
morbi enim nunc? <i class="bx bx-chevron-down
icon-show"></i><i
class="bx bx-chevron-up
icon-close"></i></a>
<div id="accordion-list-2" class="collapse" data-bs-parent=".accordion-list">
<p>Dolor sit amet
consectetur adipiscing elit pellentesque habitant morbi. Id
interdum velit laoreet id donec ultrices. Fringilla phasellus faucibus
scelerisque eleifend donec pretium. Est pellentesque elit ullamcorper dignissim.
Mauris ultrices eros in cursus turpis massa tincidunt dui.</p>
</div>
</li>
<li>
<i class="bx bx-help-circle
icon-help"></i> <a data-bs-toggle="collapse"
data-bs-target="#accordion-list-3" class="collapsed">Dolor sit amet consectetur
adipiscing elit? <i class="bx bx-chevron-down
icon-show"></i><i
class="bx bx-chevron-up
icon-close"></i></a>
<div id="accordion-list-3" class="collapse" data-bs-parent=".accordion-list">
<p>Eleifend mi in nulla
posuere sollicitudin aliquam ultrices sagittis orci.
Faucibus pulvinar elementum integer enim. Sem nulla pharetra diam sit amet nisl
suscipit. Rutrum tellus pellentesque eu tincidunt. Lectus urna duis convallis
convallis tellus. Urna molestie at elementum eu facilisis sed quis</p>
</div>
</li>
<li>
<i class="bx bx-help-circle
icon-help"></i> <a data-bs-toggle="collapse"
data-bs-target="#accordion-list-4" class="collapsed">Tempus quam pellentesque nec
nam aliquam sem et tortor consequat? <i class="bx bx-chevron-down icon-show"></i><i
class="bx bx-chevron-up
icon-close"></i></a>
<div id="accordion-list-4" class="collapse" data-bs-parent=".accordion-list">
<p>Molestie a iaculis
at erat pellentesque adipiscing commodo. Dignissim suspendisse
in est ante in. Nunc vel risus commodo viverra maecenas accumsan. Sit amet nisl
suscipit adipiscing bibendum est. Purus gravida quis blandit turpis cursus in.
</p>
</div>
</li>
<li>
<i class="bx bx-help-circle
icon-help"></i> <a data-bs-toggle="collapse"
data-bs-target="#accordion-list-5" class="collapsed">Tortor vitae purus faucibus
ornare. Varius vel pharetra vel turpis nunc eget lorem dolor? <i
class="bx
bx-chevron-down icon-show"></i><i
class="bx bx-chevron-up
icon-close"></i></a>
<div id="accordion-list-5" class="collapse" data-bs-parent=".accordion-list">
<p>Laoreet sit amet
cursus sit amet dictum sit amet justo. Mauris vitae ultricies
leo integer malesuada nunc vel. Tincidunt eget nullam non nisi est sit amet.
Turpis nunc eget lorem dolor sed. Ut venenatis tellus in metus vulputate eu
scelerisque.</p>
</div>
</li>
</ul>
</div>
<div class=" strokeBlock">
<div class="col-md-12 d-flex align-items-center">
<div id="highlight-img" class="highlight-white" name="highlight-img">
<a href="#/" id="item-spot9" class="highlight-spot-tip"
style="width: 7.7%; height: 17.1%;" data-bs-toggle="tooltip" title=""
data-bs-original-title="Lorem ipsum
dolorsit amet, consectetur adipiscing elit."
data-bs-placement="right"></a>
<a href="#/" id="item-spot10" class="highlight-spot-tip-1"
style="width: 15.5%; height: 26%;" data-bs-toggle="tooltip" title=""
data-bs-original-title="Lorem ipsum
dolorsit amet, consectetur adipiscing elit."></a>
<a href="#/" id="item-spot11" class="highlight-spot-tip-1"
style="width: 15.7%; height: 17.5%;" data-bs-toggle="tooltip" title=""
data-bs-original-title="Lorem ipsum
dolorsit amet, consectetur adipiscing elit."
data-bs-placement="bottom"></a>
<a href="#/" id="item-spot12" class="highlight-spot-tip-1"
style="width: 6.5%; height: 14.6%;" data-bs-toggle="tooltip" title=""
data-bs-original-title="Lorem ipsum
dolorsit amet, consectetur adipiscing elit."
data-bs-placement="left"></a>
<img src="libs/img/aula-1/9.png" class="img-fluid" alt="">
</div>
</div>
</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non dolor sagittis, lobortis tortor tincidunt, fermentum sem. Etiam commodo, id dignissim ex dictum eget. Proin luctus arcu sit amet nisi mollis tincidunt. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sed lacus lobortis, sagittis nisi sit amet, hendrerit orci.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non dolor sagittis, lobortis tortor tincidunt, fermentum sem. Etiam commodo, id dignissim ex dictum eget. Proin luctus arcu sit amet nisi mollis tincidunt. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sed lacus lobortis, sagittis nisi sit amet, hendrerit orci.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non dolor sagittis, lobortis tortor tincidunt, fermentum sem. Etiam commodo, id dignissim ex dictum eget. Proin luctus arcu sit amet nisi mollis tincidunt. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sed lacus lobortis, sagittis nisi sit amet, hendrerit orci.
<div class="col-md-10 offset-md-1">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="container">
<div class="row
gx-0">
<div class="col-md-8 d-flex
flex-column justify-content-center">
<div class="content">
<h4>Laoreet sit amet</h4>
<p>Lorem ipsum dolor sit
amet, consectetur adipiscing elit. Sed
non dolor sagittis, lobortis tortor tincidunt, fermentum
sem. Etiam commodo, id dignissim ex dictum eget. Proin
luctus arcu sit amet nisi mollis tincidunt. Lorem ipsum
dolor sit amet, consectetur adipiscing elit. Morbi sed lacus
lobortis, sagittis nisi sit amet, hendrerit orci.</p>
</div>
</div>
<div class="col-md-4 d-flex
align-items-center">
<img src="libs/img/aula-1/10.jpg" alt="" class="img-fluid scale">
</div>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="container">
<div class="row
gx-0">
<div class="col-md-8 d-flex
flex-column justify-content-center">
<div class="content">
<h4>Laoreet sit amet</h4>
<p>Lorem ipsum dolor sit
amet, consectetur adipiscing elit. Sed
non dolor sagittis, lobortis tortor tincidunt, fermentum
sem. Etiam commodo, id dignissim ex dictum eget. Proin
luctus arcu sit amet nisi mollis tincidunt. Lorem ipsum
dolor sit amet, consectetur adipiscing elit. Morbi sed lacus
lobortis, sagittis nisi sit amet, hendrerit orci.</p>
</div>
</div>
<div class="col-md-4 d-flex
align-items-center">
<img src="libs/img/aula-1/11.jpg" alt="" class="img-fluid scale">
</div>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="container">
<div class="row
gx-0">
<div class="col-md-8 d-flex
flex-column justify-content-center">
<div class="content">
<h4>Laoreet sit amet</h4>
<p>Lorem ipsum dolor sit
amet, consectetur adipiscing elit. Sed
non dolor sagittis, lobortis tortor tincidunt, fermentum
sem. Etiam commodo, id dignissim ex dictum eget. Proin
luctus arcu sit amet nisi mollis tincidunt. Lorem ipsum
dolor sit amet, consectetur adipiscing elit. Morbi sed lacus
lobortis, sagittis nisi sit amet, hendrerit orci.</p>
</div>
</div>
<div class="col-md-4 d-flex
align-items-center">
<img src="libs/img/aula-1/12.jpg" alt="" class="img-fluid scale">
</div>
</div>
</div>
</div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
<!-- Add Arrows -->
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
</div>
Texto
| # | Nome | Sobrenome | |
|---|---|---|---|
| 1 | Pedro | Silva | @msn |
| 2 | Luiza | Ferreira | @note |
| 3 | Julio | Nascimento |
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Nome</th>
<th scope="col">Sobrenome</th>
<th scope="col">E-mail</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Pedro</td>
<td>Silva</td>
<td>@msn</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Luiza</td>
<td>Ferreira</td>
<td>@note</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Julio</td>
<td>Nascimento</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
| # | Nome | Sobrenome | |
|---|---|---|---|
| 1 | Pedro | Silva | @msn |
| 2 | Luiza | Ferreira | @note |
| 3 | Julio | Nascimento |
<div class="tabela">
<table>
<thead>
<tr>
<th>#</th>
<th>Nome</th>
<th>Sobrenome</th>
<th>E-mail</th>
</tr>
<thead>
<tbody>
<tr>
<td>1</td>
<td>Pedro</td>
<td>Silva</td>
<td>@msn</td>
</tr>
<tr class="bg-section-zircon">
<td>2</td>
<td>Luiza</td>
<td>Ferreira</td>
<td>@note</td>
</tr>
<tr>
<td>3</td>
<td>Julio</td>
<td>Nascimento</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</div>
| Header 1 | Header 2 | Header 3 | Header 4 | Header 5 | Header 6 | Header 7 | Header 8 |
|---|---|---|---|---|---|---|---|
| row1_cell1 | row1_cell2 | row1_cell3 | row1_cell4 | row1_cell5 | row1_cell6 | row1_cell7 | row1_cell8 |
| row2_cell1 | row2_cell2 | row2_cell3 | row2_cell4 | row2_cell5 | row2_cell6 | row2_cell7 | row2_cell8 |
| row3_cell1 | row3_cell2 | row3_cell3 | row3_cell4 | row3_cell5 | row3_cell6 | row3_cell7 | row3_cell8 |
| row4_cell1 | row4_cell2 | row4_cell3 | row4_cell4 | row4_cell5 | row4_cell6 | row4_cell7 | row4_cell8 |
| row5_cell1 | row5_cell2 | row5_cell3 | row5_cell4 | row5_cell5 | row5_cell6 | row5_cell7 | row5_cell8 |
| Header 1 | Header 2 | Header 3 | Header 4 | Header 5 | Header 6 | Header 7 | Header 8 |
<div class="row">
<div class="col-md-6 offset-md-3 pt-40">
<div class="video-container strokeBlock-blue shadow relative">
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item videocentro"
src="https://www.youtube.com/embed/CmXkMkah3Uw" allowfullscreen></iframe>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-8 center pt-30 pb-30">
<div class="box pdf">
<div class="row">
<div class="d-block d-sm-none">
<div class="icon">
<i class="bi bi-file-earmark-arrow-down-fill cinzapdf2"></i>
</div>
</div>
<div class="col-lg-10 col-md-12">
<h3>Pdf</h3>
<p><a href="javascript:popup('./libs/docs/01_sqlserver.pdf',{w:625,h:460})"
download target="_blank"><strong>Clique aqui</strong></a> para
baixar o tutorial com o passo a passo.</p>
</div>
<div class="d-none d-lg-block d-xl-block d-xxl-block">
<div class="icon">
<i class="bi bi-file-earmark-arrow-down-fill cinzapdf"></i>
</div>
</div>
</div>
</div>
</div>
</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non dolor sagittis, lobortis tortor tincidunt, fermentum sem. Etiam commodo, id dignissim ex dictum eget. Proin luctus arcu sit amet nisi mollis tincidunt. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sed lacus lobortis, sagittis nisi sit amet, hendrerit orci.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non dolor sagittis, lobortis tortor tincidunt, fermentum sem. Etiam commodo, id dignissim ex dictum eget. Proin luctus arcu sit amet nisi mollis tincidunt. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sed lacus lobortis, sagittis nisi sit amet, hendrerit orci.
<div class="icon text-center">
<i class="bi bi bi-mic-fill icone-black"></i>
</div>
<div class="col-md-6 center">
<audio preload="auto" controls>
<source src="libs/audio/industria4.mp3">
</audio>
</div>
</div>
<div class="col-md-10 offset-md-1">
<div class="row gx-0">
<p>
<div class="text-center">
<button class="btn btn-primary" data-bs-toggle="collapse"
data-bs-target="#collapseTranscricao" aria-expanded="false"
aria-controls="collapseTranscricao"><span>Transcrição</span></button>
</div>
</p>
<div class="collapse mt-20" id="collapseTranscricao">
<div class="card card-body shadow">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non dolor sagittis,
lobortis tortor tincidunt, fermentum sem. Etiam commodo, id dignissim ex dictum
eget. Proin luctus arcu sit amet nisi mollis tincidunt. Lorem
ipsum dolor sit amet, consectetur adipiscing elit. Morbi sed lacus lobortis,
sagittis nisi sit amet, hendrerit orci.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non dolor sagittis,
lobortis tortor tincidunt, fermentum sem. Etiam commodo, id dignissim ex dictum
eget. Proin luctus arcu sit amet nisi mollis tincidunt. Lorem
ipsum dolor sit amet, consectetur adipiscing elit. Morbi sed lacus lobortis,
sagittis nisi sit amet, hendrerit orci.</p>
</div>
</div>
</div>
</div>
Strings são os tipos mais comuns de dados que se processam no dia a dia, seja nome de pessoas ou de lugares, sejam descrições de produtos ou códigos de produtos; enfim, trata-se de um processo que lidamos no dia a dia.
Lembre-se de que as strings de texto são muito populares. Tente outra vez!
A resposta correta é a A. Strings são os tipos mais comuns de dados que se processam no dia a dia, seja nome de pessoas ou de lugares, sejam descrições de produtos, códigos de produtos; enfim, trata-se de um processo que lidamos no dia a dia. Revise o tópico Biblioteca RE.
O índex é um atributo chave-valor que a Pandas herda dos dicionários.
Procure se recordar das características dos atributos relacionados à biblioteca Pandas e tente outra vez.
Resposta incorreta. A resposta correta é a b. É um atributo chave-valor que a Pandas herda dos dicionários. Revise o tópico Introdução à biblioteca Pandas.
Selecione todas as alternativas do exercício.
Isso mesmo! A herança possibilita que as classes compartilhem seus atributos, métodos e outros membros da classe entre si. Para a ligação entre as classes, a herança adota um relacionamento esquematizado hierarquicamente.
Ops! Tente outra vez! Volte ao tópico sobre Relacionamento de objetos.
Todas as alternativas são verdadeiras. A herança possibilita que as classes compartilhem seus atributos, métodos e outros membros da classe entre si. Para a ligação entre as classes, a herança adota um relacionamento esquematizado hierarquicamente.
Selecione todas as alternativas do exercício.
Isso mesmo! A herança possibilita que as classes compartilhem seus atributos, métodos e outros membros da classe entre si. Para a ligação entre as classes, a herança adota um relacionamento esquematizado hierarquicamente.
Ops! Tente outra vez! Volte ao tópico sobre Relacionamento de objetos.
Todas as alternativas são verdadeiras. A herança possibilita que as classes compartilhem seus atributos, métodos e outros membros da classe entre si. Para a ligação entre as classes, a herança adota um relacionamento esquematizado hierarquicamente.
Isso mesmo! A linguagem Python tem como aspecto central a legibilidade do código e a fluidez da digitação, dado que não é necessário utilizar ponto e vírgula no final de cada sentença, e a identação dos parágrafos delimita os laços e o bloco daquele grupo de classes ou funções.
A afirmativa é verdadeira. A linguagem Python tem como aspecto central a legibilidade do código e a fluidez da digitação, dado que não é necessário utilizar ponto e vírgula no final de cada sentença, e a identação dos parágrafos delimita os laços e o bloco daquele grupo de classes ou funções.
O GitHub é um serviço que hospeda um sistema de controle de versão chamado Git, o qual permite que os desenvolvedores colaborem e façam mudanças em projetos compartilhados enquanto mantêm um registro detalhado do seu progresso. Erro: A afirmativa é Verdadeira. O GitHub é um serviço que hospeda um sistema de controle de versão chamado Git, o qual permite que os desenvolvedores colaborem e façam mudanças em projetos compartilhados enquanto mantêm um registro detalhado do seu progresso.
A afirmativa é verdadeira.
Verdadeira
Falsa
Verdadeira
Falsa
Verdadeira
Falsa
Selecione todas as alternativas do exercício.
Você classificou corretamente todas as afirmativas.
Tente outra vez! Procure relembrar as caracteerísticas das operações matemáticas estudadas neste desafio.
Apenas a afirmativa B é falsa, pois toda operação com números flutuantes gera números flutuantes. Reveja o tópico Fundamentos da linguagem Python.
Verdadeira
Falsa
Verdadeira
Falsa
Verdadeira
Falsa
Verdadeira
Falsa
Verdadeira
Falsa
Selecione todas as alternativas do exercício.
Você classificou corretamente todas as afirmativas.
Tente outra vez! Procure relembrar as caracteerísticas das operações matemáticas estudadas neste desafio.
Apenas a afirmativa B é falsa, pois toda operação com números flutuantes gera números flutuantes. Reveja o tópico Fundamentos da linguagem Python.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non dolor sagittis, lobortis tortor tincidunt, fermentum sem. Etiam commodo, id dignissim ex dictum eget. Proin luctus arcu sit amet nisi mollis tincidunt. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sed lacus lobortis, sagittis nisi sit amet, hendrerit orci.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non dolor sagittis, lobortis tortor tincidunt, fermentum sem. Etiam commodo, id dignissim ex dictum eget. Proin luctus arcu sit amet nisi mollis tincidunt. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sed lacus lobortis, sagittis nisi sit amet, hendrerit orci.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non dolor sagittis, lobortis tortor tincidunt, fermentum sem. Etiam commodo, id dignissim ex dictum eget. Proin luctus arcu sit amet nisi mollis tincidunt. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sed lacus lobortis, sagittis nisi sit amet, hendrerit orci.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non dolor sagittis, lobortis tortor tincidunt, fermentum sem. Etiam commodo, id dignissim ex dictum eget. Proin luctus arcu sit amet nisi mollis tincidunt. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sed lacus lobortis, sagittis nisi sit amet, hendrerit orci.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non dolor sagittis, lobortis tortor tincidunt, fermentum sem. Etiam commodo, id dignissim ex dictum eget. Proin luctus arcu sit amet nisi mollis tincidunt. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sed lacus lobortis, sagittis nisi sit amet, hendrerit orci.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non dolor sagittis, lobortis tortor tincidunt, fermentum sem. Etiam commodo, id dignissim ex dictum eget. Proin luctus arcu sit amet nisi mollis tincidunt. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sed lacus lobortis, sagittis nisi sit amet, hendrerit orci.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non dolor sagittis, lobortis tortor tincidunt, fermentum sem. Etiam commodo, id dignissim ex dictum eget. Proin luctus arcu sit amet nisi mollis tincidunt. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sed lacus lobortis, sagittis nisi sit amet, hendrerit orci.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non dolor sagittis, lobortis tortor tincidunt, fermentum sem. Etiam commodo, id dignissim ex dictum eget. Proin luctus arcu sit amet nisi mollis tincidunt. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sed lacus lobortis, sagittis nisi sit amet, hendrerit orci.