From 25574e18271df0af55363d5a7a53fe0c219d0763 Mon Sep 17 00:00:00 2001
From: Fer-Bar <linofernando2703@gmail.com>
Date: Thu, 15 Feb 2024 11:36:38 -0300
Subject: [PATCH] Added main carousel component

---
 pet/static/pet/css/main_carousel.css | 20 ++++++++++++
 pet/templates/pet/main_carousel.html | 49 ++++++++++++++++++++++++++++
 2 files changed, 69 insertions(+)
 create mode 100644 pet/static/pet/css/main_carousel.css
 create mode 100644 pet/templates/pet/main_carousel.html

diff --git a/pet/static/pet/css/main_carousel.css b/pet/static/pet/css/main_carousel.css
new file mode 100644
index 0000000..e32bbe5
--- /dev/null
+++ b/pet/static/pet/css/main_carousel.css
@@ -0,0 +1,20 @@
+.carousel {
+  margin-bottom: 4rem;
+}
+
+.carousel-caption {
+  bottom: 3rem;
+  z-index: 10;
+}
+
+.carousel-item {
+  height: 32rem;
+}
+
+@media (min-width: 40em) {
+  .carousel-caption p {
+    margin-bottom: 1.25rem;
+    font-size: 1.25rem;
+    line-height: 1.4;
+  }
+}
\ No newline at end of file
diff --git a/pet/templates/pet/main_carousel.html b/pet/templates/pet/main_carousel.html
new file mode 100644
index 0000000..86b4c41
--- /dev/null
+++ b/pet/templates/pet/main_carousel.html
@@ -0,0 +1,49 @@
+<div id="myCarousel" class="carousel slide mb-6" data-bs-ride="carousel">
+  <div class="carousel-indicators">
+    <button type="button" data-bs-target="#myCarousel" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
+    <button type="button" data-bs-target="#myCarousel" data-bs-slide-to="1" aria-label="Slide 2"></button>
+    <button type="button" data-bs-target="#myCarousel" data-bs-slide-to="2" aria-label="Slide 3"></button>
+  </div>
+  <div class="carousel-inner">
+    <div class="carousel-item active">
+      <img src="https://images.unsplash.com/photo-1579033461380-adb47c3eb938?fit=crop&w=1964&q=100" class="d-block c-img" alt="Slide 1">
+      <div class="container">
+        <div class="carousel-caption text-end">
+          <h1>Example headline.</h1>
+          <p class="opacity-75">Some representative placeholder content for the first slide of the carousel.</p>
+          <p><a class="btn btn-lg btn-primary" href="#">Sign up today</a></p>
+        </div>
+      </div>
+    </div>
+    <div class="carousel-item">
+      <img src="https://images.unsplash.com/photo-1579033461380-adb47c3eb938?fit=crop&w=1964&q=100" class="d-block c-img" alt="Slide 2">
+      <div class="container">
+        <div class="carousel-caption text-end">
+          <h1>Example headline.</h1>
+          <p class="opacity-75">Some representative placeholder content for the first slide of the carousel.</p>
+          <p><a class="btn btn-lg btn-primary" href="#">Sign up today</a></p>
+        </div>
+      </div>
+    </div>
+    <div class="carousel-item">
+      <img src="https://images.unsplash.com/photo-1579033461380-adb47c3eb938?fit=crop&w=1964&q=100" class="d-block c-img" alt="Slide 1">
+      <div class="container">
+        <div class="carousel-caption text-end">
+          <h1>Example headline.</h1>
+          <p class="opacity-75">Some representative placeholder content for the first slide of the carousel.</p>
+          <p><a class="btn btn-lg btn-primary" href="#">Sign up today</a></p>
+        </div>
+      </div>
+    </div>
+
+
+  </div>
+  <button class="carousel-control-prev" type="button" data-bs-target="#myCarousel" 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="#myCarousel" data-bs-slide="next">
+    <span class="carousel-control-next-icon" aria-hidden="true"></span>
+    <span class="visually-hidden">Next</span>
+  </button>
+</div>
\ No newline at end of file