Spaces:

AnderSmithMusic
/

andersmithmusic

Running

App Files Files Community

AnderSmithMusic commited on May 7

Commit

570f919

verified ·

1 Parent(s): 2626066

Add 2 files

Browse files

Files changed (2) hide show

index.html +22 -22
prompts.txt +3 -1

index.html CHANGED Viewed

@@ -3,7 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Indie Rock Musician from Fort Collins</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">
     <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700&family=Montserrat:wght@300;400;500&display=swap" rel="stylesheet">
@@ -108,7 +108,7 @@
     <!-- Navigation -->
     <nav class="vintage-bg p-4 sticky top-0 z-50 border-b border-d4c9b1">
         <div class="container mx-auto flex justify-between items-center">
-            <a href="#" class="title-font text-2xl md:text-3xl text-gray-800">INDIE ROCKER</a>
             <div class="hidden md:flex space-x-6">
                 <a href="#music" class="hover:text-c7a97f transition">Music</a>
                 <a href="#about" class="hover:text-c7a97f transition">About</a>
@@ -121,16 +121,16 @@
         </div>
     </nav>
-    <!-- Hero Section -->
     <section class="relative h-screen flex items-center justify-center overflow-hidden bg-gray-100">
         <div class="sepia-overlay"></div>
-        <div class="absolute inset-0 bg-[url('https://images.unsplash.com/photo-1514525253161-7a46d19cd819?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80')] bg-cover bg-center opacity-30"></div>
         <div class="container mx-auto px-4 z-10 text-center">
-            <h1 class="title-font text-5xl md:text-7xl mb-6 text-gray-800">INDIE ROCK <span class="text-c7a97f">PSYCHEDELIA</span></h1>
-            <p class="text-xl md:text-2xl mb-8 max-w-2xl mx-auto text-gray-700">14-year-old musician from Fort Collins blending indie rock with psychedelic vibes</p>
             <div class="flex justify-center space-x-4">
                 <a href="#music" class="px-8 py-3 vintage-button font-bold rounded-full">Listen Now</a>
-                <a href="#album" class="px-8 py-3 vintage-outline-button font-bold rounded-full">New Album</a>
             </div>
         </div>
     </section>
@@ -145,7 +145,7 @@
                 <div class="music-player p-6 rounded-xl">
                     <div class="flex items-center mb-4">
                         <div class="w-16 h-16 rounded-full overflow-hidden vinyl mr-4">
-                            <img src="https://images.unsplash.com/photo-1514525253161-7a46d19cd819?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Album cover" class="w-full h-full object-cover">
                         </div>
                         <div>
                             <h3 class="font-bold text-xl">Cosmic Journey</h3>
@@ -162,7 +162,7 @@
                 <div class="music-player p-6 rounded-xl">
                     <div class="flex items-center mb-4">
                         <div class="w-16 h-16 rounded-full overflow-hidden vinyl mr-4">
-                            <img src="https://images.unsplash.com/photo-1514525253161-7a46d19cd819?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Album cover" class="w-full h-full object-cover">
                         </div>
                         <div>
                             <h3 class="font-bold text-xl">Mountain Echo</h3>
@@ -179,7 +179,7 @@
                 <div class="music-player p-6 rounded-xl">
                     <div class="flex items-center mb-4">
                         <div class="w-16 h-16 rounded-full overflow-hidden vinyl mr-4">
-                            <img src="https://images.unsplash.com/photo-1514525253161-7a46d19cd819?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Album cover" class="w-full h-full object-cover">
                         </div>
                         <div>
                             <h3 class="font-bold text-xl">Teenage Dreams</h3>
@@ -208,9 +208,9 @@
                 </div>
                 <div class="md:w-1/2">
                     <h2 class="title-font text-4xl md:text-5xl mb-6 text-gray-800">ABOUT ME</h2>
-                    <p class="mb-4 text-gray-700">Hey! I'm a 14-year-old musician from Fort Collins, Colorado, creating indie rock with a psychedelic twist. I started playing guitar when I was 9 and haven't stopped making music since.</p>
-                    <p class="mb-4 text-gray-700">My sound blends raw teenage energy with dreamy, expansive soundscapes inspired by the Colorado mountains and beyond.</p>
-                    <p class="mb-6 text-gray-700">When I'm not writing songs or practicing, you can find me hiking in the Rockies or browsing record stores for vintage vinyl.</p>
                     <div class="flex space-x-4">
                         <a href="#" class="w-10 h-10 rounded-full bg-gray-800 text-white flex items-center justify-center hover:bg-c7a97f transition">
                             <i class="fab fa-instagram"></i>
@@ -231,7 +231,7 @@
     <section id="album" class="py-20 bg-[#f8f4e9] border-t border-b border-[#d4c9b1]">
         <div class="container mx-auto px-4 text-center">
             <h2 class="title-font text-4xl md:text-5xl mb-6 text-gray-800">COMING SOON</h2>
