CodePen Embed - vwVREK

<?php
$host = 'Practika';  // Хост, у нас все локально
$user = 'root';    // Имя созданного вами пользователя
$pass = ''; // Установленный вами пароль пользователю
$db_name = 'practika_menu';   // Имя базы данных
$link = new mysqli($host, $user, $pass, $db_name); // Соединяемся с базой

// Ругаемся, если соединение установить не удалось
if (!$link) {
  echo 'Не могу соединиться с БД. Код ошибки: ' . mysqli_connect_errno() . ', ошибка: ' . mysqli_connect_error();
  exit;
}
?>



<!DOCTYPE html>
<html lang="ru">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Меню</title>

  <link rel="stylesheet" href="./css/style.css">
  <link href="https://fonts.googleapis.com/css?family=Exo+2:300,400,500,700|Roboto+Condensed:700&display=swap" rel="stylesheet">
</head>

<body>
  <!-- header -->

  <!-- end header -->
  <a href="wine.php">Вино</a>
  <a href="table-order.php">страница заказов</a>
  <!-- site body  -->
  <div class="site-body">
    <h1 class="menu">Меню</h1>
    <div class="container">
      <!--  -->

      <?php
      $sql = "SELECT * FROM `products`";
      $result = $link->query($sql);
      ?>

      <div class="categories">
        <div class="categories__block">
          <?php while ($product = $result->fetch_assoc()) : ?>
            <h1><?= $product['categories'] ?></h1>
          </div>

        </div>
        <?php while ($product = $result->fetch_assoc()) : ?>
          <div class="block">
            <div class="image">
              <img src=".<?= $product['image'] ?>">
            </div>
            <div class="text-block">
              <div class="head-title">
                <div class="text-title">
                  <h2><?= $product['name'] ?></h2>
                </div>
                <div class="price">
                  <span><?= $product['price'] ?> Р</span>
                </div>
              </div>
              <div class="description line-clamp">
                <p><?= $product['info'] ?></p>
              </div>
              <div class="ingredients-block-order">
                <div class="ingredients-block line-clamp">
                  <?php $ingrs = explode(";", $product["ingr"]); ?>
                  <?php for ($i = 0; $i < count($ingrs); $i++) : ?>
                    <span class="ingredient"><?= $ingrs[$i] ?></span>
                  <?php endfor; ?>
                </div>
                <div class="laptop-product_bottom">
                  <button class="product_setup">
                    <div>
                      Купить
                    </div>
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
      <? endwhile; ?>
    <? endwhile; ?>
  </div>
  <div class="site-body__food-menu">
    <div class="food-menu__categories">
      <?php $sql = "SELECT * FROM `products`  \n"
        . "ORDER BY `products`.`categories`  DESC";
      $result = $link->query($sql);
      ?>
      <?php while ($product = $result->fetch_assoc()) : ?>
        <ul class="categories__li">
          <button><a href="#">
              <li><?= $product['categories'] ?></li>
            </a></button>
        </ul>
      <? endwhile; ?>
    </div>
  </div>
  </div>
  <!-- end site body  -->

  <!-- footer -->

  <!-- end footer -->
  <script src="./js/engine.js"></script>
  <script src="./js/index.js"></script>
</body>

</html>

@font-face {
  font-family: "Bookman Old Style";
  src: url("../fonts/BOOKOS.TTF") format("TTF");
}

@media (max-width: 320px) {
  .image img {
    width: 90%;
    height: auto;

    max-width: 800px;
  }
}

@media (max-width: 425px) {
  .ingredients-block-order {
    margin-left: 20px;
    margin-right: 20px;
  }

  .head-title {
    text-align: center;
    flex-direction: column;
  }

  .text-title {
    margin-bottom: 10px;
  }
}

@media (min-width: 426px) {
  .laptop-product_bottom {
    width: auto;
    max-width: 300px;
    margin: auto;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
  }
}

@media (max-width: 569px) {
  .ingredients-block-order {
    flex-direction: column;
  }
}

@media (min-width: 570px) {
  .laptop-product_bottom {
    margin-left: 20px;
  }
}

@media (max-width: 768px) {
  .block {
    flex-direction: column;
  }

  .image img {
    width: 80%;
  }
}

