Hugging Face's logo

Spaces:
Ciesta
/
ciestaart
Running

App Files Community
ciestaart / index.html
Ciesta's picture
Ciesta
undefined - Follow Up Deployment
deb1b79 verified
raw
history blame contribute delete
27.6 kB
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Ciesta's Art|Anime Creations</title>
 <script src="https://cdn.tailwindcss.com"></script>
 <link href="https://fonts.googleapis.com/css2?family=Baloo+2:wght@400;700&family=Nunito:wght@300;400;600&display=swap" rel="stylesheet">
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
 <style>
 body {
 font-family: 'Nunito', sans-serif;
 background-color: #FFF7FA;
 letter-spacing: 0.03em;
 }
 h1, h2, h3 {
 font-family: 'Baloo 2', cursive;
 }
 .sparkle {
 position: absolute;
 width: 4px;
 height: 4px;
 background-color: rgba(255, 255, 255, 0.8);
 border-radius: 50%;
 animation: sparkle 3s infinite;
 opacity: 0;
 }
 @keyframes sparkle {
 0% { transform: translateY(0) rotate(0deg); opacity: 0; }
 20% { opacity: 1; }
 100% { transform: translateY(-100px) rotate(360deg); opacity: 0; }
 }
 .hover-scale {
 transition: transform 0.3s ease;
 }
 .hover-scale:hover {
 transform: scale(1.03);
 }
 .speech-bubble {
 position: relative;
 background: #FEC5E5;
 border-radius: 1.5em;
 padding: 1.5rem;
 }
 .speech-bubble:after {
 content: '';
 position: absolute;
 bottom: -15px;
 left: 50px;
 border-width: 15px 15px 0;
 border-style: solid;
 border-color: #FEC5E5 transparent;
 }
 .lightbox {
 display: none;
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background-color: rgba(0,0,0,0.8);
 z-index: 1000;
 align-items: center;
 justify-content: center;
 }
 .lightbox-content {
 max-width: 90%;
 max-height: 90%;
 }
 .lightbox-close {
 position: absolute;
 top: 20px;
 right: 30px;
 color: white;
 font-size: 2rem;
 cursor: pointer;
 }
 @keyframes bounce-horizontal {
 0%, 100% { transform: translateX(0) rotate(45deg); }
 50% { transform: translateX(15px) rotate(45deg) scale(1.2); }
 }
 @keyframes bounce-horizontal-reverse {
 0%, 100% { transform: translateX(0) rotate(-45deg); }
 50% { transform: translateX(-15px) rotate(-45deg) scale(1.2); }
 }
 .animate-bounce-horizontal {
 animation: bounce-horizontal 1.5s infinite;
 }
 .animate-bounce-horizontal-reverse {
 animation: bounce-horizontal-reverse 1.5s infinite;
 }
 .soft-arrow {
 position: absolute;
 color: #FEC5E5;
 font-size: 1.5rem;
 opacity: 0.8;
 animation: pulse 2s infinite;
 }
 @keyframes pulse {
 0%, 100% { transform: scale(1); opacity: 0.8; }
 50% { transform: scale(1.2); opacity: 1; }
 }
 </style>
</head>
<body class="text-gray-700">
 <!-- Sparkles Background -->
 <div id="sparkles-container" class="fixed inset-0 overflow-hidden pointer-events-none z-0"></div>
<!-- Navigation -->
 <nav class="bg-[#FEC5E5] py-4 px-6 shadow-md sticky top-0 z-50">
 <div class="container mx-auto flex justify-between items-center">
 <a href="#" class="text-2xl font-bold text-white">Ciesta's Art</a>
 <div class="hidden md:flex space-x-6">
 <a href="#gallery" class="text-white hover:text-[#FFECB3] transition">Gallery</a>
 <a href="#commissions" class="text-white hover:text-[#FFECB3] transition">Commissions</a>
 <a href="#about" class="text-white hover:text-[#FFECB3] transition">About</a>
 <a href="#contact" class="text-white hover:text-[#FFECB3] transition">Contact</a>
 </div>
 <button class="md:hidden text-white">
 <i class="fas fa-bars text-2xl"></i>
 </button>
 </div>
 </nav>
