diff --git a/apps/Recipes/Templates/catalog.php b/apps/Recipes/Templates/catalog.php
index 9e6c751..4674e78 100644
--- a/apps/Recipes/Templates/catalog.php
+++ b/apps/Recipes/Templates/catalog.php
@@ -1 +1,288 @@
-Catalog page
\ No newline at end of file
+
+
+
\ No newline at end of file
diff --git a/assets/css/style.css b/assets/css/style.css
index 19b621b..0ed2e90 100644
--- a/assets/css/style.css
+++ b/assets/css/style.css
@@ -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;
@@ -112,10 +114,10 @@ body {
color: var(--input-text-color);
padding-left: 2rem;
margin-right: 16px;
-
+
}
-.login-link{
+.login-link {
background-color: #C7E2C9;
height: 36px;
width: 36px;
@@ -126,7 +128,7 @@ body {
display: flex;
align-items: center;
justify-content: center;
- border: 1px solid #A8C9AA;
+ border: 1px solid #A8C9AA;
}
@@ -137,12 +139,12 @@ body {
}
.search-icon {
- position: absolute;
- left: 0.6rem;
- top: 50%;
- transform: translateY(-50%);
- color: rgba(0, 113, 91, 0.45);
- pointer-events: none;
+ position: absolute;
+ left: 0.6rem;
+ top: 50%;
+ transform: translateY(-50%);
+ color: rgba(0, 113, 91, 0.45);
+ pointer-events: none;
}
.quote {
@@ -153,7 +155,7 @@ body {
margin-top: 46px;
margin-bottom: 30px;
text-align: center;
-
+
}
.black-qoute-word {
@@ -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,104 +660,217 @@ 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);
-
+
}
.menu-toggle {
- display: none;
- font-size: 1.5rem;
- background: none;
- border: none;
- cursor: pointer;
- color: var(--panel-text);
+ display: none;
+ font-size: 1.5rem;
+ background: none;
+ border: none;
+ 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) {
-
+
.menu-toggle {
- display: block;
- }
+ display: block;
+ }
- .nav {
- display: none;
- flex-direction: column;
- align-items: center;
- text-align: center;
- background-color: var(--panel-background);
- position: absolute;
- top: 100%;
- left: 0;
- right: 0;
- z-index: 1000;
- border-top: 1px solid #0DBB99;
- }
-
-.nav-item a{
- margin-right: 0;
-}
- .nav.nav-open {
- display: flex;
- }
+ .nav {
+ display: none;
+ flex-direction: column;
+ align-items: center;
+ text-align: center;
+ background-color: var(--panel-background);
+ position: absolute;
+ top: 100%;
+ left: 0;
+ right: 0;
+ z-index: 1000;
+ border-top: 1px solid #0DBB99;
+ }
- .nav-list {
- flex-direction: column;
- padding: 1rem;
- }
+ .nav-item a {
+ margin-right: 0;
+ }
- .nav-item {
- margin: 0.5rem 0;
- }
+ .nav.nav-open {
+ display: flex;
+ }
- .footer{
- height: auto;
- }
- .footer-links{
- flex-direction: column;
- }
+ .nav-list {
+ flex-direction: column;
+ padding: 1rem;
+ }
- .footer-links li {
- margin-right: 0;
- margin-bottom: 10px;
- }
+ .nav-item {
+ margin: 0.5rem 0;
+ }
- .footer-inner{
- /* padding: 10px 0; */
- padding: 20px 0;
- }
- .footer-nav{
- margin-top: 0;
- }
+ .footer {
+ height: auto;
+ }
+
+ .footer-links {
+ flex-direction: column;
+ }
+
+ .footer-links li {
+ margin-right: 0;
+ margin-bottom: 10px;
+ }
+
+ .footer-inner {
+ /* padding: 10px 0; */
+ padding: 20px 0;
+ }
+
+ .footer-nav {
+ margin-top: 0;
+ }
+
+ .daily-meals-grid {
+ grid-template-columns: repeat(1, 300px);
+ grid-template-rows: repeat(6, 100px);
+ }
- .daily-meals-grid{
- grid-template-columns: repeat(1, 300px);
- grid-template-rows: repeat(6, 100px);
- }
-
}
-@media (max-width: 1024px){
- .reviews-grid {
+@media (max-width: 1024px) {
+ .reviews-grid {
grid-template-columns: 1fr;
column-gap: 0;
}
@@ -750,4 +879,42 @@ label span {
width: 100%;
max-width: 100%;
}
- }
\ No newline at end of file
+}
+@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;
+ }
+}
\ No newline at end of file
diff --git a/components/templates/layout/header.php b/components/templates/layout/header.php
index b725af1..a3bd22a 100644
--- a/components/templates/layout/header.php
+++ b/components/templates/layout/header.php
@@ -54,7 +54,7 @@
+