carpi/LDM-ASIR
1
0
Fork 0
mirror of https://github.com/Lil-Carpi/LDM-ASIR.git synced 2025-12-06 08:04:37 +00:00
Code Issues Packages Projects Releases Wiki Activity

Cambios realizados: Borrado el primer '.content' por duplicacion, al igual que '.sectionTitle. Solucionado un error visual con las tarjetas de videojuegos (Linea horizontal que aparecia a los ~400px. Solucionado error que hacia que la navbar saliera de la pagina en ventanas menores a ~380px). '

Browse Source
This commit is contained in:
Lil-Carpi
2025-11-27 11:55:16 +01:00
parent c1cd499b49
commit cabc777f51
2 changed files with 67 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

92
projecte-final/main/assets/css/style.css
View File

@@ -13,27 +13,11 @@ body
background: linear-gradient(135deg, #0f172a, #1e293b); background: linear-gradient(135deg, #0f172a, #1e293b);
color: white; color: white;
min-height: 100vh; min-height: 100vh;
}
.content
{
padding-top: 8rem;
padding-bottom: 12rem;
max-width: 1400px;
margin: 0 auto;
width: 100%; 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======*/
.navbar .navbar
@@ -42,7 +26,7 @@ body
top: 1rem; top: 1rem;
left: 1rem; left: 1rem;
right: 1rem; right: 1rem;
width: calc(100% - 2rem); /*width: calc(100% - 2rem);*/
padding: 1rem 1.5rem; padding: 1rem 1.5rem;
border-radius: 20px; border-radius: 20px;
z-index: 100; z-index: 100;
@@ -64,7 +48,7 @@ body
color: white; color: white;
font-size: 1.125rem; font-size: 1.125rem;
font-weight: bold; font-weight: bold;
margin-right: 1rem margin-right: 0;
} }
@media (min-width: 768px){ @media (min-width: 768px){
@@ -102,15 +86,15 @@ body
cursor: pointer; cursor: pointer;
} }
@media (max-width: 768px){ @media (max-width: 767px){
.hamburger-label { display: block; } .hamburger-label { display: block; }
.navbarLinks .navbarLinks
{ {
position:absolute; position: absolute;
top: 80px; top: 6rem;
left: 0; left: 1rem;
right: 0; right: 1rem;
display: none; display: none;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
@@ -137,10 +121,8 @@ body
/*======Footer======*/ /*======Footer======*/
.footer .footer
{ {
bottom: 1rem;
left: 1rem;
right: 1rem;
padding: 1rem; padding: 1rem;
padding-top: 3rem;
color: white; color: white;
z-index: 50; z-index: 50;
border-radius: 20px; border-radius: 20px;
@@ -318,7 +300,7 @@ body
border-radius: 20px; border-radius: 20px;
overflow: hidden; overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.1); 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; transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@@ -384,7 +366,7 @@ body
{ {
color: #cd7f32; color: #cd7f32;
border-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 .card-content h3
@@ -517,6 +499,7 @@ body
transition: all 0.5s; transition: all 0.5s;
position: relative; position: relative;
overflow: hidden; overflow: hidden;
display: inline-block;
} }
.btn-neon:hover .btn-neon:hover
@@ -533,4 +516,53 @@ body
} }
.rank-card {height: auto;} .rank-card {height: auto;}
.card-img { height: 250px;} .card-img { height: 250px;}
.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;
}
} }

5
projecte-final/main/indexSAD.html
View File

@@ -1,5 +1,5 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="es"> <html lang="ca">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
@@ -82,6 +82,9 @@
</div> </div>
</section> </section>
</main>
<footer class="footer"> <footer class="footer">
<div class="container"> <div class="container">
<div class="footerRow"> <div class="footerRow">