added cards and a table to bootstrap shopping list
This commit is contained in:
parent
6c2edc3d6a
commit
e45e508fe7
1440
bootstrap_node/TAGS
1440
bootstrap_node/TAGS
File diff suppressed because it is too large
Load Diff
@ -5,6 +5,16 @@
|
|||||||
object-fit: cover;
|
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/)
|
* Bootstrap v4.5.0 (https://getbootstrap.com/)
|
||||||
* Copyright 2011-2020 The Bootstrap Authors
|
* Copyright 2011-2020 The Bootstrap Authors
|
||||||
|
|||||||
File diff suppressed because one or more lines are too long
BIN
bootstrap_node/html/img/asparagus.jpg
Normal file
BIN
bootstrap_node/html/img/asparagus.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 897 KiB |
@ -9,7 +9,7 @@
|
|||||||
<body>
|
<body>
|
||||||
|
|
||||||
<!-- navbar -->
|
<!-- 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">
|
<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>
|
<span class="navbar-toggler-icon"></span>
|
||||||
</button>
|
</button>
|
||||||
@ -36,10 +36,22 @@
|
|||||||
<a class="dropdown-item" href="#">Käse</a>
|
<a class="dropdown-item" href="#">Käse</a>
|
||||||
</div>
|
</div>
|
||||||
</li>
|
</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>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
|
|
||||||
|
|
||||||
|
<!-- carousel -->
|
||||||
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
|
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
|
||||||
<div class="carousel-inner">
|
<div class="carousel-inner">
|
||||||
<div class="carousel-item active">
|
<div class="carousel-item active">
|
||||||
@ -62,6 +74,49 @@
|
|||||||
</a>
|
</a>
|
||||||
</div>
|
</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 -->
|
<!-- scripts -->
|
||||||
<script src="../node_modules/jquery/dist/jquery.js"></script>
|
<script src="../node_modules/jquery/dist/jquery.js"></script>
|
||||||
<script src="../node_modules/popper.js/dist/popper.js"></script>
|
<script src="../node_modules/popper.js/dist/popper.js"></script>
|
||||||
|
|||||||
@ -6,6 +6,17 @@ $enable-gradients: true;
|
|||||||
object-fit: cover;
|
object-fit: cover;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.card-img-dim {
|
||||||
|
height: 300px; /* height of container */
|
||||||
|
object-fit: cover;
|
||||||
|
}
|
||||||
|
|
||||||
|
.custom-checkbox {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// Required
|
// Required
|
||||||
@import "../node_modules/bootstrap/scss/functions";
|
@import "../node_modules/bootstrap/scss/functions";
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user