added some images, added banner and featuredproduc

.gitignore

@@ -1,2 +1,3 @@
 .DS_Store
+.vscode
 node_modules

components/banner.html

@@ -0,0 +1,95 @@
+<div id="marmeladenLadencarousel" class="carousel slide" data-bs-ride="carousel">
+    <ol class="carousel-indicators">
+        <li data-bs-target="#marmeladenLadencarousel" data-bs-slide-to="0" class="active"></li>
+        <li data-bs-target="#marmeladenLadencarousel" data-bs-slide-to="1"></li>
+        <li data-bs-target="#marmeladenLadencarousel" data-bs-slide-to="2"></li>
+    </ol>
+    <div class="carousel-inner">
+        <div class="carousel-item active">
+            <div class="container">
+                <div class="row p-5">
+                    <div class="mx-auto col-md-8 col-lg-6 order-lg-last">
+                        <img class="img-fluid rounded-circle shadow" src="../res/img/jam.jpg" alt="">
+                    </div>
+                    <div class="col-lg-6 mb-0 d-flex align-items-center">
+                        <div class="text-align-left align-self-center">
+                            <h1 class="h1 text-success">MarmeladenLaden</h1>
+                            <h3 class="h2">Aliquip ex ea commodo consequat</h3>
+                            <p>
+                                Occaecat velit enim pariatur mollit et aliquip in nulla Lorem tempor nisi laboris
+                                proident ad id amet tempor sint eu sunt esse duis incididunt exercitation eiusmod veniam
+                                fugiat non aliqua ullamco eiusmod eiusmod est adipisicing
+                                in est commodo consectetur enim dolore ea non id aliquip aliqua dolore nostrud cillum ea
+                                cillum ipsum dolore enim sunt fugiat qui eu sint laborum do veniam nulla et cillum minim
+                                consectetur eiusmod et mollit aliquip sit occaecat
+                                consectetur duis cillum officia pariatur officia ad pariatur ullamco excepteur cupidatat
+                                reprehenderit tempor qui cillum reprehenderit sit qui veniam proident est officia
+                                proident aute sunt consectetur ullamco.
+                            </p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="carousel-item">
+            <div class="container">
+                <div class="row p-5">
+                    <div class="mx-auto col-md-8 col-lg-6 order-lg-last">
+                        <img class="img-fluid rounded-circle shadow" src="../res/img/berries.jpg" alt="">
+                    </div>
+                    <div class="col-lg-6 mb-0 d-flex align-items-center">
+                        <div class="text-align-left">
+                            <h1 class="h1">Proident occaecat</h1>
+                            <h3 class="h2">Aliquip ex ea commodo consequat</h3>
+                            <p>
+                                Occaecat velit enim pariatur mollit et aliquip in nulla Lorem tempor nisi laboris
+                                proident ad id amet tempor sint eu sunt esse duis incididunt exercitation eiusmod veniam
+                                fugiat non aliqua ullamco eiusmod eiusmod est adipisicing
+                                in est commodo consectetur enim dolore ea non id aliquip aliqua dolore nostrud cillum ea
+                                cillum ipsum dolore enim sunt fugiat qui eu sint laborum do veniam nulla et cillum minim
+                                consectetur eiusmod et mollit aliquip sit occaecat
+                                consectetur duis cillum officia pariatur officia ad pariatur ullamco excepteur cupidatat
+                                reprehenderit tempor qui cillum reprehenderit sit qui veniam proident est officia
+                                proident aute sunt consectetur ullamco.
+                            </p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="carousel-item">
+            <div class="container">
+                <div class="row p-5">
+                    <div class="mx-auto col-md-8 col-lg-6 order-lg-last">
+                        <img class="img-fluid rounded-circle shadow" src="../res/img/cottage.jpg" alt="">
+                    </div>
+                    <div class="col-lg-6 mb-0 d-flex align-items-center">
+                        <div class="text-align-left">
+                            <h1 class="h1">Repr in voluptate</h1>
+                            <h3 class="h2">Ullamco laboris nisi ut </h3>
+                            <p>
+                                Occaecat velit enim pariatur mollit et aliquip in nulla Lorem tempor nisi laboris
+                                proident ad id amet tempor sint eu sunt esse duis incididunt exercitation eiusmod veniam
+                                fugiat non aliqua ullamco eiusmod eiusmod est adipisicing
+                                in est commodo consectetur enim dolore ea non id aliquip aliqua dolore nostrud cillum ea
+                                cillum ipsum dolore enim sunt fugiat qui eu sint laborum do veniam nulla et cillum minim
+                                consectetur eiusmod et mollit aliquip sit occaecat
+                                consectetur duis cillum officia pariatur officia ad pariatur ullamco excepteur cupidatat
+                                reprehenderit tempor qui cillum reprehenderit sit qui veniam proident est officia
+                                proident aute sunt consectetur ullamco.
+                            </p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <a class="carousel-control-prev text-decoration-none w-auto ps-3" href="#marmeladenLadencarousel" role="button"
+        data-bs-slide="prev">
+        <i class="fas fa-chevron-left"></i>
+    </a>
+    <a class="carousel-control-next text-decoration-none w-auto pe-3" href="#marmeladenLadencarousel" role="button"
+        data-bs-slide="next">
+        <i class="fas fa-chevron-right"></i>
+    </a>
+</div>

