<div class="container py-5">
<!-- CARDS TOP IMAGE-->
<div class="card">
<img src="img/slide1.jpg" alt="" class="card-img-top">
<div class="card-body">
<h5 class="card-title">Card Title</h5>
<p class="card-text">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Accusamus saepe ducimus
mollitia magni pariatur enim nemo harum voluptate dicta quaerat.</p>
</div>
</div>
<br><br>
<hr><br><br>
<!-- CARDS BOTTOM IMAGE-->
<div class="card">
<div class="card-body">
<h5 class="card-title">Card Title</h5>
<p class="card-text">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Accusamus saepe ducimus
mollitia magni pariatur enim nemo harum voluptate dicta quaerat.</p>
</div>
<img src="img/slide1.jpg" alt="" class="card-img-bottom">
</div>
<br><br>
<hr><br><br>
<!-- CARDS OVERLAY IMAGE-->
<div class="card text-white">
<img src="img/slide3.jpg" alt="" class="card-img">
<div class="card-img-overlay">
<h5 class="card-title">Card Title</h5>
<p class="card-text">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Accusamus saepe ducimus
mollitia magni pariatur enim nemo harum voluptate dicta quaerat.</p>
</div>
</div>
<br><br>
<hr><br><br>
<!-- CARD LINK -->
<div class="card">
<img src="img/slide1.jpg" alt="" class="card-img-top">
<div class="card-body">
<h5 class="card-title">Card Title</h5>
<p class="card-text">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Accusamus saepe ducimus
mollitia magni pariatur enim nemo harum voluptate dicta quaerat.</p>
<a href="#" class="card-link">Card link</a>
<a href="#" class="card-link">Card link</a>
<ui class="list-group list-group-flush">
<li class="list-group-item">First item</li>
<li class="list-group-item">second item</li>
<li class="list-group-item">third item</li>
</ui>
</div>
</div>
<br><br>
<hr><br><br>
<!-- CARD HEADER AND FOOTER -->
<div class="card">
<div class="card-header">
Card Header
</div>
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum rerum asperiores
impedit labore iusto optio distinctio autem, doloremque sint maiores!</p>
</div>
<div class="card-footer">
This is a card footer
</div>
</div>
<br><br>
<hr><br><br>
<!-- CARD DANGER -->
<div class="card bg-danger text-white">
<div class="card-header">Header</div>
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum rerum asperiores
impedit labore iusto optio distinctio autem, doloremque sint maiores!</p>
</div>
</div>
</div>
픽서