From cb0d4582036ea9a5c53a449cd2614c8ca054fb33 Mon Sep 17 00:00:00 2001 From: moreiracristian Date: Tue, 12 Dec 2023 14:07:04 -0300 Subject: [PATCH] detalles de fron menu, arreglo funcionalidad carrusel --- estilos/style.css | 35 ++-- index.html | 23 ++- pruebaCRIS.html | 422 +-------------------------------------------- scripts/scripts.js | 2 +- 4 files changed, 32 insertions(+), 450 deletions(-) diff --git a/estilos/style.css b/estilos/style.css index dcff4a4..1ea18f1 100644 --- a/estilos/style.css +++ b/estilos/style.css @@ -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; @@ -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; @@ -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 { @@ -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 { @@ -551,6 +552,7 @@ justify-content: space-between; align-items: center; font-size: 20px; + z-index: 300; } .direcciones a { @@ -572,6 +574,7 @@ display: flex; justify-content: center; margin-bottom: 15px; + z-index: 300; } .barra { @@ -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; @@ -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 { @@ -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%; @@ -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%; @@ -1096,7 +1099,7 @@ background-position: right; background-size: cover; opacity: 0.15; - z-index: -1; + z-index: 10; } .contenedor-conocenos--p { @@ -1219,7 +1222,7 @@ section h2 { background-position: center; background-size: cover; opacity: 0.15; - z-index: -1; + z-index: 10; } diff --git a/index.html b/index.html index ec39a52..e51f2a6 100644 --- a/index.html +++ b/index.html @@ -52,32 +52,29 @@ @@ -107,7 +104,7 @@ -
+
acondicionador @@ -130,7 +127,7 @@
- ❮ + ❮ ❯
@@ -239,7 +236,7 @@

Ofertas exclusivas

icono de whatsapp ¡Lo quiero! - + icono de compartir Compartir diff --git a/pruebaCRIS.html b/pruebaCRIS.html index 64ad9a2..4dc6519 100644 --- a/pruebaCRIS.html +++ b/pruebaCRIS.html @@ -17,211 +17,6 @@ @media (min-width: 320px) and (max-width: 575px) { - /*----------------------------------------------------*/ - /*----------------------------------------------------*/ - /* INDEX */ - /*----------------------------------------------------*/ - /*----------------------------------------------------*/ - - - /*----------------------------------------------------*/ - /* Aca empieza formato boton flotante Whatsapp */ - /*---------------------------------------------------*/ - - .container_botton { - width: 35px; - height: 35px; - background-color: green; - border: solid 1px white; - position: fixed; - z-index: 900; - border-radius: 100%; - bottom: 15px; - right: 10px; - padding: 4px; - transition: ease 0.3s; - animation: whatsapp 1.2s infinite; - } - - .container_botton:hover { - transform: scale(1.1); - transition: 0.3s; - } - - .icon_wa { - width: 25px; - /*estaba en 25px lo cambie a 100% para verificar como quedaba-cris*/ - transition: ease 1s; - /*lo comente para eliminarlo-cris*/ - height: auto; - /*agregue este atributo completo, para mantener la proporcion*/ - } - - @keyframes whatsapp { - 0% { - box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.85); - } - - 100% { - box-shadow: 0 0 0 8px rgba(0, 0, 0, 0); - } - } - - - /*-------------------------------*/ - /* Aca empieza formato menu */ - /*-------------------------------*/ - - - .dropdown__icon_house { - height: 30px; - } - - .dropdown__icon_elitianw { - margin: -13px; - height: 50px; - } - - .dropdown__icon_product { - height: 30px; - } - - .dropdown__icon_recicla { - height: 30px; - } - - .dropdown__icon_email { - height: 27px; - } - - .logo { - height: 60px; - } - - .nav { - background-color: #ebcba0; - --img1: scale(1); - --img2: scale(0); - } - - .nav:target .menu__links { - --img1: scale(0); - --img2: scale(1); - --clip: inset(0 0 0 0); - } - - .menu__container { - width: 100%; - margin: 0 auto; - height: 70px; - display: grid; - grid-template-columns: max-content max-content; - grid-template-areas: "title img"; - justify-content: space-between; - align-items: center; - overflow: hidden; - z-index: 1000; - } - - .enlace { - margin-top: 5px; - margin-left: 10px; - grid-area: title; - } - - .nav__menu { - grid-area: img; - position: relative; - transform: var(--img1); - z-index: 400; - } - - .nav__menu--second { - transform: var(--img2); - } - - .nav__icon { - width: 30px; - display: block; - margin-right: 10px; - } - - .menu__links { - position: relative; - background-color: burlywood; - max-width: 300px; - width: 70%; - right: 0; - top: 0; - bottom: 0; - padding: 1em; - display: grid; - align-content: center; - gap: 1rem; - overflow-y: auto; - clip-path: var(--clip, inset(0 0 100% 100%)); - transition: clip-path .5s; - z-index: 400; - } - - .menu__item { - list-style: none; - } - - .menu__link { - color: black; - padding: 1em 5px; - text-decoration: none; - display: flex; - align-items: center; - gap: .6rem; - position: relative; - } - - .menu__item--show:has(:checked) { - --rows: 1fr; - --rotate: rotate(180deg); - } - - .checkbox { - position: absolute; - width: 100%; - height: 100%; - opacity: 0; - cursor: pointer; - } - - .menu__arrow { - height: 12px; - margin-left: auto; - transform: var(--rotate, 0); - transition: .2s transform; - } - - .list_productos { - display: grid; - grid-template-rows: var(--rows, 0fr); - transition: .3s grid-template-rows; - } - - .menu__nesting { - overflow: hidden; - } - - .menu__inside { - width: 85%; - list-style: none; - margin-left: auto; - } - - .menu__link--inside { - padding: 10px 0; - display: block; - color: black; - text-decoration: none; - } - - /* ---------------------------------------------------------- */ /*Aqui comienzan los estilos del carrusel para celu*/ /* ---------------------------------------------------------- */ @@ -351,199 +146,18 @@ opacity: 1; } } - - .footer { - background-color: #52a6b2; - color: #fff; - } - - .contenedor-footer { - font-family: 'Sofia Sans Condensed', sans-serif; - max-width: 1200px; - display: flex; - flex-wrap: wrap; - justify-content: space-between; - align-items: center; - } - - .social-icons, - .contacto-info, - .informacion, - .copyright { - flex: 0 0 100%; - margin-bottom: 5px; - margin-top: 1rem; - text-align: center; - } - - .social-icons a:hover { - color: #e9d8c0; - } - - .informacion a:hover { - color: #e9d8c0; - } - - .social-icons img { - width: 30px; - height: 30px; - margin-right: 10px; - background-color: #52a6b2; - } - - .social-icons a { - text-decoration: none; - color: #fff; - display: flex; - align-items: center; - justify-content: center; - margin-bottom: 10px; - } - - .titulo-footer { - font-family: 'Badoga', sans-serif; - font-size: 20px; - font-weight: bold; - margin-bottom: 5px; - } - - .contacto-info ul, - .informacion ul { - list-style: none; - padding: 0; - margin: 0; - } - - .contacto-info li, - .informacion li { - margin-bottom: 2px; - } - - .contacto-info img { - width: 13px; - margin-left: 5px; - margin-right: 5px; - } - - .informacion a { - color: #fff; - text-decoration: none; - } - - .copyright { - text-align: center; - background-color: #e9d8c0; - padding: 10px; - margin: 0; - width: 100%; - } - - .copyright img { - width: 13px; - margin-left: 5px; - margin-right: 5px; - } - - .copyright p { - color: #52a6b2; - } } -
- -
+
-
@@ -581,7 +195,6 @@ - + \ No newline at end of file diff --git a/scripts/scripts.js b/scripts/scripts.js index cf0d370..0b653c8 100644 --- a/scripts/scripts.js +++ b/scripts/scripts.js @@ -7,7 +7,7 @@ iniciarCarrusel(); function iniciarCarrusel() { intervaloCarrusel = setInterval(function tiempo() { muestraCarrusel(indice += 1); - }, 3000); + }, 3500); } function avanzaCarrusel(n) {