Browse Source

added cards and a table to bootstrap shopping list

master
Thilo Wendt 4 years ago
parent
commit
e45e508fe7

+ 720
- 720
bootstrap_node/TAGS
File diff suppressed because it is too large
View File


+ 10
- 0
bootstrap_node/css/custom.css View File

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

+ 1
- 1
bootstrap_node/css/custom.css.map
File diff suppressed because it is too large
View File


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


+ 56
- 1
bootstrap_node/html/index.html View File

<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>
<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">
</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>

+ 11
- 0
bootstrap_node/scss/custom.scss View File

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…
Cancel
Save