components/ftProducts.html

@@ -0,0 +1,87 @@
+<section class="bg-light">
+    <div class="container py-5">
+        <div class="row text-center py-3">
+            <div class="col-lg-6 m-auto">
+                <h1 class="h1">Featured Product</h1>
+                <p>
+                    Reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+                    Excepteur sint occaecat cupidatat non proident.
+                </p>
+            </div>
+        </div>
+        <div class="row">
+            <div class="col-12 col-md-4 mb-4">
+                <div class="card h-100">
+                    <a href="shop-single.html">
+                        <img src="./assets/img/feature_prod_01.jpg" class="card-img-top" alt="...">
+                    </a>
+                    <div class="card-body">
+                        <ul class="list-unstyled d-flex justify-content-between">
+                            <li>
+                                <i class="text-warning fa fa-star"></i>
+                                <i class="text-warning fa fa-star"></i>
+                                <i class="text-warning fa fa-star"></i>
+                                <i class="text-muted fa fa-star"></i>
+                                <i class="text-muted fa fa-star"></i>
+                            </li>
+                            <li class="text-muted text-right">$240.00</li>
+                        </ul>
+                        <a href="shop-single.html" class="h2 text-decoration-none text-dark">Gym Weight</a>
+                        <p class="card-text">
+                            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt in culpa qui officia deserunt.
+                        </p>
+                        <p class="text-muted">Reviews (24)</p>
+                    </div>
+                </div>
+            </div>
+            <div class="col-12 col-md-4 mb-4">
+                <div class="card h-100">
+                    <a href="shop-single.html">
+                        <img src="./assets/img/feature_prod_02.jpg" class="card-img-top" alt="...">
+                    </a>
+                    <div class="card-body">
+                        <ul class="list-unstyled d-flex justify-content-between">
+                            <li>
+                                <i class="text-warning fa fa-star"></i>
+                                <i class="text-warning fa fa-star"></i>
+                                <i class="text-warning fa fa-star"></i>
+                                <i class="text-muted fa fa-star"></i>
+                                <i class="text-muted fa fa-star"></i>
+                            </li>
+                            <li class="text-muted text-right">$480.00</li>
+                        </ul>
+                        <a href="shop-single.html" class="h2 text-decoration-none text-dark">Cloud Nike Shoes</a>
+                        <p class="card-text">
+                            Aenean gravida dignissim finibus. Nullam ipsum diam, posuere vitae pharetra sed, commodo ullamcorper.
+                        </p>
+                        <p class="text-muted">Reviews (48)</p>
+                    </div>
+                </div>
+            </div>
+            <div class="col-12 col-md-4 mb-4">
+                <div class="card h-100">
+                    <a href="shop-single.html">
+                        <img src="./assets/img/feature_prod_03.jpg" class="card-img-top" alt="...">
+                    </a>
+                    <div class="card-body">
+                        <ul class="list-unstyled d-flex justify-content-between">
+                            <li>
+                                <i class="text-warning fa fa-star"></i>
+                                <i class="text-warning fa fa-star"></i>
+                                <i class="text-warning fa fa-star"></i>
+                                <i class="text-warning fa fa-star"></i>
+                                <i class="text-warning fa fa-star"></i>
+                            </li>
+                            <li class="text-muted text-right">$360.00</li>
+                        </ul>
+                        <a href="shop-single.html" class="h2 text-decoration-none text-dark">Summer Addides Shoes</a>
+                        <p class="card-text">
+                            Curabitur ac mi sit amet diam luctus porta. Phasellus pulvinar sagittis diam, et scelerisque ipsum lobortis nec.
+                        </p>
+                        <p class="text-muted">Reviews (74)</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</section>

