mirror of
https://github.com/Alvin-Zilverstand/challenge-11.git
synced 2026-03-06 13:21:54 +01:00
185 lines
12 KiB
HTML
185 lines
12 KiB
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>
|
|
<!-- 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">© 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> |