<!DOCTYPE html>
<html class="dark" lang="en"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>Referral & Invite Friends Hub</title>
<!-- Google Fonts: Spline Sans -->
<link href="https://fonts.googleapis.com" rel="preconnect"/>
<link crossorigin="" href="https://fonts.gstatic.com" rel="preconnect"/>
<link href="https://fonts.googleapis.com/css2?family=Spline+Sans:wght@300;400;500;600;700&display=swap" rel="stylesheet"/>
<!-- Material Symbols -->
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
<!-- Tailwind CSS with Config -->
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<script id="tailwind-config">
tailwind.config = {
darkMode: "class",
theme: {
extend: {
colors: {
"primary": "#5b13ec",
"primary-dark": "#4a0bc4",
"background-light": "#f6f6f8",
"background-dark": "#161022",
"surface-dark": "#231e30", // Slightly lighter than background-dark for cards
},
fontFamily: {
"display": ["Spline Sans", "sans-serif"]
},
borderRadius: {"DEFAULT": "1rem", "lg": "2rem", "xl": "3rem", "full": "9999px"},
},
},
}
</script>
<style>
body {
font-family: "Spline Sans", sans-serif;
}
/* Custom scrollbar for webkit */
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
background: #161022;
}
::-webkit-scrollbar-thumb {
background: #2e2839;
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: #5b13ec;
}
</style>
</head>
<body class="bg-background-light dark:bg-background-dark min-h-screen flex flex-col font-display text-slate-900 dark:text-slate-100 antialiased overflow-x-hidden">
<!-- Top Navigation -->
<header class="sticky top-0 z-50 flex items-center justify-between whitespace-nowrap border-b border-solid border-slate-200 dark:border-[#2e2839] bg-background-light/95 dark:bg-[#131118]/95 backdrop-blur px-6 lg:px-10 py-3">
<div class="flex items-center gap-4 text-primary dark:text-white">
<div class="size-8 flex items-center justify-center rounded-full bg-primary/10 dark:bg-primary/20 text-primary">
<span class="material-symbols-outlined">sports_esports</span>
</div>
<h2 class="text-slate-900 dark:text-white text-xl font-bold leading-tight tracking-[-0.015em]">Quiz Portal</h2>
</div>
<div class="hidden lg:flex flex-1 justify-end gap-8">
<div class="flex items-center gap-9">
<a class="text-slate-600 hover:text-primary dark:text-slate-300 dark:hover:text-white text-sm font-medium transition-colors" href="#">Home</a>
<a class="text-slate-600 hover:text-primary dark:text-slate-300 dark:hover:text-white text-sm font-medium transition-colors" href="#">Quizzes</a>
<a class="text-slate-600 hover:text-primary dark:text-slate-300 dark:hover:text-white text-sm font-medium transition-colors" href="#">Leaderboard</a>
<a class="text-slate-600 hover:text-primary dark:text-slate-300 dark:hover:text-white text-sm font-medium transition-colors" href="#">Profile</a>
</div>
<div class="flex gap-2">
<button class="flex items-center justify-center overflow-hidden rounded-full h-10 px-6 bg-primary hover:bg-primary-dark transition-colors text-white text-sm font-bold shadow-lg shadow-primary/25">
<span class="truncate">Login</span>
</button>
<button class="flex items-center justify-center overflow-hidden rounded-full h-10 px-6 bg-slate-200 dark:bg-[#2e2839] hover:bg-slate-300 dark:hover:bg-[#3f374e] transition-colors text-slate-900 dark:text-white text-sm font-bold">
<span class="truncate">Sign Up</span>
</button>
</div>
</div>
<button class="lg:hidden p-2 text-slate-900 dark:text-white">
<span class="material-symbols-outlined">menu</span>
</button>
</header>
<!-- Main Content Area -->
<main class="flex-grow w-full max-w-[1440px] mx-auto px-4 lg:px-10 py-8 lg:py-12">
<div class="grid grid-cols-1 xl:grid-cols-12 gap-8 h-full">
<!-- Left Column: Invite & Stats (8 cols) -->
<div class="xl:col-span-8 flex flex-col gap-8">
<!-- Hero / Invite Card -->
<div class="relative overflow-hidden rounded-xl bg-surface-dark border border-[#2e2839] shadow-xl">
<!-- Background Decoration -->
<div class="absolute -top-24 -right-24 w-64 h-64 bg-primary/20 rounded-full blur-[80px]"></div>
<div class="absolute bottom-0 left-0 w-full h-1 bg-gradient-to-r from-transparent via-primary to-transparent opacity-50"></div>
<div class="flex flex-col md:flex-row gap-8 p-8 md:p-10 relative z-10">
<!-- Text Content -->
<div class="flex-1 flex flex-col justify-center gap-6">
<div class="space-y-2">
<div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-primary/10 border border-primary/20 w-fit">
<span class="material-symbols-outlined text-primary text-sm">diamond</span>
<span class="text-xs font-bold text-primary uppercase tracking-wider">Referral Program</span>
</div>
<h1 class="text-4xl md:text-5xl font-black text-white leading-[1.1]">
Level Up Your <span class="text-transparent bg-clip-text bg-gradient-to-r from-primary to-purple-400">Squad!</span>
</h1>
<p class="text-slate-400 text-lg max-w-md leading-relaxed">
Invite friends to the arena. Get <span class="text-white font-bold">500 Coins</span> for every friend who joins and completes their first quiz.
</p>
</div>
<!-- Invite Code Component -->
<div class="flex flex-col gap-3 max-w-md">
<label class="text-sm font-medium text-slate-300 ml-1">Your Unique Invite Code</label>
<div class="flex w-full items-center rounded-full bg-[#131118] border border-[#2e2839] p-1 pr-1 focus-within:border-primary/50 transition-colors h-14 md:h-16 shadow-inner">
<div class="pl-5 flex items-center text-slate-500">
<span class="material-symbols-outlined">key</span>
</div>
<input class="bg-transparent border-none text-white text-lg md:text-xl font-mono font-bold tracking-widest flex-1 px-4 focus:ring-0 placeholder-slate-600" readonly="" value="GAMER-8821"/>
<button class="flex items-center gap-2 bg-primary hover:bg-primary-dark text-white rounded-full px-6 h-full font-bold transition-all active:scale-95 shadow-lg shadow-primary/25">
<span class="hidden sm:inline">Copy</span>
<span class="material-symbols-outlined text-sm">content_copy</span>
</button>
</div>
</div>
</div>
<!-- Hero Image/Graphic -->
<div class="w-full md:w-1/3 flex items-center justify-center relative">
<!-- Abstract 3D Gaming Illustration -->
<div class="relative w-full aspect-square md:aspect-auto md:h-full max-h-[300px] rounded-lg overflow-hidden bg-gradient-to-br from-surface-dark to-[#131118] border border-[#2e2839]/50 flex items-center justify-center">
<div class="absolute inset-0 bg-[url('https://images.unsplash.com/photo-1550745165-9bc0b252726f?q=80&w=2070&auto=format&fit=crop')] bg-cover bg-center opacity-40 mix-blend-overlay" data-alt="Abstract retro gaming console background"></div>
<div class="relative z-10 flex flex-col items-center gap-4 animate-float">
<div class="size-24 rounded-2xl bg-gradient-to-br from-primary to-purple-600 shadow-[0_0_40px_-10px_rgba(91,19,236,0.6)] flex items-center justify-center rotate-6 border border-white/10">
<span class="material-symbols-outlined text-white text-5xl">diversity_3</span>
</div>
<div class="px-4 py-2 bg-white/10 backdrop-blur-md rounded-full border border-white/10 text-white font-bold text-sm shadow-xl">
+500 Coins
</div>
</div>
</div>
</div>
</div>
<!-- Social Share Dock -->
<div class="px-8 pb-8 pt-4 border-t border-[#2e2839]">
<p class="text-sm font-medium text-slate-400 mb-4">Share directly via</p>
<div class="flex gap-4 flex-wrap">
<button class="group flex items-center justify-center size-12 rounded-full bg-[#2e2839] hover:bg-[#25D366] hover:text-white transition-all duration-300 border border-white/5">
<span class="material-symbols-outlined group-hover:scale-110 transition-transform">chat</span> <!-- Placeholder for WhatsApp -->
</button>
<button class="group flex items-center justify-center size-12 rounded-full bg-[#2e2839] hover:bg-[#0088cc] hover:text-white transition-all duration-300 border border-white/5">
<span class="material-symbols-outlined group-hover:scale-110 transition-transform">send</span> <!-- Placeholder for Telegram -->
</button>
<button class="group flex items-center justify-center size-12 rounded-full bg-[#2e2839] hover:bg-black hover:text-white transition-all duration-300 border border-white/5">
<span class="material-symbols-outlined group-hover:scale-110 transition-transform">close</span> <!-- Placeholder for X/Twitter -->
</button>
<button class="group flex items-center justify-center size-12 rounded-full bg-[#2e2839] hover:bg-primary hover:text-white transition-all duration-300 border border-white/5">
<span class="material-symbols-outlined group-hover:scale-110 transition-transform">mail</span>
</button>
<button class="flex items-center gap-2 h-12 px-6 rounded-full bg-[#2e2839] hover:bg-white/10 text-white font-medium transition-colors ml-auto border border-white/5">
<span>More Options</span>
<span class="material-symbols-outlined text-sm">more_horiz</span>
</button>
</div>
</div>
</div>
<!-- Stats & Progress Section -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<!-- Progress Card -->
<div class="bg-surface-dark border border-[#2e2839] rounded-xl p-6 relative overflow-hidden group hover:border-primary/30 transition-colors">
<div class="flex items-center justify-between mb-6">
<h3 class="text-white font-bold text-lg">Your Progress</h3>
<span class="px-2 py-1 rounded bg-green-500/20 text-green-400 text-xs font-bold border border-green-500/20">ACTIVE</span>
</div>
<div class="flex items-center gap-8 mb-6">
<div class="relative size-20">
<svg class="size-full -rotate-90" viewbox="0 0 36 36" xmlns="http://www.w3.org/2000/svg">
<circle class="stroke-[#2e2839]" cx="18" cy="18" fill="none" r="16" stroke-width="3"></circle>
<circle class="stroke-primary" cx="18" cy="18" fill="none" r="16" stroke-dasharray="100" stroke-dashoffset="40" stroke-linecap="round" stroke-width="3"></circle>
</svg>
<div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 flex flex-col items-center">
<span class="text-2xl font-black text-white">3</span>
<span class="text-[10px] uppercase text-slate-500 font-bold">Friends</span>
</div>
</div>
<div class="flex flex-col gap-1">
<div class="text-3xl font-black text-white">1,500</div>
<div class="text-sm text-slate-400 font-medium">Coins Earned</div>
</div>
</div>
<div class="space-y-3">
<div class="flex items-center justify-between text-xs font-bold text-slate-500 uppercase tracking-wider">
<span>Next Milestone</span>
<span>5 Friends</span>
</div>
<div class="h-2 w-full bg-[#131118] rounded-full overflow-hidden">
<div class="h-full bg-gradient-to-r from-primary to-purple-400 w-3/5 rounded-full shadow-[0_0_10px_rgba(91,19,236,0.5)]"></div>
</div>
<p class="text-xs text-slate-400">Invite 2 more friends to unlock the <span class="text-white font-bold">Super Chest</span>.</p>
</div>
</div>
<!-- Recent Activity Card -->
<div class="bg-surface-dark border border-[#2e2839] rounded-xl p-6 relative flex flex-col h-full hover:border-primary/30 transition-colors">
<h3 class="text-white font-bold text-lg mb-6">Recent Joins</h3>
<div class="flex-1 flex flex-col gap-4">
<!-- User Item -->
<div class="flex items-center gap-3 p-3 rounded-lg bg-[#2e2839]/50 border border-white/5">
<div class="size-10 rounded-full bg-blue-500/20 text-blue-400 flex items-center justify-center font-bold text-sm border border-blue-500/20">JD</div>
<div class="flex-1 min-w-0">
<p class="text-white font-bold text-sm truncate">JohnDoe_99</p>
<p class="text-slate-400 text-xs">Joined 2h ago</p>
</div>
<div class="flex items-center gap-1 text-green-400 text-xs font-bold bg-green-500/10 px-2 py-1 rounded">
<span>+500</span>
<span class="material-symbols-outlined text-[14px]">monetization_on</span>
</div>
</div>
<!-- User Item -->
<div class="flex items-center gap-3 p-3 rounded-lg bg-[#2e2839]/50 border border-white/5">
<img class="size-10 rounded-full object-cover border border-white/10" data-alt="User avatar of Sarah" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAZdHLV_s4IZnQp5V-8fH5Vm2-f0pUXhoO1UicXAEj-AjKzHfzmLEfXNqCTSj6Tgml_C42CdkM6eQsQg_25cqAMfPSj0Z_u9TMFeokMwP2lQ-OKvPmSeK0r-AvCmnKuf4BHIT_OB5oiCdIZbeMhkgV890vYPuKZ8Hi67TRu_m_f2K4pAfTIFh47ncJIGIPMfmX-Scn00y94LDHt2HnLAnltnVUvEe1CBkvQlvhR8ETrPx8zFqj07aUqqoJ9W06urs9YzOfHT4IxpzJs"/>
<div class="flex-1 min-w-0">
<p class="text-white font-bold text-sm truncate">SarahWarrior</p>
<p class="text-slate-400 text-xs">Joined 5h ago</p>
</div>
<div class="flex items-center gap-1 text-green-400 text-xs font-bold bg-green-500/10 px-2 py-1 rounded">
<span>+500</span>
<span class="material-symbols-outlined text-[14px]">monetization_on</span>
</div>
</div>
<!-- User Item -->
<div class="flex items-center gap-3 p-3 rounded-lg bg-[#2e2839]/50 border border-white/5 opacity-50">
<div class="size-10 rounded-full bg-slate-700 flex items-center justify-center">
<span class="material-symbols-outlined text-slate-500 text-lg">person</span>
</div>
<div class="flex-1 min-w-0">
<p class="text-slate-500 font-bold text-sm">Waiting for invite...</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Right Column: Leaderboard (4 cols) -->
<div class="xl:col-span-4 h-full">
<div class="bg-surface-dark border border-[#2e2839] rounded-xl p-6 h-full flex flex-col sticky top-24">
<div class="flex items-center justify-between mb-6">
<div class="flex items-center gap-2">
<span class="material-symbols-outlined text-yellow-500">trophy</span>
<h3 class="text-white font-bold text-lg">Top Inviters</h3>
</div>
<button class="text-xs font-bold text-primary hover:text-white transition-colors">VIEW ALL</button>
</div>
<!-- Top 3 Podium Visual (Abstract) -->
<div class="flex items-end justify-center gap-2 mb-8 px-4 py-4 border-b border-[#2e2839]">
<!-- 2nd Place -->
<div class="flex flex-col items-center gap-2">
<div class="relative">
<img class="size-12 rounded-full border-2 border-slate-400 object-cover" data-alt="Avatar of QuizMaster" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDYwhk0S4Ab3w25vIw5s1pYxbiS6gBekeQKnCUC2yaNF-0U9bvtobz5Vhr3YwYIkpsvIRL3gvRYCTD8KjdyGNcq8Q4-8RX4j1Do1Twi2ndMsBQuVLMvQDCRH5ry8fuc1ZLcVuy86rtR8POtLC6BEbR3y154lw9PIoYArh_QpCwzfLm6NCGF0hLbP9BoPd-elCirMJbwssGIU7yO3itn0B1Z_zFjUSut8m6CRNo02INcgilVoEMzvuMVsCbgOmiBKkKB60of40X92G1O"/>
<div class="absolute -bottom-2 -right-1 size-5 bg-slate-400 rounded-full flex items-center justify-center text-[10px] font-black text-slate-900 border border-surface-dark">2</div>
</div>
<div class="text-center">
<div class="text-xs font-bold text-white">QuizM</div>
<div class="text-[10px] font-bold text-slate-400">48 Ref</div>
</div>
<div class="w-full h-12 bg-slate-400/20 rounded-t-lg"></div>
</div>
<!-- 1st Place -->
<div class="flex flex-col items-center gap-2">
<div class="relative">
<div class="absolute -top-6 text-yellow-400">
<span class="material-symbols-outlined text-2xl">crown</span>
</div>
<img class="size-16 rounded-full border-2 border-yellow-400 object-cover shadow-[0_0_15px_rgba(250,204,21,0.4)]" data-alt="Avatar of AlexG" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDjCSbUSsM9X3iva9At5RwA3PjygFaVcLAV9z_pJ_cc_rZqdZ31tJAM0BuVRvi7t-8ZfB3kgI_K49GV3bzJT6qJ4Wijw8EUMA0ePF2YK8w5wYaDkgtga8ZGhS2YqLDXGG_Y9Aooms4a-taSKwO60ziNZfEeVf6295eRPyi9wZg-3S4JzP7qz2k6a6gQ1GzfC4gwuHI6kPV_5dW8-DIcFNQqlZJHDuWNnsV18GuVo-mwAkOu0xIQ90pYJkGKLg6OjWnFMkZJttEMS-2s"/>
<div class="absolute -bottom-2 -right-1 size-6 bg-yellow-400 rounded-full flex items-center justify-center text-xs font-black text-yellow-900 border border-surface-dark">1</div>
</div>
<div class="text-center">
<div class="text-sm font-bold text-white">AlexG</div>
<div class="text-xs font-bold text-yellow-500">52 Ref</div>
</div>
<div class="w-full h-16 bg-yellow-400/20 rounded-t-lg relative overflow-hidden">
<div class="absolute inset-0 bg-gradient-to-t from-yellow-400/10 to-transparent"></div>
</div>
</div>
<!-- 3rd Place -->
<div class="flex flex-col items-center gap-2">
<div class="relative">
<img class="size-12 rounded-full border-2 border-amber-700 object-cover" data-alt="Avatar of Sarah_X" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCz1x6UXDocSzMhyjADNKl4IxRwauI8NldPaQmIvck9YN754MwBsxco6Vu6tsysK4QSOPhQVSA4wc619UkFkzHWOVyw-49daHkaTZVIDs6OolsF4dSIsXKEpq3yCXdJkf-RJ2Mo6TteSyD-GqrrpOp-LHs_POMuEWEi8m595bdNzT74HT42x9Sn5DY0t8Bh6e34xtiwqO6ctNHJ64f46LsUV85OTWuY-V9HXtV3c4i0a8UROOhTJWmLaOilIPH3jV6IHiBJJTZBJje3"/>
<div class="absolute -bottom-2 -right-1 size-5 bg-amber-700 rounded-full flex items-center justify-center text-[10px] font-black text-amber-100 border border-surface-dark">3</div>
</div>
<div class="text-center">
<div class="text-xs font-bold text-white">Sarah_X</div>
<div class="text-[10px] font-bold text-slate-400">41 Ref</div>
</div>
<div class="w-full h-8 bg-amber-700/20 rounded-t-lg"></div>
</div>
</div>
<!-- List Items 4-10 -->
<div class="flex flex-col gap-1 overflow-y-auto pr-2 custom-scrollbar flex-1 max-h-[400px]">
<!-- Item -->
<div class="flex items-center justify-between p-3 rounded-lg hover:bg-[#2e2839] transition-colors group cursor-pointer">
<div class="flex items-center gap-3">
<span class="text-slate-500 font-mono font-bold text-sm w-4">4</span>
<div class="size-8 rounded-full bg-pink-500/20 text-pink-400 flex items-center justify-center text-xs font-bold">DK</div>
<span class="text-slate-300 font-medium text-sm group-hover:text-white">DriftKing</span>
</div>
<span class="text-slate-400 font-bold text-xs">38</span>
</div>
<!-- Item -->
<div class="flex items-center justify-between p-3 rounded-lg hover:bg-[#2e2839] transition-colors group cursor-pointer">
<div class="flex items-center gap-3">
<span class="text-slate-500 font-mono font-bold text-sm w-4">5</span>
<img class="size-8 rounded-full object-cover" data-alt="Avatar of PixelMage" src="https://lh3.googleusercontent.com/aida-public/AB6AXuA1tbW1_BvU0mIUh6copuR7XpMgH-TYMFypZAwalJKb4qwAWtWy4yHsuIb83neTco7sgEVSjmymE2DF8vfv3RQWhJ2e9Qwhd65_ALtnZ6iyKL91rptkpPM2Wtq5I8U-lysnAFJRsilzAYn3oSW7nprDumrNk17uSGZfNiG5FG1cOmN6nqGamW5gHOcfhzZ2LxnVzr5Wp1VdUNQKiaYSxxu9mvWzhnDh32vrA5A_cb7V_gFsBiQfeCGLySJbcDiKXuXgirSfnSerQiEM"/>
<span class="text-slate-300 font-medium text-sm group-hover:text-white">PixelMage</span>
</div>
<span class="text-slate-400 font-bold text-xs">35</span>
</div>
<!-- Item -->
<div class="flex items-center justify-between p-3 rounded-lg hover:bg-[#2e2839] transition-colors group cursor-pointer">
<div class="flex items-center gap-3">
<span class="text-slate-500 font-mono font-bold text-sm w-4">6</span>
<div class="size-8 rounded-full bg-emerald-500/20 text-emerald-400 flex items-center justify-center text-xs font-bold">V</div>
<span class="text-slate-300 font-medium text-sm group-hover:text-white">Victor_77</span>
</div>
<span class="text-slate-400 font-bold text-xs">31</span>
</div>
<!-- Item -->
<div class="flex items-center justify-between p-3 rounded-lg hover:bg-[#2e2839] transition-colors group cursor-pointer">
<div class="flex items-center gap-3">
<span class="text-slate-500 font-mono font-bold text-sm w-4">7</span>
<div class="size-8 rounded-full bg-orange-500/20 text-orange-400 flex items-center justify-center text-xs font-bold">N</div>
<span class="text-slate-300 font-medium text-sm group-hover:text-white">NeonRider</span>
</div>
<span class="text-slate-400 font-bold text-xs">29</span>
</div>
</div>
<!-- User Rank sticky bottom -->
<div class="mt-4 pt-4 border-t border-[#2e2839]">
<div class="flex items-center justify-between p-3 rounded-lg bg-primary/10 border border-primary/20">
<div class="flex items-center gap-3">
<span class="text-primary font-mono font-bold text-sm w-4">42</span>
<div class="size-8 rounded-full bg-primary text-white flex items-center justify-center text-xs font-bold">ME</div>
<span class="text-white font-bold text-sm">You</span>
</div>
<span class="text-white font-bold text-xs">3 Ref</span>
</div>
</div>
</div>
</div>
</div>
</main>
<!-- Footer -->
<footer class="bg-surface-dark border-t border-[#2e2839] py-12 px-6 lg:px-10 mt-auto">
<div class="flex flex-col md:flex-row justify-between items-center gap-6 max-w-[1440px] mx-auto">
<div class="flex items-center gap-3 text-slate-400">
<div class="size-6 flex items-center justify-center rounded-full bg-slate-800">
<span class="material-symbols-outlined text-sm">sports_esports</span>
</div>
<span class="text-sm font-bold">Quiz Portal © 2023</span>
</div>
<div class="flex gap-8">
<a class="text-slate-500 hover:text-white text-sm transition-colors" href="#">Terms</a>
<a class="text-slate-500 hover:text-white text-sm transition-colors" href="#">Privacy</a>
<a class="text-slate-500 hover:text-white text-sm transition-colors" href="#">Support</a>
</div>
<div class="flex gap-4">
<a class="text-slate-500 hover:text-primary transition-colors" href="#"><span class="material-symbols-outlined">public</span></a>
<a class="text-slate-500 hover:text-primary transition-colors" href="#"><span class="material-symbols-outlined">smart_display</span></a>
</div>
</div>
</footer>
</body></html>