<!-- Hero Section -->
 <section class="relative h-screen flex items-center justify-center overflow-hidden bg-gradient-to-b from-[#FEC5E5] to-[#FFD1DC]">
 <div class="absolute inset-0 bg-[url('https://i.imgur.com/eeRe8fm.png')] bg-cover bg-center opacity-20"></div>
 <div class="relative z-10 text-center px-4">
 <h1 class="text-5xl md:text-7xl font-bold text-white mb-4">Ciesta's Art</h1>
 <p class="text-xl md:text-2xl text-white mb-8">Anime creations & commissions</p>
 <div class="flex flex-col sm:flex-row justify-center gap-4">
 <a href="#gallery" class="bg-white text-[#FEC5E5] hover:bg-[#FFECB3] hover:text-white px-8 py-3 rounded-full font-bold text-lg transition hover-scale shadow-lg">View My Art</a>
 <a href="#commissions" class="bg-[#BDE0FE] text-white hover:bg-[#C1E1C1] px-8 py-3 rounded-full font-bold text-lg transition hover-scale shadow-lg">Request a Commission</a>
 </div>
 </div>
 <div class="absolute bottom-10 left-0 right-0 flex justify-center">
 <a href="#gallery" class="text-white animate-bounce">
 <i class="fas fa-heart text-3xl transform rotate-45"></i>
 </a>
 </div>
 </section>
<!-- Gallery Section -->
 <section id="gallery" class="py-16 px-4 bg-[#FFF7FA]">
 <div class="container mx-auto">
 <h2 class="text-4xl font-bold text-center mb-12 text-[#FEC5E5]">Gallery</h2>
 <div class="relative">
 <!-- Carousel Container -->
 <div class="overflow-hidden">
 <div id="gallery-carousel" class="flex transition-transform duration-500 ease-in-out">
 <!-- Gallery Items -->
 <div class="flex-shrink-0 w-full md:w-1/2 lg:w-1/3 px-2 cursor-pointer" onclick="openLightbox('https://pbs.twimg.com/media/GLRFZMZbkAAwuNx?format=jpg&name=small')">
 <div class="gallery-item hover-scale h-96 flex items-center justify-center">
 <img src="https://pbs.twimg.com/media/GLRFZMZbkAAwuNx?format=jpg&name=small" alt="Anime artwork 1" class="w-full h-full object-cover rounded-xl shadow-md hover:shadow-lg transition">
 </div>
 </div>
 <div class="flex-shrink-0 w-full md:w-1/2 lg:w-1/3 px-2 cursor-pointer" onclick="openLightbox('https://i.imgur.com/kklhxo9.png')">
 <div class="gallery-item hover-scale h-96 flex items-center justify-center">
 <img src="https://i.imgur.com/kklhxo9.png" alt="Magical girl illustration" class="w-full h-full object-cover rounded-xl shadow-md hover:shadow-lg transition">
 </div>
 </div>
 <div class="flex-shrink-0 w-full md:w-1/2 lg:w-1/3 px-2 cursor-pointer" onclick="openLightbox('https://i.imgur.com/hIB18qA.png')">
 <div class="gallery-item hover-scale h-96 flex items-center justify-center">
 <img src="https://i.imgur.com/hIB18qA.png" alt="Anime artwork 3" class="w-full h-full object-cover rounded-xl shadow-md hover:shadow-lg transition">
 </div>
 </div>
 <div class="flex-shrink-0 w-full md:w-1/2 lg:w-1/3 px-2 cursor-pointer" onclick="openLightbox('https://pbs.twimg.com/media/Gxle7WKbQAAL3XS?format=jpg&name=small')">
 <div class="gallery-item hover-scale h-96 flex items-center justify-center">
 <img src="https://pbs.twimg.com/media/Gxle7WKbQAAL3XS?format=jpg&name=small" alt="Chibi character" class="w-full h-full object-cover rounded-xl shadow-md hover:shadow-lg transition">
 </div>
 </div>
 <div class="flex-shrink-0 w-full md:w-1/2 lg:w-1/3 px-2 cursor-pointer" onclick="openLightbox('https://i.imgur.com/32TtSh6.png')">
 <div class="gallery-item hover-scale h-96 flex items-center justify-center">
 <img src="https://i.imgur.com/32TtSh6.png" alt="Anime artwork 5" class="w-full h-full object-cover rounded-xl shadow-md hover:shadow-lg transition">
 </div>
 </div>
 <div class="flex-shrink-0 w-full md:w-1/2 lg:w-1/3 px-2 cursor-pointer" onclick="openLightbox('https://i.imgur.com/miiRwv9.png')">
 <div class="gallery-item hover-scale h-96 flex items-center justify-center">
 <img src="https://i.imgur.com/miiRwv9.png" alt="Anime artwork 6" class="w-full h-full object-cover rounded-xl shadow-md hover:shadow-lg transition">
 </div>
 </div>
