Merge pull request #25 from Mbutler1991/mark-butler

added mockup carousel with placeholder images and text
Mbutler1991 · Dec 14, 2023 · 8c0709f · 8c0709f
2 parents d2dddc5 + 1788741
commit 8c0709f
Show file tree

Hide file tree

Showing 5 changed files with 45 additions and 3 deletions.
diff --git a/assets/images/cake.jpg b/assets/images/cake.jpg
diff --git a/assets/images/food.jpg b/assets/images/food.jpg
diff --git a/assets/images/more-food.jpg b/assets/images/more-food.jpg
diff --git a/index.html b/index.html
@@ -2,6 +2,7 @@
 <html lang="en">
 
 <head>
+
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>seasonedgreetings</title>
@@ -12,10 +13,48 @@
 </head>
 
 <body>
+  <header>
 
-
-
-
+  </header> 
+  <div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="false">
+  <div class="carousel-indicators">
+    <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
+    <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1" aria-label="Slide 2"></button>
+    <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2" aria-label="Slide 3"></button>
+  </div>
+  <div class="carousel-inner">
+    <div class="carousel-item active">
+      <img src="assets/images/more-food.jpg" class="d-block w-100" alt="more-food">
+      <div class="carousel-caption d-none d-md-block">
+        <h5>Placeholder Recipe Name</h5>
+        <p>Placeholder Recipe Description</p>
+      </div>
+    </div>
+    <div class="carousel-item">
+      <img src="assets/images/food.jpg" class="d-block w-100" alt="food">
+      <div class="carousel-caption d-none d-md-block">
+        <h5>Placeholder Recipe Name</h5>
+        <p>Placeholder Recipe Description</p>
+      </div>
+    </div>
+    <div class="carousel-item">
+      <img src="assets/images/cake.jpg" class="d-block w-100" alt="cake">
+      <div class="carousel-caption d-none d-md-block">
+        <h5>Placeholder Recipe Name</h5>
+        <p>Placeholder Recipe Description</p>
+      </div>
+    </div>
+  </div>
+  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions" 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="#carouselExampleCaptions" data-bs-slide="next">
+    <span class="carousel-control-next-icon" aria-hidden="true"></span>
+    <span class="visually-hidden">Next</span>
+  </button>
+</div>
+
   <footer>
     Mark
     Caylin
@@ -24,9 +63,11 @@
     Jonathan
     Kera
   </footer>
+
   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"
     integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL"
     crossorigin="anonymous"></script>
+
 </body>
 
 </html>
diff --git a/seasonedgreetings b/seasonedgreetings