126 lines
6.6 KiB
HTML
126 lines
6.6 KiB
HTML
<!doctype html>
|
|
<html>
|
|
<head>
|
|
<title>Bootstrap shopping list</title>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
|
<link rel="stylesheet" href="../css/custom.css">
|
|
</head>
|
|
<body>
|
|
|
|
<!-- navbar -->
|
|
<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>
|
|
<div class="collapse navbar-collapse" id="navbarSupportedContent">
|
|
<ul class="navbar-nav mr-auto">
|
|
<li class="nav-item active dropdown">
|
|
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
|
Obst und Gemüse
|
|
</a>
|
|
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
|
|
<a class="dropdown-item" href="#">Frühling</a>
|
|
<a class="dropdown-item" href="#">Sommer</a>
|
|
<a class="dropdown-item" href="#">Herbst</a>
|
|
<a class="dropdown-item" href="#">Winter</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">
|
|
Milchprodukte
|
|
</a>
|
|
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
|
|
<a class="dropdown-item" href="#">Milch</a>
|
|
<a class="dropdown-item" href="#">Jogurt</a>
|
|
<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">
|
|
<img src="./img/veg1.jpg" class="d-block w-100 carousel-img" alt="vegetables">
|
|
</div>
|
|
<div class="carousel-item">
|
|
<img src="./img/veg2.jpg" class="d-block w-100 carousel-img" alt="vegetables">
|
|
</div>
|
|
<div class="carousel-item">
|
|
<img src="./img/veg3.jpg" class="d-block w-100 carousel-img" alt="vegetables">
|
|
</div>
|
|
</div>
|
|
<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
|
|
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
|
|
<span class="sr-only">Previous</span>
|
|
</a>
|
|
<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
|
|
<span class="carousel-control-next-icon" aria-hidden="true"></span>
|
|
<span class="sr-only">Next</span>
|
|
</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>
|
|
<script src="../node_modules/bootstrap/dist/js/bootstrap.js"></script>
|
|
</body>
|
|
</html>
|