added cards and a table to bootstrap shopping list

bootstrap_node/css/custom.css

@@ -5,6 +5,16 @@
   object-fit: cover;
 }
 
+.card-img-dim {
+  height: 300px;
+  /* height of container */
+  object-fit: cover;
+}
+
+.custom-checkbox {
+  text-align: center;
+}
+
 /*!
  * Bootstrap v4.5.0 (https://getbootstrap.com/)
  * Copyright 2011-2020 The Bootstrap Authors

bootstrap_node/css/custom.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../scss/custom.scss","../node_modules/bootstrap/scss/bootstrap.scss","../node_modules/bootstrap/scss/_root.scss","../node_modules/bootstrap/scss/_reboot.scss","../node_modules/bootstrap/scss/_variables.scss","../node_modules/bootstrap/scss/vendor/_rfs.scss","../node_modules/bootstrap/scss/mixins/_hover.scss","../node_modules/bootstrap/scss/_type.scss","../node_modules/bootstrap/scss/mixins/_lists.scss","../node_modules/bootstrap/scss/_images.scss","../node_modules/bootstrap/scss/mixins/_image.scss","../node_modules/bootstrap/scss/mixins/_border-radius.scss","../node_modules/bootstrap/scss/_code.scss","../node_modules/bootstrap/scss/_grid.scss","../node_modules/bootstrap/scss/mixins/_grid.scss","../node_modules/bootstrap/scss/mixins/_breakpoints.scss","../node_modules/bootstrap/scss/mixins/_grid-framework.scss","../node_modules/bootstrap/scss/_tables.scss","../node_modules/bootstrap/scss/mixins/_table-row.scss","../node_modules/bootstrap/scss/_forms.scss","../node_modules/bootstrap/scss/mixins/_transition.scss","../node_modules/bootstrap/scss/mixins/_forms.scss","../node_modules/bootstrap/scss/mixins/_gradients.scss","../node_modules/bootstrap/scss/_buttons.scss","../node_modules/bootstrap/scss/mixins/_buttons.scss","../node_modules/bootstrap/scss/_transitions.scss","../node_modules/bootstrap/scss/_dropdown.scss","../node_modules/bootstrap/scss/mixins/_caret.scss","../node_modules/bootstrap/scss/mixins/_nav-divider.scss","../node_modules/bootstrap/scss/_button-group.scss","../node_modules/bootstrap/scss/_input-group.scss","../node_modules/bootstrap/scss/_custom-forms.scss","../node_modules/bootstrap/scss/_nav.scss","../node_modules/bootstrap/scss/_navbar.scss","../node_modules/bootstrap/scss/_card.scss","../node_modules/bootstrap/scss/_breadcrumb.scss","../node_modules/bootstrap/scss/_pagination.scss","../node_modules/bootstrap/scss/mixins/_pagination.scss","../node_modules/bootstrap/scss/_badge.scss","../node_modules/bootstrap/scss/mixins/_badge.scss","../node_modules/bootstrap/scss/_jumbotron.scss","../node_modules/bootstrap/scss/_alert.scss","../node_modules/bootstrap/scss/mixins/_alert.scss","../node_modules/bootstrap/scss/_progress.scss","../node_modules/bootstrap/scss/_media.scss","../node_modules/bootstrap/scss/_list-group.scss","../node_modules/bootstrap/scss/mixins/_list-group.scss","../node_modules/bootstrap/scss/_close.scss","../node_modules/bootstrap/scss/_toasts.scss","../node_modules/bootstrap/scss/_modal.scss","../node_modules/bootstrap/scss/_tooltip.scss","../node_modules/bootstrap/scss/mixins/_reset-text.scss","../node_modules/bootstrap/scss/_popover.scss","../node_modules/bootstrap/scss/_carousel.scss","../node_modules/bootstrap/scss/mixins/_clearfix.scss","../node_modules/bootstrap/scss/_spinners.scss","../node_modules/bootstrap/scss/utilities/_align.scss","../node_modules/bootstrap/scss/mixins/_background-variant.scss","../node_modules/bootstrap/scss/utilities/_background.scss","../node_modules/bootstrap/scss/utilities/_borders.scss","../node_modules/bootstrap/scss/utilities/_display.scss","../node_modules/bootstrap/scss/utilities/_embed.scss","../node_modules/bootstrap/scss/utilities/_flex.scss","../node_modules/bootstrap/scss/utilities/_float.scss","../node_modules/bootstrap/scss/utilities/_interactions.scss","../node_modules/bootstrap/scss/utilities/_overflow.scss","../node_modules/bootstrap/scss/utilities/_position.scss","../node_modules/bootstrap/scss/utilities/_screenreaders.scss","../node_modules/bootstrap/scss/mixins/_screen-reader.scss","../node_modules/bootstrap/scss/utilities/_shadows.scss","../node_modules/bootstrap/scss/utilities/_sizing.scss","../node_modules/bootstrap/scss/utilities/_spacing.scss","../node_modules/bootstrap/scss/utilities/_stretched-link.scss","../node_modules/bootstrap/scss/utilities/_text.scss","../node_modules/bootstrap/scss/mixins/_text-truncate.scss","../node_modules/bootstrap/scss/mixins/_text-emphasis.scss","../node_modules/bootstrap/scss/mixins/_text-hide.scss","../node_modules/bootstrap/scss/utilities/_visibility.scss","../node_modules/bootstrap/scss/_print.scss"],"names":[],"mappings":";AAGA;EACI;AAAe;EACf;;;ACLJ;AAAA;AAAA;AAAA;AAAA;AAAA;ACCA;EAGI;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAIA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAIA;EAAA;EAAA;EAAA;EAAA;EAKF;EACA;;;ACAF;AAAA;AAAA;EAGE;;;AAGF;EACE;EACA;EACA;EACA;;;AAMF;EACE;;;AAUF;EACE;EACA,aC2O4B;EC3JxB,WAtCa;EFxCjB,aCoP4B;EDnP5B,aCwP4B;EDvP5B,OCnCS;EDoCT;EACA,kBC9CS;;;AD0DX;EACE;;;AASF;EACE;EACA;EACA;;;AAaF;EACE;EACA,eCsN4B;;;AD/M9B;EACE;EACA,eCyF0B;;;AD9E5B;AAAA;EAEE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;AAAA;AAAA;EAGE;EACA;;;AAGF;AAAA;AAAA;AAAA;EAIE;;;AAGF;EACE,aCuJ4B;;;ADpJ9B;EACE;EACA;;;AAGF;EACE;;;AAGF;AAAA;EAEE,aC0I4B;;;ADvI9B;EExFI;;;AFiGJ;AAAA;EAEE;EEnGE;EFqGF;EACA;;;AAGF;EAAM;;;AACN;EAAM;;;AAON;EACE,OCNwC;EDOxC,iBCNwC;EDOxC;;AGhLA;EHmLE,OCTsC;EDUtC,iBCTsC;;;ADkB1C;EACE;EACA;;AG/LA;EHkME;EACA;;;AASJ;AAAA;AAAA;AAAA;EAIE,Line truncated
+{"version":3,"sourceRoot":"","sources":["../scss/custom.scss","../node_modules/bootstrap/scss/bootstrap.scss","../node_modules/bootstrap/scss/_root.scss","../node_modules/bootstrap/scss/_reboot.scss","../node_modules/bootstrap/scss/_variables.scss","../node_modules/bootstrap/scss/vendor/_rfs.scss","../node_modules/bootstrap/scss/mixins/_hover.scss","../node_modules/bootstrap/scss/_type.scss","../node_modules/bootstrap/scss/mixins/_lists.scss","../node_modules/bootstrap/scss/_images.scss","../node_modules/bootstrap/scss/mixins/_image.scss","../node_modules/bootstrap/scss/mixins/_border-radius.scss","../node_modules/bootstrap/scss/_code.scss","../node_modules/bootstrap/scss/_grid.scss","../node_modules/bootstrap/scss/mixins/_grid.scss","../node_modules/bootstrap/scss/mixins/_breakpoints.scss","../node_modules/bootstrap/scss/mixins/_grid-framework.scss","../node_modules/bootstrap/scss/_tables.scss","../node_modules/bootstrap/scss/mixins/_table-row.scss","../node_modules/bootstrap/scss/_forms.scss","../node_modules/bootstrap/scss/mixins/_transition.scss","../node_modules/bootstrap/scss/mixins/_forms.scss","../node_modules/bootstrap/scss/mixins/_gradients.scss","../node_modules/bootstrap/scss/_buttons.scss","../node_modules/bootstrap/scss/mixins/_buttons.scss","../node_modules/bootstrap/scss/_transitions.scss","../node_modules/bootstrap/scss/_dropdown.scss","../node_modules/bootstrap/scss/mixins/_caret.scss","../node_modules/bootstrap/scss/mixins/_nav-divider.scss","../node_modules/bootstrap/scss/_button-group.scss","../node_modules/bootstrap/scss/_input-group.scss","../node_modules/bootstrap/scss/_custom-forms.scss","../node_modules/bootstrap/scss/_nav.scss","../node_modules/bootstrap/scss/_navbar.scss","../node_modules/bootstrap/scss/_card.scss","../node_modules/bootstrap/scss/_breadcrumb.scss","../node_modules/bootstrap/scss/_pagination.scss","../node_modules/bootstrap/scss/mixins/_pagination.scss","../node_modules/bootstrap/scss/_badge.scss","../node_modules/bootstrap/scss/mixins/_badge.scss","../node_modules/bootstrap/scss/_jumbotron.scss","../node_modules/bootstrap/scss/_alert.scss","../node_modules/bootstrap/scss/mixins/_alert.scss","../node_modules/bootstrap/scss/_progress.scss","../node_modules/bootstrap/scss/_media.scss","../node_modules/bootstrap/scss/_list-group.scss","../node_modules/bootstrap/scss/mixins/_list-group.scss","../node_modules/bootstrap/scss/_close.scss","../node_modules/bootstrap/scss/_toasts.scss","../node_modules/bootstrap/scss/_modal.scss","../node_modules/bootstrap/scss/_tooltip.scss","../node_modules/bootstrap/scss/mixins/_reset-text.scss","../node_modules/bootstrap/scss/_popover.scss","../node_modules/bootstrap/scss/_carousel.scss","../node_modules/bootstrap/scss/mixins/_clearfix.scss","../node_modules/bootstrap/scss/_spinners.scss","../node_modules/bootstrap/scss/utilities/_align.scss","../node_modules/bootstrap/scss/mixins/_background-variant.scss","../node_modules/bootstrap/scss/utilities/_background.scss","../node_modules/bootstrap/scss/utilities/_borders.scss","../node_modules/bootstrap/scss/utilities/_display.scss","../node_modules/bootstrap/scss/utilities/_embed.scss","../node_modules/bootstrap/scss/utilities/_flex.scss","../node_modules/bootstrap/scss/utilities/_float.scss","../node_modules/bootstrap/scss/utilities/_interactions.scss","../node_modules/bootstrap/scss/utilities/_overflow.scss","../node_modules/bootstrap/scss/utilities/_position.scss","../node_modules/bootstrap/scss/utilities/_screenreaders.scss","../node_modules/bootstrap/scss/mixins/_screen-reader.scss","../node_modules/bootstrap/scss/utilities/_shadows.scss","../node_modules/bootstrap/scss/utilities/_sizing.scss","../node_modules/bootstrap/scss/utilities/_spacing.scss","../node_modules/bootstrap/scss/utilities/_stretched-link.scss","../node_modules/bootstrap/scss/utilities/_text.scss","../node_modules/bootstrap/scss/mixins/_text-truncate.scss","../node_modules/bootstrap/scss/mixins/_text-emphasis.scss","../node_modules/bootstrap/scss/mixins/_text-hide.scss","../node_modules/bootstrap/scss/utilities/_visibility.scss","../node_modules/bootstrap/scss/_print.scss"],"names":[],"mappings":";AAGA;EACI;AAAe;EACf;;;AAGJ;EACI;AAAe;EACf;;;AAGJ;EACI;;;ACdJ;AAAA;AAAA;AAAA;AAAA;AAAA;ACCA;EAGI;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAIA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAIA;EAAA;EAAA;EAAA;EAAA;EAKF;EACA;;;ACAF;AAAA;AAAA;EAGE;;;AAGF;EACE;EACA;EACA;EACA;;;AAMF;EACE;;;AAUF;EACE;EACA,aC2O4B;EC3JxB,WAtCa;EFxCjB,aCoP4B;EDnP5B,aCwP4B;EDvP5B,OCnCS;EDoCT;EACA,kBC9CS;;;AD0DX;EACE;;;AASF;EACE;EACA;EACA;;;AAaF;EACE;EACA,eCsN4B;;;AD/M9B;EACE;EACA,eCyF0B;;;AD9E5B;AAAA;EAEE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;AAAA;AAAA;EAGE;EACA;;;AAGF;AAAA;AAAA;AAAA;EAIE;;;AAGF;EACE,aCuJ4B;;;ADpJ9B;EACE;EACA;;;AAGF;EACE;;;AAGF;AAAA;EAEE,aC0I4B;;;ADvI9B;EExFI;;;AFiGJ;AAAA;EAEE;EEnGE;EFqGF;EACA;;;AAGF;EAAM;;;AACN;EAAM;;;AAON;EACE,OCNwC;EDOxC,iBCNwC;EDOxC;;AGhLA;EHmLE,OCTsC;EDUtC,iBCTsC;;;ADkB1C;EACE;EACA;;AG/LA;EHkMLine truncated

bootstrap_node/html/index.html

@@ -9,7 +9,7 @@
     <body>
 
         <!-- navbar -->
-        <nav class="navbar navbar-expand-sm navbar-light bg-gradient-primary">
+        <nav class="navbar navbar-expand-sm navbar-light bg-gradient-primary sticky-top">
             <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                 <span class="navbar-toggler-icon"></span>
             </button>
@@ -36,10 +36,22 @@
                             <a class="dropdown-item" href="#">Käse</a>
                         </div>
                     </li>
+                    <li class="nav-item dropdown">
+                        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                            Fleisch
+                        </a>
+                        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
+                            <a class="dropdown-item" href="#">Grill</a>
+                            <a class="dropdown-item" href="#">Wurst</a>
+                            <a class="dropdown-item" href="#">Braten</a>
+                        </div>
+                    </li>
                 </ul>
             </div>
         </nav>
 
+
+        <!-- carousel -->
         <div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
             <div class="carousel-inner">
                 <div class="carousel-item active">
@@ -62,6 +74,49 @@
             </a>
         </div>
 
+        <!-- shopping list -->
+
+        <div class="container-fluid p-3">
+            <div class="row">
+                <div class="col-sm-12">
+                    <h1 class="text-center display-4">Frühling</h1>
+                    <hr>
+                </div>
+                <div class="col-sm-8">
+                    <table class="table table-striped">
+                        <thead>
+                            <tr>
+                                <th scope="col">Sorte</th>
+                                <th scope="col">Beschreibung</th>
+                                <th scope="col">Eingekauft?</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <tr>
+                                <th scope="row" class="align-middle"> Spargel </th>
+                                <td class="align-middle"> Die besonders schmackhaften Keime der Spargelpflanze landen im Frühling gerne in den Küchen von Spitzenrestaurants. Warum also auch nicht zu Hause zubereiten? </td>
+                                <td class="custom-checkbox align-middle"> <input type="checkbox" aria-label="Checkbox for status shopped"> </td>
+                            </tr>
+
+                            <tr>
+                                <th scope="row" class="align-middle"> Erdbeeren </th>
+                                <td class="align-middle"> Jeder kennt sie jeder liebt sie - und als Nachtisch nach dem Spargel optimal! </td>
+                                <td class="custom-checkbox align-middle"> <input type="checkbox" aria-label="Checkbox for status shopped"> </td>
+                            </tr>
+                        </tbody>
+                        
+                    </table>
+                </div>
+                <div class="col-sm-4">
+                    <div class="card" style="max-width: 18rem;">
+                        <img src="./img/asparagus.jpg" class="card-img-top card-img-dim" alt="Spargel">
+                        <div class="card-body">
+                            <p class="card-text">Spargel ist im Frühling besonders begehrt, weil es ihn nur von etwa Mitte April bis zum 26. Juni gibt.</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
         <!-- scripts -->
         <script src="../node_modules/jquery/dist/jquery.js"></script>
         <script src="../node_modules/popper.js/dist/popper.js"></script>

bootstrap_node/scss/custom.scss

@@ -6,6 +6,17 @@ $enable-gradients: true;
     object-fit: cover;
 }
 
+.card-img-dim {
+    height: 300px; /* height of container */
+    object-fit: cover;
+}
+
+.custom-checkbox {
+    text-align: center;
+}
+
+
+
 
 // Required
 @import "../node_modules/bootstrap/scss/functions";