Categories logic done

This commit is contained in:
2021-10-16 23:07:09 -03:00
parent a933035ef3
commit 292fce9562
14 changed files with 189 additions and 73 deletions

View File

@@ -1,3 +1,4 @@
@charset "UTF-8";
html, body {
margin: 0;
padding: 0;
@@ -113,62 +114,76 @@ header h2 {
-moz-text-align-last: center;
}
.categories-container .categories button.Select, .categories-container .categories select.Select {
color: #000;
background-color: #E96363;
border: #e16363 solid 2px;
cursor: pointer;
transition: 0.4s ease-in-out;
}
.categories-container .categories button.Select:hover, .categories-container .categories select.Select:hover {
background-color: #ef9090;
transition: 0.4s ease-in-out;
}
.categories-container .categories button.Cities, .categories-container .categories select.Cities {
.categories-container .categories button.Cities, .categories-container .categories button.Ciudades, .categories-container .categories select.Cities, .categories-container .categories select.Ciudades {
color: #000;
background-color: #5f9ea0;
border: #5f9798 solid 2px;
cursor: pointer;
transition: 0.4s ease-in-out;
}
.categories-container .categories button.Cities:hover, .categories-container .categories select.Cities:hover {
.categories-container .categories button.Cities:hover, .categories-container .categories button.Ciudades:hover, .categories-container .categories select.Cities:hover, .categories-container .categories select.Ciudades:hover {
background-color: #7fb1b3;
transition: 0.4s ease-in-out;
}
.categories-container .categories button.Pokemons, .categories-container .categories select.Pokemons {
.categories-container .categories button.Pokemon, .categories-container .categories select.Pokemon {
color: #000;
background-color: #ffcb05;
border: #f7c505 solid 2px;
cursor: pointer;
transition: 0.4s ease-in-out;
}
.categories-container .categories button.Pokemons:hover, .categories-container .categories select.Pokemons:hover {
.categories-container .categories button.Pokemon:hover, .categories-container .categories select.Pokemon:hover {
background-color: #ffd638;
transition: 0.4s ease-in-out;
}
.categories-container .categories button.Programming.Languages, .categories-container .categories select.Programming.Languages {
.categories-container .categories button.Programming.Languages, .categories-container .categories button.Lenguajes.De.Programación, .categories-container .categories select.Programming.Languages, .categories-container .categories select.Lenguajes.De.Programación {
color: #000;
background-color: #e46f01;
border: #dc6b01 solid 2px;
cursor: pointer;
transition: 0.4s ease-in-out;
}
.categories-container .categories button.Programming.Languages:hover, .categories-container .categories select.Programming.Languages:hover {
.categories-container .categories button.Programming.Languages:hover, .categories-container .categories button.Lenguajes.De.Programación:hover, .categories-container .categories select.Programming.Languages:hover, .categories-container .categories select.Lenguajes.De.Programación:hover {
background-color: #fe881a;
transition: 0.4s ease-in-out;
}
.categories-container .categories button.Animals, .categories-container .categories select.Animals {
.categories-container .categories button.Animals, .categories-container .categories button.Animales, .categories-container .categories select.Animals, .categories-container .categories select.Animales {
color: #000;
background-color: #efa482;
border: #e7a282 solid 2px;
cursor: pointer;
transition: 0.4s ease-in-out;
}
.categories-container .categories button.Animals:hover, .categories-container .categories select.Animals:hover {
.categories-container .categories button.Animals:hover, .categories-container .categories button.Animales:hover, .categories-container .categories select.Animals:hover, .categories-container .categories select.Animales:hover {
background-color: #f5c5af;
transition: 0.4s ease-in-out;
}
.categories-container .categories button.Countries, .categories-container .categories select.Countries {
.categories-container .categories button.Countries, .categories-container .categories button.Países, .categories-container .categories select.Countries, .categories-container .categories select.Países {
color: #fff;
background-color: #9f0000;
border: #970000 solid 2px;
cursor: pointer;
transition: 0.4s ease-in-out;
}
.categories-container .categories button.Countries:hover, .categories-container .categories select.Countries:hover {
.categories-container .categories button.Countries:hover, .categories-container .categories button.Países:hover, .categories-container .categories select.Countries:hover, .categories-container .categories select.Países:hover {
background-color: #d20000;
transition: 0.4s ease-in-out;
}
.categories-container .categories button.Random, .categories-container .categories select.Random {
color: #000;
background-color: #4285f4;
border: #4282ec solid 2px;
cursor: pointer;
transition: 0.4s ease-in-out;
}
.categories-container .categories button.Random:hover, .categories-container .categories select.Random:hover {