index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Website Template</title>
    <!-- Favicon -->
    <link rel="icon" type="image/svg+xml" href="assets/favicon.svg">
    <!-- Bootstrap CSS -->
    <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>
    <!-- Custom CSS -->
    <link rel="stylesheet" href="css/styles.css">
    <!-- Custom JS -->
    <script src="js/tailwind.config.js"></script>
</head>
<body class="bg-gradient-to-br from-gray-100 to-blue-50">
    <!-- Navigation -->
    <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 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 hover:text-pink-300 transition-colors duration-300" href="#home">Home</a>
                    </li>
                    <li class="nav-item">
                        <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 hover:text-pink-300 transition-colors duration-300" href="#services">Services</a>
                    </li>
                    <li class="nav-item">
                        <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 hover:text-pink-300 transition-colors duration-300" href="#contact">Contact</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <!-- Hero Section -->
    <section id="home" class="py-5 min-h-screen flex items-center relative overflow-hidden">
        <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-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-700 mb-8 text-xl animate-pulse-slow">A clean, modern template for your next project</p>
                    <div class="space-x-4">
                        <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-gradient-to-br from-white to-blue-50 relative">
        <div class="container">
            <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 transform hover:scale-105 transition-all duration-300">
                    <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 transform hover:scale-105 transition-all duration-300">
                    <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 relative bg-gradient-to-br from-blue-50 to-purple-50">
        <div class="container">
            <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-6 transform hover:scale-105 transition-all duration-300 hover:shadow-xl border-t-4 border-purple-500">
                        <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-6 transform hover:scale-105 transition-all duration-300 hover:shadow-xl border-t-4 border-pink-500">
                        <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-6 transform hover:scale-105 transition-all duration-300 hover:shadow-xl border-t-4 border-indigo-500">
                        <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>
            </div>
        </div>
    </section>

    <!-- Portfolio Section -->
    <section id="portfolio" class="py-5 bg-gradient-to-br from-purple-50 to-pink-50 relative">
        <div class="container">
            <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-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-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 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-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-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 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-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-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 text-pink-600">Project 3</h3>
                        <p class="text-gray-600">Brief description of your third project.</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Contact Section -->
    <section id="contact" class="py-5 relative bg-gradient-to-br from-blue-50 to-indigo-50">
        <div class="container">
            <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 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 text-purple-600">Name</label>
                            <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 text-purple-600">Email</label>
                            <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 text-purple-600">Message</label>
                            <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 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>
        </div>
    </section>

    <!-- Footer -->
    <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 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 hover:text-pink-300 transition-colors duration-300">Privacy Policy</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 hover:text-pink-300 transition-colors duration-300">Contact</a>
                </div>
            </div>
        </div>
    </footer>

    <!-- Bootstrap JS Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
    <!-- Custom JavaScript -->
    <script src="js/script.js"></script>
</body>
</html>