From 816d87f3f3a767f3a3808d83c3d2cf9c90754d5d Mon Sep 17 00:00:00 2001 From: Eliana Romero Date: Tue, 28 Nov 2023 21:52:26 -0300 Subject: [PATCH] Botton whatsapp funciona --- estilos/recicla.css | 50 ++++++++++++++++++++++++++++++++++++++--- estilos/style.css | 50 ++++++++++++++++++++++++++++++++--------- img/icons/whatsapp.svg | 2 +- img/icons/whatsappw.svg | 1 + index.html | 13 ++++++----- recicla.html | 8 +++++++ 6 files changed, 103 insertions(+), 21 deletions(-) create mode 100644 img/icons/whatsappw.svg diff --git a/estilos/recicla.css b/estilos/recicla.css index 83ebf99..468c9cd 100644 --- a/estilos/recicla.css +++ b/estilos/recicla.css @@ -20,6 +20,50 @@ header { /*Default*/ @media (min-width: 320px) and (max-width: 575.98px)and (orientation:portrait) { + + .container_botton{ + width: 35px; + height: 35px; + background-color: green; + border: solid 1px white; + position: fixed; + z-index: 999; + border-radius: 100%; + bottom: 15px; + right: 10px; + /* text-align: center; */ + 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; + transition: ease 1s; + + } + + @keyframes whatsapp{ + 0%{ + box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.85); + } + 100%{ + box-shadow: 0 0 0 10px rgba(0, 0, 0, 0); + } + } + +} + /* ----------------------------- Aca comienza formato menu ----------------------------- */ @@ -205,7 +249,7 @@ header { .recicla_container{ width: 100%; position: relative; - + } .background_recicla{ @@ -222,7 +266,7 @@ header { color: #52a6b2; font-family: 'Badoga', sans-serif; text-decoration: dotted; - font-size: 1.8rem; + font-size: 1.8rem; } .title_secciondos--second{ @@ -232,7 +276,7 @@ header { .subtitle_seccion2{ text-align: center; font-family: 'Sofia Sans Condensed', sans-serif; - + } diff --git a/estilos/style.css b/estilos/style.css index dda5e28..3e11191 100644 --- a/estilos/style.css +++ b/estilos/style.css @@ -20,23 +20,51 @@ header { /*Default*/ @media (min-width: 320px) and (max-width: 575.98px)and (orientation:portrait) { - .botton_flotante{ - position: relative; + + /*----------------------------------------------------*/ + /* Aca empieza formato boton flotante Whatsapp */ + /*---------------------------------------------------*/ + + .container_botton{ + width: 35px; + height: 35px; + background-color: green; + border: solid 1px white; + position: fixed; + z-index: 999; + border-radius: 100%; + bottom: 15px; + right: 10px; + /* text-align: center; */ + padding: 4px; + transition: ease 0.3s; + + animation: whatsapp 1.2s infinite; + } + + .container_botton:hover{ + transform: scale(1.1); + transition: 0.3s; } - .botton{ - position: absolute; - margin-bottom: 5px; - z-index: 4; + .icon_wa{ + width:25px; + transition: ease 1s; } + @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; } diff --git a/img/icons/whatsapp.svg b/img/icons/whatsapp.svg index 1313d43..d95a60d 100644 --- a/img/icons/whatsapp.svg +++ b/img/icons/whatsapp.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/img/icons/whatsappw.svg b/img/icons/whatsappw.svg new file mode 100644 index 0000000..2f7c238 --- /dev/null +++ b/img/icons/whatsappw.svg @@ -0,0 +1 @@ + diff --git a/index.html b/index.html index 533bad2..abf3f70 100644 --- a/index.html +++ b/index.html @@ -12,12 +12,16 @@ +
+ +
+
-
- - -
+ diff --git a/recicla.html b/recicla.html index ebef0e4..e0532fd 100644 --- a/recicla.html +++ b/recicla.html @@ -8,10 +8,18 @@ +
+ + +
+ + +
+