Merge pull request #85 from ekoindia/himanshu

Himanshu
ekoindia · Feb 21, 2023 · e3351d9 · e3351d9
2 parents 262062e + 3eaf80b
commit e3351d9
Show file tree

Hide file tree

Showing 3 changed files with 133 additions and 0 deletions.
diff --git a/...lustration-isolated-white-background-ask-support-icon-124985871-transformed.png b/...lustration-isolated-white-background-ask-support-icon-124985871-transformed.png
diff --git a/floating/index.html b/floating/index.html
@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <link rel="stylesheet" href="style.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css"
+        integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w=="
+        crossorigin="anonymous" referrerpolicy="no-referrer" />
+</head>
+
+
+
+<body>
+    <div class="container">
+        <iframe id="myIframe" frameborder="0" style="
+        height: 490px;
+        width:100%;
+    border:none;
+    border-radius: 20px;
+    " src='https://forms.zohopublic.in/ekoindiafinancialservicespvtlt/form/BasicSignup/formperma/LH0hnawL1CEloTzSjrN5ab_DpESxwmSyczhnBboxL2s'></iframe>
+
+    </div>
+    <div class="signup-button">
+        <div class="remove-button">
+            <img class="clearImage" onclick="myFunction()" role="button"
+                src="https://img.icons8.com/external-those-icons-fill-those-icons/24/null/external-Disable-interface-those-icons-fill-those-icons.png" />
+        </div>
+        <div class="button">
+            <span class="widgetlabel">
+                got a question?
+            </span>
+            <img class="signupImage"
+                src="ask-support-contact-us-icon-button-illustration-isolated-white-background-ask-support-icon-124985871-transformed.png" />
+        </div>
+    </div>
+    <script>
+        const signupButton = document.querySelector(".signup-button .button .signupImage");
+        const container = document.querySelector(".container");
+        signupButton.addEventListener("click", () => {
+            container.classList.toggle("active");
+        });
+        function myFunction() {
+            const label = document.querySelector(".signup-button .button .widgetlabel");
+            const clearButton = document.querySelector(".signup-button .remove-button .clearImage");
+            label.remove();
+            clearButton.remove();
+        }
+
+
+    </script>
+</body>
+
+</html>
diff --git a/floating/style.css b/floating/style.css
@@ -0,0 +1,76 @@
+.container {
+    position: fixed;
+    bottom: 245px;
+    right: 10px;
+    width: 300px;
+    border-radius: 25px;
+    box-sizing: border-box;
+    transform: rotateZ(0deg);
+    opacity: 1;
+    pointer-events: auto;
+    transition: all 500ms ease;
+
+}
+
+
+
+.container:hover {
+    width: 500px;
+    position: fixed;
+}
+
+.container.active {
+
+    transform: rotateZ(-6deg);
+    opacity: 0;
+    pointer-events: none;
+    transition: all 500ms ease;
+}
+
+.signup-button {
+    position: fixed;
+    bottom: 190px;
+    right: 10px;
+    cursor: pointer;
+    display: flex;
+
+
+}
+
+.signup-button .button .signupImage {
+    font-size: 30px;
+    color: #003049;
+    transition: all 300ms ease;
+    height: 50px;
+
+
+}
+
+.signup-button .button .signupImage:hover {
+    transform: scale(1.1);
+}
+
+.signup-button .widgetlabel {
+    position: relative;
+    bottom: 30px;
+    padding: none;
+    font-size: 15px;
+    font-family: Arial, Helvetica, sans-serif;
+    color: black;
+    background-color: #fefae0;
+    padding: 10px;
+    border-radius: 15px;
+    text-align: center;
+}
+
+.signup-button .remove-button .clearImage {
+    right: 10px;
+    height: 15px;
+    bottom: 15px;
+    padding-right: 2px;
+
+}
+
+.signup-button .remove-button .clearImage:hover {
+    transform: scale(1.1);
+}