</div>
 </div>
<!-- Navigation Arrows -->
 <button id="prev-btn" class="absolute left-0 top-1/2 transform -translate-y-1/2 bg-white/70 hover:bg-white text-[#FEC5E5] rounded-full w-10 h-10 flex items-center justify-center shadow-md ml-2 transition">
 <i class="fas fa-heart text-xl transform -rotate-45"></i>
 </button>
 <button id="next-btn" class="absolute right-0 top-1/2 transform -translate-y-1/2 bg-white/70 hover:bg-white text-[#FEC5E5] rounded-full w-10 h-10 flex items-center justify-center shadow-md mr-2 transition">
 <i class="fas fa-heart text-xl transform rotate-45"></i>
 </button>
<!-- Indicators -->
 <div id="carousel-indicators" class="flex justify-center mt-6 space-x-2">
 <button class="indicator-btn w-3 h-3 rounded-full bg-[#FEC5E5] opacity-50 transition"></button>
 <button class="indicator-btn w-3 h-3 rounded-full bg-[#FEC5E5] opacity-50 transition"></button>
 <button class="indicator-btn w-3 h-3 rounded-full bg-[#FEC5E5] opacity-50 transition"></button>
 <button class="indicator-btn w-3 h-3 rounded-full bg-[#FEC5E5] opacity-50 transition"></button>
 <button class="indicator-btn w-3 h-3 rounded-full bg-[#FEC5E5] opacity-50 transition"></button>
 <button class="indicator-btn w-3 h-3 rounded-full bg-[#FEC5E5] opacity-50 transition"></button>
 </div>
 </div>
 </div>
 </section>
<!-- Commissions Section -->
 <section id="commissions" class="py-16 px-4 bg-[#FFD1DC]">
 <div class="container mx-auto">
 <h2 class="text-4xl font-bold text-center mb-12 text-white">Commission Info</h2>
 <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
 <!-- Commission Cards -->
 <div class="bg-white rounded-xl p-6 shadow-lg hover-scale">
 <div class="bg-[#FEC5E5] rounded-lg p-2 mb-4">
 <img src="https://i.imgur.com/bRtOJhX.png" alt="Chibi example" class="w-full h-100 object-cover rounded-md">
 </div>
 <h3 class="text-2xl font-bold text-[#FEC5E5] mb-2">Profile Picture</h3>
 <p class="text-gray-600 mb-4">Super cute characters fit for a profile picture</p>
 <div class="flex justify-between items-center">
 <span class="text-xl font-bold text-[#BDE0FE]">$15 - $40</span>
 <button class="bg-[#FEC5E5] hover:bg-[#BDE0FE] text-white px-4 py-2 rounded-full transition" onclick="document.getElementById('commission-form').scrollIntoView({behavior: 'smooth'})">Request Now</button>
 </div>
 </div>
<div class="bg-white rounded-xl p-6 shadow-lg hover-scale">
 <div class="bg-[#FEC5E5] rounded-lg p-2 mb-4">
 <img src="https://i.imgur.com/fGfFnXT.png" alt="Portrait example" class="w-full h-100 object-cover rounded-md">
 </div>
 <h3 class="text-2xl font-bold text-[#FEC5E5] mb-2">Bust Up Portrait</h3>
 <p class="text-gray-600 mb-4">Character portraits with simple background</p>
 <div class="flex justify-between items-center">
 <span class="text-xl font-bold text-[#BDE0FE]">$30 - $80</span>
 <button class="bg-[#FEC5E5] hover:bg-[#BDE0FE] text-white px-4 py-2 rounded-full transition" onclick="document.getElementById('commission-form').scrollIntoView({behavior: 'smooth'})">Request Now</button>
 </div>
 </div>
