| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>HOME | Side Bush Art</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=Playfair+Display:wght@400;700&family=Raleway:wght@300;400;600&display=swap'); |
| |
| body { |
| font-family: 'Raleway', sans-serif; |
| scroll-behavior: smooth; |
| } |
| |
| .title-font { |
| font-family: 'Playfair Display', serif; |
| } |
| |
| .hero-image { |
| background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url('https://static.wixstatic.com/media/b34cec_5b3ad5345cbb42eea8de835a50581dd3~mv2.jpg/v1/fill/w_649,h_543,al_c,q_80,enc_avif,quality_auto/b34cec_5b3ad5345cbb42eea8de835a50581dd3~mv2.jpg'); |
| background-size: cover; |
| background-position: center; |
| } |
| |
| .nav-link:hover { |
| color: #d1a570; |
| } |
| |
| .gallery-btn { |
| transition: all 0.3s ease; |
| } |
| |
| .gallery-btn:hover { |
| transform: translateY(-3px); |
| box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); |
| } |
| |
| .mobile-menu { |
| transition: all 0.3s ease; |
| } |
| </style> |
| </head> |
| <body class="bg-gray-50 text-gray-800"> |
| |
| <div class="bg-white shadow-md"> |
| <div class="container mx-auto px-4 py-3 flex justify-between items-center"> |
| <div class="flex items-center space-x-4"> |
| <a href="#" class="text-xl font-bold text-gray-800 hover:text-amber-700 transition">SB</a> |
| <img src="https://static.wixstatic.com/media/b34cec_194297ce9d864ae2b59bcf1717c09955~mv2.jpg/v1/fill/w_89,h_90,al_c,q_80,usm_0.66_1.00_0.01,enc_avif,quality_auto/SIDEBUSH_ART_LOGO_edited.jpg" |
| alt="Side Bush Art Logo" |
| class="h-12 w-auto"> |
| </div> |
| |
| |
| <nav class="hidden md:flex space-x-6"> |
| <a href="#" class="nav-link font-medium">HOME</a> |
| <a href="#" class="nav-link font-medium">ABOUT</a> |
| <a href="#" class="nav-link font-medium">GALLERY</a> |
| <a href="#" class="nav-link font-medium">SHOP</a> |
| <a href="#" class="nav-link font-medium">COURSES</a> |
| <a href="#" class="nav-link font-medium">CONTACT</a> |
| <div class="relative group"> |
| <button class="nav-link font-medium flex items-center"> |
| More <i class="fas fa-chevron-down ml-1 text-xs"></i> |
| </button> |
| <div class="absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg py-1 z-10 opacity-0 group-hover:opacity-100 transition-all duration-300 invisible group-hover:visible"> |
| <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Shipping & Returns</a> |
| <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Terms & Conditions</a> |
| <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">FAQ</a> |
| </div> |
| </div> |
| </nav> |
| |
| |
| <div class="hidden md:flex space-x-4"> |
| <a href="#" class="text-gray-600 hover:text-blue-600"><i class="fab fa-facebook-f"></i></a> |
| <a href="#" class="text-gray-600 hover:text-blue-400"><i class="fab fa-twitter"></i></a> |
| <a href="#" class="text-gray-600 hover:text-pink-600"><i class="fab fa-flickr"></i></a> |
| </div> |
| |
| |
| <button id="mobile-menu-button" class="md:hidden text-gray-600 focus:outline-none"> |
| <i class="fas fa-bars text-2xl"></i> |
| </button> |
| </div> |
| |
| |
| <div id="mobile-menu" class="mobile-menu hidden md:hidden bg-white py-2 px-4 shadow-lg"> |
| <a href="#" class="block py-2 font-medium">HOME</a> |
| <a href="#" class="block py-2 font-medium">ABOUT</a> |
| <a href="#" class="block py-2 font-medium">GALLERY</a> |
| <a href="#" class="block py-2 font-medium">SHOP</a> |
| <a href="#" class="block py-2 font-medium">COURSES</a> |
| <a href="#" class="block py-2 font-medium">CONTACT</a> |
| <div class="pt-2"> |
| <div class="flex space-x-4"> |
| <a href="#" class="text-gray-600 hover:text-blue-600"><i class="fab fa-facebook-f"></i></a> |
| <a href="#" class="text-gray-600 hover:text-blue-400"><i class="fab fa-twitter"></i></a> |
| <a href="#" class="text-gray-600 hover:text-pink-600"><i class="fab fa-flickr"></i></a> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="hero-image min-h-screen flex items-center justify-center bg-gray-900 bg-opacity-50"> |
| <div class="container mx-auto px-4 py-20 text-center text-white"> |
| <div class="max-w-3xl mx-auto"> |
| <h1 class="title-font text-4xl md:text-6xl font-bold mb-6">WELCOME TO</h1> |
| <h2 class="title-font text-5xl md:text-7xl font-bold mb-8">SIDE BUSH ART</h2> |
| <div class="h-1 bg-amber-500 w-24 mx-auto mb-8"></div> |
| <p class="text-lg md:text-xl mb-10 leading-relaxed"> |
| Discover and curate the surreal, romantic, and geometric fine art of Peter Anderson. |
| Engage with a collection of expressive and imaginative works that expand the boundaries of reality. |
| </p> |
| <a href="#" class="gallery-btn inline-block bg-amber-600 hover:bg-amber-700 text-white font-bold py-3 px-8 rounded-full text-lg"> |
| ENTER GALLERY |
| </a> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="container mx-auto px-4 py-16"> |
| <div class="flex flex-col md:flex-row items-center"> |
| <div class="md:w-1/2 mb-8 md:mb-0 md:pr-8"> |
| <img src="https://static.wixstatic.com/media/b34cec_7abd3431986747c9ba62daff6b6cf058~mv2.png/v1/fill/w_1024,h_1024,al_c,q_90,usm_0.66_1.00_0.01,enc_avif,quality_auto/b34cec_7abd3431986747c9ba62daff6b6cf058~mv2.png" |
| alt="Featured Artwork" |
| class="rounded-lg shadow-xl w-full h-auto"> |
| </div> |
| <div class="md:w-1/2"> |
| <h3 class="title-font text-3xl font-bold mb-4">Meet the Creative Minds Behind</h3> |
| <p class="text-gray-700 mb-6 leading-relaxed"> |
| Our artists bring a unique perspective to contemporary art, blending traditional techniques with modern expressions. |
| Each piece tells a story and invites you to explore new dimensions of artistic interpretation. |
| </p> |
| <div class="flex space-x-4"> |
| <a href="#" class="text-gray-600 hover:text-blue-600"><i class="fab fa-facebook-f text-2xl"></i></a> |
| <a href="#" class="text-gray-600 hover:text-blue-400"><i class="fab fa-twitter text-2xl"></i></a> |
| <a href="#" class="text-gray-600 hover:text-pink-600"><i class="fab fa-flickr text-2xl"></i></a> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| |
| <footer class="bg-gray-900 text-gray-300 py-12"> |
| <div class="container mx-auto px-4"> |
| <div class="flex flex-col md:flex-row justify-between"> |
| <div class="mb-8 md:mb-0"> |
| <div class="flex items-center mb-4"> |
| <img src="https://static.wixstatic.com/media/b34cec_194297ce9d864ae2b59bcf1717c09955~mv2.jpg/v1/fill/w_89,h_90,al_c,q_80,usm_0.66_1.00_0.01,enc_avif,quality_auto/SIDEBUSH_ART_LOGO_edited.jpg" |
| alt="Side Bush Art Logo" |
| class="h-16 w-auto mr-4"> |
| <span class="title-font text-2xl font-bold">SIDE BUSH ART</span> |
| </div> |
| <p class="max-w-xs"> |
| Expanding the boundaries of reality through surreal, romantic, and geometric fine art. |
| </p> |
| </div> |
| |
| <div class="grid grid-cols-2 md:grid-cols-3 gap-8"> |
| <div> |
| <h4 class="title-font text-lg font-bold mb-4 text-white">Quick Links</h4> |
| <ul class="space-y-2"> |
| <li><a href="#" class="hover:text-amber-400 transition">Home</a></li> |
| <li><a href="#" class="hover:text-amber-400 transition">About</a></li> |
| <li><a href="#" class="hover:text-amber-400 transition">Gallery</a></li> |
| <li><a href="#" class="hover:text-amber-400 transition">Courses</a></li> |
| </ul> |
| </div> |
| |
| <div> |
| <h4 class="title-font text-lg font-bold mb-4 text-white">Information</h4> |
| <ul class="space-y-2"> |
| <li><a href="#" class="hover:text-amber-400 transition">Shipping & Returns</a></li> |
| <li><a href="#" class="hover:text-amber-400 transition">Terms & Conditions</a></li> |
| <li><a href="#" class="hover:text-amber-400 transition">FAQ</a></li> |
| <li><a href="#" class="hover:text-amber-400 transition">Contact</a></li> |
| </ul> |
| </div> |
| |
| <div> |
| <h4 class="title-font text-lg font-bold mb-4 text-white">Connect</h4> |
| <div class="flex space-x-4 mb-4"> |
| <a href="#" class="hover:text-blue-400 transition"><i class="fab fa-facebook-f text-xl"></i></a> |
| <a href="#" class="hover:text-blue-500 transition"><i class="fab fa-twitter text-xl"></i></a> |
| <a href="#" class="hover:text-pink-500 transition"><i class="fab fa-flickr text-xl"></i></a> |
| </div> |
| <p>Subscribe to our newsletter for updates</p> |
| <div class="mt-2 flex"> |
| <input type="email" placeholder="Your email" class="px-4 py-2 rounded-l bg-gray-800 text-white focus:outline-none focus:ring-2 focus:ring-amber-500 w-full"> |
| <button class="bg-amber-600 hover:bg-amber-700 px-4 py-2 rounded-r"> |
| <i class="fas fa-paper-plane"></i> |
| </button> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <div class="border-t border-gray-800 mt-8 pt-8 text-center"> |
| <p>© 2023 Side Bush Art. All rights reserved.</p> |
| </div> |
| </div> |
| </footer> |
| |
| <script> |
| |
| document.getElementById('mobile-menu-button').addEventListener('click', function() { |
| const menu = document.getElementById('mobile-menu'); |
| menu.classList.toggle('hidden'); |
| }); |
| |
| |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { |
| anchor.addEventListener('click', function (e) { |
| e.preventDefault(); |
| |
| const targetId = this.getAttribute('href'); |
| if (targetId === '#') return; |
| |
| const targetElement = document.querySelector(targetId); |
| if (targetElement) { |
| targetElement.scrollIntoView({ |
| behavior: 'smooth' |
| }); |
| } |
| }); |
| }); |
| </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=panderso/side-bush" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
