Update index.html

v.3
Tejas-Sawant-iffort · Sep 11, 2024 · b6938c5 · b6938c5
1 parent 738f1e0
commit b6938c5
Showing 1 changed file with 98 additions and 25 deletions.
diff --git a/index.html b/index.html
@@ -8,50 +8,124 @@
     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
     <!-- Custom CSS -->
     <style>
-        body {
+        /* General Reset */
+        * {
             margin: 0;
             padding: 0;
-            font-family: Arial, sans-serif;
-            overflow: hidden; /* Hide scrollbars */
-            background-color: #f8f9fa; /* Light background color */
-            color: #343a40; /* Dark text color for better readability */
+            box-sizing: border-box;
         }
-        .container {
-            position: relative;
-            z-index: 1;
+
+        /* Background */
+        body {
+            background: linear-gradient(135deg, #1f1c2c, #928DAB);
+            font-family: 'Poppins', sans-serif;
+            height: 100vh;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            overflow: hidden;
+        }
+
+        /* Neon Effect */
+        .neon-text {
+            font-size: 3rem;
+            color: #fff;
+            text-transform: uppercase;
             text-align: center;
-            padding: 50px;
-            background-color: #ffffff; /* White background for content area */
-            border-radius: 10px; /* Rounded corners for a modern look */
-            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
-            max-width: 800px;
-            margin: 0 auto;
+            letter-spacing: 0.1em;
+            position: relative;
+            padding: 10px 20px;
         }
-        .particle-background {
+
+        .neon-text::before {
+            content: '';
             position: absolute;
             top: 0;
             left: 0;
-            width: 100%;
-            height: 100%;
-            z-index: 0;
+            right: 0;
+            bottom: 0;
+            border-radius: 8px;
+            background: rgba(255, 255, 255, 0.1);
+            box-shadow: 0 0 15px rgba(255, 255, 255, 0.4), 0 0 30px rgba(255, 0, 255, 0.4), 0 0 45px rgba(255, 0, 255, 0.6);
+            z-index: -1;
         }
-        .particle-background canvas {
+
+        .neon-text::after {
+            content: '';
             position: absolute;
-            width: 100%;
-            height: 100%;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            border-radius: 8px;
+            box-shadow: 0 0 15px rgba(255, 255, 255, 0.4), 0 0 60px rgba(0, 255, 255, 0.6), 0 0 90px rgba(0, 255, 255, 0.8);
+            z-index: -2;
         }
+
+        /* Glassmorphism Effect */
+        .glass-container {
+            backdrop-filter: blur(20px);
+            -webkit-backdrop-filter: blur(20px);
+            background: rgba(255, 255, 255, 0.1);
+            border: 1px solid rgba(255, 255, 255, 0.2);
+            border-radius: 15px;
+            padding: 20px;
+            box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
+            max-width: 800px;
+            text-align: center;
+            color: white;
+        }
+
+        /* Button Style with Neon Effect */
+        .neon-button {
+            padding: 10px 25px;
+            border-radius: 50px;
+            background: rgba(255, 255, 255, 0.1);
+            border: none;
+            color: #fff;
+            font-size: 1.2rem;
+            cursor: pointer;
+            position: relative;
+            transition: all 0.3s ease-in-out;
+        }
+
+        .neon-button:hover {
+            box-shadow: 0 0 10px rgba(255, 255, 255, 0.6), 0 0 20px rgba(0, 255, 255, 0.6), 0 0 30px rgba(0, 255, 255, 0.8);
+        }
+
+        .neon-button:active {
+            box-shadow: 0 0 15px rgba(255, 0, 255, 0.4), 0 0 45px rgba(0, 255, 255, 0.6);
+        }
+
+        /* Container and Iframe Styling */
+        .container {
+            position: relative;
+            z-index: 1;
+            text-align: center;
+            padding: 50px;
+            background-color: rgba(255, 255, 255, 0.8);
+            border-radius: 15px;
+            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+            max-width: 800px;
+            margin: 0 auto;
+        }
+
         .iframe-container {
             width: 100%;
-            height: 100vh;
+            height: 80vh;
             display: flex;
             justify-content: center;
             align-items: center;
             padding: 20px;
             box-sizing: border-box;
+            background: rgba(255, 255, 255, 0.1);
+            border-radius: 15px;
+            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
         }
+
         .iframe-container iframe {
             width: 100%;
-            height: 80vh;
+            height: 100%;
             border: 5px solid #00bfff; /* Neon blue border */
             border-radius: 10px; /* Rounded corners for the iframe */
         }
@@ -64,7 +138,7 @@
     </div>
 
     <div class="container">
-        <h1>Welcome to Fitze</h1>
+        <h1 class="neon-text">Welcome to Fitze</h1>
         <p>Enhancing customer support with AI-powered assistance</p>
         <p>Did you know that the tongue is the strongest muscle in the body?</p>
     </div>
@@ -166,4 +240,3 @@ <h1>Welcome to Fitze</h1>
     </script>
 </body>
 </html>
-