index.vue 2.3 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162
  1. <script sepup>
  2. </script>
  3. <template>
  4. <section class="d-flex flex-column">
  5. <h1>Корочки Есть</h1>
  6. <div id="carouselExampleInterval" class="carousel slide" data-bs-ride="carousel">
  7. <div class="carousel-inner">
  8. <div class="carousel-item active" data-bs-interval="3000">
  9. <img src="../public/images/image03.webp" class="d-block w-100" alt="...">
  10. </div>
  11. <div class="carousel-item" data-bs-interval="3000">
  12. <img src="../public/images/image05.webp" class="d-block w-100" alt="...">
  13. </div>
  14. <div class="carousel-item" data-bs-interval="3000">
  15. <img src="../public/images/image01.webp" class="d-block w-100" alt="...">
  16. </div>
  17. </div>
  18. <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleInterval" data-bs-slide="prev">
  19. <span class="carousel-control-prev-icon" aria-hidden="true"></span>
  20. <span class="visually-hidden">Previous</span>
  21. </button>
  22. <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleInterval" data-bs-slide="next">
  23. <span class="carousel-control-next-icon" aria-hidden="true"></span>
  24. <span class="visually-hidden">Next</span>
  25. </button>
  26. </div>
  27. <section class="container d-flex justify-content-between">
  28. <div class="card" style="width: 18rem;">
  29. <ul class="list-group list-group-flush">
  30. <li class="list-group-item">Курс</li>
  31. <li class="list-group-item">Програмирования</li>
  32. <li class="list-group-item">Python</li>
  33. </ul>
  34. </div>
  35. <div class="card" style="width: 18rem;">
  36. <ul class="list-group list-group-flush">
  37. <li class="list-group-item">Вибинар</li>
  38. <li class="list-group-item">Машинный код</li>
  39. <li class="list-group-item">Остновы</li>
  40. </ul>
  41. </div>
  42. <div class="card" style="width: 18rem;">
  43. <ul class="list-group list-group-flush">
  44. <li class="list-group-item">Курс</li>
  45. <li class="list-group-item">програмирования</li>
  46. <li class="list-group-item">html, css, js</li>
  47. </ul>
  48. </div>
  49. </section>
  50. </section>
  51. </template>
  52. <style scoped>
  53. img{
  54. height: 70vh;
  55. }
  56. </style>