Premium
0
16
Mia Dawn
Curated Artist Collections
Download Codebase
Commercial License<!DOCTYPE html>
<html lang="en">
<head>
<script>
window.FontAwesomeConfig = {
autoReplaceSvg: 'nest'
};
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/js/all.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mia Dawn | Curated Artist Collections</title>
<meta name="description" content="Mia Dawn is an expressive Tailwind CSS artist portfolio template for curated collections, exhibitions, illustrations, and contemporary artwork.">
<meta name="keywords" content="Mia Dawn, Tailwind CSS template, HTML website template, artist portfolio template, art gallery website, exhibition landing page, responsive creative design">
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Syne:wght@800&family=Outfit:wght@800;900&display=swap');
body {
font-family: 'Inter', sans-serif;
background-color: #fff;
color: #1a1a1a;
}
.font-artist {
font-family: 'Outfit', sans-serif;
letter-spacing: -0.02em;
}
/* Custom tilted effect for images as seen in mockup */
.tilt-left {
transform: rotate(-3deg);
}
.tilt-right {
transform: rotate(3deg);
}
.bg-coral {
background-color: #f89696;
}
.text-coral {
color: #f89696;
}
/* Masonry-like grid container */
.masonry-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1rem;
}
/* Mockup 3 overlay style */
.gallery-overlay-text {
font-size: 8rem;
line-height: 1;
z-index: 20;
pointer-events: none;
}
@media (max-width: 1024px) {
.gallery-overlay-text {
font-size: 4rem;
}
}
</style>
</head>
<body class="overflow-x-hidden">
<!-- block:start navigation -->
<nav class="flex items-start justify-between px-8 py-10 max-w-7xl mx-auto">
<div class="flex items-center gap-2">
<span class="text-3xl font-bold text-coral">a.</span>
</div>
<div class="grid grid-cols-2 gap-x-12 gap-y-2 text-sm font-medium text-gray-800">
<a href="#" class="hover:text-coral transition">About us</a>
<a href="#" class="hover:text-coral transition">Archive</a>
<a href="#" class="hover:text-coral transition">Events</a>
<a href="#" class="hover:text-coral transition">Contacts</a>
<a href="#" class="hover:text-coral transition">Tickets</a>
</div>
</nav>
<!-- block:end navigation -->
<!-- block:start hero -->
<section id="hero" class="relative max-w-7xl mx-auto px-8 pb-24 overflow-hidden">
<div class="flex flex-col lg:flex-row gap-16">
<!-- Left Side: Artist Info -->
<div class="lg:w-1/2 z-10 pt-10">
<h1 class="font-artist text-7xl md:text-8xl text-coral mb-6">
Mia Dawn
</h1>
<p class="text-xl md:text-2xl font-medium max-w-md mb-4 leading-snug">
Whimsical wonders of childhood captured by our visionary curated artists
</p>
<p class="text-gray-400 font-bold uppercase tracking-widest text-xs mb-12">
Berlin Exhibition — Autumn 2024
</p>
<!-- Large Tilted Illustration -->
<div class="relative w-full max-w-lg mt-12">
<div class="tilt-left bg-gray-50 p-2 shadow-2xl">
<img class="w-full h-auto object-cover" src="https://storage.googleapis.com/uxpilot-auth.appspot.com/gen_6c0377db88_a244df39dfdf5b3a.png" alt="art illustration of a young girl with black hair looking up with mouth open, watercolor and ink styl" />
</div>
<!-- Floating Countdown Circle -->
<div class="absolute -bottom-10 -right-10 w-48 h-48 bg-coral rounded-full flex flex-col items-center justify-center text-white p-6 shadow-xl transform rotate-12">
<span class="text-4xl font-bold">2 days</span>
<span class="text-sm font-medium opacity-80">left to see</span>
</div>
</div>
</div>
<!-- Right Side: Masonry Grid -->
<div class="lg:w-1/2">
<div class="grid grid-cols-2 gap-4">
<div class="space-y-4">
<div class="rounded-lg overflow-hidden bg-[#e6f3ff]">
<img class="w-full h-auto" src="https://storage.googleapis.com/uxpilot-auth.appspot.com/gen_586eb6a656_0f0a522a8709a447.png" alt="minimalist illustration of yellow smiling faces, pop art style, repetitive pattern" />
</div>
<div class="rounded-lg overflow-hidden bg-[#fff0e6]">
<img class="w-full h-auto" src="https://storage.googleapis.com/uxpilot-auth.appspot.com/gen_f3921db80f_66e39e57c8522227.png" alt="abstract painting of a yellow head covered by two blue hands, artistic oil painting style" />
</div>
<div class="rounded-lg overflow-hidden bg-[#e6ffe6]">
<img class="w-full h-auto" src="https://storage.googleapis.com/uxpilot-auth.appspot.com/gen_671d109a3b_7e84050bea2942d1.png" alt="illustration of a person sleeping under a blue wavy blanket, cozy minimal style" />
</div>
</div>
<div class="space-y-4 pt-12">
<div class="rounded-lg overflow-hidden bg-[#ffe6f0]">
<img class="w-full h-auto" src="https://storage.googleapis.com/uxpilot-auth.appspot.com/gen_fd9f059a9b_6e60c43e7678de83.png" alt="illustration of a pink nude figure sitting, minimal graphic style, bold colors" />
</div>
<div class="rounded-lg overflow-hidden bg-[#f0e6ff]">
<img class="w-full h-auto" src="https://storage.googleapis.com/uxpilot-auth.appspot.com/gen_de38b869ec_93bce16e15cd7bd4.png" alt="illustration of a person walking a dog on a bright red beach with a small island in distance, flat a" />
</div>
</div>
</div>
</div>
</div>
<!-- Background Decorative Element -->
<div class="absolute top-1/2 right-1/2 translate-x-1/2 -translate-y-1/2 w-24 h-24 bg-coral/20 rounded-full blur-3xl -z-10"></div>
</section>
<!-- block:end hero -->
<!-- block:start bio -->
<section id="bio" class="bg-white py-32 px-8">
<div class="max-w-6xl mx-auto text-center mb-24">
<h2 class="font-artist text-7xl md:text-9xl text-coral leading-none mb-16">
Artist Spotlight
</h2>
<div class="flex flex-col md:flex-row items-center justify-center gap-16 md:gap-24">
<!-- Artist Portrait -->
<div class="w-full max-w-sm">
<div class="tilt-right bg-gray-50 p-3 shadow-2xl">
<img class="w-full h-[450px] object-cover" src="https://storage.googleapis.com/uxpilot-auth.appspot.com/gen_643606ddfb_cea87b98f0a97371.png" alt="portrait of a woman with dark hair and glasses wearing a yellow top, artist aesthetic, soft natural " />
</div>
</div>
<!-- Bio Content -->
<div class="max-w-md text-left">
<h3 class="text-2xl font-bold mb-6 leading-tight">
Illustrations created with passion in which each of us will find ourselves
</h3>
<div class="relative py-8">
<span class="absolute top-0 left-[-40px] text-6xl text-coral font-artist">"</span>
<p class="text-gray-600 leading-relaxed italic">
Hello there! I am an illustrator and surface pattern designer who loves to create fun and simplistic images, using humor where I can, if not in my work then definitely in my life.
</p>
<span class="absolute bottom-0 right-0 text-6xl text-coral font-artist transform rotate-180">"</span>
</div>
<div class="mt-12 flex items-center gap-4 group cursor-pointer">
<span class="text-coral font-bold text-xl tracking-wide">Scroll</span>
<div class="w-16 h-[2px] bg-coral group-hover:w-24 transition-all duration-300"></div>
<i class="fa-solid fa-arrow-right text-coral"></i>
</div>
</div>
</div>
</div>
</section>
<!-- block:end bio -->
<!-- block:start masonry-gallery -->
<section id="gallery" class="py-32 bg-white">
<div class="max-w-7xl mx-auto px-8">
<div class="flex flex-col md:flex-row justify-between items-end mb-16 gap-8">
<div>
<span class="text-coral font-bold uppercase tracking-widest text-xs mb-4 block">Exhibition Works</span>
<h2 class="font-artist text-6xl text-slate-900">Featured Gallery</h2>
</div>
<p class="text-gray-400 text-sm max-w-xs text-right">
Explore a curated selection of our most recent acquisitions and featured exhibition pieces.
</p>
</div>
<!-- Multi-column Masonry Grid -->
<div class="columns-1 sm:columns-2 lg:columns-3 gap-8 space-y-8">
<!-- Image 1 -->
<div class="break-inside-avoid group relative cursor-pointer overflow-hidden rounded-2xl shadow-sm hover:shadow-2xl transition-all duration-500">
<img class="w-full h-auto transition-transform duration-700 group-hover:scale-110" src="https://storage.googleapis.com/uxpilot-auth.appspot.com/gen_1696258da2_16cdde715f0b22eb.png" alt="minimalist digital illustration of a woman holding a large red poppy flower, simple lines, soft text" />
<div class="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 transition-opacity duration-500 flex flex-col justify-end p-8 text-white">
<p class="font-artist text-2xl">Floral Grace</p>
<p class="text-xs uppercase tracking-widest opacity-70">Series 01</p>
</div>
</div>
<!-- Image 2 -->
<div class="break-inside-avoid group relative cursor-pointer overflow-hidden rounded-2xl shadow-sm hover:shadow-2xl transition-all duration-500">
<img class="w-full h-auto transition-transform duration-700 group-hover:scale-110" src="https://storage.googleapis.com/uxpilot-auth.appspot.com/gen_4900c49bca_903ef7c637c428fa.png" alt="abstract colorful shapes painting, vibrant pink blue and yellow, organic forms, modern art style" />
<div class="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 transition-opacity duration-500 flex flex-col justify-end p-8 text-white">
<p class="font-artist text-2xl">Chromatic Pulse</p>
<p class="text-xs uppercase tracking-widest opacity-70">Abstracts</p>
</div>
</div>
<!-- Image 3 -->
<div class="break-inside-avoid group relative cursor-pointer overflow-hidden rounded-2xl shadow-sm hover:shadow-2xl transition-all duration-500">
<img class="w-full h-auto transition-transform duration-700 group-hover:scale-110" src="https://storage.googleapis.com/uxpilot-auth.appspot.com/gen_8d06383d7e_9ef043d3d7b0cc1a.png" alt="illustration of a cat sitting on a windowsill looking at the stars, cozy night aesthetic, purple and" />
<div class="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 transition-opacity duration-500 flex flex-col justify-end p-8 text-white">
<p class="font-artist text-2xl">Midnight Watch</p>
<p class="text-xs uppercase tracking-widest opacity-70">Nocturnal</p>
</div>
</div>
<!-- Image 4 -->
<div class="break-inside-avoid group relative cursor-pointer overflow-hidden rounded-2xl shadow-sm hover:shadow-2xl transition-all duration-500">
<img class="w-full h-auto transition-transform duration-700 group-hover:scale-110" src="https://storage.googleapis.com/uxpilot-auth.appspot.com/gen_1614d71ec6_4efbba81f286e6ed.png" alt="minimalist line art of two hands reaching for each other, white background, elegant drawing" />
<div class="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 transition-opacity duration-500 flex flex-col justify-end p-8 text-white">
<p class="font-artist text-2xl">The Connection</p>
<p class="text-xs uppercase tracking-widest opacity-70">Sketches</p>
</div>
</div>
<!-- Image 5 -->
<div class="break-inside-avoid group relative cursor-pointer overflow-hidden rounded-2xl shadow-sm hover:shadow-2xl transition-all duration-500">
<img class="w-full h-auto transition-transform duration-700 group-hover:scale-110" src="https://storage.googleapis.com/uxpilot-auth.appspot.com/gen_467e1490e8_12aa77b1886449f0.png" alt="3D render of a glass sphere with a miniature forest inside, surreal art, soft bokeh background" />
<div class="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 transition-opacity duration-500 flex flex-col justify-end p-8 text-white">
<p class="font-artist text-2xl">Enclosed Nature</p>
<p class="text-xs uppercase tracking-widest opacity-70">Surrealism</p>
</div>
</div>
<!-- Image 6 -->
<div class="break-inside-avoid group relative cursor-pointer overflow-hidden rounded-2xl shadow-sm hover:shadow-2xl transition-all duration-500">
<img class="w-full h-auto transition-transform duration-700 group-hover:scale-110" src="https://storage.googleapis.com/uxpilot-auth.appspot.com/gen_2132643308_89c7d85357f26887.png" alt="watercolor painting of a sunlit garden, soft greens and yellows, impressionist style" />
<div class="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 transition-opacity duration-500 flex flex-col justify-end p-8 text-white">
<p class="font-artist text-2xl">Golden Hour</p>
<p class="text-xs uppercase tracking-widest opacity-70">Impression</p>
</div>
</div>
<!-- Image 7 -->
<div class="break-inside-avoid group relative cursor-pointer overflow-hidden rounded-2xl shadow-sm hover:shadow-2xl transition-all duration-500">
<img class="w-full h-auto transition-transform duration-700 group-hover:scale-110" src="https://storage.googleapis.com/uxpilot-auth.appspot.com/gen_7aff53f961_fd38942b7c5e51ee.png" alt="graphic illustration of a desert landscape with a giant moon, retro wave aesthetic, pink and orange" />
<div class="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 transition-opacity duration-500 flex flex-col justify-end p-8 text-white">
<p class="font-artist text-2xl">Solar Winds</p>
<p class="text-xs uppercase tracking-widest opacity-70">Retrospective</p>
</div>
</div>
<!-- Image 8 -->
<div class="break-inside-avoid group relative cursor-pointer overflow-hidden rounded-2xl shadow-sm hover:shadow-2xl transition-all duration-500">
<img class="w-full h-auto transition-transform duration-700 group-hover:scale-110" src="https://storage.googleapis.com/uxpilot-auth.appspot.com/gen_368d9e888f_c20585b2a03fe65e.png" alt="minimalist portrait of a person wearing an oversized yellow hat, bold colors, flat design style" />
<div class="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 transition-opacity duration-500 flex flex-col justify-end p-8 text-white">
<p class="font-artist text-2xl">The Yellow Brim</p>
<p class="text-xs uppercase tracking-widest opacity-70">Characters</p>
</div>
</div>
</div>
<div class="mt-24 text-center">
<button class="px-12 py-5 bg-slate-900 text-white font-bold rounded-2xl hover:bg-coral transition-all duration-300 shadow-xl shadow-gray-200">
View Full Archive
</button>
</div>
</div>
</section>
<!-- block:end masonry-gallery -->
<!-- block:start info-section -->
<section id="info" class="py-32 px-8 bg-gray-50 overflow-hidden">
<div class="max-w-7xl mx-auto grid grid-cols-1 lg:grid-cols-2 gap-24 items-center">
<div>
<h2 class="font-artist text-6xl text-coral mb-8">Art of <br> Collection</h2>
<div class="space-y-12">
<div class="flex gap-6">
<div class="w-12 h-12 flex-shrink-0 flex items-center justify-center border-2 border-coral rounded-full text-coral font-bold italic font-artist">01</div>
<div>
<h4 class="font-bold text-xl mb-2">Curation with Soul</h4>
<p class="text-gray-500 leading-relaxed">Each piece in SkyGallery is hand-selected by our editorial team to ensure it brings a unique emotional resonance to your space.</p>
</div>
</div>
<div class="flex gap-6">
<div class="w-12 h-12 flex-shrink-0 flex items-center justify-center border-2 border-coral rounded-full text-coral font-bold italic font-artist">02</div>
<div>
<h4 class="font-bold text-xl mb-2">Sustainable Mediums</h4>
<p class="text-gray-500 leading-relaxed">We utilize museum-grade, acid-free papers and archival inks that preserve the vibrancy of your artwork for generations.</p>
</div>
</div>
<div class="flex gap-6">
<div class="w-12 h-12 flex-shrink-0 flex items-center justify-center border-2 border-coral rounded-full text-coral font-bold italic font-artist">03</div>
<div>
<h4 class="font-bold text-xl mb-2">Global Shipping</h4>
<p class="text-gray-500 leading-relaxed">Our specialized packaging ensures your art arrives in perfect condition, no matter where in the world you call home.</p>
</div>
</div>
</div>
</div>
<div class="relative">
<div class="tilt-right bg-white p-4 shadow-2xl">
<img class="w-full h-[600px] object-cover" src="https://storage.googleapis.com/uxpilot-auth.appspot.com/gen_85d74b11ff_2f4a31eff8ee1ecd.png" alt="close up of high quality art print textures, soft lighting, professional artist studio vibe" />
</div>
<!-- Decorative element -->
<div class="absolute -top-12 -right-12 w-48 h-48 bg-coral/10 rounded-full blur-3xl"></div>
</div>
</div>
</section>
<!-- block:end info-section -->
<!-- block:start reviews-section -->
<section id="reviews" class="py-32 px-8 bg-white overflow-hidden">
<div class="max-w-7xl mx-auto">
<div class="flex flex-col md:flex-row justify-between items-end mb-24 gap-8">
<h2 class="font-artist text-6xl md:text-8xl text-slate-900 leading-none">Collector<br><span class="text-coral">Stories</span></h2>
<div class="flex gap-4">
<button class="w-16 h-16 rounded-full border-2 border-slate-100 flex items-center justify-center hover:bg-coral hover:text-white hover:border-coral transition-all duration-300">
<i class="fa-solid fa-arrow-left"></i>
</button>
<button class="w-16 h-16 rounded-full border-2 border-slate-100 flex items-center justify-center hover:bg-coral hover:text-white hover:border-coral transition-all duration-300">
<i class="fa-solid fa-arrow-right"></i>
</button>
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
<div class="bg-gray-50 p-12 rounded-[3rem] relative">
<span class="text-coral font-artist text-8xl absolute top-8 left-8 opacity-20">"</span>
<p class="text-2xl font-medium mb-12 relative z-10 leading-relaxed italic">"Adding a Milena Sky original to my living room transformed the entire energy of the house. The colors are so much more vibrant in person."</p>
<div class="flex items-center gap-4">
<img src="https://storage.googleapis.com/uxpilot-auth.appspot.com/avatars/avatar-5.jpg" class="w-14 h-14 rounded-full border-2 border-white shadow-md" alt="Collector">
<div>
<p class="font-bold">Sarah Vanderwaal</p>
<p class="text-xs text-gray-400 uppercase tracking-widest font-bold">New York, USA</p>
</div>
</div>
</div>
<div class="bg-gray-50 p-12 rounded-[3rem] relative mt-8 md:mt-16">
<span class="text-coral font-artist text-8xl absolute top-8 left-8 opacity-20">"</span>
<p class="text-2xl font-medium mb-12 relative z-10 leading-relaxed italic">"The curation process at SkyGallery is impeccable. I've discovered three of my now-favorite artists through their weekly spotlights."</p>
<div class="flex items-center gap-4">
<img src="https://storage.googleapis.com/uxpilot-auth.appspot.com/avatars/avatar-2.jpg" class="w-14 h-14 rounded-full border-2 border-white shadow-md" alt="Collector">
<div>
<p class="font-bold">Marcus Thorne</p>
<p class="text-xs text-gray-400 uppercase tracking-widest font-bold">London, UK</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- block:end reviews-section -->
<!-- block:start pricing-section -->
<section id="pricing" class="py-32 px-8 bg-gray-50">
<div class="max-w-7xl mx-auto text-center mb-24">
<h2 class="font-artist text-7xl text-coral mb-4">Bring Art Home</h2>
<p class="text-gray-400 font-bold uppercase tracking-widest text-xs">Exhibition Grade Limited Editions</p>
</div>
<div class="max-w-5xl mx-auto grid grid-cols-1 md:grid-cols-3 gap-8">
<!-- Studio Print -->
<div class="bg-white p-10 rounded-[2.5rem] shadow-sm hover:shadow-2xl transition-all group flex flex-col border border-gray-100">
<h3 class="font-artist text-3xl mb-2">Studio</h3>
<p class="text-gray-400 text-sm mb-8">Standard Edition Print</p>
<div class="mb-12">
<span class="text-5xl font-artist text-coral">$85</span>
<span class="text-xs text-gray-400 font-bold ml-2">/ per print</span>
</div>
<ul class="space-y-4 mb-12 flex-1 text-sm text-gray-600">
<li class="flex items-center gap-3"><i class="fa-solid fa-check text-coral"></i> High-quality Matte Paper</li>
<li class="flex items-center gap-3"><i class="fa-solid fa-check text-coral"></i> Standard A3 Size</li>
<li class="flex items-center gap-3"><i class="fa-solid fa-check text-coral"></i> Open Edition</li>
</ul>
<button class="w-full py-4 bg-gray-50 rounded-full font-bold group-hover:bg-coral group-hover:text-white transition-all">Add to Bag</button>
</div>
<!-- Exhibition Print -->
<div class="bg-coral p-10 rounded-[2.5rem] shadow-2xl transform md:-translate-y-8 flex flex-col relative overflow-hidden">
<div class="absolute top-6 right-6 bg-white/20 px-3 py-1 rounded-full text-[10px] text-white font-bold uppercase tracking-widest">Collector's Choice</div>
<h3 class="font-artist text-3xl mb-2 text-white">Gallery</h3>
<p class="text-white/60 text-sm mb-8">Limited Edition Signatures</p>
<div class="mb-12">
<span class="text-5xl font-artist text-white">$240</span>
<span class="text-xs text-white/60 font-bold ml-2">/ per print</span>
</div>
<ul class="space-y-4 mb-12 flex-1 text-sm text-white/80">
<li class="flex items-center gap-3"><i class="fa-solid fa-check"></i> Hand-Signed by Artist</li>
<li class="flex items-center gap-3"><i class="fa-solid fa-check"></i> Hahnemühle German Etching</li>
<li class="flex items-center gap-3"><i class="fa-solid fa-check"></i> Edition of 100 only</li>
</ul>
<button class="w-full py-4 bg-white text-coral rounded-full font-bold hover:bg-slate-900 hover:text-white transition-all">Secure Edition</button>
<i class="fa-solid fa-star absolute -bottom-10 -right-10 text-white opacity-10 text-9xl"></i>
</div>
<!-- Masterpiece -->
<div class="bg-white p-10 rounded-[2.5rem] shadow-sm hover:shadow-2xl transition-all group flex flex-col border border-gray-100">
<h3 class="font-artist text-3xl mb-2">Original</h3>
<p class="text-gray-400 text-sm mb-8">Hand-Painted Canvas</p>
<div class="mb-12">
<span class="text-5xl font-artist text-coral">$1,850</span>
<span class="text-xs text-gray-400 font-bold ml-2">/ one-of-one</span>
</div>
<ul class="space-y-4 mb-12 flex-1 text-sm text-gray-600">
<li class="flex items-center gap-3"><i class="fa-solid fa-check text-coral"></i> Original Mixed Media</li>
<li class="flex items-center gap-3"><i class="fa-solid fa-check text-coral"></i> Large Format Canvas</li>
<li class="flex items-center gap-3"><i class="fa-solid fa-check text-coral"></i> Certificate of Auth.</li>
</ul>
<button class="w-full py-4 bg-gray-50 rounded-full font-bold group-hover:bg-coral group-hover:text-white transition-all">Inquire Now</button>
</div>
</div>
</section>
<!-- block:end pricing-section -->
<!-- block:start footer -->
<footer class="bg-white py-24 px-8 border-t border-gray-100">
<div class="max-w-7xl mx-auto flex flex-col md:flex-row justify-between items-center gap-12">
<div class="flex flex-col gap-6">
<div class="flex items-center gap-2">
<span class="text-3xl font-bold text-coral">SkyGallery.</span>
</div>
<p class="text-gray-400 text-sm max-w-xs">
Curated illustrations and digital art from independent artists worldwide.
</p>
<div class="flex gap-4">
<a href="#" class="w-10 h-10 rounded-full bg-white flex items-center justify-center shadow-sm hover:text-coral transition">
<i class="fa-brands fa-instagram"></i>
</a>
<a href="#" class="w-10 h-10 rounded-full bg-white flex items-center justify-center shadow-sm hover:text-coral transition">
<i class="fa-brands fa-pinterest"></i>
</a>
<a href="#" class="w-10 h-10 rounded-full bg-white flex items-center justify-center shadow-sm hover:text-coral transition">
<i class="fa-brands fa-behance"></i>
</a>
</div>
</div>
<div class="grid grid-cols-2 md:grid-cols-3 gap-12 text-sm">
<div>
<h4 class="font-bold mb-4 uppercase tracking-widest text-[10px] text-gray-400">Exhibitions</h4>
<ul class="space-y-2">
<li><a href="#" class="hover:text-coral transition">Digital Arts</a></li>
<li><a href="#" class="hover:text-coral transition">Modern Canvas</a></li>
<li><a href="#" class="hover:text-coral transition">Current Collection</a></li>
</ul>
</div>
<div>
<h4 class="font-bold mb-4 uppercase tracking-widest text-[10px] text-gray-400">Services</h4>
<ul class="space-y-2">
<li><a href="#" class="hover:text-coral transition">Print Shop</a></li>
<li><a href="#" class="hover:text-coral transition">Licensing</a></li>
<li><a href="#" class="hover:text-coral transition">Custom Art</a></li>
</ul>
</div>
<div>
<h4 class="font-bold mb-4 uppercase tracking-widest text-[10px] text-gray-400">Contact</h4>
<ul class="space-y-2">
<li><a href="#" class="hover:text-coral transition">Email Us</a></li>
<li><a href="#" class="hover:text-coral transition">Support</a></li>
<li><a href="#" class="hover:text-coral transition">Press</a></li>
</ul>
</div>
</div>
</div>
<div class="max-w-7xl mx-auto mt-24 pt-8 border-t border-gray-200 flex flex-col md:flex-row justify-between items-center gap-4 text-[10px] text-gray-400 font-bold uppercase tracking-widest">
<span>© 2024 SkyGallery Artist Platform</span>
<div class="flex gap-8">
<a href="#" class="hover:text-coral">Privacy Policy</a>
<a href="#" class="hover:text-coral">Terms of Service</a>
</div>
</div>
</footer>
<!-- block:end footer -->
</body>
</html>
Unlimited access to all templates
Unlock our entire library of premium UI kits, dashboards, and landing pages with a single yearly payment.
€60
per year
Get Unlimited Access