<div class="bg-white rounded-xl p-6 shadow-lg hover-scale">
 <div class="bg-[#FEC5E5] rounded-lg p-2 mb-4">
 <img src="https://i.imgur.com/6INuXoC.png" alt="Full illustration example" class="w-full h-50 object-cover rounded-md">
 </div>
 <h3 class="text-2xl font-bold text-[#FEC5E5] mb-2">Custom</h3>
 <p class="text-gray-600 mb-4">Memes and such</p>
 <div class="flex justify-between items-center">
 <span class="text-xl font-bold text-[#BDE0FE]">$depends on requests :3</span>
 <button class="bg-[#FEC5E5] hover:bg-[#BDE0FE] text-white px-4 py-2 rounded-full transition" onclick="document.getElementById('commission-form').scrollIntoView({behavior: 'smooth'})">Request Now</button>
 </div>
 </div>
 </div>
 </div>
 </section>
<!-- Commission Form Link -->
 <section id="commission-form" class="py-16 px-4 bg-[#FFF7FA]">
 <div class="container mx-auto max-w-2xl text-center">
 <h2 class="text-4xl font-bold text-center mb-12 text-[#FEC5E5]">Ready to Request?</h2>
 <div class="relative inline-block">
 <i class="fas fa-arrow-right soft-arrow absolute -left-8 top-1/2 -translate-y-1/2"></i>
 <i class="fas fa-arrow-left soft-arrow absolute -right-8 top-1/2 -translate-y-1/2"></i>
 <a href="https://forms.gle/HsiZvGHJFUmiBf2i6" target="_blank" class="relative bg-[#FEC5E5] hover:bg-[#BDE0FE] text-white font-bold py-4 px-8 rounded-full text-xl transition-all hover-scale shadow-lg hover:shadow-xl inline-block">
 Request Now
 </a>
 </div>
 <p class="mt-8 text-gray-600">Click the button above to fill out the commission form</p>
 </div>
 </section>
<!-- About Section -->
 <section id="about" class="py-16 px-4 bg-[#FEC5E5]">
 <div class="container mx-auto max-w-4xl">
 <h2 class="text-4xl font-bold text-center mb-12 text-white">About Me</h2>
 <div class="flex flex-col md:flex-row items-center gap-8">
 <div class="w-full md:w-1/3 flex justify-center">
 <div class="relative">
 <img src="https://i.imgur.com/bRtOJhX.png" alt="Ciesta" class="w-64 h-64 object-cover rounded-full border-4 border-white shadow-lg">
 <div class="absolute -bottom-4 -right-4 bg-[#FFECB3] rounded-full p-3 shadow-md">
 <i class="fas fa-paint-brush text-2xl text-[#FEC5E5]"></i>
 </div>
 </div>
 </div>
 <div class="w-full md:w-2/3">
 <div class=" bg-[#FFECB3] speech-bubble text-[#FEC5E5] mb-6">
 <p class="text-lg">Hi! I'm Ciesta, an art enthusiast who loves creating and making anime-inspired art!</p>
 </div>
 <div class="bg-white p-6 rounded-xl shadow-md">
 <p class="mb-4">I've been drawing since childhood and fell in love with the anime art style during my teenage years. My work focuses on creating anime characters and magical scenes.</p>
 <p class="mb-4">I work primarily digitally using Clip Studio Paint and Procreate, but I also enjoy traditional watercolor painting. My inspiration comes from magical girl anime, fantasy novels, and the pinterests :3.</p>
 <p>When I'm not drawing, you can find me drinking bubble tea, playing indie games, or cuddling with my two cats.</p>
 </div>
 </div>
 </div>
 </div>
 </section>
