Add button to enter un visio

front/dist/resources/logos/phone-open.svg

@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.1.2, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 384 384" style="enable-background:new 0 0 384 384;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#FFFFFF;}
+</style>
+<g>
+	<g>
+		<path class="st0" d="M163.2,351.1c-2.4-23.4-1.1-46.7,3.9-69.2c2.6-11-2.1-23.8-9.4-29.6l-36.8-39.7C142.5,160,170,126.2,216.8,95
+			l45.1,27.2c9,7.3,21.3,9.1,32,4.4c21.2-9.5,43.7-15.4,67.2-17.7c16.9-1.7,29.3-16.8,27.6-33.7L381.5,5
+			c-1.7-16.9-16.8-29.3-33.7-27.6C154-2.8,12.4,170.8,32.1,364.5c1.7,16.9,16.8,29.3,33.7,27.6l69.9-7.1
+			C152.5,383.1,164.9,368,163.2,351.1z"/>
+	</g>
+</g>
+</svg>

front/dist/resources/style/style.css

@@ -111,4 +111,43 @@ video:nth-child(3):nth-last-child(1) {
     top: calc(48px - 32px);
     left: calc(48px - 35px);
     position: relative;
+}
+.phone-open{
+    position: absolute;
+    border-radius: 50%;
+    width: 50px;
+    height: 50px;
+    left: calc(50% - 70px);
+    padding: 20px;
+    bottom: 20px;
+    box-shadow: 2px 2px 24px #444;
+    background-color: green;
+    opacity: 0;
+    transition: all .4s ease-in-out;
+}
+.phone-open.active{
+    opacity: 1;
+    animation-name: phone-move;
+    animation-duration: 0.4s;
+    animation-iteration-count: infinite;
+    animation-timing-function: linear;
+}
+.phone-open:hover{
+    animation: none;
+    cursor: pointer;
+}
+
+@keyframes phone-move {
+    0%   {
+        left: calc(50% - 70px);
+        bottom: 20px;
+    }
+    25% {
+        left: calc(50% - 65px);
+        bottom: 15px;
+    }
+    25% {
+        left: calc(50% - 75px);
+        bottom: 25px;
+    }
 }