wendtth65566/MDT_5_2_projekt
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

added cards and a table to bootstrap shopping list

Browse Source
This commit is contained in:
Thilo Wendt 2020-06-06 18:50:28 +02:00
parent 6c2edc3d6a
commit e45e508fe7
6 changed files with 798 additions and 722 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1440
bootstrap_node/TAGS
View File

File diff suppressed because it is too large Load Diff

10
bootstrap_node/css/custom.css
View File

@ -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

2
bootstrap_node/css/custom.css.map
View File

File diff suppressed because one or more lines are too long

BIN
bootstrap_node/html/img/asparagus.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 897 KiB

57
bootstrap_node/html/index.html
View File

@ -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>

11
bootstrap_node/scss/custom.scss
View File

@ -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";