У меня есть сайт <!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
    <meta name="generator" content="Jekyll v3.8.5">
    <title>sukhihinauto</title>

    <link rel="canonical" href="https://getbootstrap.com/docs/4.3/examples/pricing/">

    <!-- Bootstrap core CSS -->
<link href="https://getbootstrap.com/docs/4.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">


    <script type="text/javascript"  charset="UTF-8"></script><style>
      .bd-placeholder-img {
        font-size: 1.125rem;
        text-anchor: middle;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
      }

      @media (min-width: 768px) {
        .bd-placeholder-img-lg {
          font-size: 3.5rem;
        }
      }
    </style>
    
      <style>
  body {
  transition: background-color 0.6s ease;
}

.dark-mode {
  background-color: #333;
  color: #fff;
}

.dark-mode h4,          
.dark-mode p,
.dark-mode ul,          
.dark-mode h1,
.dark-mode a {
  color: #333; 
}
.dark-mode h3 {
  color: #333; 
}
        
 .dark-mode h2, 
 .dark-mode p { 
  color: #fff; 
}
#dark-mode-toggle {
  background-color: #333;
  color: #fff;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
}
#clear-cookie {
  background-color: #333;
  color: #fff;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
}
#clear-cookie:hover {
  background-color: #555;
}

#dark-mode-toggle:hover {
  background-color: #555;
}

.pricing-header h1,
.pricing-header p {
  color: #111; /* Цвет текста  наша комп*/
}

</style>
  </head>
  <body>
    <div class="d-flex flex-column flex-md-row align-items-center p-3 px-md-4 mb-3 bg-white border-bottom shadow-sm">
    <h3 class="my-0 mr-md-auto font-weight-normal">SUKHININAUTO</h3>
        <nav class="my-2 my-md-0 mr-md-3">
    <p class="p-2 text-dark">+7 (952) 959-23-99</p>
            <button id="dark-mode-toggle">Переключить тему</button>
            <button id="clear-cookie">Очистить cookie</button>
</nav> 
</div>

<div class="pricing-header px-3 py-3 pt-md-5 pb-md-4 mx-auto text-center">
  <h2 class="display-4">Наши услуги</h2>
  <p1 class="lead">Мы, компания SUKHININAUTO, специализируемся на Б/У и новых автомобилях с внутреннего корейского и китайского рынка, а также российского.</p1>
</div>

<div class="container">
  <div class="card-deck mb-3 text-center">
    <div class="card mb-4 shadow-sm">
      <div class="card-header">
      <h4 class="my-0 font-weight-normal">Автомобили из кореи</h4>
      </div>
      <div class="card-body">
        <h1 class="card-title pricing-card-title">Консультация <small class="text-muted"></small></h1>
        <ul class="list-unstyled mt-3 mb-4">
          <li>Доставка за 20 дней</li>
          <li>Детальный осмотр каждого авто</li>
          <li>Помощь с растаможкой</li>
          <li>Прозрачная цена</li>
        </ul>
        <a href="https://t.me/saane4ek" class="w-100 btn btn-lg btn-outline-primary">Напишите нам</a>
      </div>
    </div>
    <div class="card mb-4 shadow-sm">
      <div class="card-header">
        <h4 class="my-0 font-weight-normal">Автомобили из китая</h4>
      </div>
      <div class="card-body">
        <h1 class="card-title pricing-card-title">Консультация <small class="text-muted"></small></h1>
        <ul class="list-unstyled mt-3 mb-4">
          <li>Доставка за 30 дней</li>
          <li>Привезём даже санкционные авто</li>
          <li>Помощь с растаможкой</li>
          <li>Поиск авто без депозита</li>
        </ul>
        <a href="https://t.me/saane4ek" class="w-100 btn btn-lg btn-outline-primary">Напишите нам</a>
      </div>
    </div>
    <div class="card mb-4 shadow-sm">
      <div class="card-header">
       <h4 class="my-0 font-weight-normal">Автомобили в россии</h4>
      </div>
      <div class="card-body">
        <h1 class="card-title pricing-card-title">Консультация <small class="text-muted"></small></h1>
        <ul class="list-unstyled mt-3 mb-4">
          <li>Подбор по параметрам</li>
          <li>Проверим историю авто</li>
          <li>Сделаем диагностику</li>
          <li>Проверим на поврежнения</li>
        </ul>
        <a href="https://t.me/saane4ek" class="w-100 btn btn-lg btn-outline-primary">Напишите нам</a>
      </div>
    </div>
  </div>

  <footer class="pt-4 my-md-5 pt-md-5 border-top">
    <div class="row">
      <div class="col-12 col-md">
        <img class="mb-2" src="https://getbootstrap.com/docs/4.3/assets/brand/bootstrap-solid.svg" alt="" width="24" height="24">
        <small class="d-block mb-3 text-muted">&copy; 2023-2024</small>
      </div>
      <div class="col-6 col-md">
        <h5>Характеристики</h5>
        <ul class="list-unstyled text-small">
          <li><a class="text-muted" href="https://my.mail.ru/mail/avs.24/"><li class="mb-1">Сотрудничество</li></a>
        </ul>
      </div>
      <div class="col-6 col-md">
        <h5>Ресурсы</h5>
        <ul class="list-unstyled text-small">
          <li><a class="text-muted" href="https://www.youtube.com/@saneek1114/featured">YouTube</a></li>
          <li><a class="text-muted" href="https://t.me/saane4ek">Telegram</a></li>
          <li><a class="text-muted" href="https://wa.me/79529592399">WhatsApp</a></li>
        </ul>
      </div>
      <div class="col-6 col-md">
        <h5>О нас</h5>
        <ul class="list-unstyled text-small">
          <li><a class="text-muted" href="index.html">Команда</a></li>
          <li><a class="text-muted" href="https://yandex.ru/maps/-/CDFSnBzr">Адреса</a></li>
        </ul>
      </div>
    </div>
  </footer>
</div>
<script>
  document.addEventListener('DOMContentLoaded', function() {
    const darkModeToggle = document.getElementById('dark-mode-toggle');
    const clearCookieButton = document.getElementById('clear-cookie');
    const body = document.body;
  
    
    if (document.cookie.includes('darkMode=true')) {
      body.classList.add('dark-mode');
    }
  
    
    darkModeToggle.addEventListener('click', function() {
      body.classList.toggle('dark-mode');
  
      
      if (body.classList.contains('dark-mode')) {
        document.cookie = 'darkMode=true; expires=Fri, 31 Dec 9999 23:59:59 GMT';
      } else {
        document.cookie = 'darkMode=; expires=Thu, 01 Jan 1970 00:00:00 GMT';
      }
    });
  
    
    clearCookieButton.addEventListener('click', function() {
      document.cookie = 'darkMode=; expires=Thu, 01 Jan 1970 00:00:00 GMT';
      body.classList.remove('dark-mode');
    });
  });
  </script>
</body>
</html>
 и задиние которое надо реализовть На сайте из второго задания реализовать на любом языке программирование элементы программирование на сервере - вычисления, динамическое изменение страницы и т.п. Обязательным элементом будет работа с базой данных на чтение и запись.

При работе с БД обязательным является как запись, удаление и обновление  данных в БД, так и выборка данных из неё с визуальной демонстрацией результата. Опциональным является сортировка и фильтрация ответов.

Рекомендуется обратить внимание на защиту от SQL-инъекций