Skip to content

Commit

Permalink
detalles de fron menu, arreglo funcionalidad carrusel
Browse files Browse the repository at this point in the history
  • Loading branch information
@moreiracristian
moreiracristian committed Dec 12, 2023
1 parent 3faaecd commit cb0d458
Show file tree
Hide file tree
Showing 4 changed files with 32 additions and 450 deletions.
35 changes: 19 additions & 16 deletions estilos/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -281,7 +281,7 @@
background-color: green;
border: solid 1px white;
position: fixed;
z-index: 900;
z-index: 999;
border-radius: 100%;
bottom: 15px;
right: 10px;
Expand Down Expand Up @@ -397,10 +397,10 @@
/* background-color: burlywood; */
background-color: #a1dcdc;
max-width: 250px;
width: 75%;
width: 80%;
right: 0;
top: 0;
bottom: 90px;
bottom: 100px;
padding: 1em;
display: grid;
align-content: center;
Expand All @@ -416,20 +416,20 @@
}

.menu__link {
color: #444444;
color: #52a6b2;
padding: .3em .7em;
text-decoration: none;
display: flex;
align-items: center;
gap: 1.3rem;
position: relative;
/* background-color: var(--bg, transparent); */
background-color: var(--bg, transparent);
}

.menu__item--show:has(:checked) {
--rows: 1fr;
--rotate: rotate(180deg);
/* --bg: #e9d8c0; */
--bg: #e9d8c0;
}

.checkbox {
Expand Down Expand Up @@ -486,13 +486,14 @@
position: relative;
overflow: hidden;
margin: 0;
z-index: 300;
z-index: 100;
}

.miCarrusel {
display: none;
transition: 2s;
transition: opacity 2s;
max-height: 100vh;
z-index: 200;
}

.miCarrusel img {
Expand Down Expand Up @@ -551,6 +552,7 @@
justify-content: space-between;
align-items: center;
font-size: 20px;
z-index: 300;
}

.direcciones a {
Expand All @@ -572,6 +574,7 @@
display: flex;
justify-content: center;
margin-bottom: 15px;
z-index: 300;
}

.barra {
Expand Down Expand Up @@ -819,7 +822,7 @@
}

.caja-ofertas {
box-shadow: 0 .8rem 2rem #e9d8c0;
box-shadow: 1rem 1rem 1rem #e9d8c0;
border-radius: .7rem;
border: .1rem solid #e9d8c0;
height: 370px;
Expand All @@ -840,12 +843,12 @@
}

.oferta-imagen-1 {
background-image: url(/img/productos/6.jpg);
background-image: url(/img/seccion_aceitesyserums/Aceite_Almendras.jpg);
background-position: center;
background-size: cover;
width: 100%;
height: 300px;
transition: transform 0.1s ease;
/* transition: transform 0.1s ease; */
}

.ofimg-1 {
Expand All @@ -856,11 +859,11 @@

.oferta-imagen-1 .ofimg-1:hover {
opacity: 0;
transform: scale(1.05);
/* transform: scale(1.05); */
}

.oferta-imagen-2 {
background-image: url(/img/productos/4.jpg);
background-image: url(/img/seccion_aguasytonicos/AguaRosas.jpg);
background-position: center;
background-size: cover;
width: 100%;
Expand All @@ -878,7 +881,7 @@
}

.oferta-imagen-3 {
background-image: url(/img/productos/4.jpg);
background-image: url(/img/seccion_balsamosycremas/balsamo_expectorante.jpg);
background-position: center;
background-size: cover;
width: 100%;
Expand Down Expand Up @@ -1096,7 +1099,7 @@
background-position: right;
background-size: cover;
opacity: 0.15;
z-index: -1;
z-index: 10;
}

.contenedor-conocenos--p {
Expand Down Expand Up @@ -1219,7 +1222,7 @@ section h2 {
background-position: center;
background-size: cover;
opacity: 0.15;
z-index: -1;
z-index: 10;
}


Expand Down
23 changes: 10 additions & 13 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,32 +52,29 @@
<ul class="menu__nesting">
<li class="menu__inside">
</li>
<a href="/templates/aguasytonicos/aguasytonicos.html" class="menu__link menu__link--inside">~ Aguas y
<a href="/templates/aguasytonicos/aguasytonicos.html" class="menu__link menu__link--inside">» Aguas y
Tónicos</a>
<li class="menu__inside">
</li>
<a href="/templates/aceitesyserums/aceitesyserums.html" class="menu__link menu__link--inside">~ Aceites
<a href="/templates/aceitesyserums/aceitesyserums.html" class="menu__link menu__link--inside">» Aceites
y Serums</a>
<li class="menu__inside">
</li>
<a href="/templates/balsamosycremas/balsamosycremas.html" class="menu__link menu__link--inside">~
Balsamos y Cremas</a>
<a href="/templates/balsamosycremas/balsamosycremas.html" class="menu__link menu__link--inside">» Balsamos y Cremas</a>
<li class="menu__inside">
</li>
<a href="/templates/cuidadocapilar/cuidadocapilar.html" class="menu__link menu__link--inside">~ Cuidado
Capilar</a>
<a href="/templates/cuidadocapilar/cuidadocapilar.html" class="menu__link menu__link--inside">» Cuidado Capilar</a>
<li class="menu__inside">
</li>
<a href="templates/JabonesyDesodorante/jabonesydesodorantes.html"
class="menu__link menu__link--inside">~ Jabones y Desodorantes</a>
class="menu__link menu__link--inside">» Jabones y Desodorantes</a>
<li class="menu__inside">
</li>
<a href="/templates/higienedental/higienedental.html" class="menu__link menu__link--inside">~ Higiene
<a href="/templates/higienedental/higienedental.html" class="menu__link menu__link--inside">» Higiene
Dental</a>
<li class="menu__inside">
</li>
<a href="/templates/proteccionsolar/proteccionsolar.html" class="menu__link menu__link--inside">~
Protección Solar</a>
<a href="/templates/proteccionsolar/proteccionsolar.html" class="menu__link menu__link--inside">» Protección Solar</a>
</ul>

</div>
Expand Down Expand Up @@ -107,7 +104,7 @@

<!--Aqui comienza el carrusel. SECCION 2-->

<div class="carrusel-contenedor">
<div class="carrusel-contenedor" onmouseover="detenerCarrusel()" onmouseout="reanudarCarrusel()">
<div class="miCarrusel fade">
<img src="img/productos/.jpg" alt="acondicionador" loading="lazy">

Expand All @@ -130,7 +127,7 @@
</div>

<div class="direcciones">
<a href="#" class="atras" onclick="retrocedeCarrusel(-1)">&#10094</a>
<a href="#" class="atras" onclick="retrocedeCarrusel(1)">&#10094</a>
<a href="#" class="adelante" onclick="avanzaCarrusel(1)">&#10095</a>
</div>
<div class="barras">
Expand Down Expand Up @@ -239,7 +236,7 @@ <h1 class="titulo-ofertas"> Ofertas exclusivas </h1>
<img src="img/icons/whatsappw.svg" alt="icono de whatsapp">
<span>¡Lo quiero!</span>
</a>
<a class="oferta-enlace" href="#">
<a class="oferta-enlace" href="#" target="_blank">
<img src="img/icons/share-solid.svg" alt="icono de compartir">
<span>Compartir</span>
</a>
Expand Down
Loading

0 comments on commit cb0d458

Please sign in to comment.