make it so when i press view my art it scrolls down to the gallery section - Initial Deployment
Browse files- README.md +7 -5
- index.html +359 -19
README.md
CHANGED
|
@@ -1,10 +1,12 @@
|
|
| 1 |
---
|
| 2 |
-
title:
|
| 3 |
-
emoji:
|
| 4 |
-
colorFrom:
|
| 5 |
-
colorTo:
|
| 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: ciestaart
|
| 3 |
+
emoji: 🐳
|
| 4 |
+
colorFrom: blue
|
| 5 |
+
colorTo: green
|
| 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,359 @@
|
|
| 1 |
-
<!
|
| 2 |
-
<html>
|
| 3 |
-
|
| 4 |
-
|
| 5 |
-
|
| 6 |
-
|
| 7 |
-
|
| 8 |
-
|
| 9 |
-
|
| 10 |
-
|
| 11 |
-
|
| 12 |
-
|
| 13 |
-
|
| 14 |
-
|
| 15 |
-
|
| 16 |
-
|
| 17 |
-
|
| 18 |
-
|
| 19 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 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>Ciesta's Art World | Dreamy Anime Creations</title>
|
| 7 |
+
<script src="https://cdn.tailwindcss.com"></script>
|
| 8 |
+
<link href="https://fonts.googleapis.com/css2?family=Baloo+2:wght@400;700&family=Nunito:wght@300;400;600&display=swap" rel="stylesheet">
|
| 9 |
+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
| 10 |
+
<style>
|
| 11 |
+
body {
|
| 12 |
+
font-family: 'Nunito', sans-serif;
|
| 13 |
+
background-color: #FFF7FA;
|
| 14 |
+
letter-spacing: 0.03em;
|
| 15 |
+
}
|
| 16 |
+
h1, h2, h3 {
|
| 17 |
+
font-family: 'Baloo 2', cursive;
|
| 18 |
+
}
|
| 19 |
+
.sparkle {
|
| 20 |
+
position: absolute;
|
| 21 |
+
width: 4px;
|
| 22 |
+
height: 4px;
|
| 23 |
+
background-color: rgba(255, 255, 255, 0.8);
|
| 24 |
+
border-radius: 50%;
|
| 25 |
+
animation: sparkle 3s infinite;
|
| 26 |
+
opacity: 0;
|
| 27 |
+
}
|
| 28 |
+
@keyframes sparkle {
|
| 29 |
+
0% { transform: translateY(0) rotate(0deg); opacity: 0; }
|
| 30 |
+
20% { opacity: 1; }
|
| 31 |
+
100% { transform: translateY(-100px) rotate(360deg); opacity: 0; }
|
| 32 |
+
}
|
| 33 |
+
.hover-scale {
|
| 34 |
+
transition: transform 0.3s ease;
|
| 35 |
+
}
|
| 36 |
+
.hover-scale:hover {
|
| 37 |
+
transform: scale(1.03);
|
| 38 |
+
}
|
| 39 |
+
.speech-bubble {
|
| 40 |
+
position: relative;
|
| 41 |
+
background: #FEC5E5;
|
| 42 |
+
border-radius: 1.5em;
|
| 43 |
+
padding: 1.5rem;
|
| 44 |
+
}
|
| 45 |
+
.speech-bubble:after {
|
| 46 |
+
content: '';
|
| 47 |
+
position: absolute;
|
| 48 |
+
bottom: -15px;
|
| 49 |
+
left: 50px;
|
| 50 |
+
border-width: 15px 15px 0;
|
| 51 |
+
border-style: solid;
|
| 52 |
+
border-color: #FEC5E5 transparent;
|
| 53 |
+
}
|
| 54 |
+
.lightbox {
|
| 55 |
+
display: none;
|
| 56 |
+
position: fixed;
|
| 57 |
+
top: 0;
|
| 58 |
+
left: 0;
|
| 59 |
+
width: 100%;
|
| 60 |
+
height: 100%;
|
| 61 |
+
background-color: rgba(0,0,0,0.8);
|
| 62 |
+
z-index: 1000;
|
| 63 |
+
align-items: center;
|
| 64 |
+
justify-content: center;
|
| 65 |
+
}
|
| 66 |
+
.lightbox-content {
|
| 67 |
+
max-width: 90%;
|
| 68 |
+
max-height: 90%;
|
| 69 |
+
}
|
| 70 |
+
.lightbox-close {
|
| 71 |
+
position: absolute;
|
| 72 |
+
top: 20px;
|
| 73 |
+
right: 30px;
|
| 74 |
+
color: white;
|
| 75 |
+
font-size: 2rem;
|
| 76 |
+
cursor: pointer;
|
| 77 |
+
}
|
| 78 |
+
</style>
|
| 79 |
+
</head>
|
| 80 |
+
<body class="text-gray-700">
|
| 81 |
+
<!-- Sparkles Background -->
|
| 82 |
+
<div id="sparkles-container" class="fixed inset-0 overflow-hidden pointer-events-none z-0"></div>
|
| 83 |
+
|
| 84 |
+
<!-- Navigation -->
|
| 85 |
+
<nav class="bg-[#FEC5E5] py-4 px-6 shadow-md sticky top-0 z-50">
|
| 86 |
+
<div class="container mx-auto flex justify-between items-center">
|
| 87 |
+
<a href="#" class="text-2xl font-bold text-white">Ciesta's Art</a>
|
| 88 |
+
<div class="hidden md:flex space-x-6">
|
| 89 |
+
<a href="#gallery" class="text-white hover:text-[#FFECB3] transition">Gallery</a>
|
| 90 |
+
<a href="#commissions" class="text-white hover:text-[#FFECB3] transition">Commissions</a>
|
| 91 |
+
<a href="#about" class="text-white hover:text-[#FFECB3] transition">About</a>
|
| 92 |
+
<a href="#contact" class="text-white hover:text-[#FFECB3] transition">Contact</a>
|
| 93 |
+
</div>
|
| 94 |
+
<button class="md:hidden text-white">
|
| 95 |
+
<i class="fas fa-bars text-2xl"></i>
|
| 96 |
+
</button>
|
| 97 |
+
</div>
|
| 98 |
+
</nav>
|
| 99 |
+
|
| 100 |
+
<!-- Hero Section -->
|
| 101 |
+
<section class="relative h-screen flex items-center justify-center overflow-hidden bg-gradient-to-b from-[#FEC5E5] to-[#FFD1DC]">
|
| 102 |
+
<div class="absolute inset-0 bg-[url('https://media.discordapp.net/attachments/321326931620659201/1405169327035912312/image.png?ex=689e822a&is=689d30aa&hm=73f50e36089763ac1a0b745c0f7eba9f831db934a1d90633c045bcca18565ab4&=&format=webp&quality=lossless&width=1522&height=856')] bg-cover bg-center opacity-20"></div>
|
| 103 |
+
<div class="relative z-10 text-center px-4">
|
| 104 |
+
<h1 class="text-5xl md:text-7xl font-bold text-white mb-4">Ciesta's Art World</h1>
|
| 105 |
+
<p class="text-xl md:text-2xl text-white mb-8">Dreamy anime creations & commissions</p>
|
| 106 |
+
<div class="flex flex-col sm:flex-row justify-center gap-4">
|
| 107 |
+
<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>
|
| 108 |
+
<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>
|
| 109 |
+
</div>
|
| 110 |
+
</div>
|
| 111 |
+
<div class="absolute bottom-10 left-0 right-0 flex justify-center">
|
| 112 |
+
<a href="#gallery" class="text-white animate-bounce">
|
| 113 |
+
<i class="fas fa-chevron-down text-3xl"></i>
|
| 114 |
+
</a>
|
| 115 |
+
</div>
|
| 116 |
+
</section>
|
| 117 |
+
|
| 118 |
+
<!-- Gallery Section -->
|
| 119 |
+
<section id="gallery" class="py-16 px-4 bg-[#FFF7FA]">
|
| 120 |
+
<div class="container mx-auto">
|
| 121 |
+
<h2 class="text-4xl font-bold text-center mb-12 text-[#FEC5E5]">Gallery</h2>
|
| 122 |
+
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
|
| 123 |
+
<!-- Gallery Items -->
|
| 124 |
+
<div class="gallery-item hover-scale cursor-pointer" onclick="openLightbox('https://media.discordapp.net/attachments/321326931620659201/1404092248664051854/HoR.png?ex=689e8b8e&is=689d3a0e&hm=0f0026c86c98118944347a1559d9374db2949d488eed4e435e6dd7c41416beac&=&format=webp&quality=lossless&width=605&height=856')">
|
| 125 |
+
<img src="https://media.discordapp.net/attachments/321326931620659201/1404092248664051854/HoR.png?ex=689e8b8e&is=689d3a0e&hm=0f0026c86c98118944347a1559d9374db2949d488eed4e435e6dd7c41416beac&=&format=webp&quality=lossless&width=605&height=856" alt="Anime artwork 1" class="w-full h-64 object-cover rounded-xl shadow-md hover:shadow-lg transition">
|
| 126 |
+
</div>
|
| 127 |
+
<div class="gallery-item hover-scale cursor-pointer" onclick="openLightbox('https://media.discordapp.net/attachments/321326931620659201/1404092250778243205/Jane.png?ex=689e8b8f&is=689d3a0f&hm=dfcc73e025ed0bbdd07bd30b755c84859c760f3f09c12a3d93859aff7166945c&=&format=webp&quality=lossless&width=605&height=856', 'Magical girl illustration')">
|
| 128 |
+
<img src="https://media.discordapp.net/attachments/321326931620659201/1404092250778243205/Jane.png?ex=689e8b8f&is=689d3a0f&hm=dfcc73e025ed0bbdd07bd30b755c84859c760f3f09c12a3d93859aff7166945c&=&format=webp&quality=lossless&width=605&height=856" alt="Anime artwork 2" class="w-full h-64 object-cover rounded-xl shadow-md hover:shadow-lg transition">
|
| 129 |
+
</div>
|
| 130 |
+
<div class="gallery-item hover-scale cursor-pointer" onclick="openLightbox('https://media.discordapp.net/attachments/321326931620659201/1404092249825869894/Topaz.png?ex=689e8b8f&is=689d3a0f&hm=9664c7d26827e76c6d94fa39afff21e417757a83d7ed06197f3008dd9b4f0cee&=&format=webp&quality=lossless&width=605&height=856')">
|
| 131 |
+
<img src="https://media.discordapp.net/attachments/321326931620659201/1404092249825869894/Topaz.png?ex=689e8b8f&is=689d3a0f&hm=9664c7d26827e76c6d94fa39afff21e417757a83d7ed06197f3008dd9b4f0cee&=&format=webp&quality=lossless&width=605&height=856" alt="Anime artwork 3" class="w-full h-64 object-cover rounded-xl shadow-md hover:shadow-lg transition">
|
| 132 |
+
</div>
|
| 133 |
+
<div class="gallery-item hover-scale cursor-pointer" onclick="openLightbox('https://i.imgur.com/J6wJQ8a.png', 'Chibi character')">
|
| 134 |
+
<img src="https://i.imgur.com/J6wJQ8a.png" alt="Anime artwork 4" class="w-full h-64 object-cover rounded-xl shadow-md hover:shadow-lg transition">
|
| 135 |
+
</div>
|
| 136 |
+
<div class="gallery-item hover-scale cursor-pointer" onclick="openLightbox('https://i.imgur.com/J6wJQ8a.png', 'Fantasy portrait')">
|
| 137 |
+
<img src="https://i.imgur.com/J6wJQ8a.png" alt="Anime artwork 5" class="w-full h-64 object-cover rounded-xl shadow-md hover:shadow-lg transition">
|
| 138 |
+
</div>
|
| 139 |
+
<div class="gallery-item hover-scale cursor-pointer" onclick="openLightbox('https://i.imgur.com/J6wJQ8a.png', 'Dreamy illustration')">
|
| 140 |
+
<img src="https://i.imgur.com/J6wJQ8a.png" alt="Anime artwork 6" class="w-full h-64 object-cover rounded-xl shadow-md hover:shadow-lg transition">
|
| 141 |
+
</div>
|
| 142 |
+
</div>
|
| 143 |
+
</div>
|
| 144 |
+
</section>
|
| 145 |
+
|
| 146 |
+
<!-- Commissions Section -->
|
| 147 |
+
<section id="commissions" class="py-16 px-4 bg-[#FFD1DC]">
|
| 148 |
+
<div class="container mx-auto">
|
| 149 |
+
<h2 class="text-4xl font-bold text-center mb-12 text-white">Commission Info</h2>
|
| 150 |
+
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
| 151 |
+
<!-- Commission Cards -->
|
| 152 |
+
<div class="bg-white rounded-xl p-6 shadow-lg hover-scale">
|
| 153 |
+
<div class="bg-[#FEC5E5] rounded-lg p-2 mb-4">
|
| 154 |
+
<img src="https://i.imgur.com/J6wJQ8a.png" alt="Chibi example" class="w-full h-40 object-cover rounded-md">
|
| 155 |
+
</div>
|
| 156 |
+
<h3 class="text-2xl font-bold text-[#FEC5E5] mb-2">Chibi Commission</h3>
|
| 157 |
+
<p class="text-gray-600 mb-4">Super cute mini characters with exaggerated features</p>
|
| 158 |
+
<div class="flex justify-between items-center">
|
| 159 |
+
<span class="text-xl font-bold text-[#BDE0FE]">$15 - $40</span>
|
| 160 |
+
<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>
|
| 161 |
+
</div>
|
| 162 |
+
</div>
|
| 163 |
+
|
| 164 |
+
<div class="bg-white rounded-xl p-6 shadow-lg hover-scale">
|
| 165 |
+
<div class="bg-[#FEC5E5] rounded-lg p-2 mb-4">
|
| 166 |
+
<img src="https://i.imgur.com/J6wJQ8a.png" alt="Portrait example" class="w-full h-40 object-cover rounded-md">
|
| 167 |
+
</div>
|
| 168 |
+
<h3 class="text-2xl font-bold text-[#FEC5E5] mb-2">Portrait</h3>
|
| 169 |
+
<p class="text-gray-600 mb-4">Detailed character portraits with background</p>
|
| 170 |
+
<div class="flex justify-between items-center">
|
| 171 |
+
<span class="text-xl font-bold text-[#BDE0FE]">$30 - $80</span>
|
| 172 |
+
<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>
|
| 173 |
+
</div>
|
| 174 |
+
</div>
|
| 175 |
+
|
| 176 |
+
<div class="bg-white rounded-xl p-6 shadow-lg hover-scale">
|
| 177 |
+
<div class="bg-[#FEC5E5] rounded-lg p-2 mb-4">
|
| 178 |
+
<img src="https://i.imgur.com/J6wJQ8a.png" alt="Full illustration example" class="w-full h-40 object-cover rounded-md">
|
| 179 |
+
</div>
|
| 180 |
+
<h3 class="text-2xl font-bold text-[#FEC5E5] mb-2">Full Illustration</h3>
|
| 181 |
+
<p class="text-gray-600 mb-4">Complex scenes with multiple characters</p>
|
| 182 |
+
<div class="flex justify-between items-center">
|
| 183 |
+
<span class="text-xl font-bold text-[#BDE0FE]">$60 - $150</span>
|
| 184 |
+
<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>
|
| 185 |
+
</div>
|
| 186 |
+
</div>
|
| 187 |
+
</div>
|
| 188 |
+
</div>
|
| 189 |
+
</section>
|
| 190 |
+
|
| 191 |
+
<!-- Commission Form -->
|
| 192 |
+
<section id="commission-form" class="py-16 px-4 bg-[#FFF7FA]">
|
| 193 |
+
<div class="container mx-auto max-w-2xl">
|
| 194 |
+
<h2 class="text-4xl font-bold text-center mb-12 text-[#FEC5E5]">Commission Request</h2>
|
| 195 |
+
<form action="https://formspree.io/f/YOUR_FORM_ID" method="POST" class="bg-white p-8 rounded-xl shadow-lg">
|
| 196 |
+
<div class="mb-6">
|
| 197 |
+
<label for="name" class="block text-gray-700 mb-2">Your Name</label>
|
| 198 |
+
<input type="text" id="name" name="name" required class="w-full px-4 py-2 border border-[#FEC5E5] rounded-lg focus:outline-none focus:ring-2 focus:ring-[#BDE0FE]">
|
| 199 |
+
</div>
|
| 200 |
+
<div class="mb-6">
|
| 201 |
+
<label for="email" class="block text-gray-700 mb-2">Email Address</label>
|
| 202 |
+
<input type="email" id="email" name="email" required class="w-full px-4 py-2 border border-[#FEC5E5] rounded-lg focus:outline-none focus:ring-2 focus:ring-[#BDE0FE]">
|
| 203 |
+
</div>
|
| 204 |
+
<div class="mb-6">
|
| 205 |
+
<label for="type" class="block text-gray-700 mb-2">Commission Type</label>
|
| 206 |
+
<select id="type" name="type" class="w-full px-4 py-2 border border-[#FEC5E5] rounded-lg focus:outline-none focus:ring-2 focus:ring-[#BDE0FE]">
|
| 207 |
+
<option value="chibi">Chibi ($15-$40)</option>
|
| 208 |
+
<option value="portrait">Portrait ($30-$80)</option>
|
| 209 |
+
<option value="illustration">Full Illustration ($60-$150)</option>
|
| 210 |
+
<option value="other">Other (Please describe)</option>
|
| 211 |
+
</select>
|
| 212 |
+
</div>
|
| 213 |
+
<div class="mb-6">
|
| 214 |
+
<label for="description" class="block text-gray-700 mb-2">Description</label>
|
| 215 |
+
<textarea id="description" name="description" rows="4" required class="w-full px-4 py-2 border border-[#FEC5E5] rounded-lg focus:outline-none focus:ring-2 focus:ring-[#BDE0FE]"></textarea>
|
| 216 |
+
</div>
|
| 217 |
+
<div class="mb-6">
|
| 218 |
+
<label for="reference" class="block text-gray-700 mb-2">Reference Images (Optional)</label>
|
| 219 |
+
<input type="file" id="reference" name="reference" class="w-full px-4 py-2 border border-[#FEC5E5] rounded-lg focus:outline-none focus:ring-2 focus:ring-[#BDE0FE]">
|
| 220 |
+
</div>
|
| 221 |
+
<button type="submit" class="w-full bg-[#FEC5E5] hover:bg-[#BDE0FE] text-white font-bold py-3 rounded-full transition hover-scale">Submit Request</button>
|
| 222 |
+
</form>
|
| 223 |
+
</div>
|
| 224 |
+
</section>
|
| 225 |
+
|
| 226 |
+
<!-- About Section -->
|
| 227 |
+
<section id="about" class="py-16 px-4 bg-[#C1E1C1]">
|
| 228 |
+
<div class="container mx-auto max-w-4xl">
|
| 229 |
+
<h2 class="text-4xl font-bold text-center mb-12 text-white">About Me</h2>
|
| 230 |
+
<div class="flex flex-col md:flex-row items-center gap-8">
|
| 231 |
+
<div class="w-full md:w-1/3 flex justify-center">
|
| 232 |
+
<div class="relative">
|
| 233 |
+
<img src="https://i.imgur.com/J6wJQ8a.png" alt="Ciesta" class="w-64 h-64 object-cover rounded-full border-4 border-white shadow-lg">
|
| 234 |
+
<div class="absolute -bottom-4 -right-4 bg-[#FFECB3] rounded-full p-3 shadow-md">
|
| 235 |
+
<i class="fas fa-paint-brush text-2xl text-[#FEC5E5]"></i>
|
| 236 |
+
</div>
|
| 237 |
+
</div>
|
| 238 |
+
</div>
|
| 239 |
+
<div class="w-full md:w-2/3">
|
| 240 |
+
<div class="speech-bubble text-white mb-6">
|
| 241 |
+
<p class="text-lg">Hi! I'm Ciesta, a pastel art enthusiast who loves creating dreamy anime-inspired worlds!</p>
|
| 242 |
+
</div>
|
| 243 |
+
<div class="bg-white p-6 rounded-xl shadow-md">
|
| 244 |
+
<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 whimsical characters and magical scenes with soft pastel colors.</p>
|
| 245 |
+
<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 beauty of nature.</p>
|
| 246 |
+
<p>When I'm not drawing, you can find me drinking bubble tea, playing indie games, or cuddling with my two cats, Mochi and Matcha.</p>
|
| 247 |
+
</div>
|
| 248 |
+
</div>
|
| 249 |
+
</div>
|
| 250 |
+
</div>
|
| 251 |
+
</section>
|
| 252 |
+
|
| 253 |
+
<!-- Contact Section -->
|
| 254 |
+
<section id="contact" class="py-16 px-4 bg-[#FFF7FA]">
|
| 255 |
+
<div class="container mx-auto max-w-4xl">
|
| 256 |
+
<h2 class="text-4xl font-bold text-center mb-12 text-[#FEC5E5]">Let's Connect!</h2>
|
| 257 |
+
<div class="flex flex-col items-center">
|
| 258 |
+
<div class="flex space-x-6 mb-8">
|
| 259 |
+
<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">
|
| 260 |
+
<i class="fab fa-twitter text-xl"></i>
|
| 261 |
+
</a>
|
| 262 |
+
<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">
|
| 263 |
+
<i class="fab fa-instagram text-xl"></i>
|
| 264 |
+
</a>
|
| 265 |
+
<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">
|
| 266 |
+
<i class="fab fa-deviantart text-xl"></i>
|
| 267 |
+
</a>
|
| 268 |
+
<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">
|
| 269 |
+
<i class="fab fa-patreon text-xl"></i>
|
| 270 |
+
</a>
|
| 271 |
+
<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">
|
| 272 |
+
<i class="fas fa-envelope text-xl"></i>
|
| 273 |
+
</a>
|
| 274 |
+
</div>
|
| 275 |
+
<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 or email me at <a href="mailto:hello@ciestaart.com" class="text-[#FEC5E5] hover:underline">hello@ciestaart.com</a></p>
|
| 276 |
+
</div>
|
| 277 |
+
</div>
|
| 278 |
+
</section>
|
| 279 |
+
|
| 280 |
+
<!-- Footer -->
|
| 281 |
+
<footer class="bg-[#FEC5E5] py-8 px-4 text-white">
|
| 282 |
+
<div class="container mx-auto text-center">
|
| 283 |
+
<p>© 2023 Ciesta's Art World. All rights reserved.</p>
|
| 284 |
+
<p class="mt-2">Made with <i class="fas fa-heart text-[#BDE0FE]"></i> and pastel colors</p>
|
| 285 |
+
</div>
|
| 286 |
+
</footer>
|
| 287 |
+
|
| 288 |
+
<!-- Lightbox -->
|
| 289 |
+
<div id="lightbox" class="lightbox">
|
| 290 |
+
<span class="lightbox-close" onclick="closeLightbox()">×</span>
|
| 291 |
+
<img id="lightbox-img" class="lightbox-content" src="">
|
| 292 |
+
<div id="lightbox-caption" class="text-white text-center mt-4 text-xl"></div>
|
| 293 |
+
</div>
|
| 294 |
+
|
| 295 |
+
<script>
|
| 296 |
+
// Create sparkles
|
| 297 |
+
function createSparkles() {
|
| 298 |
+
const container = document.getElementById('sparkles-container');
|
| 299 |
+
const sparkleCount = 30;
|
| 300 |
+
|
| 301 |
+
for (let i = 0; i < sparkleCount; i++) {
|
| 302 |
+
const sparkle = document.createElement('div');
|
| 303 |
+
sparkle.classList.add('sparkle');
|
| 304 |
+
|
| 305 |
+
// Random position
|
| 306 |
+
sparkle.style.left = `${Math.random() * 100}%`;
|
| 307 |
+
sparkle.style.top = `${Math.random() * 100}%`;
|
| 308 |
+
|
| 309 |
+
// Random delay
|
| 310 |
+
sparkle.style.animationDelay = `${Math.random() * 5}s`;
|
| 311 |
+
|
| 312 |
+
// Random size
|
| 313 |
+
const size = Math.random() * 3 + 2;
|
| 314 |
+
sparkle.style.width = `${size}px`;
|
| 315 |
+
sparkle.style.height = `${size}px`;
|
| 316 |
+
|
| 317 |
+
container.appendChild(sparkle);
|
| 318 |
+
}
|
| 319 |
+
}
|
| 320 |
+
|
| 321 |
+
// Lightbox functions
|
| 322 |
+
function openLightbox(src, caption) {
|
| 323 |
+
const lightbox = document.getElementById('lightbox');
|
| 324 |
+
const lightboxImg = document.getElementById('lightbox-img');
|
| 325 |
+
const lightboxCaption = document.getElementById('lightbox-caption');
|
| 326 |
+
|
| 327 |
+
lightbox.style.display = 'flex';
|
| 328 |
+
lightboxImg.src = src;
|
| 329 |
+
lightboxCaption.textContent = caption;
|
| 330 |
+
document.body.style.overflow = 'hidden';
|
| 331 |
+
}
|
| 332 |
+
|
| 333 |
+
function closeLightbox() {
|
| 334 |
+
const lightbox = document.getElementById('lightbox');
|
| 335 |
+
lightbox.style.display = 'none';
|
| 336 |
+
document.body.style.overflow = 'auto';
|
| 337 |
+
}
|
| 338 |
+
|
| 339 |
+
// Close lightbox when clicking outside the image
|
| 340 |
+
window.onclick = function(event) {
|
| 341 |
+
const lightbox = document.getElementById('lightbox');
|
| 342 |
+
if (event.target === lightbox) {
|
| 343 |
+
closeLightbox();
|
| 344 |
+
}
|
| 345 |
+
}
|
| 346 |
+
|
| 347 |
+
// Mobile menu toggle (would need more implementation)
|
| 348 |
+
document.querySelector('.md\\:hidden').addEventListener('click', function() {
|
| 349 |
+
// Implement mobile menu toggle here
|
| 350 |
+
alert('Mobile menu would open here in a full implementation');
|
| 351 |
+
});
|
| 352 |
+
|
| 353 |
+
// Initialize sparkles when page loads
|
| 354 |
+
window.onload = function() {
|
| 355 |
+
createSparkles();
|
| 356 |
+
};
|
| 357 |
+
</script>
|
| 358 |
+
<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>
|
| 359 |
+
</html>
|