Add 3 files

README.md

@@ -1,10 +1,12 @@
 ---
-title: King
-emoji: 📈
-colorFrom: gray
-colorTo: yellow
+title: king
+emoji: 🐳
+colorFrom: pink
+colorTo: gray
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html

@@ -1,19 +1,310 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Tirza | Artist  </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=Montserrat:wght@300;400;500&display=swap');
+        
+        body {
+            font-family: 'Montserrat', sans-serif;
+            scroll-behavior: smooth;
+        }
+        
+        h1, h2, h3 {
+            font-family: 'Playfair Display', serif;
+        }
+        
+        .hero {
+            background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://images.unsplash.com/photo-1519681393784-d120267933ba?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80');
+            background-size: cover;
+            background-position: center;
+        }
+        
+        .gallery-item {
+            transition: all 0.3s ease;
+        }
+        
+        .gallery-item:hover {
+            transform: scale(1.03);
+        }
+        
+        .artwork-frame {
+            border: 15px solid #f5f5f5;
+            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
+        }
+        
+        .contact-form input, 
+        .contact-form textarea {
+            border-bottom: 1px solid #d1d5db;
+            transition: all 0.3s ease;
+        }
+        
+        .contact-form input:focus, 
+        .contact-form textarea:focus {
+            border-bottom-color: #8b5a2b;
+        }
+        
+        .nav-link {
+            position: relative;
+        }
+        
+        .nav-link:after {
+            content: '';
+            position: absolute;
+            width: 0;
+            height: 2px;
+            bottom: -2px;
+            left: 0;
+            background-color: #8b5a2b;
+            transition: width 0.3s ease;
+        }
+        
+        .nav-link:hover:after {
+            width: 100%;
+        }
+        
+        .instagram-btn {
+            background: #f09433; 
+            background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); 
+            transition: all 0.3s ease;
+        }
+        
+        .instagram-btn:hover {
+            transform: translateY(-3px);
+            box-shadow: 0 10px 20px rgba(0,0,0,0.2);
+        }
+    </style>
+</head>
+<body class="bg-gray-50 text-gray-800">
+    <!-- Navigation -->
+    <nav class="fixed w-full bg-white shadow-sm z-50">
+        <div class="container mx-auto px-6 py-4">
+            <div class="flex justify-between items-center">
+                <a href="#" class="text-2xl font-bold text-gray-800">Tirza</a>
+                <div class="hidden md:flex space-x-8">
+                    <a href="#home" class="nav-link">Home</a>
+                    <a href="#gallery" class="nav-link">Gallery</a>
+                    <a href="#about" class="nav-link">About</a>
+                    <a href="#contact" class="nav-link">Contact</a>
+                </div>
+                <button class="md:hidden focus:outline-none">
+                    <i class="fas fa-bars text-2xl"></i>
+                </button>
+            </div>
+        </div>
+    </nav>
+
+    <!-- Hero Section -->
+    <section id="home" class="hero min-h-screen flex items-center justify-center text-center text-white pt-16">
+        <div class="container mx-auto px-6">
+            <h1 class="text-5xl md:text-7xl font-bold mb-6">Tirza</h1>
+            <p class="text-xl md:text-2xl mb-8 max-w-2xl mx-auto">Artist • Inspiration</p>
+            <div class="flex justify-center space-x-4">
+                <a href="#gallery" class="inline-block bg-transparent border-2 border-white text-white px-8 py-3 rounded-full hover:bg-white hover:text-gray-800 transition duration-300">
+                    View Artwork
+                </a>
+                <a href="https://www.instagram.com/art_tirza/" target="_blank" class="instagram-btn inline-flex items-center text-white px-6 py-3 rounded-full">
+                    <i class="fab fa-instagram text-xl mr-2"></i> Follow on Instagram
+                </a>
+            </div>
+        </div>
+    </section>
+
+    <!-- Gallery Section -->
+    <section id="gallery" class="py-20 bg-white">
+        <div class="container mx-auto px-6">
+            <h2 class="text-4xl font-bold text-center mb-16">Tirza's Artwork</h2>
+            
+            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-10">
+                <!-- Artwork 1 -->
+                <div class="gallery-item">
+                    <div class="artwork-frame bg-white p-4">
+                        <img src="https://images.unsplash.com/photo-1541961017774-22349e4a1262?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1458&q=80" 
+                             alt="Portrait by Tirza" class="w-full h-64 object-cover">
+                    </div>
+                    <h3 class="text-xl font-bold mt-4">Serenity</h3>
+                    <p class="text-gray-600">Oil on canvas, 2020</p>
+                </div>
+                
+                <!-- Artwork 2 -->
+                <div class="gallery-item">
+                    <div class="artwork-frame bg-white p-4">
+                        <img src="https://images.unsplash.com/photo-1542219550-371d6a86204f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" 
+                             alt="Abstract by Tirza" class="w-full h-64 object-cover">
+                    </div>
+                    <h3 class="text-xl font-bold mt-4">Whispers of Color</h3>
+                    <p class="text-gray-600">Watercolor, 2019</p>
+                </div>
+                
+                <!-- Artwork 3 -->
+                <div class="gallery-item">
+                    <div class="artwork-frame bg-white p-4">
+                        <img src="https://images.unsplash.com/photo-1534447677768-be436bb09401?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1494&q=80" 
+                             alt="Landscape by Tirza" class="w-full h-64 object-cover">
+                    </div>
+                    <h3 class="text-xl font-bold mt-4">Horizon Dreams</h3>
+                    <p class="text-gray-600">Acrylic, 2021</p>
+                </div>
+                
+                <!-- Artwork 4 -->
+                <div class="gallery-item">
+                    <div class="artwork-frame bg-white p-4">
+                        <img src="https://images.unsplash.com/photo-1579783902614-a3fb39268b5b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1466&q=80" 
+                             alt="Still life by Tirza" class="w-full h-64 object-cover">
+                    </div>
+                    <h3 class="text-xl font-bold mt-4">Morning Stillness</h3>
+                    <p class="text-gray-600">Charcoal, 2018</p>
+                </div>
+                
+                <!-- Artwork 5 -->
+                <div class="gallery-item">
+                    <div class="artwork-frame bg-white p-4">
+                        <img src="https://images.unsplash.com/photo-1532635241-17e820acc59f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" 
+                             alt="Portrait by Tirza" class="w-full h-64 object-cover">
+                    </div>
+                    <h3 class="text-xl font-bold mt-4">Eternal Grace</h3>
+                    <p class="text-gray-600">Oil pastel, 2022</p>
+                </div>
+                
+                <!-- Artwork 6 -->
+                <div class="gallery-item">
+                    <div class="artwork-frame bg-white p-4">
+                        <img src="https://images.unsplash.com/photo-1554080353-a576cf803bda?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1587&q=80" 
+                             alt="Abstract by Tirza" class="w-full h-64 object-cover">
+                    </div>
+                    <h3 class="text-xl font-bold mt-4">Color Symphony</h3>
+                    <p class="text-gray-600">Mixed media, 2023</p>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- About Section -->
+    <section id="about" class="py-20 bg-gray-100">
+        <div class="container mx-auto px-6">
+            <div class="flex flex-col md:flex-row items-center">
+                <div class="md:w-1/2 mb-10 md:mb-0 md:pr-10">
+                    <img src="https://images.unsplash.com/photo-1584308666744-24d5c474f2ae?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1513&q=80" 
+                         alt="Tirza the artist" class="rounded-lg shadow-xl w-full">
+                </div>
+                <div class="md:w-1/2">
+                    <h2 class="text-4xl font-bold mb-6">About Tirza</h2>
+                    <p class="text-lg mb-6">
+                        Tirza is a passionate artist whose work reflects her deep connection to family, nature, and the human experience. 
+                        Her artistic journey spans over three decades, during which she has explored various mediums and styles.
+                    </p>
+                    <p class="text-lg mb-6">
+                        As a mother, Tirza finds endless inspiration in the relationships and emotions that shape our lives. 
+                        Her artwork captures the beauty in everyday moments, transforming them into timeless pieces that resonate with viewers.
+                    </p>
+                    <p class="text-lg mb-6">
+                        When not in her studio, Tirza enjoys teaching art workshops and spending time with her family in nature. 
+                        She believes art should be accessible to everyone and brings healing to both creator and viewer.
+                    </p>
+                    <div class="flex items-center mt-8">
+                        <a href="tel:+1234567890" class="flex items-center text-gray-800 hover:text-gray-600 mr-6">
+                            <i class="fas fa-phone-alt mr-2"></i> (054)4482526
+                        </a>
+                        <a href="mailto:tirza@artist.com" class="flex items-center text-gray-800 hover:text-gray-600">
+                            <i class="fas fa-envelope mr-2"></i> tirza.hk.8@gmail.com
+                        </a>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- Contact Section -->
+    <section id="contact" class="py-20 bg-white">
+        <div class="container mx-auto px-6">
+            <h2 class="text-4xl font-bold text-center mb-16">Contact Tirza</h2>
+            
+            <div class="max-w-2xl mx-auto">
+                <form class="contact-form space-y-8">
+                    <div>
+                        <input type="text" placeholder="Your Name" class="w-full py-3 px-4 focus:outline-none">
+                    </div>
+                    <div>
+                        <input type="email" placeholder="Your Email" class="w-full py-3 px-4 focus:outline-none">
+                    </div>
+                    <div>
+                        <textarea placeholder="Your Message" rows="5" class="w-full py-3 px-4 focus:outline-none"></textarea>
+                    </div>
+                    <button type="submit" class="bg-gray-800 text-white px-8 py-3 rounded-full hover:bg-gray-700 transition duration-300">
+                        Send Message
+                    </button>
+                </form>
+                
+                <div class="mt-16 flex flex-col md:flex-row justify-center space-y-6 md:space-y-0 md:space-x-16 text-center">
+                    <div>
+                        <i class="fas fa-envelope text-3xl mb-4 text-gray-700"></i>
+                        <p>tirza@artist.com</p>
+                    </div>
+                    <div>
+                        <i class="fas fa-phone text-3xl mb-4 text-gray-700"></i>
+                        <p>+1 (234) 567-890</p>
+                    </div>
+                    <div>
+                        <i class="fab fa-instagram text-3xl mb-4 text-gray-700"></i>
+                        <p>@tirza_artist</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- Footer -->
+    <footer class="bg-gray-900 text-white py-12">
+        <div class="container mx-auto px-6">
+            <div class="flex flex-col md:flex-row justify-between items-center">
+                <div class="mb-6 md:mb-0">
+                    <h3 class="text-2xl font-bold">Tirza</h3>
+                    <p class="mt-2">Artist & Mother</p>
+                </div>
+                <div class="flex space-x-6">
+                    <a href="https://www.instagram.com/tirza_artist" target="_blank" class="text-2xl hover:text-gray-300"><i class="fab fa-instagram"></i></a>
+                    <a href="#" class="text-2xl hover:text-gray-300"><i class="fab fa-facebook"></i></a>
+                    <a href="#" class="text-2xl hover:text-gray-300"><i class="fab fa-pinterest"></i></a>
+                </div>
+            </div>
+            <div class="border-t border-gray-800 mt-8 pt-8 text-center md:text-left">
+                <p>&copy; 2023 Tirza. All rights reserved.</p>
+            </div>
+        </div>
+    </footer>
+
+    <script>
+        // Smooth scrolling for navigation links
+        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+            anchor.addEventListener('click', function (e) {
+                e.preventDefault();
+                
+                document.querySelector(this.getAttribute('href')).scrollIntoView({
+                    behavior: 'smooth'
+                });
+            });
+        });
+        
+        // Mobile menu toggle functionality would go here
+        const mobileMenuButton = document.querySelector('.md:hidden');
+        const mobileMenu = document.querySelector('.md\\:flex');
+        
+        mobileMenuButton.addEventListener('click', () => {
+            mobileMenu.classList.toggle('hidden');
+            mobileMenu.classList.toggle('flex');
+            mobileMenu.classList.toggle('flex-col');
+            mobileMenu.classList.toggle('absolute');
+            mobileMenu.classList.toggle('top-16');
+            mobileMenu.classList.toggle('left-0');
+            mobileMenu.classList.toggle('w-full');
+            mobileMenu.classList.toggle('bg-white');
+            mobileMenu.classList.toggle('p-4');
+            mobileMenu.classList.toggle('shadow-md');
+        });
+    </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=karambulla/king" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>