Update index.html

v.4
Tejas-Sawant-iffort · Sep 11, 2024 · 06636d7 · 06636d7
1 parent b6938c5
commit 06636d7
Showing 1 changed file with 29 additions and 4 deletions.
diff --git a/index.html b/index.html
@@ -24,6 +24,7 @@
             justify-content: center;
             align-items: center;
             overflow: hidden;
+            padding: 20px;
         }
 
         /* Neon Effect */
@@ -35,6 +36,7 @@
             letter-spacing: 0.1em;
             position: relative;
             padding: 10px 20px;
+            margin-bottom: 20px;
         }
 
         .neon-text::before {
@@ -74,6 +76,7 @@
             max-width: 800px;
             text-align: center;
             color: white;
+            margin: auto;
         }
 
         /* Button Style with Neon Effect */
@@ -102,14 +105,14 @@
             position: relative;
             z-index: 1;
             text-align: center;
-            padding: 50px;
+            padding: 20px;
             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: 80vh;
@@ -122,21 +125,43 @@
             border-radius: 15px;
             box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
         }
-        
+
         .iframe-container iframe {
             width: 100%;
             height: 100%;
             border: 5px solid #00bfff; /* Neon blue border */
             border-radius: 10px; /* Rounded corners for the iframe */
         }
+
+        /* Responsive Styles */
+        @media (max-width: 768px) {
+            .neon-text {
+                font-size: 2rem;
+            }
+
+            .iframe-container {
+                height: 60vh;
+            }
+        }
+
+        @media (max-width: 576px) {
+            .neon-text {
+                font-size: 1.5rem;
+            }
+
+            .iframe-container {
+                height: 50vh;
+                padding: 10px;
+            }
+        }
     </style>
 </head>
 <body>
     <!-- Particle Background -->
     <div class="particle-background">
         <canvas id="particles-js"></canvas>
     </div>
-    
+
     <div class="container">
         <h1 class="neon-text">Welcome to Fitze</h1>
         <p>Enhancing customer support with AI-powered assistance</p>