mirror of
https://github.com/Lil-Carpi/LDM-ASIR.git
synced 2025-12-06 00:03:48 +00:00
añadido menu hamburguesa en main (REQUIERE APICARLE EL FUNCIONAMIENTO).
This commit is contained in:
@@ -4,8 +4,10 @@
|
|||||||
*
|
*
|
||||||
{
|
{
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
list-style: none;
|
list-style: none;
|
||||||
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
/*Estilo básico del cuerpo*/
|
/*Estilo básico del cuerpo*/
|
||||||
@@ -14,6 +16,7 @@ body
|
|||||||
font-family: 'Manjari', sans-serif;
|
font-family: 'Manjari', sans-serif;
|
||||||
background: linear-gradient(135deg, #0f172a, #1e293b);
|
background: linear-gradient(135deg, #0f172a, #1e293b);
|
||||||
color: white;
|
color: white;
|
||||||
|
min-height: 100vh;
|
||||||
}
|
}
|
||||||
|
|
||||||
/*Barra de navegacion fija. Efecto "glassmorphism"*/
|
/*Barra de navegacion fija. Efecto "glassmorphism"*/
|
||||||
@@ -251,7 +254,8 @@ body
|
|||||||
|
|
||||||
/*Espacio para que el contenido no quede oculto por el navbar y el footer*/
|
/*Espacio para que el contenido no quede oculto por el navbar y el footer*/
|
||||||
|
|
||||||
.content {
|
.content
|
||||||
|
{
|
||||||
padding-top: 7rem;
|
padding-top: 7rem;
|
||||||
padding-bottom: 30rem;
|
padding-bottom: 30rem;
|
||||||
max-width: 1200px;
|
max-width: 1200px;
|
||||||
@@ -259,6 +263,51 @@ body
|
|||||||
}
|
}
|
||||||
|
|
||||||
/*=============FINAL DE ESTILOS DE PLANTILLA==============*/
|
/*=============FINAL DE ESTILOS DE PLANTILLA==============*/
|
||||||
|
/*======================Responsividad=====================*/
|
||||||
|
#menu-toggle {display: none;}
|
||||||
|
|
||||||
|
.hamburguer-label
|
||||||
|
{
|
||||||
|
display: none;
|
||||||
|
font-size:1.5rem;
|
||||||
|
color: white;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width:768px) {
|
||||||
|
.hamburguer-label { display: block;}
|
||||||
|
.navbarLinks{
|
||||||
|
position: absolute;
|
||||||
|
top: 80px;
|
||||||
|
left:0;
|
||||||
|
right: 0;
|
||||||
|
display: none;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
gap: 1.5rem;
|
||||||
|
padding:2rem;
|
||||||
|
|
||||||
|
background: rgba(15, 23, 42, 0.95);
|
||||||
|
backdrop-filter: blur(20px);
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||||
|
border-radius: 20px;
|
||||||
|
box-shadow: 0 10px 30px rgba(0,0 ,0 ,0.5)
|
||||||
|
}
|
||||||
|
|
||||||
|
#menu-toogle:checked ~ .navbarLinks{
|
||||||
|
display: flex;
|
||||||
|
animation: fadeIn 0.4s ease forwards;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes fadeIn {
|
||||||
|
from { opacity: 0; transform: translateY(-10px); }
|
||||||
|
to { opacity: 1; transform: translateY(0);}
|
||||||
|
}
|
||||||
|
|
||||||
|
/*============FINAL DE ESTILOS DE RESPONSIVIDAD===========*/
|
||||||
|
|
||||||
|
|
||||||
/*====================Seccion juegos======================*/
|
/*====================Seccion juegos======================*/
|
||||||
.sectionTitle
|
.sectionTitle
|
||||||
{
|
{
|
||||||
|
|||||||
@@ -17,6 +17,12 @@
|
|||||||
<a href="indexSAD.html">JocsMania</a>
|
<a href="indexSAD.html">JocsMania</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<input type="checkbox" id="menu-toggle">
|
||||||
|
|
||||||
|
<label for="menu-toggle" class="hamburguer-label">
|
||||||
|
<i class="fa-solid fa-bars"></i>
|
||||||
|
</label>
|
||||||
|
|
||||||
<ul class="navbarLinks">
|
<ul class="navbarLinks">
|
||||||
<li><a href="indexSAD.html">Inici</a></li>
|
<li><a href="indexSAD.html">Inici</a></li>
|
||||||
<li><a href="videojocsSAD.html">Videojocs</a></li>
|
<li><a href="videojocsSAD.html">Videojocs</a></li>
|
||||||
|
|||||||
@@ -36,7 +36,7 @@
|
|||||||
|
|
||||||
<main class="content">
|
<main class="content">
|
||||||
|
|
||||||
<section class="top-sales-section ranking-style">
|
<section class="top-sales-section ranking-style">
|
||||||
<h2 class="section-title">Top 3 Vendes <span class="highlight-neon">Setmanal</span></h2>
|
<h2 class="section-title">Top 3 Vendes <span class="highlight-neon">Setmanal</span></h2>
|
||||||
|
|
||||||
<div class="ranking-container">
|
<div class="ranking-container">
|
||||||
@@ -76,10 +76,8 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user