Skip to content

Juan Montilla / TBW2223_equipo12

Go to a project
Commit 66066b59 by Manuel Ruiz Toribio
Options

home retocado

parent 7d39a23c
Inline Side-by-side
Showing with 494 additions and 3 deletions
app/Views/pages/home.php
......@@ -84,6 +84,43 @@
<li class="nav-item">
<a class="nav-link collapsed" data-bs-target="#tables-nav3" data-bs-toggle="collapse" href="#">
<i class="bi bi-layout-text-window-reverse"></i><span>Estaciones</span><i
class="bi bi-chevron-down ms-auto"></i>
</a>
<ul id="tables-nav3" class="nav-content collapse " data-bs-parent="#sidebar-nav">
<!--Contenido del dropdown-->
<ul class="winter-cboxtags">
<li>
<input type="checkbox" id="checkboxTen" value="Order ten">
<label for="checkboxTen">Invierno </label>
</li>
</ul>
<ul class="spring-cboxtags">
<li>
<input type="checkbox" id="checkboxEleven" value="Order eleven">
<label for="checkboxEleven">Primavera </label>
</li>
</ul>
<ul class="summer-cboxtags">
<li>
<input type="checkbox" id="checkboxTwelve" value="Order twelve">
<label for="checkboxTwelve">Verano </label>
</li>
</ul>
<ul class="autumn-cboxtags">
<li>
<input type="checkbox" id="checkbox13" value="Order 13">
<label for="checkbox13">Otoño </label>
</li>
</ul>
</ul>
</li><!-- Fin Filtro 1 -->
<li class="nav-item">
<a class="nav-link collapsed" href="/insert_recipe">
<i class="bi bi-person"></i>
<span>Perfil</span>
......
public/css/style.css
......@@ -346,7 +346,7 @@ h6 {
height: 60px;
box-shadow: 0px 2px 20px rgba(1, 41, 112, 0.1);
/*COLOR HEADER*/
background-image: linear-gradient(to right, #fa6e59, #f8a055);
background-image: linear-gradient(to right, #FA6E59, #FFDB5C);
padding-left: 20px;
}
......@@ -574,7 +574,7 @@ h6 {
scrollbar-color: #aab7cf transparent;
box-shadow: 0px 0px 20px rgba(1, 41, 112, 0.1);
/*COLOR SIDEBAR*/
background-image: linear-gradient(to bottom right, #f8a055, #fa6e59);
background-image: linear-gradient(to bottom right, #FA6E59, #FFDB5C);
}
@media (max-width: 1199px) {
......@@ -1264,7 +1264,7 @@ h6 {
}
.card:hover {
background: linear-gradient(135deg, #4897D8, #ffdb5c);
background: linear-gradient(135deg, #FA6E59, #FFDB5C);
box-shadow: 0 5px 15px #340e8b91;
}
......@@ -2071,3 +2071,457 @@ ul.japanese-cboxtags li input[type="checkbox"] {
opacity: 0;
}
/*Filtro de invierno*/
ul.winter-cboxtags {
list-style: none;
padding: 10px;
}
ul.winter-cboxtags li {
display: block;
}
ul.winter-cboxtags li label {
display: inline-block;
background-color: rgba(255, 255, 255, 0.9);
border: 1px solid rgba(0, 0, 0, 0.1);
color: rgba(0, 0, 0, 0.8);
font-size: 16px;
font-family: 'Montserrat', sans-serif;
border-radius: 4px;
white-space: nowrap;
margin: 0 0 -12px 0;
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-tap-highlight-color: transparent;
-webkit-transition: all .2s;
-o-transition: all .2s;
transition: all .2s;
display: block;
}
ul.winter-cboxtags li label {
padding: 10px 10px;
cursor: pointer;
}
ul.winter-cboxtags li label::before {
display: inline-block;
font-style: normal;
font-variant: normal;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
font-family: "FontAwesome";
font-weight: 900;
font-size: 24px;
padding: 0;
margin-right: 15px;
content: "\f1db";
color: rgba(255, 255, 255, 0.2);
-webkit-transition: -webkit-transform .3s ease-in-out;
transition: -webkit-transform .3s ease-in-out;
-o-transition: transform .3s ease-in-out;
transition: transform .3s ease-in-out;
transition: transform .3s ease-in-out, -webkit-transform .3s ease-in-out;
position: absolute;
right: 40px;
margin-top: -5px;
}
ul.winter-cboxtags li input[type="checkbox"]:checked+label::before {
content: "\f058";
-webkit-transform: rotate(-360deg);
-ms-transform: rotate(-360deg);
transform: rotate(-360deg);
-webkit-transition: -webkit-transform .3s ease-in-out;
transition: -webkit-transform .3s ease-in-out;
-o-transition: transform .3s ease-in-out;
transition: transform .3s ease-in-out;
transition: transform .3s ease-in-out, -webkit-transform .3s ease-in-out;
color: #fff;
}
ul.winter-cboxtags li input[type="checkbox"]:checked+label {
border: 1px solid #EEEEEE;
background: linear-gradient(to right, #1b63b5 , #36bfde);
color: #fff;
-webkit-transition: all .2s;
-o-transition: all .2s;
transition: all .2s;
}
ul.winter-cboxtags li input[type="checkbox"]:checked+label span {
background: #fff;
color: #000;
}
ul.winter-cboxtags li input[type="checkbox"] {
display: absolute;
}
ul.winter-cboxtags li input[type="checkbox"] {
position: absolute;
opacity: 0;
}
/*Filtro de primavera*/
ul.spring-cboxtags {
list-style: none;
padding: 10px;
}
ul.spring-cboxtags li {
display: block;
}
ul.spring-cboxtags li label {
display: inline-block;
background-color: rgba(255, 255, 255, 0.9);
border: 1px solid rgba(0, 0, 0, 0.1);
color: rgba(0, 0, 0, 0.8);
font-size: 16px;
font-family: 'Montserrat', sans-serif;
border-radius: 4px;
white-space: nowrap;
margin: 0 0 -12px 0;
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-tap-highlight-color: transparent;
-webkit-transition: all .2s;
-o-transition: all .2s;
transition: all .2s;
display: block;
}
ul.spring-cboxtags li label {
padding: 10px 10px;
cursor: pointer;
}
ul.spring-cboxtags li label::before {
display: inline-block;
font-style: normal;
font-variant: normal;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
font-family: "FontAwesome";
font-weight: 900;
font-size: 24px;
padding: 0;
margin-right: 15px;
content: "\f1db";
color: rgba(255, 255, 255, 0.2);
-webkit-transition: -webkit-transform .3s ease-in-out;
transition: -webkit-transform .3s ease-in-out;
-o-transition: transform .3s ease-in-out;
transition: transform .3s ease-in-out;
transition: transform .3s ease-in-out, -webkit-transform .3s ease-in-out;
position: absolute;
right: 40px;
margin-top: -5px;
}
ul.spring-cboxtags li input[type="checkbox"]:checked+label::before {
content: "\f058";
-webkit-transform: rotate(-360deg);
-ms-transform: rotate(-360deg);
transform: rotate(-360deg);
-webkit-transition: -webkit-transform .3s ease-in-out;
transition: -webkit-transform .3s ease-in-out;
-o-transition: transform .3s ease-in-out;
transition: transform .3s ease-in-out;
transition: transform .3s ease-in-out, -webkit-transform .3s ease-in-out;
color: #fff;
}
ul.spring-cboxtags li input[type="checkbox"]:checked+label {
border: 1px solid #EEEEEE;
background: linear-gradient(to right, #f9b1c9 , #c6e171);
color: #010101;
-webkit-transition: all .2s;
-o-transition: all .2s;
transition: all .2s;
}
ul.spring-cboxtags li input[type="checkbox"]:checked+label span {
background: #fff;
color: #000;
}
ul.spring-cboxtags li input[type="checkbox"] {
display: absolute;
}
ul.spring-cboxtags li input[type="checkbox"] {
position: absolute;
opacity: 0;
}
/*Filtro de verano*/
ul.summer-cboxtags {
list-style: none;
padding: 10px;
}
ul.summer-cboxtags li {
display: block;
}
ul.summer-cboxtags li label {
display: inline-block;
background-color: rgba(255, 255, 255, 0.9);
border: 1px solid rgba(0, 0, 0, 0.1);
color: rgba(0, 0, 0, 0.8);
font-size: 16px;
font-family: 'Montserrat', sans-serif;
border-radius: 4px;
white-space: nowrap;
margin: 0 0 -12px 0;
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-tap-highlight-color: transparent;
-webkit-transition: all .2s;
-o-transition: all .2s;
transition: all .2s;
display: block;
}
ul.summer-cboxtags li label {
padding: 10px 10px;
cursor: pointer;
}
ul.summer-cboxtags li label::before {
display: inline-block;
font-style: normal;
font-variant: normal;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
font-family: "FontAwesome";
font-weight: 900;
font-size: 24px;
padding: 0;
margin-right: 15px;
content: "\f1db";
color: rgba(255, 255, 255, 0.2);
-webkit-transition: -webkit-transform .3s ease-in-out;
transition: -webkit-transform .3s ease-in-out;
-o-transition: transform .3s ease-in-out;
transition: transform .3s ease-in-out;
transition: transform .3s ease-in-out, -webkit-transform .3s ease-in-out;
position: absolute;
right: 40px;
margin-top: -5px;
}
ul.summer-cboxtags li input[type="checkbox"]:checked+label::before {
content: "\f058";
-webkit-transform: rotate(-360deg);
-ms-transform: rotate(-360deg);
transform: rotate(-360deg);
-webkit-transition: -webkit-transform .3s ease-in-out;
transition: -webkit-transform .3s ease-in-out;
-o-transition: transform .3s ease-in-out;
transition: transform .3s ease-in-out;
transition: transform .3s ease-in-out, -webkit-transform .3s ease-in-out;
color: #fff;
}
ul.summer-cboxtags li input[type="checkbox"]:checked+label {
border: 1px solid #EEEEEE;
background: linear-gradient(to right, #fde03a , #feae4b);
color: #000;
-webkit-transition: all .2s;
-o-transition: all .2s;
transition: all .2s;
}
ul.summer-cboxtags li input[type="checkbox"]:checked+label span {
background: #fff;
color: #000;
}
ul.summer-cboxtags li input[type="checkbox"] {
display: absolute;
}
ul.summer-cboxtags li input[type="checkbox"] {
position: absolute;
opacity: 0;
}
/*Filtro de otoño*/
ul.autumn-cboxtags {
list-style: none;
padding: 10px;
}
ul.autumn-cboxtags li {
display: block;
}
ul.autumn-cboxtags li label {
display: inline-block;
background-color: rgba(255, 255, 255, 0.9);
border: 1px solid rgba(0, 0, 0, 0.1);
color: rgba(0, 0, 0, 0.8);
font-size: 16px;
font-family: 'Montserrat', sans-serif;
border-radius: 4px;
white-space: nowrap;
margin: 0 0 5px 0;
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-tap-highlight-color: transparent;
-webkit-transition: all .2s;
-o-transition: all .2s;
transition: all .2s;
display: block;
}
ul.autumn-cboxtags li label {
padding: 10px 10px;
cursor: pointer;
}
ul.autumn-cboxtags li label::before {
display: inline-block;
font-style: normal;
font-variant: normal;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
font-family: "FontAwesome";
font-weight: 900;
font-size: 24px;
padding: 0;
margin-right: 15px;
content: "\f1db";
color: rgba(255, 255, 255, 0.2);
-webkit-transition: -webkit-transform .3s ease-in-out;
transition: -webkit-transform .3s ease-in-out;
-o-transition: transform .3s ease-in-out;
transition: transform .3s ease-in-out;
transition: transform .3s ease-in-out, -webkit-transform .3s ease-in-out;
position: absolute;
right: 40px;
margin-top: -5px;
}
ul.autumn-cboxtags li input[type="checkbox"]:checked+label::before {
content: "\f058";
-webkit-transform: rotate(-360deg);
-ms-transform: rotate(-360deg);
transform: rotate(-360deg);
-webkit-transition: -webkit-transform .3s ease-in-out;
transition: -webkit-transform .3s ease-in-out;
-o-transition: transform .3s ease-in-out;
transition: transform .3s ease-in-out;
transition: transform .3s ease-in-out, -webkit-transform .3s ease-in-out;
color: #fff;
}
ul.autumn-cboxtags li input[type="checkbox"]:checked+label {
border: 1px solid #EEEEEE;
background: linear-gradient(to right, #57170b , #f5e3a5);
color: #fff;
-webkit-transition: all .2s;
-o-transition: all .2s;
transition: all .2s;
}
ul.autumn-cboxtags li input[type="checkbox"]:checked+label span {
background: #fff;
color: #000;
}
ul.autumn-cboxtags li input[type="checkbox"] {
display: absolute;
}
ul.autumn-cboxtags li input[type="checkbox"] {
position: absolute;
opacity: 0;
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment