|
|
<!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> |