-            <p class="text-xl md:text-2xl mb-8 max-w-2xl mx-auto text-gray-700">My debut psychedelic album "COLORADO DREAMS" drops this summer!</p>
             <div class="max-w-md mx-auto mb-12">
                 <img src="https://images.unsplash.com/photo-1511671782779-c97d3d27a1d4?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80" alt="Album cover" class="w-full rounded-xl album-cover mx-auto">
@@ -240,18 +240,18 @@
             <div class="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-4xl mx-auto mb-12">
                 <div class="vintage-card p-6 rounded-xl">
                     <i class="fas fa-compact-disc text-4xl mb-4 text-c7a97f"></i>
-                    <h3 class="font-bold text-xl mb-2">12 Tracks</h3>
-                    <p class="text-gray-600">Original songs blending indie rock with psychedelic influences</p>
                 </div>
                 <div class="vintage-card p-6 rounded-xl">
                     <i class="fas fa-mountain text-4xl mb-4 text-c7a97f"></i>
-                    <h3 class="font-bold text-xl mb-2">Colorado Inspired</h3>
-                    <p class="text-gray-600">Musical landscapes inspired by the Rocky Mountains</p>
                 </div>
                 <div class="vintage-card p-6 rounded-xl">
                     <i class="fas fa-guitar text-4xl mb-4 text-c7a97f"></i>
                     <h3 class="font-bold text-xl mb-2">DIY Production</h3>
-                    <p class="text-gray-600">Recorded in my bedroom studio with authentic teenage energy</p>
                 </div>
             </div>
@@ -278,7 +278,7 @@
                     <div class="space-y-4">
                         <div class="flex items-center text-gray-700">
                             <i class="fas fa-envelope text-c7a97f mr-4 text-xl"></i>
-                            <span>music@indierocker.com</span>
                         </div>
                         <div class="flex items-center text-gray-700">
                             <i class="fas fa-map-marker-alt text-c7a97f mr-4 text-xl"></i>
@@ -334,8 +334,8 @@
     <!-- Footer -->
     <footer class="py-8 bg-gray-800 text-white">
         <div class="container mx-auto px-4 text-center">
-            <p class="mb-4">&copy; 2023 Indie Rocker. All rights reserved.</p>
-            <p class="text-sm text-gray-400">Made with music and code in Colorado</p>
         </div>
     </footer>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Ander Smith Music - Indie Rock from Fort Collins</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">
     <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700&family=Montserrat:wght@300;400;500&display=swap" rel="stylesheet">
     <!-- Navigation -->
     <nav class="vintage-bg p-4 sticky top-0 z-50 border-b border-d4c9b1">
         <div class="container mx-auto flex justify-between items-center">
+            <a href="#" class="title-font text-2xl md:text-3xl text-gray-800">AnderSmithMusic</a>
             <div class="hidden md:flex space-x-6">
                 <a href="#music" class="hover:text-c7a97f transition">Music</a>
                 <a href="#about" class="hover:text-c7a97f transition">About</a>
         </div>
     </nav>
+    <!-- Hero Section with Custom Background -->
     <section class="relative h-screen flex items-center justify-center overflow-hidden bg-gray-100">
         <div class="sepia-overlay"></div>
+        <div class="absolute inset-0 bg-[url('https://huggingface.co/datasets/huggingface/brand-assets/resolve/main/IMG_0776%20Edited.JPEG')] bg-cover bg-center opacity-90"></div>
         <div class="container mx-auto px-4 z-10 text-center">
+            <h1 class="title-font text-5xl md:text-7xl mb-6 text-white">Ander Smith Music</h1>
+            <p class="text-xl md:text-2xl mb-8 max-w-2xl mx-auto text-white">14 year old indie rock musician from Fort Collins, CO</p>
             <div class="flex justify-center space-x-4">
                 <a href="#music" class="px-8 py-3 vintage-button font-bold rounded-full">Listen Now</a>
+                <a href="#album" class="px-8 py-3 vintage-outline-button font-bold rounded-full text-white border-white hover:bg-white hover:text-gray-800">New Album</a>
             </div>
         </div>
     </section>
                 <div class="music-player p-6 rounded-xl">
                     <div class="flex items-center mb-4">
                         <div class="w-16 h-16 rounded-full overflow-hidden vinyl mr-4">
+                            <img src="https://images.unsplash.com/photo-1511671782779-c97d3d27a1d4?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80" alt="Album cover" class="w-full h-full object-cover">
                         </div>
                         <div>
                             <h3 class="font-bold text-xl">Cosmic Journey</h3>
                 <div class="music-player p-6 rounded-xl">
                     <div class="flex items-center mb-4">
                         <div class="w-16 h-16 rounded-full overflow-hidden vinyl mr-4">
