Untitled

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="https://bootswatch.com/4/flatly/bootstrap.min.css">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">


    <script>
        document.addEventListener('DOMContentLoaded', () => {

        });

    </script>
</head>
<body>
    <!-- задача 1 -->
    <div class="container my-4">
        <div class="row">
            <div class="form-group col-lg-6 col-md-6 col-sm-6">
                <input type="text" id="" class="form-control ">
            </div>
            <div class="form-group col-lg-6 col-md-6 col-sm-6">
                <input type="text" id="" class="form-control ">
            </div>
        </div>

        <div class="row">
            <div class="form-group col-lg-6 col-md-6 col-sm-6">
                <a href="#" class="btn btn-primary food-btn" data-food="fruit">Ябълка</a>
                <a href="#" class="btn btn-primary food-btn" data-food="fruit">Портокал</a>
                <a href="#" class="btn btn-primary food-btn" data-food="fruit">Манго</a>
        </div>
        <div class="form-group col-lg-6 col-md-6 col-sm-6">
                <a href="#" class="btn btn-primary food-btn" data-food="vegetable">Домат</a>
                <a href="#" class="btn btn-primary food-btn" data-food="vegetable">Репичка</a>
                <a href="#" class="btn btn-primary food-btn" data-food="vegetable">Картоф</a>
            </div>
            </div>
        </div>
    </div>

    <!-- задача 2 -->
    <div class="container my-4" id="">
        <ul class="list-group table-of-contents">
              <a class="list-group-item" href="#navbar">Navbar</a>
              <a class="list-group-item alert-info" href="#buttons">Buttons</a>
              <a class="list-group-item" href="#typography">Typography</a>
              <a class="list-group-item" href="#tables">Tables</a>
              <a class="list-group-item alert-danger" href="#forms">Forms</a>
              <a class="list-group-item alert-success" href="#navs">Navs</a>
              <a class="list-group-item" href="#indicators">Indicators</a>
              <a class="list-group-item alert-warning" href="#progress-bars">Progress bars</a>
              <a class="list-group-item" href="#containers">Containers</a>
              <a class="list-group-item" href="#dialogs">Dialogs</a>
        </ul>
    </div>

    <!-- задача 3 -->

    <div class="container mt-3">
    <div class="progress" style="height:20px">
      <div class="progress-bar progress-bar-striped"  role="progressbar" style="width: 50%"></div>
    </div>
    <div class="col-12 text-center">
       <a href="#" class="btn btn-success">20%</a>
       <a href="#" class="btn btn-success">40%</a>
       <a href="#" class="btn btn-success">80%</a>
     </div>
  </div>
</body>
</html>