panderso commited on
Commit
e78e02a
·
verified ·
1 Parent(s): 13054fe

Change landscapes on the menu to Gallery and eliminate figurative - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +234 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Side Bush
3
- emoji: 🏃
4
- colorFrom: green
5
- colorTo: purple
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: side-bush
3
+ emoji: 🐳
4
+ colorFrom: purple
5
+ colorTo: pink
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,234 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>HOME | Side Bush Art</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Raleway:wght@300;400;600&display=swap');
11
+
12
+ body {
13
+ font-family: 'Raleway', sans-serif;
14
+ scroll-behavior: smooth;
15
+ }
16
+
17
+ .title-font {
18
+ font-family: 'Playfair Display', serif;
19
+ }
20
+
21
+ .hero-image {
22
+ 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');
23
+ background-size: cover;
24
+ background-position: center;
25
+ }
26
+
27
+ .nav-link:hover {
28
+ color: #d1a570;
29
+ }
30
+
31
+ .gallery-btn {
32
+ transition: all 0.3s ease;
33
+ }
34
+
35
+ .gallery-btn:hover {
36
+ transform: translateY(-3px);
37
+ box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
38
+ }
39
+
40
+ .mobile-menu {
41
+ transition: all 0.3s ease;
42
+ }
43
+ </style>
44
+ </head>
45
+ <body class="bg-gray-50 text-gray-800">
46
+ <!-- Top Navigation -->
47
+ <div class="bg-white shadow-md">
48
+ <div class="container mx-auto px-4 py-3 flex justify-between items-center">
49
+ <div class="flex items-center space-x-4">
50
+ <a href="#" class="text-xl font-bold text-gray-800 hover:text-amber-700 transition">SB</a>
51
+ <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"
52
+ alt="Side Bush Art Logo"
53
+ class="h-12 w-auto">
54
+ </div>
55
+
56
+ <!-- Desktop Navigation -->
57
+ <nav class="hidden md:flex space-x-6">
58
+ <a href="#" class="nav-link font-medium">HOME</a>
59
+ <a href="#" class="nav-link font-medium">ABOUT</a>
60
+ <a href="#" class="nav-link font-medium">GALLERY</a>
61
+ <a href="#" class="nav-link font-medium">SHOP</a>
62
+ <a href="#" class="nav-link font-medium">COURSES</a>
63
+ <a href="#" class="nav-link font-medium">CONTACT</a>
64
+ <div class="relative group">
65
+ <button class="nav-link font-medium flex items-center">
66
+ More <i class="fas fa-chevron-down ml-1 text-xs"></i>
67
+ </button>
68
+ <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">
69
+ <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Shipping & Returns</a>
70
+ <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Terms & Conditions</a>
71
+ <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">FAQ</a>
72
+ </div>
73
+ </div>
74
+ </nav>
75
+
76
+ <!-- Social Icons -->
77
+ <div class="hidden md:flex space-x-4">
78
+ <a href="#" class="text-gray-600 hover:text-blue-600"><i class="fab fa-facebook-f"></i></a>
79
+ <a href="#" class="text-gray-600 hover:text-blue-400"><i class="fab fa-twitter"></i></a>
80
+ <a href="#" class="text-gray-600 hover:text-pink-600"><i class="fab fa-flickr"></i></a>
81
+ </div>
82
+
83
+ <!-- Mobile Menu Button -->
84
+ <button id="mobile-menu-button" class="md:hidden text-gray-600 focus:outline-none">
85
+ <i class="fas fa-bars text-2xl"></i>
86
+ </button>
87
+ </div>
88
+
89
+ <!-- Mobile Navigation -->
90
+ <div id="mobile-menu" class="mobile-menu hidden md:hidden bg-white py-2 px-4 shadow-lg">
91
+ <a href="#" class="block py-2 font-medium">HOME</a>
92
+ <a href="#" class="block py-2 font-medium">ABOUT</a>
93
+ <a href="#" class="block py-2 font-medium">GALLERY</a>
94
+ <a href="#" class="block py-2 font-medium">SHOP</a>
95
+ <a href="#" class="block py-2 font-medium">COURSES</a>
96
+ <a href="#" class="block py-2 font-medium">CONTACT</a>
97
+ <div class="pt-2">
98
+ <div class="flex space-x-4">
99
+ <a href="#" class="text-gray-600 hover:text-blue-600"><i class="fab fa-facebook-f"></i></a>
100
+ <a href="#" class="text-gray-600 hover:text-blue-400"><i class="fab fa-twitter"></i></a>
101
+ <a href="#" class="text-gray-600 hover:text-pink-600"><i class="fab fa-flickr"></i></a>
102
+ </div>
103
+ </div>
104
+ </div>
105
+ </div>
106
+
107
+ <!-- Hero Section -->
108
+ <div class="hero-image min-h-screen flex items-center justify-center bg-gray-900 bg-opacity-50">
109
+ <div class="container mx-auto px-4 py-20 text-center text-white">
110
+ <div class="max-w-3xl mx-auto">
111
+ <h1 class="title-font text-4xl md:text-6xl font-bold mb-6">WELCOME TO</h1>
112
+ <h2 class="title-font text-5xl md:text-7xl font-bold mb-8">SIDE BUSH ART</h2>
113
+ <div class="h-1 bg-amber-500 w-24 mx-auto mb-8"></div>
114
+ <p class="text-lg md:text-xl mb-10 leading-relaxed">
115
+ Discover and curate the surreal, romantic, and geometric fine art of Peter Anderson.
116
+ Engage with a collection of expressive and imaginative works that expand the boundaries of reality.
117
+ </p>
118
+ <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">
119
+ ENTER GALLERY
120
+ </a>
121
+ </div>
122
+ </div>
123
+ </div>
124
+
125
+ <!-- Featured Image -->
126
+ <div class="container mx-auto px-4 py-16">
127
+ <div class="flex flex-col md:flex-row items-center">
128
+ <div class="md:w-1/2 mb-8 md:mb-0 md:pr-8">
129
+ <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"
130
+ alt="Featured Artwork"
131
+ class="rounded-lg shadow-xl w-full h-auto">
132
+ </div>
133
+ <div class="md:w-1/2">
134
+ <h3 class="title-font text-3xl font-bold mb-4">Meet the Creative Minds Behind</h3>
135
+ <p class="text-gray-700 mb-6 leading-relaxed">
136
+ Our artists bring a unique perspective to contemporary art, blending traditional techniques with modern expressions.
137
+ Each piece tells a story and invites you to explore new dimensions of artistic interpretation.
138
+ </p>
139
+ <div class="flex space-x-4">
140
+ <a href="#" class="text-gray-600 hover:text-blue-600"><i class="fab fa-facebook-f text-2xl"></i></a>
141
+ <a href="#" class="text-gray-600 hover:text-blue-400"><i class="fab fa-twitter text-2xl"></i></a>
142
+ <a href="#" class="text-gray-600 hover:text-pink-600"><i class="fab fa-flickr text-2xl"></i></a>
143
+ </div>
144
+ </div>
145
+ </div>
146
+ </div>
147
+
148
+ <!-- Footer -->
149
+ <footer class="bg-gray-900 text-gray-300 py-12">
150
+ <div class="container mx-auto px-4">
151
+ <div class="flex flex-col md:flex-row justify-between">
152
+ <div class="mb-8 md:mb-0">
153
+ <div class="flex items-center mb-4">
154
+ <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"
155
+ alt="Side Bush Art Logo"
156
+ class="h-16 w-auto mr-4">
157
+ <span class="title-font text-2xl font-bold">SIDE BUSH ART</span>
158
+ </div>
159
+ <p class="max-w-xs">
160
+ Expanding the boundaries of reality through surreal, romantic, and geometric fine art.
161
+ </p>
162
+ </div>
163
+
164
+ <div class="grid grid-cols-2 md:grid-cols-3 gap-8">
165
+ <div>
166
+ <h4 class="title-font text-lg font-bold mb-4 text-white">Quick Links</h4>
167
+ <ul class="space-y-2">
168
+ <li><a href="#" class="hover:text-amber-400 transition">Home</a></li>
169
+ <li><a href="#" class="hover:text-amber-400 transition">About</a></li>
170
+ <li><a href="#" class="hover:text-amber-400 transition">Gallery</a></li>
171
+ <li><a href="#" class="hover:text-amber-400 transition">Courses</a></li>
172
+ </ul>
173
+ </div>
174
+
175
+ <div>
176
+ <h4 class="title-font text-lg font-bold mb-4 text-white">Information</h4>
177
+ <ul class="space-y-2">
178
+ <li><a href="#" class="hover:text-amber-400 transition">Shipping & Returns</a></li>
179
+ <li><a href="#" class="hover:text-amber-400 transition">Terms & Conditions</a></li>
180
+ <li><a href="#" class="hover:text-amber-400 transition">FAQ</a></li>
181
+ <li><a href="#" class="hover:text-amber-400 transition">Contact</a></li>
182
+ </ul>
183
+ </div>
184
+
185
+ <div>
186
+ <h4 class="title-font text-lg font-bold mb-4 text-white">Connect</h4>
187
+ <div class="flex space-x-4 mb-4">
188
+ <a href="#" class="hover:text-blue-400 transition"><i class="fab fa-facebook-f text-xl"></i></a>
189
+ <a href="#" class="hover:text-blue-500 transition"><i class="fab fa-twitter text-xl"></i></a>
190
+ <a href="#" class="hover:text-pink-500 transition"><i class="fab fa-flickr text-xl"></i></a>
191
+ </div>
192
+ <p>Subscribe to our newsletter for updates</p>
193
+ <div class="mt-2 flex">
194
+ <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">
195
+ <button class="bg-amber-600 hover:bg-amber-700 px-4 py-2 rounded-r">
196
+ <i class="fas fa-paper-plane"></i>
197
+ </button>
198
+ </div>
199
+ </div>
200
+ </div>
201
+ </div>
202
+
203
+ <div class="border-t border-gray-800 mt-8 pt-8 text-center">
204
+ <p>&copy; 2023 Side Bush Art. All rights reserved.</p>
205
+ </div>
206
+ </div>
207
+ </footer>
208
+
209
+ <script>
210
+ // Mobile menu toggle
211
+ document.getElementById('mobile-menu-button').addEventListener('click', function() {
212
+ const menu = document.getElementById('mobile-menu');
213
+ menu.classList.toggle('hidden');
214
+ });
215
+
216
+ // Smooth scrolling for anchor links
217
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
218
+ anchor.addEventListener('click', function (e) {
219
+ e.preventDefault();
220
+
221
+ const targetId = this.getAttribute('href');
222
+ if (targetId === '#') return;
223
+
224
+ const targetElement = document.querySelector(targetId);
225
+ if (targetElement) {
226
+ targetElement.scrollIntoView({
227
+ behavior: 'smooth'
228
+ });
229
+ }
230
+ });
231
+ });
232
+ </script>
233
+ <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>
234
+ </html>