<script sepup>

</script>

<template>
    <section class="d-flex flex-column">
        <h1>Корочки Есть</h1>
        <div id="carouselExampleInterval" class="carousel slide" data-bs-ride="carousel">
        <div class="carousel-inner">
            <div class="carousel-item active" data-bs-interval="3000">
            <img src="../public/images/image03.webp" class="d-block w-100" alt="...">
            </div>
            <div class="carousel-item" data-bs-interval="3000">
            <img src="../public/images/image05.webp" class="d-block w-100" alt="...">
            </div>
            <div class="carousel-item" data-bs-interval="3000">
            <img src="../public/images/image01.webp" class="d-block w-100" alt="...">
            </div>
        </div>
        <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleInterval" data-bs-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Previous</span>
        </button>
        <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleInterval" data-bs-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Next</span>
        </button>
        </div>

        <section class="container d-flex justify-content-between">
            <div class="card" style="width: 18rem;">
  <ul class="list-group list-group-flush">
    <li class="list-group-item">Курс</li>
    <li class="list-group-item">Програмирования</li>
    <li class="list-group-item">Python</li>
  </ul>
</div>

<div class="card" style="width: 18rem;">
  <ul class="list-group list-group-flush">
    <li class="list-group-item">Вибинар</li>
    <li class="list-group-item">Машинный код</li>
    <li class="list-group-item">Остновы</li>
  </ul>
</div>

<div class="card" style="width: 18rem;">
  <ul class="list-group list-group-flush">
    <li class="list-group-item">Курс</li>
    <li class="list-group-item">програмирования</li>
    <li class="list-group-item">html, css, js</li>
  </ul>
</div>
        </section>
    </section>
</template>

<style scoped>
    img{
        height: 70vh;
    }
</style>