Botton whatsapp funciona

ElianaInes · Nov 29, 2023 · 816d87f · 816d87f
1 parent 7023773
commit 816d87f
Show file tree

Hide file tree

Showing 6 changed files with 103 additions and 21 deletions.
diff --git 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
@@ -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
diff --git a/img/icons/whatsappw.svg b/img/icons/whatsappw.svg
diff --git a/index.html b/index.html
@@ -12,12 +12,16 @@
 
 <body>
 
+    <div class="container_botton">
+        <a class="botton" href="https://www.whatsapp.com/?lang=es_LA"> <img class="icon_wa" src="img/icons/whatsappw.svg" alt=""></a>
+    </div>
+
     <!-- Aca comienza formato menu -->
     <header>
         <nav class="nav">
             <section class="menu__container">
 
-                <a href="#" class="enlace">
+                <a href="index.html" class="enlace">
                     <img src="img/logos/logo-linkb.png" alt="logo_er" class="logo">
                 </a>
 
@@ -33,7 +37,7 @@
                 <ul class="menu__links" id="menu">
 
                     <li class="menu__item">
-                        <a href="#" class="menu__link"> <img src="img/icons/house.svg" class="dropdown__icon_house">
+                        <a href="index.html" class="menu__link"> <img src="img/icons/house.svg" class="dropdown__icon_house">
                             <span class="dropdown__span">Inicio</span></a>
                     </li>
 
@@ -106,10 +110,7 @@
 
     </header>
 
-    <div class="botton_flotante">
-        <a class="botton" href="https://www.whatsapp.com/?lang=es_LA"> <img class="icon_ws" src="img/icons/whatsapp.svg" alt=""></a>
-
-    </div>
+
 
     <!--Aqui comienza el carrusel. SECCION 2-->
 

diff --git a/recicla.html b/recicla.html
@@ -8,10 +8,18 @@
     <link rel="stylesheet" href="estilos/recicla.css">
 </head>
 <body>
+    <div class="container_botton">
+        <a class="botton" href="https://www.whatsapp.com/?lang=es_LA"> <img class="icon_wa" src="img/icons/whatsappw.svg" alt=""></a>
+
+    </div>
+
+
+
     <!------------------------------->
     <!-- Aca comienza formato menu -->
     <!------------------------------->
     <header>
+
         <nav class="nav">
             <section class="menu__container">