| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Helena Beauty World Clothing World</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
| <style> |
| @import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@700&family=Poppins:wght@400;600;700&display=swap'); |
| |
| .logo-text { |
| font-family: 'Dancing Script', cursive; |
| text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); |
| } |
| |
| .gradient-text { |
| background: linear-gradient(45deg, #FF6B6B, #4ECDC4, #FF8E53); |
| -webkit-background-clip: text; |
| background-clip: text; |
| color: transparent; |
| } |
| |
| .logo-container { |
| perspective: 1000px; |
| } |
| |
| .logo-inner { |
| transition: transform 0.5s; |
| transform-style: preserve-3d; |
| } |
| |
| .logo-container:hover .logo-inner { |
| transform: rotateY(20deg); |
| } |
| |
| .image-circle { |
| transition: all 0.3s ease; |
| box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); |
| } |
| |
| .image-circle:hover { |
| transform: scale(1.1) rotate(5deg); |
| box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3); |
| } |
| |
| @keyframes float { |
| 0% { transform: translateY(0px); } |
| 50% { transform: translateY(-10px); } |
| 100% { transform: translateY(0px); } |
| } |
| |
| .floating { |
| animation: float 3s ease-in-out infinite; |
| } |
| </style> |
| </head> |
| <body class="bg-gradient-to-br from-pink-50 to-purple-50 min-h-screen flex items-center justify-center p-4"> |
| <div class="max-w-4xl w-full"> |
| |
| <div class="logo-container mb-12"> |
| <div class="logo-inner bg-white rounded-2xl shadow-2xl overflow-hidden p-8 md:p-12"> |
| |
| <div class="text-center mb-8"> |
| <h1 class="logo-text text-4xl md:text-6xl font-bold gradient-text mb-2"> |
| Helena Beauty World |
| </h1> |
| <h2 class="logo-text text-2xl md:text-4xl font-bold text-purple-600"> |
| Clothing World |
| </h2> |
| </div> |
| |
| |
| <div class="flex justify-center mb-8"> |
| <div class="flex flex-wrap justify-center gap-4 md:gap-8"> |
| |
| <div class="image-circle bg-pink-100 rounded-full p-4 w-20 h-20 md:w-24 md:h-24 flex items-center justify-center floating" style="animation-delay: 0.2s;"> |
| <i class="fas fa-birthday-cake text-3xl md:text-4xl text-pink-600"></i> |
| </div> |
| |
| |
| <div class="image-circle bg-purple-100 rounded-full p-4 w-20 h-20 md:w-24 md:h-24 flex items-center justify-center floating" style="animation-delay: 0.4s;"> |
| <i class="fas fa-tshirt text-3xl md:text-4xl text-purple-600"></i> |
| </div> |
| |
| |
| <div class="image-circle bg-blue-100 rounded-full p-4 w-20 h-20 md:w-24 md:h-24 flex items-center justify-center floating" style="animation-delay: 0.6s;"> |
| <i class="fas fa-cut text-3xl md:text-4xl text-blue-600"></i> |
| </div> |
| |
| |
| <div class="image-circle bg-yellow-100 rounded-full p-4 w-20 h-20 md:w-24 md:h-24 flex items-center justify-center floating" style="animation-delay: 0.8s;"> |
| <i class="fas fa-paint-brush text-3xl md:text-4xl text-yellow-600"></i> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-4"> |
| |
| <div class="image-circle overflow-hidden rounded-full border-4 border-pink-200"> |
| <img src="https://images.unsplash.com/photo-1578985545062-69928b1d9587?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80" |
| alt="Beautiful Cake" |
| class="w-full h-full object-cover"> |
| </div> |
| |
| |
| <div class="image-circle overflow-hidden rounded-full border-4 border-purple-200"> |
| <img src="https://images.unsplash.com/photo-1519671482749-fd09be7ccebf?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80" |
| alt="Event Decoration" |
| class="w-full h-full object-cover"> |
| </div> |
| |
| |
| <div class="image-circle overflow-hidden rounded-full border-4 border-blue-200"> |
| <img src="https://images.unsplash.com/photo-1595476108010-b4d1f102b1b1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80" |
| alt="Hair Styling" |
| class="w-full h-full object-cover"> |
| </div> |
| |
| |
| <div class="image-circle overflow-hidden rounded-full border-4 border-yellow-200"> |
| <img src="https://images.unsplash.com/photo-1489987707025-afc232f7ea0f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80" |
| alt="Fashion Clothing" |
| class="w-full h-full object-cover"> |
| </div> |
| </div> |
| |
| |
| <div class="mt-8 text-center"> |
| <p class="text-gray-600 italic font-medium"> |
| <i class="fas fa-star text-yellow-400"></i> Beauty • Fashion • Celebration • Style <i class="fas fa-star text-yellow-400"></i> |
| </p> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="flex justify-center gap-2 mb-8"> |
| <div class="w-8 h-8 rounded-full bg-pink-500"></div> |
| <div class="w-8 h-8 rounded-full bg-purple-500"></div> |
| <div class="w-8 h-8 rounded-full bg-blue-500"></div> |
| <div class="w-8 h-8 rounded-full bg-yellow-400"></div> |
| <div class="w-8 h-8 rounded-full bg-gradient-to-r from-pink-500 to-purple-500"></div> |
| </div> |
| |
| |
| <div class="text-center"> |
| <button class="bg-gradient-to-r from-pink-500 to-purple-600 text-white px-6 py-3 rounded-full font-semibold shadow-lg hover:shadow-xl transition-all hover:scale-105"> |
| <i class="fas fa-download mr-2"></i> Download Logo |
| </button> |
| </div> |
| </div> |
| |
| <script> |
| |
| document.addEventListener('DOMContentLoaded', function() { |
| const circles = document.querySelectorAll('.image-circle'); |
| |
| circles.forEach(circle => { |
| circle.addEventListener('mouseenter', function() { |
| this.style.transform = 'scale(1.1) rotate(5deg)'; |
| }); |
| |
| circle.addEventListener('mouseleave', function() { |
| this.style.transform = 'scale(1)'; |
| }); |
| }); |
| |
| |
| const downloadBtn = document.querySelector('button'); |
| downloadBtn.addEventListener('click', function() { |
| alert('Logo download would start here in a real implementation!'); |
| }); |
| }); |
| </script> |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Jae0009/my-work" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