+                            <img src="https://images.unsplash.com/photo-1511671782779-c97d3d27a1d4?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80" alt="Album cover" class="w-full h-full object-cover">
                         </div>
                         <div>
                             <h3 class="font-bold text-xl">Mountain Echo</h3>
                 <div class="music-player p-6 rounded-xl">
                     <div class="flex items-center mb-4">
                         <div class="w-16 h-16 rounded-full overflow-hidden vinyl mr-4">
+                            <img src="https://images.unsplash.com/photo-1511671782779-c97d3d27a1d4?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80" alt="Album cover" class="w-full h-full object-cover">
                         </div>
                         <div>
                             <h3 class="font-bold text-xl">Teenage Dreams</h3>
                 </div>
                 <div class="md:w-1/2">
                     <h2 class="title-font text-4xl md:text-5xl mb-6 text-gray-800">ABOUT ME</h2>
+                    <p class="mb-4 text-gray-700">Hey! I'm Ander Smith, a 14-year-old musician from Fort Collins, Colorado, creating indie rock with a raw, authentic sound. I started playing guitar when I was 9 and haven't stopped making music since.</p>
+                    <p class="mb-4 text-gray-700">My music blends teenage energy with the natural beauty of Colorado, creating songs that feel both personal and universal.</p>
+                    <p class="mb-6 text-gray-700">When I'm not writing songs or practicing, you can find me hiking in the Rockies or exploring Fort Collins' vibrant music scene.</p>
                     <div class="flex space-x-4">
                         <a href="#" class="w-10 h-10 rounded-full bg-gray-800 text-white flex items-center justify-center hover:bg-c7a97f transition">
                             <i class="fab fa-instagram"></i>
     <section id="album" class="py-20 bg-[#f8f4e9] border-t border-b border-[#d4c9b1]">
         <div class="container mx-auto px-4 text-center">
             <h2 class="title-font text-4xl md:text-5xl mb-6 text-gray-800">COMING SOON</h2>
+            <p class="text-xl md:text-2xl mb-8 max-w-2xl mx-auto text-gray-700">My debut indie rock album "FORT COLLINS NIGHTS" drops this summer!</p>
             <div class="max-w-md mx-auto mb-12">
                 <img src="https://images.unsplash.com/photo-1511671782779-c97d3d27a1d4?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80" alt="Album cover" class="w-full rounded-xl album-cover mx-auto">
             <div class="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-4xl mx-auto mb-12">
                 <div class="vintage-card p-6 rounded-xl">
                     <i class="fas fa-compact-disc text-4xl mb-4 text-c7a97f"></i>
+                    <h3 class="font-bold text-xl mb-2">10 Tracks</h3>
+                    <p class="text-gray-600">Original songs blending indie rock with Colorado vibes</p>
                 </div>
                 <div class="vintage-card p-6 rounded-xl">
                     <i class="fas fa-mountain text-4xl mb-4 text-c7a97f"></i>
+                    <h3 class="font-bold text-xl mb-2">Local Inspiration</h3>
+                    <p class="text-gray-600">Songs inspired by life in Northern Colorado</p>
                 </div>
                 <div class="vintage-card p-6 rounded-xl">
                     <i class="fas fa-guitar text-4xl mb-4 text-c7a97f"></i>
                     <h3 class="font-bold text-xl mb-2">DIY Production</h3>
+                    <p class="text-gray-600">Recorded in my home studio with authentic energy</p>
                 </div>
             </div>
                     <div class="space-y-4">
                         <div class="flex items-center text-gray-700">
                             <i class="fas fa-envelope text-c7a97f mr-4 text-xl"></i>
+                            <span>contact@andersmithmusic.com</span>
                         </div>
                         <div class="flex items-center text-gray-700">
                             <i class="fas fa-map-marker-alt text-c7a97f mr-4 text-xl"></i>
     <!-- Footer -->
     <footer class="py-8 bg-gray-800 text-white">
         <div class="container mx-auto px-4 text-center">
+            <p class="mb-4">&copy; 2023 Ander Smith Music. All rights reserved.</p>
+            <p class="text-sm text-gray-400">Made with music and passion in Fort Collins, CO</p>
         </div>
     </footer>

prompts.txt CHANGED Viewed

	@@ -1 +1,3 @@
1	- how can I change a photo?

+how can I change a photo?
+change the photo on the top to a cityscape
+Change the "INDIE ROCKER" in the corner to "AnderSmithMusic". Change the big text in the middle to "Ander Smith Music" change the text below it to "14 year old indie rock musician from Fort Collins, CO". I have uploaded an image to the hugging face main files page titled "IMG_0776 Edited.JPEG". Use that as the background.