index.html

@@ -2,6 +2,7 @@
 <html lang="en">
 
 <!-- Start Header-->
+
 <head>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
@@ -9,10 +10,8 @@
     <meta name="description" content="Dieser MarmeladenLaden wird aktuell für die LV WebScripting umgesetzt.">
     <meta name="author" content="Iris Raab & Philip Stockerer">
     <!--Einbinden der genutzten Frameworks-->
-        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"
-        <script src="https://kit.fontawesome.com/7321626d2e.js" crossorigin="anonymous"></script>
+        integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
-        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
-        <script src="../js/app.js"></script>
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.0/font/bootstrap-icons.css">
     <link rel="stylesheet" href="../res/css/style.css">
     <title>MarmeladenLaden</title>
@@ -20,26 +19,46 @@
 <!-- End Header -->
 
 <!-- Start Content-->
+
 <body>
     <nav class="navbar navbar-expand-lg bg-dark navbar-light d-none d-lg-block" id="top_nav_bar">
         <!--load content via js-->
     </nav>
+    <!-- Start Main Navbar-->
     <nav class="navbar navbar-expand-lg navbar-light shadow" id="main_nav_bar">
-            <!--load content via js-->
+
     </nav>
-            <!-- Modal-->
+    <!-- End Main Navbar-->
-            <div class="modal fade bg-white" id="marmeladenladen_search" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
+    <!-- Start Modal-->
+    <div class="modal fade bg-white" id="marmeladenladen_search" tabindex="-1" role="dialog"
+        aria-labelledby="exampleModalLabel" aria-hidden="true">
+
+    </div>
+    <!-- End Modal-->
+
+    <!-- Start Banner Carousel-->
+    <div id="mmlcarousel">
+
+    </div>
+    <!-- End Banner Carousel-->
+    
+    <!-- Start Main Content -->
+    <div id="mmlMainContent">
 
     </div>
-        <h1>Test</h1>
-        <p>This is a test commit</p>
 </body>
 
 <!-- End Content -->
-    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
+<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js"
+    integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW"
+    crossorigin="anonymous"></script>
+<script src="https://kit.fontawesome.com/7321626d2e.js" crossorigin="anonymous"></script>
+<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
+<script src="../js/app.js"></script>
 <!-- Start Footer -->
 <footer class="bg-dark" id="marmeladenladen_footer">
-    <!--loading content via js-->
+    <!--load content with javascript-->
 </footer>
 <!-- End Footer -->
+
 </html>

js/app.ts

@@ -1,6 +1,8 @@
 $(document).ready(function() {
     $('#top_nav_bar').load('../components/top_nav.html');
     $('#main_nav_bar').load('../components/main_nav.html');
+    $('#mmlcarousel').load('../components/banner.html');
+    $('#mmlMainContent').load('../components/ftProducts.html');
     $('#marmeladenladen_footer').load('../components/footer.html');
     $('#marmeladenladen_search').load('../components/modal.html');
 });

res/css/style.css

@@ -43,6 +43,17 @@
 }
 #marmeladenladen_footer .border-light { border-color: #2d343f !important;}
 
+/* Carousel*/
+#marmeladenLadencarousel .carousel-indicators li {
+  margin-top: -50px;
+  background-color: #d86f23;
+}
+#marmeladenLadencarousel .carousel-control-next i,
+#marmeladenLadencarousel .carousel-control-prev i {
+  color: #d86f23 !important;
+  font-size: 2.8em !important;
+}
+
 /* Medium devices */
 @media (min-width: 768px) {
   #main_nav_bar .navbar-nav {max-width: 450px;}