<!-- Contact Section -->
 <section id="contact" class="py-16 px-4 bg-[#FFF7FA]">
 <div class="container mx-auto max-w-4xl">
 <h2 class="text-4xl font-bold text-center mb-12 text-[#FEC5E5]">Let's Connect!</h2>
 <div class="flex flex-col items-center">
 <div class="flex space-x-6 mb-8">
 <a href="https://x.com/Ax9eS89558" target="_blank" rel="noopener noreferrer" class="bg-[#FEC5E5] hover:bg-[#BDE0FE] text-white w-12 h-12 rounded-full flex items-center justify-center transition hover-scale shadow-md">
 <i class="fab fa-twitter text-xl"></i>
 </a>
 <a href="https://www.instagram.com/ciestaa_" target="_blank" rel="noopener noreferrer" class="bg-[#FEC5E5] hover:bg-[#BDE0FE] text-white w-12 h-12 rounded-full flex items-center justify-center transition hover-scale shadow-md">
 <i class="fab fa-instagram text-xl"></i>
 </a>
 <a href="https://www.youtube.com/watch?v=dQw4w9WgXcQ&list=RDdQw4w9WgXcQ" target="_blank" rel="noopener noreferrer" class="bg-[#FEC5E5] hover:bg-[#BDE0FE] text-white w-12 h-12 rounded-full flex items-center justify-center transition hover-scale shadow-md">
 <i class="fab fa-deviantart text-xl"></i>
 </a>
 <a href="#" class="bg-[#FEC5E5] hover:bg-[#BDE0FE] text-white w-12 h-12 rounded-full flex items-center justify-center transition hover-scale shadow-md" onclick="openLightbox('https://i.imgur.com/gyjzMyd.png')">
 <i class="fab fa-discord text-xl"></i>
 </a>
 <a href="#" class="bg-[#FEC5E5] hover:bg-[#BDE0FE] text-white w-12 h-12 rounded-full flex items-center justify-center transition hover-scale shadow-md">
 <i class="fas fa-envelope text-xl"></i>
 </a>
 </div>
 <p class="text-center text-gray-600 max-w-lg">For commission inquiries or just to say hello, feel free to reach out through any of my social media</a></p>
 </div>
 </div>
 </section>
<!-- Footer -->
 <footer class="bg-[#FEC5E5] py-8 px-4 text-white">
 <div class="container mx-auto text-center">
 <p>&copy; 2025 Ciesta's Art. All rights reserved.</p>
 <p class="mt-2">Made with <i class="fas fa-heart text-[#BDE0FE]"></i></p>
 </div>
 </footer>
<!-- Lightbox -->
 <div id="lightbox" class="lightbox">
 <span class="lightbox-close" onclick="closeLightbox()">&times;</span>
 <img id="lightbox-img" class="lightbox-content" src="">
 <div id="lightbox-caption" class="text-white text-center mt-4 text-xl"></div>
 </div>
<script>
 // Create sparkles
 function createSparkles() {
 const container = document.getElementById('sparkles-container');
 const sparkleCount = 30;
for (let i = 0; i < sparkleCount; i++) {
 const sparkle = document.createElement('div');
 sparkle.classList.add('sparkle');
// Random position
 sparkle.style.left = `${Math.random() * 100}%`;
 sparkle.style.top = `${Math.random() * 100}%`;
// Random delay
 sparkle.style.animationDelay = `${Math.random() * 5}s`;
// Random size
 const size = Math.random() * 3 + 2;
 sparkle.style.width = `${size}px`;
 sparkle.style.height = `${size}px`;
container.appendChild(sparkle);
 }
 }
// Lightbox functions
 function openLightbox(src, caption) {
 const lightbox = document.getElementById('lightbox');
 const lightboxImg = document.getElementById('lightbox-img');
 const lightboxCaption = document.getElementById('lightbox-caption');
lightbox.style.display = 'flex';
 lightboxImg.src = src;
 lightboxCaption.textContent = caption;
 document.body.style.overflow = 'hidden';
 }
function closeLightbox() {
 const lightbox = document.getElementById('lightbox');
 lightbox.style.display = 'none';
 document.body.style.overflow = 'auto';
 }
// Close lightbox when clicking outside the image
 window.onclick = function(event) {
 const lightbox = document.getElementById('lightbox');
 if (event.target === lightbox) {
 closeLightbox();
 }
 }
