Created a bootstrap.html page

Created a bootstrap.html page with bootstrap interactions and corresponding context inside, including a new holiday menu
Miami-University-ETBD · Nov 19, 2024 · e00b4d1 · e00b4d1
1 parent fc20468
commit e00b4d1
Show file tree

Hide file tree

Showing 2 changed files with 62 additions and 0 deletions.
diff --git a/Elise-Malles.code-workspace b/Elise-Malles.code-workspace
@@ -0,0 +1,11 @@
+{
+	"folders": [
+		{
+			"path": "."
+		},
+		{
+			"path": "../../../Desktop/images(cold drink menu)"
+		}
+	],
+	"settings": {}
+}
diff --git a/bootstrap.html b/bootstrap.html
@@ -0,0 +1,51 @@
+1. <!DOCTYPE html>
+<html lang="en">
+<head>
+  <title>Elise's Pumpkin Loaf Bakery</title>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
+  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
+</head>
+<body>
+
+<div class="container-fluid p-5 bg-primary text-white text-center">
+  <h1>Weclome to Elise's Pumpkin Loaf Bakery, where fall flavors meet comfortable, cozy vibes, and fantastic patries!</h1>
+</div>
+<div class="container">
+    <h1>Welcome to Pumpkin Loaf Bakery</h1>
+    <p>This part is inside a <code>.container</code> class. The <code>.container</code> class provides a responsive fixed-width container that adjusts to different screen sizes, making it perfect for showcasing our fresh, seasonal pumpkin loaves!</p>
+    <p>At Pumpkin Loaf Bakery, we specialize in handcrafted, moist pumpkin loaves made from locally sourced pumpkins and a blend of aromatic fall spices. Whether you like them plain, with a crunchy streusel topping, or glazed with a hint of cinnamon, we’ve got a loaf for every pumpkin lover!</p>
+    <p>Resize the browser window to see how the container’s width adapts at different breakpoints, ensuring a great experience whether you’re browsing on your phone, tablet, or desktop. And don't forget to stop by our bakery to enjoy the smell of freshly baked pumpkin treats in the air!</p>
+</div>
+<ul class="list-group">
+    <li class="list-group-item">🎄 **Spiced Pumpkin Loaf with Cranberry Glaze** - A warm and spiced pumpkin loaf topped with a tart cranberry glaze, perfect for the holiday season.</li>
+    <li class="list-group-item">🎅 **Gingerbread Pumpkin Loaf** - A festive twist on the classic, combining rich pumpkin with hints of molasses and gingerbread spices.</li>
+    <li class="list-group-item">❄️ **White Chocolate Pumpkin Loaf** - A decadent pumpkin loaf swirled with creamy white chocolate and topped with a dusting of cinnamon sugar.</li>
+    <li class="list-group-item">🎁 **Pumpkin Pecan Streusel Loaf** - Moist pumpkin loaf with a crunchy pecan streusel topping, a perfect pairing for holiday gatherings.</li>
+    <li class="list-group-item">✨ **Pumpkin Spice Eggnog Loaf** - A rich, spiced loaf infused with eggnog flavor, ideal for sipping alongside your favorite holiday beverage.</li>
+  </ul>
+  <form>
+    <div class="input-group mb-3">
+      <span class="input-group-text">👤</span>
+      <input type="text" class="form-control" placeholder="Your Full Name" aria-label="Name">
+    </div>
+
+    <div class="input-group mb-3">
+      <input type="email" class="form-control" placeholder="Your Email Address" aria-label="Email">
+      <span class="input-group-text">@pumpkinliabakery.com</span>
+    </div>
+
+    <div class="input-group mb-3">
+      <span class="input-group-text">🎃</span>
+      <input type="text" class="form-control" placeholder="Choose Your Pumpkin Loaf Flavor" aria-label="Flavor">
+    </div>
+
+    <div class="input-group mb-3">
+      <span class="input-group-text">🍞</span>
+      <input type="number" class="form-control" placeholder="Quantity" min="1" aria-label="Quantity">
+    </div>
+
+    <button type="submit" class="btn btn-warning w-100">Place Your Order</button>
+  </form>
+