From 0137d989b8e841d9291e4da296623bc3ac84b714 Mon Sep 17 00:00:00 2001
From: Srivishnu T <143670812+srivishnu2805@users.noreply.github.com>
Date: Wed, 6 Nov 2024 23:26:53 +0530
Subject: [PATCH] Update index.html

---
 index.html | 192 +++++++++++++++++++++++++++++++++++------------------
 1 file changed, 127 insertions(+), 65 deletions(-)

diff --git a/index.html b/index.html
index da2d5e9e..06776cd9 100644
--- a/index.html
+++ b/index.html
@@ -654,7 +654,7 @@ <h3 class="join"><i class="fa-solid fa-user"></i> Register to join us....</h3>
 
   <div id="home" class="header-hero bg_cover" style="background-image: url(./assets/images/banner-bg.svg)">
     <div class="container">
-      <h2 class="head-animate" style="font-size: 90px;">
+      <h2 class="head-animate">
         WELCOME TO FINVEDA
       </h2>
       <div class="row justify-content-center">
@@ -677,104 +677,166 @@ <h2 class="head-animate" style="font-size: 90px;">
                 background-position: 0 0;
                 animation: back 20s linear infinite, hovering 1.5s ease-in-out infinite;
               }
-
+    
               @keyframes back {
                 100% {
                   background-position: 2000px 0;
                 }
               }
-
+    
               @keyframes hovering {
                 0% {
                   transform: translateY(0);
                 }
-
+    
                 50% {
                   transform: translateY(-5px);
                 }
-
+    
                 100% {
                   transform: translateY(0);
                 }
               }
-
+    
               .header-hero-content h2 {
                 font-size: 200px;
               }
+    
+              /* Styled button */
+              .styled-btn {
+                background-color: #4CAF50;
+                color: white;
+                padding: 10px 20px;
+                font-size: 16px;
+                border: none;
+                border-radius: 8px;
+                cursor: pointer;
+                box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
+                transition: background-color 0.3s, transform 0.3s;
+                margin-top: 20px;
+                margin-left: 280px;
+              }
+    
+              .styled-btn:hover {
+                background-color: #45a049;
+                transform: scale(1.05);
+              }
+    
+              .styled-btn:active {
+                transform: scale(0.98);
+              }
+    
+              /* Mobile Responsive Styles */
+              @media (max-width: 1024px) {
+                .head-animate {
+                  font-size: 90px; /* Adjust font size for tablets */
+                  top: 100px; /* Adjust positioning */
+                }
+    
+                .header-hero-content h2 {
+                  font-size: 150px; /* Adjust heading size for medium screens */
+                }
+    
+                .styled-btn {
+                  margin-left: 0;
+                  width: 100%;
+                  padding: 14px 0;
+                  font-size: 18px;
+                  margin-top: 10px;
+                }
+    
+                .header-hero-image img {
+                  width: 80%; /* Adjust image size for smaller screens */
+                  height: auto;
+                }
+              }
+    
+              @media (max-width: 768px) {
+                .head-animate {
+                  font-size: 70px; /* Adjust font size for smaller tablets and larger phones */
+                  top: 50px;
+                }
+    
+                .header-hero-content h2 {
+                  font-size: 120px; /* Adjust heading size */
+                }
+    
+                .styled-btn {
+                  margin-left: 0;
+                  width: 100%;
+                  padding: 14px 0;
+                  font-size: 18px;
+                }
+    
+                .header-hero-image img {
+                  width: 100%; /* Make the image fully responsive */
+                  height: auto;
+                }
+    
+                .header-hero-content p {
+                  font-size: 16px; /* Reduce paragraph font size */
+                }
+              }
+    
+              @media (max-width: 480px) {
+                .head-animate {
+                  font-size: 50px; /* Further reduce font size for very small screens */
+                  top: 20px;
+                }
+    
+                .header-hero-content h2 {
+                  font-size: 80px;
+                }
+    
+                .header-hero-content p {
+                  font-size: 14px; /* Make text smaller on very small screens */
+                  padding: 0 10px;
+                }
+    
+                .styled-btn {
+                  padding: 16px 0;
+                  font-size: 18px;
+                  width: 100%;
+                  margin-left: 0;
+                }
+    
+                .header-hero-image img {
+                  width: 100%;
+                  height: auto;
+                }
+              }
             </style>