// Mobile menu toggle (would need more implementation)
 document.querySelector('.md\\:hidden').addEventListener('click', function() {
 // Implement mobile menu toggle here
 alert('Mobile menu would open here in a full implementation');
 });
// Carousel functionality
 let currentIndex = 0;
 let isDragging = false;
 let startPosX = 0;
 let currentTranslate = 0;
 let prevTranslate = 0;
 const carousel = document.getElementById('gallery-carousel');
 const items = document.querySelectorAll('.gallery-item');
 const indicators = document.querySelectorAll('.indicator-btn');
// Calculate item width based on screen size
 function getItemWidth() {
 return window.innerWidth < 768 ? 100 : 100 / 3; // Full width on mobile, 3 items on desktop
 }
function updateCarousel() {
 const itemWidth = getItemWidth();
 const offset = -currentIndex * itemWidth;
 carousel.style.transform = `translateX(${offset}%)`;
 carousel.style.transition = isDragging ? 'none' : 'transform 0.5s ease-in-out';
// Update indicators
 indicators.forEach((indicator, index) => {
 indicator.classList.toggle('opacity-50', index !== currentIndex);
 indicator.classList.toggle('opacity-100', index === currentIndex);
 });
 }
// Touch event handlers for mobile
 carousel.addEventListener('touchstart', touchStart);
 carousel.addEventListener('touchmove', touchMove);
 carousel.addEventListener('touchend', touchEnd);
function touchStart(e) {
 isDragging = true;
 startPosX = e.touches[0].clientX;
 carousel.style.transition = 'none';
 }
function touchMove(e) {
 if (!isDragging) return;
 const currentPosX = e.touches[0].clientX;
 const diffX = currentPosX - startPosX;
 const itemWidth = getItemWidth();
 currentTranslate = prevTranslate + diffX / window.innerWidth * 100;
 carousel.style.transform = `translateX(calc(${-currentIndex * itemWidth}% + ${currentTranslate}%))`;
 }
function touchEnd() {
 if (!isDragging) return;
 isDragging = false;
 carousel.style.transition = 'transform 0.5s ease-in-out';
const itemWidth = getItemWidth();
 const threshold = 0.3 * itemWidth;
if (Math.abs(currentTranslate) > threshold) {
 if (currentTranslate > 0 && currentIndex > 0) {
 currentIndex--;
 } else if (currentTranslate < 0 && currentIndex < items.length - (window.innerWidth < 768 ? 1 : 3)) {
 currentIndex++;
 }
 }
currentTranslate = 0;
 prevTranslate = 0;
 updateCarousel();
 }
// Navigation buttons
 document.getElementById('prev-btn').addEventListener('click', () => {
 const itemWidth = getItemWidth();
 currentIndex = (currentIndex > 0) ? currentIndex - 1 : items.length - (window.innerWidth < 768 ? 1 : 3);
 updateCarousel();
 });
document.getElementById('next-btn').addEventListener('click', () => {
 const itemWidth = getItemWidth();
 currentIndex = (currentIndex < items.length - (window.innerWidth < 768 ? 1 : 3)) ? currentIndex + 1 : 0;
 updateCarousel();
 });
// Indicator buttons
 indicators.forEach((indicator, index) => {
 indicator.addEventListener('click', () => {
 currentIndex = index;
 updateCarousel();
 });
 });
// Auto-scroll every 10 seconds (only on desktop)
 let autoScroll;
 if (window.innerWidth >= 768) {
 autoScroll = setInterval(() => {
 currentIndex = (currentIndex < items.length - 3) ? currentIndex + 1 : 0;
 updateCarousel();
 }, 10000);
 }
// Pause auto-scroll on hover
 const carouselContainer = document.querySelector('#gallery .relative');
 carouselContainer.addEventListener('mouseenter', () => clearInterval(autoScroll));
 carouselContainer.addEventListener('mouseleave', () => {
 autoScroll = setInterval(() => {
 currentIndex = (currentIndex < items.length - 3) ? currentIndex + 1 : 0;
 updateCarousel();
 }, 10000);
 });
// Initialize sparkles when page loads
 window.onload = function() {
 createSparkles();
 updateCarousel(); // Initialize carousel position
 };
 </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=Ciesta/ciestaart" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>