@media (min-width: 769px) {
  .head-title {
    margin-top: 20px;
  }
}

.block {
  display: flex;
  border: 1px solid black;
  margin: 20px 15px 25px 15px;
  min-width: 200px;
}

.text-block-wine {
  margin: auto;
}

.head-title {
  display: flex;
  justify-content: space-between;
  margin-right: 15px;
  margin-left: 15px;
}

.head-title .price {
  color: #000000;
  font-family: "Roboto Condensed";
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 1.92px;
}

.text-title h2 {
  color: #5d2d0b;
  font-family: "Roboto Condensed";
  font-size: 24px;
  font-weight: 700;
  text-align: center;
  letter-spacing: 1.92px;
  -webkit-margin-before: 0px;
  -webkit-margin-after: 0px;
  -webkit-margin-start: 0px;
  -webkit-margin-end: 0px;
}

.menu {
  text-align: center;
  color: #5d2d0b;
  font-family: "Roboto Condensed";
  font-size: 27px;
  font-weight: 700;
}

.image {
  text-align: center;
  margin: 16px;
  width: auto;
}

.image img {
  height: auto;

  max-width: 300px;
}

.description {
  overflow: hidden;
  text-align: justify;
  margin: 20px;
  color: #010101;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 1.28px;
  line-height: 18px;
  text-decoration: none;
}

.description p {
  margin: 0 0 0 0;
}

.line-clamp {
  display: -webkit-box;
  -webkit-line-clamp: 10;
  -webkit-box-orient: vertical;
}

.ingredients-block-order {
  margin-left: 20px;
  margin-right: 20px;
  display: flex;
}

.ingredients-block {
  margin-top: 20px;
  text-align: justify;
  flex: 1;
}

.ingredients-block span {
  display: inline-block;
  padding: 11px;
  margin: 2px;
  border-radius: 10px;
  border: 1px solid #5d2d0b;
}

.product_setup {
  background-image: linear-gradient(-13deg, #5c3920 0%, #734422 100%);
  margin: 0;
  border: none;
  padding: 1em;
  width: 100%;
  cursor: pointer;
}

.product_setup div {
  padding: 0.4em 0;
  border: 2px solid white;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: white;
  font-size: 24px;
  font-family: "Bookman Old Style";
}

.laptop-product_bottom {
  width: 100%;
  margin-top: 20px;
  margin-bottom: 20px;
}

/* site-body__food-menu */
a:link {
  text-decoration: none;
  color: #000000;
}

a:visited {
  text-decoration: none;
  color: #000000;
}

a:active {
  text-decoration: none;
  color: #000000;
}

a:hover {
  text-decoration: none;
  color: #000000;
}
.site-body__food-menu {
  /* border: 1px solid red; */

  margin: 0 auto;

  position: fixed;
  bottom: 0px;
  right: 0px;
  left: 0px;

  width: auto;
  overflow-x: auto;
}
.categories__li {
  text-align: justify;
  /* justify-content: center; */
 
}
.food-menu__categories {
  /* border: 1px solid black; */
  display: flex;
  align-items: center;
}

.food-menu__categories ul {
  display: flex;
  /* border: 1px solid red; */
  /* width: 1000px; */
  /* padding: 0; */
  white-space: nowrap;
  margin: 0 auto;
  -webkit-padding-start: 0px;
  align-items: center;
}
.food-menu__categories button {
  background-image: linear-gradient(-13deg, #5c3920 0%, #734422 100%);
  border: 1px solid #5d2d0b;
  border-right: 1px solid white;
  color: white;
}
.food-menu__categories button:active {
  background-color: white;
  color: #5d2d0b;
}
.food-menu__categories ul li {
  list-style-type: none;
  margin-top: 10px;
  margin-bottom: 10px;
  color: white;

  padding: 10px 20px;
}

const productsInfo = selectAll(".container .block .text-block .description");

productsInfo.forEach(info => {
  click(info, e => {
    if (info.classList.contains("line-clamp")) info.classList.remove("line-clamp");
    else info.classList.add("line-clamp");
    event.stopPropagation();
  });
});

This Pen is owned by Ruslan on CodePen.

See more by @axa12310 on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.