new page, will be catalog for food with filter

application-bootstrap_lab/block-parametrs.php

+<?php
+<div id="block-parameter">
+    <p class="header-title">Search by parameters</p>
+    <p class="title-filter">Price</p>
+    <form method="get" action="search-filter.php">
+        <div id="block-input-price">
+            <ul>
+                <li><p>From</p></li>
+                <li><input type="text" id="start-price" name="starts_price" value="10"></li>
+                <li><p>Till</p></li>
+                <li><input type="text" id="end-price" name="end_price" value="1000"></li>
+            </ul>
+        </div> 
+        <p class="title-filter">Filters</p>    
+        <ul class="checkbox-filter">
+            <li><input type="checkbox" id="checkfilter"></li>
+            <li><input type="checkbox" id="checkfilter1">
+                <label for="checkfilter1">Vegetarian1</label>
+            </li>
+            <li><input type="checkbox" id="checkfilter1">
+                <label for="checkfilter1">Vegetarian2</label>
+            </li>
+            <li><input type="checkbox" id="checkfilter1">
+                <label for="checkfilter1">Vegetarian3</label>
+            </li>
+            <li><input type="checkbox" id="checkfilter1">
+                <label for="checkfilter1">Vegetarian4</label>
+            </li>
+        </ul>
+        
+        <input type="submit" name="submit" id="button-para-search" value=" ">
+        
+    </form>
+</div>
+                    ?>
\ No newline at end of file

application-bootstrap_lab/css/style.css

@@ -46,13 +46,16 @@ html {
   -webkit-text-size-adjust: 100%;
   -webkit-text-size-adjust: 100%;
   -ms-text-size-adjust: 100%;
   -ms-text-size-adjust: 100%;
   -ms-overflow-style: scrollbar;
   -ms-overflow-style: scrollbar;
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0); 
+}
 
 
 @-ms-viewport {
 @-ms-viewport {
-  width: device-width; }
+  width: device-width; 
+}
 
 
 article, aside, dialog, figcaption, figure, footer, header, hgroup, main, nav, section {
 article, aside, dialog, figcaption, figure, footer, header, hgroup, main, nav, section {
-  display: block; }
+  display: block; 
+}
 
 
 body {
 body {
   margin: 0;
   margin: 0;
@@ -62,7 +65,8 @@ body {
   line-height: 1.5;
   line-height: 1.5;
   color: #212529;
   color: #212529;
   text-align: left;
   text-align: left;
-  background-color: #fff; }
+  background-color: #fff; 
+}
 
 
 [tabindex="-1"]:focus {
 [tabindex="-1"]:focus {
   outline: 0 !important; }
   outline: 0 !important; }
@@ -499,8 +503,8 @@ pre {
 
 
 .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col,
 .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col,
 .col-auto, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm,
 .col-auto, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm,
-.col-sm-auto, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-md,
-.col-md-auto, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg,
+.col-sm-auto, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, , .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-md,
+.col-md-auto, .col-lg-1, .col-lg-2, , .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg,
 .col-lg-auto, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl,
 .col-lg-auto, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl,
 .col-xl-auto {
 .col-xl-auto {
   position: relative;
   position: relative;
@@ -6171,7 +6175,8 @@ button.bg-dark:focus {
 
 
 .mb-4,
 .mb-4,
 .my-4 {
 .my-4 {
-  margin-bottom: 1.5rem !important; }
+  margin-bottom: 1.5rem !important; 
+}
 
 
 .ml-4,
 .ml-4,
 .mx-4 {
 .mx-4 {
@@ -9014,4 +9019,18 @@ ul li a:hover {
 ul li a:hover::before {
 ul li a:hover::before {
   animation: animate .5s linear forwards; 
   animation: animate .5s linear forwards; 
 }
 }
-
+.boxes{
+    
+    margin: 50px 15px 5px 0px;
+    padding: 5px;
+    width: 70%;
+    display: inline-flex;
+    float: right;
+    flex-direction: left row-reverse;
+    opacity: .6;
+}
+.card{
+    margin: 0;
+    padding: 0;
+    display: inline-block; 
+}
\ No newline at end of file

application-bootstrap_lab/index.html

@@ -429,6 +429,9 @@
   <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBVWaKrjvy3MaE7SQ74_uJiULgl1JY0H2s&sensor=false"></script>
   <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBVWaKrjvy3MaE7SQ74_uJiULgl1JY0H2s&sensor=false"></script>
   <script src="js/google-map.js"></script>
   <script src="js/google-map.js"></script>
   <script src="js/main.js"></script>
   <script src="js/main.js"></script>
+<?php
+    include("include/block-parametrs.php);
+?>
     
     
   </body>
   </body>
 </html>
 </html>
\ No newline at end of file