TIST-20: added recipes page, addded recipes page to header links, added display: grid to daily meals #9
@ -1 +1,288 @@
|
||||
Catalog page
|
||||
<?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(); ?>
|
||||
@ -24,9 +24,11 @@
|
||||
.hover-anim:hover {
|
||||
opacity: 0.7;
|
||||
}
|
||||
.page{
|
||||
|
||||
.page {
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.container {
|
||||
width: 100%;
|
||||
max-width: 1170px;
|
||||
@ -101,7 +103,7 @@ body {
|
||||
border: #000 solid 1px; */
|
||||
}
|
||||
|
||||
.search-input{
|
||||
.search-input {
|
||||
height: 36px;
|
||||
background-color: #C7E2C9;
|
||||
border: 1px solid #A8C9AA;
|
||||
@ -115,7 +117,7 @@ body {
|
||||
|
||||
}
|
||||
|
||||
.login-link{
|
||||
.login-link {
|
||||
background-color: #C7E2C9;
|
||||
height: 36px;
|
||||
width: 36px;
|
||||
@ -405,10 +407,15 @@ body {
|
||||
}
|
||||
|
||||
.ingredients-list {
|
||||
columns: 2;
|
||||
/* columns: 2;
|
||||
-webkit-columns: 2;
|
||||
-moz-columns: 2;
|
||||
-moz-columns: 2; */
|
||||
margin-left: 15px;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
row-gap: 3px;
|
||||
column-gap: 8px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.ingredients-list li {
|
||||
@ -495,26 +502,28 @@ hr {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.terms-of-use{
|
||||
.terms-of-use {
|
||||
margin-top: 46px;
|
||||
}
|
||||
.terms-of-use p:first-of-type{
|
||||
|
||||
.terms-of-use p:first-of-type {
|
||||
text-align: center;
|
||||
|
||||
}
|
||||
|
||||
/* contact.php */
|
||||
.contact{
|
||||
.contact {
|
||||
margin-top: 46px;
|
||||
}
|
||||
|
||||
.contact p{
|
||||
.contact p {
|
||||
font-family: var(--common-font);
|
||||
font-size: 14px;
|
||||
color: var(--common-text);
|
||||
margin-bottom: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.contact a {
|
||||
text-decoration: none;
|
||||
color: var(--panel-text);
|
||||
@ -523,39 +532,43 @@ hr {
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
}
|
||||
.address{
|
||||
|
||||
.address {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
}
|
||||
.faq{
|
||||
|
||||
.faq {
|
||||
margin-top: 46px;
|
||||
}
|
||||
.faq-question{
|
||||
|
||||
.faq-question {
|
||||
font-family: var(--title-font);
|
||||
font-size: 24px;
|
||||
color: var(--title-color);
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.faq-answer{
|
||||
|
||||
.faq-answer {
|
||||
font-family: var(--common-font);
|
||||
font-size: 14px;
|
||||
color: var(--common-text);
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.faq-answer a{
|
||||
.faq-answer a {
|
||||
text-decoration: none;
|
||||
color: var(--panel-text);
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.login__inner{
|
||||
.login__inner {
|
||||
margin-top: 46px;
|
||||
}
|
||||
|
||||
.input input{
|
||||
.input input {
|
||||
width: 100%;
|
||||
max-width: 400px;
|
||||
height: 40px;
|
||||
@ -568,22 +581,23 @@ hr {
|
||||
color: var(--input-text-color);
|
||||
}
|
||||
|
||||
.form label{
|
||||
.form label {
|
||||
font-size: 16px;
|
||||
|
||||
}
|
||||
|
||||
.input{
|
||||
.input {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.login-choice a{
|
||||
|
||||
.login-choice a {
|
||||
text-decoration: none;
|
||||
color: var(--panel-text);
|
||||
font-size: 16px;
|
||||
|
||||
}
|
||||
|
||||
.btn{
|
||||
.btn {
|
||||
font-size: 14px;
|
||||
font-family: var(--common-font);
|
||||
color: #fff;
|
||||
@ -602,38 +616,40 @@ hr {
|
||||
max-width: 225px;
|
||||
}
|
||||
|
||||
.login-text__notice p{
|
||||
.login-text__notice p {
|
||||
font-size: 16px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.login__inner .title{
|
||||
.login__inner .title {
|
||||
text-align: start;
|
||||
}
|
||||
|
||||
.terms-checkbox{
|
||||
.terms-checkbox {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.terms-link{
|
||||
.terms-link {
|
||||
text-decoration: none;
|
||||
color: var(--panel-text);
|
||||
|
||||
}
|
||||
|
||||
.recovery-info{
|
||||
.recovery-info {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
label span {
|
||||
color: #015847; /* Example: make the asterisk red */
|
||||
color: #015847;
|
||||
/* Example: make the asterisk red */
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.reset-info{
|
||||
.reset-info {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.account-block .title{
|
||||
.account-block .title {
|
||||
text-align: start;
|
||||
}
|
||||
|
||||
@ -644,24 +660,24 @@ label span {
|
||||
color: var(--common-text);
|
||||
}
|
||||
|
||||
.account-block{
|
||||
.account-block {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.account-block td{
|
||||
.account-block td {
|
||||
padding: 10px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.account-title{
|
||||
.account-title {
|
||||
margin-top: 46px;
|
||||
}
|
||||
|
||||
.change-user-btns{
|
||||
.change-user-btns {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.a-back{
|
||||
.a-back {
|
||||
text-decoration: none;
|
||||
color: var(--panel-text);
|
||||
|
||||
@ -675,6 +691,116 @@ label span {
|
||||
cursor: pointer;
|
||||
color: var(--panel-text);
|
||||
}
|
||||
|
||||
.catalog {
|
||||
margin-top: 46px;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.catalog-recipe {
|
||||
display: block;
|
||||
width: 200px;
|
||||
}
|
||||
|
||||
.catalog-recipe__image {
|
||||
width: 200px;
|
||||
height: 150px;
|
||||
overflow: hidden;
|
||||
border-radius: 10px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.catalog-recipe__image img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.catalog-recipe__title {
|
||||
font-family: var(--title-font);
|
||||
color: var(--title-color);
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.catalog-recipe__info {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.catalog-items {
|
||||
width: 800px;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
column-gap: 25px;
|
||||
row-gap: 40px;
|
||||
margin-right: 80px;
|
||||
}
|
||||
|
||||
.filters-container {
|
||||
position: relative;
|
||||
|
||||
}
|
||||
|
||||
.filters {
|
||||
position: fixed;
|
||||
height: 454px;
|
||||
width: 230px;
|
||||
padding: 15px;
|
||||
background-color: var(--panel-background);
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.filters__title {
|
||||
font-family: var(--title-font);
|
||||
color: var(--common-text);
|
||||
font-size: 14px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.filters__search {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.filters__search .search-input {
|
||||
margin-right: 0;
|
||||
width: 200px;
|
||||
|
||||
}
|
||||
|
||||
.filters-checkboxes ul{
|
||||
list-style: none;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
row-gap: 3px;
|
||||
column-gap: 8px;
|
||||
padding: 0;
|
||||
max-height: 100px;
|
||||
overflow-y: auto;
|
||||
margin-top: 10px;
|
||||
margin-bottom: 15px;
|
||||
|
||||
}
|
||||
|
||||
.filters-checkboxes ul li{
|
||||
font-family: var(--common-font);
|
||||
font-size: 14px;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.filters-form .btn{
|
||||
width: 200px;
|
||||
}
|
||||
@media (max-width: 768px){
|
||||
|
||||
.catalog-items{
|
||||
width: 100%;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
}
|
||||
@media (max-width: 900px) {
|
||||
|
||||
|
||||
@ -696,9 +822,10 @@ label span {
|
||||
border-top: 1px solid #0DBB99;
|
||||
}
|
||||
|
||||
.nav-item a{
|
||||
.nav-item a {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.nav.nav-open {
|
||||
display: flex;
|
||||
}
|
||||
@ -712,10 +839,11 @@ label span {
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
.footer{
|
||||
.footer {
|
||||
height: auto;
|
||||
}
|
||||
.footer-links{
|
||||
|
||||
.footer-links {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
@ -724,15 +852,16 @@ label span {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.footer-inner{
|
||||
.footer-inner {
|
||||
/* padding: 10px 0; */
|
||||
padding: 20px 0;
|
||||
}
|
||||
.footer-nav{
|
||||
|
||||
.footer-nav {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.daily-meals-grid{
|
||||
.daily-meals-grid {
|
||||
grid-template-columns: repeat(1, 300px);
|
||||
grid-template-rows: repeat(6, 100px);
|
||||
}
|
||||
@ -740,7 +869,7 @@ label span {
|
||||
|
||||
}
|
||||
|
||||
@media (max-width: 1024px){
|
||||
@media (max-width: 1024px) {
|
||||
.reviews-grid {
|
||||
grid-template-columns: 1fr;
|
||||
column-gap: 0;
|
||||
@ -750,4 +879,42 @@ label span {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
@media (max-width: 1200px) {
|
||||
.catalog{
|
||||
flex-direction: column-reverse;
|
||||
align-items: center;
|
||||
margin-bottom: 46px;
|
||||
}
|
||||
.filters{
|
||||
position: static;
|
||||
margin-bottom: 46px;
|
||||
}
|
||||
.catalog-items{
|
||||
margin-right: 0;
|
||||
justify-items: center;
|
||||
align-items: center;
|
||||
padding: 5px;
|
||||
}
|
||||
.catalog-recipe{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 200px;
|
||||
}
|
||||
}
|
||||
@media (max-width: 465px){
|
||||
.catalog-recipe{
|
||||
width: 150px;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 400px){
|
||||
.catalog-items{
|
||||
width: 100%;
|
||||
grid-template-columns: 1fr;
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
@ -54,7 +54,7 @@
|
||||
<ul class="nav-list">
|
||||
<li class="nav-item"><a href="<?php the_permalink("index:home") ?>" class="nav-link">HOME</a>
|
||||
</li>
|
||||
<li class="nav-item"><a href="#" class="nav-link">RECIPES</a></li>
|
||||
<li class="nav-item"><a href="<?php the_permalink("recipes:catalog") ?>" class="nav-link">RECIPES</a></li>
|
||||
<li class="nav-item"><a href="#" class="nav-link">FAVORITES</a></li>
|
||||
<li class="nav-item"><a href="#" class="nav-link">MEAL A DAY</a></li>
|
||||
<li class="nav-item"><a href="#" class="nav-link">SUBMIT RECIPE</a></li>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user