288 lines
13 KiB
PHP
288 lines
13 KiB
PHP
<?php
|
|
the_header(
|
|
'Recipes',
|
|
'Explore our delicious recipes and find your next favorite dish.',
|
|
'recipes-page',
|
|
[
|
|
['keywords', 'recipes, cooking, food, cuisine'],
|
|
|
|
]
|
|
);
|
|
?>
|
|
<div class="container">
|
|
<div class="catalog">
|
|
<div class="catalog-items">
|
|
<a class="catalog-recipe hover-anim">
|
|
<div class="catalog-recipe__image">
|
|
<img src="media/recipe1.png" alt="Recipe 1">
|
|
</div>
|
|
<div class="catalog-recipe__info">
|
|
<div class="catalog-recipe__title">
|
|
<h3>Pizza</h3>
|
|
</div>
|
|
<div class="catalog-recipe__meta meta">
|
|
<div class="catalog-recipe__category">
|
|
Lunch
|
|
</div>
|
|
<div class="catalog-recipe__ingredients">
|
|
Tomatoes, Pepperoni
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
<a class="catalog-recipe hover-anim">
|
|
<div class="catalog-recipe__image">
|
|
<img src="media/recipe1.png" alt="Recipe 1">
|
|
</div>
|
|
<div class="catalog-recipe__info">
|
|
<div class="catalog-recipe__title">
|
|
<h3>Pizza</h3>
|
|
</div>
|
|
<div class="catalog-recipe__meta meta">
|
|
<div class="catalog-recipe__category">
|
|
Lunch
|
|
</div>
|
|
<div class="catalog-recipe__ingredients">
|
|
Tomatoes, Pepperoni
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
<a class="catalog-recipe hover-anim">
|
|
<div class="catalog-recipe__image">
|
|
<img src="media/recipe1.png" alt="Recipe 1">
|
|
</div>
|
|
<div class="catalog-recipe__info">
|
|
<div class="catalog-recipe__title">
|
|
<h3>Pizza</h3>
|
|
</div>
|
|
<div class="catalog-recipe__meta meta">
|
|
<div class="catalog-recipe__category">
|
|
Lunch
|
|
</div>
|
|
<div class="catalog-recipe__ingredients">
|
|
Tomatoes, Pepperoni
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
<a class="catalog-recipe hover-anim">
|
|
<div class="catalog-recipe__image">
|
|
<img src="media/recipe1.png" alt="Recipe 1">
|
|
</div>
|
|
<div class="catalog-recipe__info">
|
|
<div class="catalog-recipe__title">
|
|
<h3>Pizza</h3>
|
|
</div>
|
|
<div class="catalog-recipe__meta meta">
|
|
<div class="catalog-recipe__category">
|
|
Lunch
|
|
</div>
|
|
<div class="catalog-recipe__ingredients">
|
|
Tomatoes, Pepperoni
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
<a class="catalog-recipe hover-anim">
|
|
<div class="catalog-recipe__image">
|
|
<img src="media/recipe1.png" alt="Recipe 1">
|
|
</div>
|
|
<div class="catalog-recipe__info">
|
|
<div class="catalog-recipe__title">
|
|
<h3>Pizza</h3>
|
|
</div>
|
|
<div class="catalog-recipe__meta meta">
|
|
<div class="catalog-recipe__category">
|
|
Lunch
|
|
</div>
|
|
<div class="catalog-recipe__ingredients">
|
|
Tomatoes, Pepperoni
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
<a class="catalog-recipe hover-anim">
|
|
<div class="catalog-recipe__image">
|
|
<img src="media/recipe1.png" alt="Recipe 1">
|
|
</div>
|
|
<div class="catalog-recipe__info">
|
|
<div class="catalog-recipe__title">
|
|
<h3>Pizza</h3>
|
|
</div>
|
|
<div class="catalog-recipe__meta meta">
|
|
<div class="catalog-recipe__category">
|
|
Lunch
|
|
</div>
|
|
<div class="catalog-recipe__ingredients">
|
|
Tomatoes, Pepperoni
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
<a class="catalog-recipe hover-anim">
|
|
<div class="catalog-recipe__image">
|
|
<img src="media/recipe1.png" alt="Recipe 1">
|
|
</div>
|
|
<div class="catalog-recipe__info">
|
|
<div class="catalog-recipe__title">
|
|
<h3>Pizza</h3>
|
|
</div>
|
|
<div class="catalog-recipe__meta meta">
|
|
<div class="catalog-recipe__category">
|
|
Lunch
|
|
</div>
|
|
<div class="catalog-recipe__ingredients">
|
|
Tomatoes, Pepperoni
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
<a class="catalog-recipe hover-anim">
|
|
<div class="catalog-recipe__image">
|
|
<img src="media/recipe1.png" alt="Recipe 1">
|
|
</div>
|
|
<div class="catalog-recipe__info">
|
|
<div class="catalog-recipe__title">
|
|
<h3>Pizza</h3>
|
|
</div>
|
|
<div class="catalog-recipe__meta meta">
|
|
<div class="catalog-recipe__category">
|
|
Lunch
|
|
</div>
|
|
<div class="catalog-recipe__ingredients">
|
|
Tomatoes, Pepperoni
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
<a class="catalog-recipe hover-anim">
|
|
<div class="catalog-recipe__image">
|
|
<img src="media/recipe1.png" alt="Recipe 1">
|
|
</div>
|
|
<div class="catalog-recipe__info">
|
|
<div class="catalog-recipe__title">
|
|
<h3>Pizza</h3>
|
|
</div>
|
|
<div class="catalog-recipe__meta meta">
|
|
<div class="catalog-recipe__category">
|
|
Lunch
|
|
</div>
|
|
<div class="catalog-recipe__ingredients">
|
|
Tomatoes, Pepperoni
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
<div class="filters-container">
|
|
<div class="filters">
|
|
<div class="filters-inner">
|
|
<form class="filters-form" action="" method="get">
|
|
<div class="categories-filter">
|
|
<h3 class="filters__title">
|
|
Categories</h3>
|
|
<div class="filters__search">
|
|
<i class="fa-solid fa-magnifying-glass search-icon"></i>
|
|
<input type="text" class="search-input" placeholder="Search categories...">
|
|
</div>
|
|
<!-- All labels and ids are the same for template design purposes (all labels point to same checkbox) -->
|
|
<div class="filters-checkboxes">
|
|
<ul>
|
|
<li>
|
|
|
|
<input id="category" type="checkbox" name="category" id="category">
|
|
<label for="category">Category</label>
|
|
</li>
|
|
<li>
|
|
|
|
<input id="category" type="checkbox" name="category" id="category">
|
|
<label for="category">Category</label>
|
|
</li>
|
|
<li>
|
|
|
|
<input id="category" type="checkbox" name="category" id="category">
|
|
<label for="category">Category</label>
|
|
</li>
|
|
<li>
|
|
|
|
<input id="category" type="checkbox" name="category" id="category">
|
|
<label for="category">Category</label>
|
|
</li>
|
|
<li>
|
|
|
|
<input id="category" type="checkbox" name="category" id="category">
|
|
<label for="category">Category</label>
|
|
</li>
|
|
<li>
|
|
|
|
<input id="category" type="checkbox" name="category" id="category">
|
|
<label for="category">Category</label>
|
|
</li>
|
|
<li>
|
|
|
|
<input id="category" type="checkbox" name="category" id="category">
|
|
<label for="category">Category</label>
|
|
</li>
|
|
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="ingredients-filter">
|
|
<h3 class="filters__title">
|
|
Ingredients</h3>
|
|
<div class="filters__search">
|
|
<i class="fa-solid fa-magnifying-glass search-icon"></i>
|
|
<input type="text" class="search-input" placeholder="Search Ingredients...">
|
|
</div>
|
|
<div class="filters-checkboxes">
|
|
<ul>
|
|
<li>
|
|
|
|
<input id="category" type="checkbox" name="category" id="category">
|
|
<label for="category">Category</label>
|
|
</li>
|
|
<li>
|
|
|
|
<input id="category" type="checkbox" name="category" id="category">
|
|
<label for="category">Category</label>
|
|
</li>
|
|
<li>
|
|
|
|
<input id="category" type="checkbox" name="category" id="category">
|
|
<label for="category">Category</label>
|
|
</li>
|
|
<li>
|
|
|
|
<input id="category" type="checkbox" name="category" id="category">
|
|
<label for="category">Category</label>
|
|
</li>
|
|
<li>
|
|
|
|
<input id="category" type="checkbox" name="category" id="category">
|
|
<label for="category">Category</label>
|
|
</li>
|
|
<li>
|
|
|
|
<input id="category" type="checkbox" name="category" id="category">
|
|
<label for="category">Category</label>
|
|
</li>
|
|
<li>
|
|
|
|
<input id="category" type="checkbox" name="category" id="category">
|
|
<label for="category">Category</label>
|
|
</li>
|
|
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<button class="btn btn-primary hover-anim" type="submit">
|
|
Apply
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<?php the_footer(); ?>
|