-            <br>
-            <br>
-            <p class="text wow fadeInUp" data-wow-duration="1.3s" data-wow-delay="0.8s"
-              style="visibility: visible; animation-duration: 1.3s; animation-delay: 0.8s;color:white">
+    
+            <br><br>
+            <p class="text wow fadeInUp" data-wow-duration="1.3s" data-wow-delay="0.8s" 
+               style="visibility: visible; animation-duration: 1.3s; animation-delay: 0.8s; color:white">
               Wanna learn how to grow your money to become rich? We have
-              made becoming a stock market Guru easy with our AI
-              powered finance advisor - <b>Arth Sathi 🤵🏻</b>
+              made becoming a stock market Guru easy with our AI-powered finance advisor - <b>Arth Sathi 🤵🏻</b>
             </p>
             <a href="#" class="main-btn wow fadeInUp" data-wow-duration="1.3s" data-wow-delay="1.1s"
-              onclick="window.botpressWebChat.sendEvent({ type: 'show' }); return false;"
-              style="visibility: visible; animation-duration: 1.3s; animation-delay: 1.1s; color:white">
+               onclick="window.botpressWebChat.sendEvent({ type: 'show' }); return false;"
+               style="visibility: visible; animation-duration: 1.3s; animation-delay: 1.1s; color:white">
               Chat with ArthaSathi 💬
             </a>
-
-
-
-
           </div>
-
+    
           <button class="styled-btn" onclick="window.location.href='reviews.html'">Share Experience</button>
-
-          <style>
-            .styled-btn {
-              background-color: #4CAF50;
-              /* Green background */
-              color: white;
-              /* White text */
-              padding: 10px 20px;
-              /* Padding around the text */
-              font-size: 16px;
-              /* Font size */
-              border: none;
-              /* Remove border */
-              border-radius: 8px;
-              /* Rounded corners */
-              cursor: pointer;
-              /* Pointer cursor on hover */
-              box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
-              /* Light shadow */
-              transition: background-color 0.3s, transform 0.3s;
-              /* Smooth transition */
-              margin-top: 20px;
-              margin-left: 280px;
-
-            }
-
-            .styled-btn:hover {
-              background-color: #45a049;
-              /* Darker green on hover */
-              transform: scale(1.05);
-              /* Slightly larger on hover */
-            }
-
-            .styled-btn:active {
-              transform: scale(0.98);
-              /* Slightly smaller on click */
-            }
-          </style>
+    
         </div>
       </div>
       <div class="row">
         <div class="col-lg-12">
           <div class="header-hero-image text-center wow fadeIn" data-wow-duration="1.3s" data-wow-delay="1.4s"
-            style="visibility: visible; animation-duration: 1.3s; animation-delay: 1.4s;">
+               style="visibility: visible; animation-duration: 1.3s; animation-delay: 1.4s;">
             <div class="anim" data-tilt="">
-              <img src="assets/images/header-hero.webp" style="animation: float 1.5s ease-in-out infinite;"
-                data-tilt="" />
-
+              <img src="assets/images/header-hero.webp" style="animation: float 1.5s ease-in-out infinite;" data-tilt=""/>
             </div>
           </div>
         </div>
       </div>
     </div>
+    
+    
     <div id="particles-1" class="particles"><canvas class="particles-js-canvas-el" width="1998" height="1012"
         style="width: 100%; height: 100%;"></canvas></div>
   </div>
@@ -2342,14 +2404,14 @@ <h4 class="title custom-margin">Resources</h4>
           <div class="col-lg-3 col-md-5 col-sm-5">
             <div class="footer-contact mt-50 wow fadeIn" data-wow-duration="1s" data-wow-delay="0.8s">
               <div class="footer-title">
-                <h4 class="title custom-margin">Contact Us</h4>
+                <h4 class="title custom-margin" style="margin-left: -4.5rem">Contact Us</h4>
               </div>
-              <ul class="contact custom-margin-big" style="justify-content: space-around;">
+              <ul class="contact custom-margin-big" style="justify-content: space-around;margin-left: -5rem">
                 <li class="d-sm-flex justify-content-center">
                   <i class="fa fa-envelope d-sm-flex align-items-center white" style="font-size: 16px; width: 10%;"></i>
                   <p style="width: 80%;">
                     <a href="mailto:ayush1337@hotmail.com" target="_blank"
-                      style="color: white; text-decoration: underline;">
+                      style="color: white; text-decoration: underline;margin-left: 0.5rem">
                       ayush1337@hotmail.com
                     </a>
                   </p>
@@ -2918,4 +2980,4 @@ <h2 class="h2-nl">Stay Ahead in Your Financial Journey!</h2>
 
   </body>
 
-  </html>
\ No newline at end of file
+  </html>