Enhance index.html and styles.css with improved design elements, animations, and responsive features. Update navbar, sections, and buttons with gradient backgrounds and hover effects. Refine CSS variables and add custom animations for a more dynamic user experience.

css/styles.css

@@ -1,12 +1,16 @@
 /* Fallback styles in case CDN links fail */
 :root {
-    --primary-color: #0d6efd;
+    --primary-color: #8b5cf6;
-    --dark-bg: #212529;
+    --secondary-color: #ec4899;
+    --dark-bg: #4c1d95;
     --light-bg: #f8f9fa;
-    --text-dark: #212529;
+    --text-dark: #1f2937;
-    --text-light: #6c757d;
+    --text-light: #6b7280;
     --white: #ffffff;
     --shadow: 0 2px 4px rgba(0,0,0,0.1);
+    --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1);
+    --gradient-primary: linear-gradient(135deg, #8b5cf6, #ec4899);
+    --gradient-secondary: linear-gradient(135deg, #6366f1, #8b5cf6);
 }
 
 /* Reset and base styles */
@@ -19,8 +23,9 @@
 body {
     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
     line-height: 1.5;
-    background-color: var(--light-bg);
+    background: linear-gradient(135deg, var(--light-bg), #e0e7ff);
     color: var(--text-dark);
+    scroll-behavior: smooth;
 }
 
 /* Container fallback */
@@ -33,9 +38,14 @@ body {
 
 /* Navbar fallback */
 .navbar {
-    background-color: var(--dark-bg);
+    background: var(--gradient-primary);
     padding: 1rem 0;
     box-shadow: var(--shadow);
+    transition: all 0.3s ease;
+}
+
+.navbar:hover {
+    box-shadow: var(--shadow-lg);
 }
 
 .navbar-brand {
@@ -43,6 +53,11 @@ body {
     text-decoration: none;
     font-size: 1.25rem;
     font-weight: bold;
+    transition: transform 0.3s ease;
+}
+
+.navbar-brand:hover {
+    transform: scale(1.1);
 }
 
 .navbar-nav {
@@ -55,12 +70,30 @@ body {
     color: var(--white);
     text-decoration: none;
     opacity: 0.8;
-    transition: opacity 0.3s ease;
+    transition: all 0.3s ease;
+    position: relative;
+}
+
+.nav-link::after {
+    content: '';
+    position: absolute;
+    width: 0;
+    height: 2px;
+    bottom: -2px;
+    left: 0;
+    background: var(--gradient-primary);
+    transition: width 0.3s ease;
+}
+
+.nav-link:hover::after,
+.nav-link.active::after {
+    width: 100%;
 }
 
 .nav-link:hover,
 .nav-link.active {
     opacity: 1;
+    color: #f472b6;
 }
 
 /* Button fallback */
@@ -72,16 +105,38 @@ body {
     cursor: pointer;
     text-decoration: none;
     transition: all 0.3s ease;
+    position: relative;
+    overflow: hidden;
+}
+
+.btn::before {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 0;
+    height: 0;
+    background: rgba(255, 255, 255, 0.2);
+    border-radius: 50%;
+    transform: translate(-50%, -50%);
+    transition: width 0.6s ease, height 0.6s ease;
+}
+
+.btn:hover::before {
+    width: 300px;
+    height: 300px;
 }
 
 .btn-primary {
-    background-color: var(--primary-color);
+    background: var(--gradient-primary);
     color: var(--white);
+    box-shadow: var(--shadow);
 }
 
 .btn-primary:hover {
     transform: translateY(-2px);
-    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
+    box-shadow: var(--shadow-lg);
+    background: linear-gradient(135deg, #7c3aed, #db2777);
 }
 
 /* Grid fallback */
@@ -158,16 +213,97 @@ body {
     box-shadow: 0 4px 6px rgba(0,0,0,0.1);
 }
 
+/* Form styles */
+.form-control {
+    transition: all 0.3s ease;
+    border: 2px solid transparent;
+}
+
+.form-control:focus {
+    border-color: var(--primary-color);
+    box-shadow: 0 0 0 0.2rem rgba(139, 92, 246, 0.25);
+    transform: translateY(-1px);
+}
+
+/* Card hover effects */
+.card {
+    transition: all 0.3s ease;
+    background: linear-gradient(135deg, #ffffff, #f9fafb);
+}
+
+.card:hover {
+    transform: translateY(-5px);
+    box-shadow: var(--shadow-lg);
+    background: linear-gradient(135deg, #ffffff, #f3f4f6);
+}
+
 /* Custom animations */
 @keyframes fadeIn {
-    from { opacity: 0; }
+    from { 
-    to { opacity: 1; }
+        opacity: 0;
+        transform: translateY(20px);
+    }
+    to { 
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+@keyframes float {
+    0%, 100% { transform: translateY(0); }
+    50% { transform: translateY(-10px); }
+}
+
+@keyframes pulse {
+    0%, 100% { opacity: 1; }
+    50% { opacity: 0.5; }
 }
 
 .fade-in {
     animation: fadeIn 0.5s ease-in;
 }
 
+/* Gradient backgrounds */
+.gradient-bg {
+    background: var(--gradient-primary);
+    background-size: 200% 200%;
+    animation: gradient 15s ease infinite;
+}
+
+@keyframes gradient {
+    0% { background-position: 0% 50%; }
+    50% { background-position: 100% 50%; }
+    100% { background-position: 0% 50%; }
+}
+
+/* Section backgrounds */
+.section-gradient-1 {
+    background: linear-gradient(135deg, #ffffff, #e0e7ff);
+}
+
+.section-gradient-2 {
+    background: linear-gradient(135deg, #f3e8ff, #fdf2f8);
+}
+
+.section-gradient-3 {
+    background: linear-gradient(135deg, #e0e7ff, #ede9fe);
+}
+
+/* Text gradients */
+.text-gradient {
+    background: var(--gradient-primary);
+    -webkit-background-clip: text;
+    background-clip: text;
+    color: transparent;
+}
+
+/* Border gradients */
+.border-gradient {
+    border: 2px solid transparent;
+    background: linear-gradient(white, white) padding-box,
+                var(--gradient-primary) border-box;
+}
+
 /* Responsive fallback */
 @media (max-width: 768px) {
     .navbar-nav {

index.html

@@ -8,33 +8,52 @@
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
     <!-- Tailwind CSS -->
     <script src="https://cdn.tailwindcss.com"></script>
+    <script>
+        tailwind.config = {
+            theme: {
+                extend: {
+                    animation: {
+                        'float': 'float 3s ease-in-out infinite',
+                        'pulse-slow': 'pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite',
+                        'bounce-slow': 'bounce 3s infinite',
+                    },
+                    keyframes: {
+                        float: {
+                            '0%, 100%': { transform: 'translateY(0)' },
+                            '50%': { transform: 'translateY(-10px)' },
+                        }
+                    }
+                }
+            }
+        }
+    </script>
     <!-- Custom CSS -->
     <link rel="stylesheet" href="css/styles.css">
 </head>
-<body class="bg-gray-100">
+<body class="bg-gradient-to-br from-gray-100 to-blue-50">
     <!-- Navigation -->
-    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
+    <nav class="navbar navbar-expand-lg navbar-dark bg-gradient-to-r from-purple-600 to-indigo-600 fixed-top transition-all duration-300 hover:shadow-lg">
         <div class="container">
-            <a class="navbar-brand" href="#">Your Brand</a>
+            <a class="navbar-brand hover:scale-110 transition-transform duration-300" href="#">Your Brand</a>
             <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                 <span class="navbar-toggler-icon"></span>
             </button>
             <div class="collapse navbar-collapse" id="navbarNav">
                 <ul class="navbar-nav">
                     <li class="nav-item">
-                        <a class="nav-link active" href="#home">Home</a>
+                        <a class="nav-link active hover:text-pink-300 transition-colors duration-300" href="#home">Home</a>
                     </li>
                     <li class="nav-item">
-                        <a class="nav-link" href="#about">About</a>
+                        <a class="nav-link hover:text-pink-300 transition-colors duration-300" href="#about">About</a>
                     </li>
                     <li class="nav-item">
-                        <a class="nav-link" href="#services">Services</a>
+                        <a class="nav-link hover:text-pink-300 transition-colors duration-300" href="#services">Services</a>
                     </li>
                     <li class="nav-item">
-                        <a class="nav-link" href="#portfolio">Portfolio</a>
+                        <a class="nav-link hover:text-pink-300 transition-colors duration-300" href="#portfolio">Portfolio</a>
                     </li>
                     <li class="nav-item">
-                        <a class="nav-link" href="#contact">Contact</a>
+                        <a class="nav-link hover:text-pink-300 transition-colors duration-300" href="#contact">Contact</a>
                     </li>
                 </ul>
             </div>
@@ -42,54 +61,60 @@
     </nav>
 
     <!-- Hero Section -->
-    <section id="home" class="py-5">
+    <section id="home" class="py-5 min-h-screen flex items-center relative overflow-hidden">
-        <div class="container">
+        <div class="absolute inset-0 bg-gradient-to-br from-blue-500 via-purple-500 to-pink-500 opacity-20"></div>
+        <div class="container relative z-10">
             <div class="row">
                 <div class="col-md-8 mx-auto text-center">
-                    <h1 class="text-4xl font-bold mb-4">Welcome to Your Website</h1>
+                    <h1 class="text-5xl font-bold mb-4 animate-float bg-gradient-to-r from-purple-600 to-pink-600 text-transparent bg-clip-text">Welcome to Your Website</h1>
-                    <p class="text-gray-600 mb-4">A clean, modern template for your next project</p>
+                    <p class="text-gray-700 mb-8 text-xl animate-pulse-slow">A clean, modern template for your next project</p>
-                    <button class="btn btn-primary me-2">Get Started</button>
+                    <div class="space-x-4">
-                    <button class="btn btn-outline-secondary">Learn More</button>
+                        <button class="btn btn-primary bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-700 hover:to-pink-700 hover:scale-110 transition-transform duration-300 shadow-lg hover:shadow-xl">Get Started</button>
+                        <button class="btn btn-outline-secondary hover:bg-gradient-to-r hover:from-purple-600 hover:to-pink-600 hover:text-white transition-all duration-300">Learn More</button>
+                    </div>
                 </div>
             </div>
         </div>
     </section>
 
     <!-- About Section -->
-    <section id="about" class="py-5 bg-white">
+    <section id="about" class="py-5 bg-gradient-to-br from-white to-blue-50 relative">
         <div class="container">
-            <h2 class="text-3xl font-bold text-center mb-5">About Us</h2>
+            <h2 class="text-4xl font-bold text-center mb-8 hover:scale-105 transition-transform duration-300 bg-gradient-to-r from-purple-600 to-pink-600 text-transparent bg-clip-text">About Us</h2>
             <div class="row">
-                <div class="col-md-6">
+                <div class="col-md-6 transform hover:scale-105 transition-all duration-300">
-                    <p class="text-gray-600">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+                    <p class="text-gray-700 text-lg">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                 </div>
-                <div class="col-md-6">
+                <div class="col-md-6 transform hover:scale-105 transition-all duration-300">
-                    <p class="text-gray-600">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+                    <p class="text-gray-700 text-lg">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                 </div>
             </div>
         </div>
     </section>
 
     <!-- Services Section -->
-    <section id="services" class="py-5">
+    <section id="services" class="py-5 relative bg-gradient-to-br from-blue-50 to-purple-50">
         <div class="container">
-            <h2 class="text-3xl font-bold text-center mb-5">Our Services</h2>
+            <h2 class="text-4xl font-bold text-center mb-8 hover:scale-105 transition-transform duration-300 bg-gradient-to-r from-purple-600 to-pink-600 text-transparent bg-clip-text">Our Services</h2>
             <div class="row">
                 <div class="col-md-4 mb-4">
-                    <div class="bg-white rounded-lg shadow-md p-4">
+                    <div class="bg-white rounded-lg shadow-md p-6 transform hover:scale-105 transition-all duration-300 hover:shadow-xl border-t-4 border-purple-500">
-                        <h3 class="text-xl font-bold mb-3">Service 1</h3>
+                        <div class="text-4xl mb-4 animate-bounce-slow">🚀</div>
+                        <h3 class="text-xl font-bold mb-3 text-purple-600">Service 1</h3>
                         <p class="text-gray-600">Description of your first service goes here.</p>
                     </div>
                 </div>
                 <div class="col-md-4 mb-4">
-                    <div class="bg-white rounded-lg shadow-md p-4">
+                    <div class="bg-white rounded-lg shadow-md p-6 transform hover:scale-105 transition-all duration-300 hover:shadow-xl border-t-4 border-pink-500">
-                        <h3 class="text-xl font-bold mb-3">Service 2</h3>
+                        <div class="text-4xl mb-4 animate-bounce-slow">💡</div>
+                        <h3 class="text-xl font-bold mb-3 text-pink-600">Service 2</h3>
                         <p class="text-gray-600">Description of your second service goes here.</p>
                     </div>
                 </div>
                 <div class="col-md-4 mb-4">
-                    <div class="bg-white rounded-lg shadow-md p-4">
+                    <div class="bg-white rounded-lg shadow-md p-6 transform hover:scale-105 transition-all duration-300 hover:shadow-xl border-t-4 border-indigo-500">
-                        <h3 class="text-xl font-bold mb-3">Service 3</h3>
+                        <div class="text-4xl mb-4 animate-bounce-slow">⚡</div>
+                        <h3 class="text-xl font-bold mb-3 text-indigo-600">Service 3</h3>
                         <p class="text-gray-600">Description of your third service goes here.</p>
                     </div>
                 </div>
@@ -98,28 +123,28 @@
     </section>
 
     <!-- Portfolio Section -->
-    <section id="portfolio" class="py-5 bg-white">
+    <section id="portfolio" class="py-5 bg-gradient-to-br from-purple-50 to-pink-50 relative">
         <div class="container">
-            <h2 class="text-3xl font-bold text-center mb-5">Portfolio</h2>
+            <h2 class="text-4xl font-bold text-center mb-8 hover:scale-105 transition-transform duration-300 bg-gradient-to-r from-purple-600 to-pink-600 text-transparent bg-clip-text">Portfolio</h2>
             <div class="row">
                 <div class="col-md-4 mb-4">
-                    <div class="bg-gray-100 rounded-lg p-4">
+                    <div class="bg-white rounded-lg p-4 transform hover:scale-105 transition-all duration-300 hover:shadow-xl">
-                        <div class="aspect-w-16 aspect-h-9 bg-gray-200 mb-3"></div>
+                        <div class="aspect-w-16 aspect-h-9 bg-gradient-to-r from-purple-500 via-pink-500 to-red-500 rounded-lg mb-3 animate-pulse-slow"></div>
-                        <h3 class="text-xl font-bold mb-2">Project 1</h3>
+                        <h3 class="text-xl font-bold mb-2 text-purple-600">Project 1</h3>
                         <p class="text-gray-600">Brief description of your first project.</p>
                     </div>
                 </div>
                 <div class="col-md-4 mb-4">
-                    <div class="bg-gray-100 rounded-lg p-4">
+                    <div class="bg-white rounded-lg p-4 transform hover:scale-105 transition-all duration-300 hover:shadow-xl">
-                        <div class="aspect-w-16 aspect-h-9 bg-gray-200 mb-3"></div>
+                        <div class="aspect-w-16 aspect-h-9 bg-gradient-to-r from-blue-500 via-indigo-500 to-purple-500 rounded-lg mb-3 animate-pulse-slow"></div>
-                        <h3 class="text-xl font-bold mb-2">Project 2</h3>
+                        <h3 class="text-xl font-bold mb-2 text-indigo-600">Project 2</h3>
                         <p class="text-gray-600">Brief description of your second project.</p>
                     </div>
                 </div>
                 <div class="col-md-4 mb-4">
-                    <div class="bg-gray-100 rounded-lg p-4">
+                    <div class="bg-white rounded-lg p-4 transform hover:scale-105 transition-all duration-300 hover:shadow-xl">
-                        <div class="aspect-w-16 aspect-h-9 bg-gray-200 mb-3"></div>
+                        <div class="aspect-w-16 aspect-h-9 bg-gradient-to-r from-pink-500 via-purple-500 to-indigo-500 rounded-lg mb-3 animate-pulse-slow"></div>
-                        <h3 class="text-xl font-bold mb-2">Project 3</h3>
+                        <h3 class="text-xl font-bold mb-2 text-pink-600">Project 3</h3>
                         <p class="text-gray-600">Brief description of your third project.</p>
                     </div>
                 </div>
@@ -128,25 +153,25 @@
     </section>
 
     <!-- Contact Section -->
-    <section id="contact" class="py-5">
+    <section id="contact" class="py-5 relative bg-gradient-to-br from-blue-50 to-indigo-50">
         <div class="container">
-            <h2 class="text-3xl font-bold text-center mb-5">Contact Us</h2>
+            <h2 class="text-4xl font-bold text-center mb-8 hover:scale-105 transition-transform duration-300 bg-gradient-to-r from-purple-600 to-pink-600 text-transparent bg-clip-text">Contact Us</h2>
             <div class="row">
                 <div class="col-md-6 mx-auto">
-                    <form class="bg-white rounded-lg shadow-md p-6">
+                    <form class="bg-white rounded-lg shadow-md p-6 transform hover:scale-105 transition-all duration-300 hover:shadow-xl border-t-4 border-purple-500">
                         <div class="mb-3">
-                            <label for="name" class="form-label">Name</label>
+                            <label for="name" class="form-label text-purple-600">Name</label>
-                            <input type="text" class="form-control" id="name" placeholder="Your name">
+                            <input type="text" class="form-control focus:ring-2 focus:ring-purple-500 transition-all duration-300" id="name" placeholder="Your name">
                         </div>
                         <div class="mb-3">
-                            <label for="email" class="form-label">Email</label>
+                            <label for="email" class="form-label text-purple-600">Email</label>
-                            <input type="email" class="form-control" id="email" placeholder="Your email">
+                            <input type="email" class="form-control focus:ring-2 focus:ring-purple-500 transition-all duration-300" id="email" placeholder="Your email">
                         </div>
                         <div class="mb-3">
-                            <label for="message" class="form-label">Message</label>
+                            <label for="message" class="form-label text-purple-600">Message</label>
-                            <textarea class="form-control" id="message" rows="4" placeholder="Your message"></textarea>
+                            <textarea class="form-control focus:ring-2 focus:ring-purple-500 transition-all duration-300" id="message" rows="4" placeholder="Your message"></textarea>
                         </div>
-                        <button type="submit" class="btn btn-primary">Send Message</button>
+                        <button type="submit" class="btn btn-primary bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-700 hover:to-pink-700 hover:scale-110 transition-transform duration-300 shadow-lg hover:shadow-xl">Send Message</button>
                     </form>
                 </div>
             </div>
@@ -154,16 +179,16 @@
     </section>
 
     <!-- Footer -->
-    <footer class="bg-dark text-white py-4">
+    <footer class="bg-gradient-to-r from-purple-600 to-indigo-600 text-white py-4 relative">
         <div class="container">
             <div class="row">
                 <div class="col-md-6">
-                    <p>&copy; 2024 Your Brand. All rights reserved.</p>
+                    <p class="hover:text-pink-300 transition-colors duration-300">&copy; 2024 Your Brand. All rights reserved.</p>
                 </div>
                 <div class="col-md-6 text-end">
-                    <a href="#" class="text-white me-3">Privacy Policy</a>
+                    <a href="#" class="text-white me-3 hover:text-pink-300 transition-colors duration-300">Privacy Policy</a>
-                    <a href="#" class="text-white me-3">Terms of Service</a>
+                    <a href="#" class="text-white me-3 hover:text-pink-300 transition-colors duration-300">Terms of Service</a>
-                    <a href="#" class="text-white">Contact</a>
+                    <a href="#" class="text-white hover:text-pink-300 transition-colors duration-300">Contact</a>
                 </div>
             </div>
         </div>