diff --git a/projecte-final/main/assets/css/style.css b/projecte-final/main/assets/css/style.css
index f67dd7d..340a851 100644
--- a/projecte-final/main/assets/css/style.css
+++ b/projecte-final/main/assets/css/style.css
@@ -13,27 +13,11 @@ body
background: linear-gradient(135deg, #0f172a, #1e293b);
color: white;
min-height: 100vh;
-}
-
-.content
-{
- padding-top: 8rem;
- padding-bottom: 12rem;
- max-width: 1400px;
- margin: 0 auto;
width: 100%;
+ overflow-x: hidden;
}
-.sectionTitle
-{
- text-align: center;
- font-size: 2rem;
- margin-bottom: 3rem;
- color: #00c3ff;
- text-transform: uppercase;
- letter-spacing: 2px;
- text-shadow: 0 0 15px rgba(0, 195, 255, 0.6);
-}
+
/*=======NAVBAR======*/
.navbar
@@ -42,7 +26,7 @@ body
top: 1rem;
left: 1rem;
right: 1rem;
- width: calc(100% - 2rem);
+ /*width: calc(100% - 2rem);*/
padding: 1rem 1.5rem;
border-radius: 20px;
z-index: 100;
@@ -64,7 +48,7 @@ body
color: white;
font-size: 1.125rem;
font-weight: bold;
- margin-right: 1rem
+ margin-right: 0;
}
@media (min-width: 768px){
@@ -102,15 +86,15 @@ body
cursor: pointer;
}
-@media (max-width: 768px){
+@media (max-width: 767px){
.hamburger-label { display: block; }
.navbarLinks
{
- position:absolute;
- top: 80px;
- left: 0;
- right: 0;
+ position: absolute;
+ top: 6rem;
+ left: 1rem;
+ right: 1rem;
display: none;
flex-direction: column;
align-items: center;
@@ -137,10 +121,8 @@ body
/*======Footer======*/
.footer
{
- bottom: 1rem;
- left: 1rem;
- right: 1rem;
padding: 1rem;
+ padding-top: 3rem;
color: white;
z-index: 50;
border-radius: 20px;
@@ -318,7 +300,7 @@ body
border-radius: 20px;
overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.1);
- background: #1e239b;
+ background: linear-gradient(to bottom, #1e293b, #0f172a);
transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
display: flex;
flex-direction: column;
@@ -384,7 +366,7 @@ body
{
color: #cd7f32;
border-color: #cd7f32;
- box-shadow: rgba(205, 127, 50, 0.4);
+ box-shadow: 0 0 15px rgba(205, 127, 50, 0.4);
}
.card-content h3
@@ -517,6 +499,7 @@ body
transition: all 0.5s;
position: relative;
overflow: hidden;
+ display: inline-block;
}
.btn-neon:hover
@@ -533,4 +516,53 @@ body
}
.rank-card {height: auto;}
.card-img { height: 250px;}
-}
\ No newline at end of file
+ .card-content { height: auto; flex: 1;}
+}
+
+/*Nueva media query para la navbar.
+ Tenia el siguiente problema:
+ - A partir de ~400px de ancho, esta comenzaba a irse a la derecha,
+ ocultando el desplegador de menu y moviendo la navbar fuera
+ de la pantalla.
+
+ Ocurria por el section-title y el highlight-neon, que hacia que
+ la barra no pudiera achicarse mas debido a que este estaba limitando
+ el movimiento por no bajar y separar las palabras como debia.
+
+ Es decir:
+ Antes:
+ Quedaba "Top 3" arriba
+ Y quedaba "vendes Setmanals" abajo, sin romperse y ponerse
+ uno encima de otro o haciendose mas pequeño.
+
+ Lo siguiente soluciona el problema:
+*/
+
+@media (max-width: 450px) {
+ .section-title {
+ font-size: 1.7rem;
+ line-height: 1.3;
+ margin-bottom: 2rem;
+ padding: 0 10px;
+ }
+
+ .highlight-neon {
+ display:block;
+ margin-left: 0;
+ margin-top: 5px;
+ }
+ .navbar{
+ width: auto;
+ padding: 0.8rem 0.8rem;
+ /*width: calc(100% - 1rem); */
+ left: 0.5rem;
+ right: 0.5rem;
+ }
+ .logoContainer a {
+ font-size: 1rem;
+ margin-right: 0.5rem;
+ }
+ .logoContainer a:last-child {
+ margin-right: 0;
+ }
+}
diff --git a/projecte-final/main/indexSAD.html b/projecte-final/main/indexSAD.html
index 4190670..3dccc9c 100644
--- a/projecte-final/main/indexSAD.html
+++ b/projecte-final/main/indexSAD.html
@@ -1,5 +1,5 @@
-
+
@@ -82,6 +82,9 @@
+
+
+