wendtth65566
/
MDT_5_2_projekt

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