add splitted layouts
This commit is contained in:
Tilman Behrend
parent
9fe2bcade3
commit
f01a0a967f
12 changed files with 2909 additions and 0 deletions
428
documentation/layout/index.html
Normal file
428
documentation/layout/index.html
Normal file
|
|
@ -0,0 +1,428 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>VΛYV App - Wave Flow Duplicate</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<script src="https://unpkg.com/lucide@latest"></script>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=Dancing+Script:wght@600;700&family=Inter:wght@300;400;500;600;700&display=swap"
|
||||
rel="stylesheet">
|
||||
<style>
|
||||
.bg-app-gradient {
|
||||
background: linear-gradient(180deg, #2e1065 0%, #2563eb 45%, #86efac 100%);
|
||||
}
|
||||
|
||||
.no-scrollbar::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.no-scrollbar {
|
||||
-ms-overflow-style: none;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
</style>
|
||||
<link id="all-fonts-link-font-geist" rel="stylesheet"
|
||||
href="https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700&display=swap">
|
||||
<style id="all-fonts-style-font-geist">
|
||||
.font-geist {
|
||||
font-family: 'Geist', sans-serif !important;
|
||||
}
|
||||
</style>
|
||||
<link id="all-fonts-link-font-roboto" rel="stylesheet"
|
||||
href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;600;700&display=swap">
|
||||
<style id="all-fonts-style-font-roboto">
|
||||
.font-roboto {
|
||||
font-family: 'Roboto', sans-serif !important;
|
||||
}
|
||||
</style>
|
||||
<link id="all-fonts-link-font-montserrat" rel="stylesheet"
|
||||
href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap">
|
||||
<style id="all-fonts-style-font-montserrat">
|
||||
.font-montserrat {
|
||||
font-family: 'Montserrat', sans-serif !important;
|
||||
}
|
||||
</style>
|
||||
<link id="all-fonts-link-font-poppins" rel="stylesheet"
|
||||
href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap">
|
||||
<style id="all-fonts-style-font-poppins">
|
||||
.font-poppins {
|
||||
font-family: 'Poppins', sans-serif !important;
|
||||
}
|
||||
</style>
|
||||
<link id="all-fonts-link-font-playfair" rel="stylesheet"
|
||||
href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700;900&display=swap">
|
||||
<style id="all-fonts-style-font-playfair">
|
||||
.font-playfair {
|
||||
font-family: 'Playfair Display', serif !important;
|
||||
}
|
||||
</style>
|
||||
<link id="all-fonts-link-font-instrument-serif" rel="stylesheet"
|
||||
href="https://fonts.googleapis.com/css2?family=Instrument+Serif:wght@400;500;600;700&display=swap">
|
||||
<style id="all-fonts-style-font-instrument-serif">
|
||||
.font-instrument-serif {
|
||||
font-family: 'Instrument Serif', serif !important;
|
||||
}
|
||||
</style>
|
||||
<link id="all-fonts-link-font-merriweather" rel="stylesheet"
|
||||
href="https://fonts.googleapis.com/css2?family=Merriweather:wght@300;400;700;900&display=swap">
|
||||
<style id="all-fonts-style-font-merriweather">
|
||||
.font-merriweather {
|
||||
font-family: 'Merriweather', serif !important;
|
||||
}
|
||||
</style>
|
||||
<link id="all-fonts-link-font-bricolage" rel="stylesheet"
|
||||
href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:wght@300;400;500;600;700&display=swap">
|
||||
<style id="all-fonts-style-font-bricolage">
|
||||
.font-bricolage {
|
||||
font-family: 'Bricolage Grotesque', sans-serif !important;
|
||||
}
|
||||
</style>
|
||||
<link id="all-fonts-link-font-jakarta" rel="stylesheet"
|
||||
href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap">
|
||||
<style id="all-fonts-style-font-jakarta">
|
||||
.font-jakarta {
|
||||
font-family: 'Plus Jakarta Sans', sans-serif !important;
|
||||
}
|
||||
</style>
|
||||
<link id="all-fonts-link-font-manrope" rel="stylesheet"
|
||||
href="https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700;800&display=swap">
|
||||
<style id="all-fonts-style-font-manrope">
|
||||
.font-manrope {
|
||||
font-family: 'Manrope', sans-serif !important;
|
||||
}
|
||||
</style>
|
||||
<link id="all-fonts-link-font-space-grotesk" rel="stylesheet"
|
||||
href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap">
|
||||
<style id="all-fonts-style-font-space-grotesk">
|
||||
.font-space-grotesk {
|
||||
font-family: 'Space Grotesk', sans-serif !important;
|
||||
}
|
||||
</style>
|
||||
<link id="all-fonts-link-font-work-sans" rel="stylesheet"
|
||||
href="https://fonts.googleapis.com/css2?family=Work+Sans:wght@300;400;500;600;700;800&display=swap">
|
||||
<style id="all-fonts-style-font-work-sans">
|
||||
.font-work-sans {
|
||||
font-family: 'Work Sans', sans-serif !important;
|
||||
}
|
||||
</style>
|
||||
<link id="all-fonts-link-font-pt-serif" rel="stylesheet"
|
||||
href="https://fonts.googleapis.com/css2?family=PT+Serif:wght@400;700&display=swap">
|
||||
<style id="all-fonts-style-font-pt-serif">
|
||||
.font-pt-serif {
|
||||
font-family: 'PT Serif', serif !important;
|
||||
}
|
||||
</style>
|
||||
<link id="all-fonts-link-font-geist-mono" rel="stylesheet"
|
||||
href="https://fonts.googleapis.com/css2?family=Geist+Mono:wght@300;400;500;600;700&display=swap">
|
||||
<style id="all-fonts-style-font-geist-mono">
|
||||
.font-geist-mono {
|
||||
font-family: 'Geist Mono', monospace !important;
|
||||
}
|
||||
</style>
|
||||
<link id="all-fonts-link-font-space-mono" rel="stylesheet"
|
||||
href="https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&display=swap">
|
||||
<style id="all-fonts-style-font-space-mono">
|
||||
.font-space-mono {
|
||||
font-family: 'Space Mono', monospace !important;
|
||||
}
|
||||
</style>
|
||||
<link id="all-fonts-link-font-quicksand" rel="stylesheet"
|
||||
href="https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&display=swap">
|
||||
<style id="all-fonts-style-font-quicksand">
|
||||
.font-quicksand {
|
||||
font-family: 'Quicksand', sans-serif !important;
|
||||
}
|
||||
</style>
|
||||
<link id="all-fonts-link-font-nunito" rel="stylesheet"
|
||||
href="https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;500;600;700;800&display=swap">
|
||||
<style id="all-fonts-style-font-nunito">
|
||||
.font-nunito {
|
||||
font-family: 'Nunito', sans-serif !important;
|
||||
}
|
||||
</style>
|
||||
<link id="all-fonts-link-font-newsreader" rel="stylesheet"
|
||||
href="https://fonts.googleapis.com/css2?family=Newsreader:opsz,wght@6..72,400..800&display=swap">
|
||||
<style id="all-fonts-style-font-newsreader">
|
||||
.font-newsreader {
|
||||
font-family: 'Newsreader', serif !important;
|
||||
}
|
||||
</style>
|
||||
<link id="all-fonts-link-font-google-sans-flex" rel="stylesheet"
|
||||
href="https://fonts.googleapis.com/css2?family=Google+Sans+Flex:wght@400;500;600;700&display=swap">
|
||||
<style id="all-fonts-style-font-google-sans-flex">
|
||||
.font-google-sans-flex {
|
||||
font-family: 'Google Sans Flex', sans-serif !important;
|
||||
}
|
||||
</style>
|
||||
<link id="all-fonts-link-font-oswald" rel="stylesheet"
|
||||
href="https://fonts.googleapis.com/css2?family=Oswald:wght@300;400;500;600;700&display=swap">
|
||||
<style id="all-fonts-style-font-oswald">
|
||||
.font-oswald {
|
||||
font-family: 'Oswald', sans-serif !important;
|
||||
}
|
||||
</style>
|
||||
<link id="all-fonts-link-font-dm-sans" rel="stylesheet"
|
||||
href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;600;700&display=swap">
|
||||
<style id="all-fonts-style-font-dm-sans">
|
||||
.font-dm-sans {
|
||||
font-family: 'DM Sans', sans-serif !important;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body
|
||||
class="flex flex-wrap items-center justify-center min-h-screen gap-16 antialiased selection:bg-blue-500/30 text-white font-['Inter'] bg-gray-100 pt-8 pr-8 pb-8 pl-8">
|
||||
|
||||
|
||||
<!-- SCREEN 1: Original with Image Logo -->
|
||||
<div
|
||||
class="relative w-full max-w-[390px] h-[844px] bg-app-gradient shadow-2xl overflow-hidden sm:rounded-[3rem] flex flex-col ring-8 ring-black/5">
|
||||
<!-- Status Bar -->
|
||||
<div class="flex justify-between items-center px-6 pt-4 pb-2 text-xs font-normal z-20 mix-blend-plus-lighter">
|
||||
<span>9:41</span>
|
||||
<div class="flex items-center gap-1.5">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
|
||||
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
|
||||
data-lucide="signal" class="lucide lucide-signal w-3.5 h-3.5">
|
||||
<path d="M2 20h.01"></path>
|
||||
<path d="M7 20v-4"></path>
|
||||
<path d="M12 20v-8"></path>
|
||||
<path d="M17 20V8"></path>
|
||||
<path d="M22 4v16"></path>
|
||||
</svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
|
||||
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
|
||||
data-lucide="wifi" class="lucide lucide-wifi w-3.5 h-3.5">
|
||||
<path d="M12 20h.01"></path>
|
||||
<path d="M2 8.82a15 15 0 0 1 20 0"></path>
|
||||
<path d="M5 12.859a10 10 0 0 1 14 0"></path>
|
||||
<path d="M8.5 16.429a5 5 0 0 1 7 0"></path>
|
||||
</svg>
|
||||
<div class="w-5 h-2.5 border border-white/40 rounded-[3px] relative">
|
||||
<div class="absolute inset-0.5 bg-white rounded-[1px] w-[70%]"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Header -->
|
||||
<div class="flex justify-between items-end px-6 py-2 z-20">
|
||||
<img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/420cb7fa-1091-4075-a321-497c1290e4e2_3840w.png"
|
||||
alt="Logo" class="h-8 w-auto object-contain drop-shadow-md" style="">
|
||||
<div class="flex items-center gap-4">
|
||||
<button
|
||||
class="w-8 h-8 rounded-full bg-white/10 backdrop-blur-sm border border-white/20 flex items-center justify-center hover:bg-white/20 transition-all group overflow-hidden relative">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
|
||||
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
|
||||
data-lucide="sun"
|
||||
class="lucide lucide-sun w-4 h-4 text-yellow-300 absolute transition-all duration-300 scale-100 rotate-0 group-hover:scale-0 group-hover:rotate-90 opacity-100 group-hover:opacity-0">
|
||||
<circle cx="12" cy="12" r="4"></circle>
|
||||
<path d="M12 2v2"></path>
|
||||
<path d="M12 20v2"></path>
|
||||
<path d="m4.93 4.93 1.41 1.41"></path>
|
||||
<path d="m17.66 17.66 1.41 1.41"></path>
|
||||
<path d="M2 12h2"></path>
|
||||
<path d="M20 12h2"></path>
|
||||
<path d="m6.34 17.66-1.41 1.41"></path>
|
||||
<path d="m19.07 4.93-1.41 1.41"></path>
|
||||
</svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
|
||||
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
|
||||
data-lucide="moon"
|
||||
class="lucide lucide-moon w-4 h-4 text-blue-200 absolute transition-all duration-300 scale-0 -rotate-90 group-hover:scale-100 group-hover:rotate-0 opacity-0 group-hover:opacity-100">
|
||||
<path
|
||||
d="M20.985 12.486a9 9 0 1 1-9.473-9.472c.405-.022.617.46.402.803a6 6 0 0 0 8.268 8.268c.344-.215.825-.004.803.401">
|
||||
</path>
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
|
||||
<a href="login.html" class="p-1 hover:bg-white/10 rounded-full transition-colors"><svg
|
||||
xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
|
||||
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
|
||||
data-lucide="menu" class="lucide lucide-menu w-7 h-7 text-white">
|
||||
<path d="M4 5h16"></path>
|
||||
<path d="M4 12h16"></path>
|
||||
<path d="M4 19h16"></path>
|
||||
</svg></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Content Area -->
|
||||
<div class="flex-1 w-full h-full relative">
|
||||
<!-- mt-28 adds 112px, which is 48px more than previous mt-16 (64px) -->
|
||||
<div class="absolute inset-0 w-full h-full mt-28">
|
||||
<svg class="absolute top-0 w-full h-[400px] overflow-visible pointer-events-none z-0"
|
||||
viewBox="0 0 390 400" preserveAspectRatio="none">
|
||||
<defs>
|
||||
<linearGradient id="lineGrad" x1="0%" y1="0%" x2="100%" y2="0%">
|
||||
<stop offset="0%" style="stop-color:white;stop-opacity:0.1"></stop>
|
||||
<stop offset="20%" style="stop-color:white;stop-opacity:0.8"></stop>
|
||||
<stop offset="50%" style="stop-color:white;stop-opacity:1"></stop>
|
||||
<stop offset="80%" style="stop-color:white;stop-opacity:0.8"></stop>
|
||||
<stop offset="100%" style="stop-color:white;stop-opacity:0.1"></stop>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<path d="M -50,180
|
||||
C -20,180 10,100 39,100
|
||||
S 80,240 117,240
|
||||
S 155,60 195,60
|
||||
S 235,240 273,240
|
||||
S 310,180 351,180
|
||||
C 390,180 410,180 440,180" fill="none" stroke="url(#lineGrad)" stroke-width="1.5"
|
||||
stroke-linecap="round"></path>
|
||||
</svg>
|
||||
|
||||
<div
|
||||
class="absolute left-[10%] -translate-x-1/2 top-[100px] flex flex-col-reverse items-center z-10 -translate-y-full pb-0.5">
|
||||
<div
|
||||
class="relative w-3 h-3 rounded-full bg-white shadow-[0_0_15px_rgba(255,255,255,0.8)] z-20 translate-y-1.5">
|
||||
</div>
|
||||
<div class="h-6 w-px bg-white/40 my-1"></div>
|
||||
<div class="flex flex-col items-center opacity-90">
|
||||
<span
|
||||
class="text-[10px] font-semibold text-white/90 bg-white/10 px-2 py-1 rounded-full backdrop-blur-md border border-white/10">21
|
||||
Jun</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="absolute left-[30%] -translate-x-1/2 top-[240px] flex flex-col items-center z-10 -translate-y-[6px]">
|
||||
<div class="relative w-3 h-3 rounded-full bg-white shadow-[0_0_15px_rgba(255,255,255,0.8)] z-20">
|
||||
</div>
|
||||
<div class="h-8 w-px bg-white/40 my-1.5"></div>
|
||||
<div class="relative w-14 h-14 rounded-full border border-white/40 shadow-xl overflow-hidden group">
|
||||
<img src="https://images.unsplash.com/photo-1523580494863-6f3031224c94?ixlib=rb-4.0.3&auto=format&fit=crop&w=150&q=80"
|
||||
alt="Concert" class="w-full h-full object-cover" style="">
|
||||
<div
|
||||
class="absolute bottom-0 w-full bg-gradient-to-t from-black/80 to-transparent pt-3 pb-1 text-center">
|
||||
<span class="text-[9px] font-normal text-white/90">25 Jun</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Link added here -->
|
||||
<a href="entry"
|
||||
class="absolute left-1/2 -translate-x-1/2 top-[60px] flex flex-col-reverse items-center z-20 -translate-y-full pb-1 transition-transform active:scale-95">
|
||||
<div
|
||||
class="relative w-4 h-4 rounded-full bg-white shadow-[0_0_20px_rgba(255,255,255,1)] ring-4 ring-white/10 z-20 translate-y-2">
|
||||
</div>
|
||||
<div class="h-8 w-px bg-white/40 my-1.5"></div>
|
||||
<div
|
||||
class="relative w-20 h-20 rounded-full border-[3px] border-white shadow-2xl overflow-hidden group">
|
||||
<img src="https://images.unsplash.com/photo-1515934751635-c81c6bc9a2d8?ixlib=rb-4.0.3&auto=format&fit=crop&w=300&q=80"
|
||||
alt="Wedding" class="w-full h-full object-cover">
|
||||
<div
|
||||
class="absolute bottom-0 w-full bg-gradient-to-t from-black/80 to-transparent pt-6 pb-2 text-center">
|
||||
<span class="text-xs font-semibold text-white">28 Jul</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<div
|
||||
class="absolute left-[70%] -translate-x-1/2 top-[240px] flex flex-col items-center z-10 -translate-y-[6px]">
|
||||
<div class="relative w-3 h-3 rounded-full bg-white shadow-[0_0_15px_rgba(255,255,255,0.8)] z-20">
|
||||
</div>
|
||||
<div class="h-8 w-px bg-white/40 my-1.5"></div>
|
||||
<div class="relative w-14 h-14 rounded-full border border-white/40 shadow-xl overflow-hidden group">
|
||||
<img src="https://images.unsplash.com/photo-1496337589254-7e19d01cec44?ixlib=rb-4.0.3&auto=format&fit=crop&w=150&q=80"
|
||||
alt="Dinner" class="w-full h-full object-cover" style="">
|
||||
<div
|
||||
class="absolute bottom-0 w-full bg-gradient-to-t from-black/80 to-transparent pt-3 pb-1 text-center">
|
||||
<span class="text-[9px] font-normal text-white/90">12 Aug</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="absolute left-[90%] -translate-x-1/2 top-[180px] flex flex-col items-center z-10 -translate-y-1">
|
||||
<div
|
||||
class="relative w-2.5 h-2.5 rounded-full bg-white/90 shadow-[0_0_10px_rgba(255,255,255,0.6)] z-20">
|
||||
</div>
|
||||
<span class="mt-3 text-[9px] font-medium text-white/60">18 Aug</span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="absolute bottom-28 w-full">
|
||||
<div class="flex justify-between px-8 text-lg text-white/60 font-normal">
|
||||
<span class="opacity-50 text-sm">May</span>
|
||||
<span class="opacity-80">Jun</span>
|
||||
<span class="text-white scale-125 font-semibold drop-shadow-md mx-2">Jul</span>
|
||||
<span class="opacity-80">Aug</span>
|
||||
<span class="opacity-50 text-sm">Sep</span>
|
||||
</div>
|
||||
<div class="mx-8 mt-4 h-[1px] bg-gradient-to-r from-transparent via-white/30 to-transparent"></div>
|
||||
<div class="text-center mt-3 text-xl font-medium tracking-tight text-white/90">2023</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Navbar -->
|
||||
<div
|
||||
class="flex z-30 bg-[#1a1a1a]/95 w-full h-20 border-white/5 border-t pr-8 pl-8 relative backdrop-blur-xl items-center justify-between">
|
||||
|
||||
<a href="index.html"
|
||||
class="flex flex-col hover:text-white transition-colors text-white/70 w-12 h-12 items-center justify-center"><svg
|
||||
xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
|
||||
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
|
||||
data-lucide="activity" class="lucide lucide-activity w-[24px] h-[24px]">
|
||||
<path
|
||||
d="M22 12h-2.48a2 2 0 0 0-1.93 1.46l-2.35 8.36a.25.25 0 0 1-.48 0L9.24 2.18a.25.25 0 0 0-.48 0l-2.35 8.36A2 2 0 0 1 4.49 12H2">
|
||||
</path>
|
||||
</svg></a>
|
||||
|
||||
<button
|
||||
class="flex flex-col items-center justify-center w-12 h-12 text-white/70 hover:text-white transition-colors mr-8"><svg
|
||||
xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
|
||||
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
|
||||
data-lucide="users" class="lucide lucide-users w-6 h-6">
|
||||
<path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"></path>
|
||||
<path d="M16 3.128a4 4 0 0 1 0 7.744"></path>
|
||||
<path d="M22 21v-2a4 4 0 0 0-3-3.87"></path>
|
||||
<circle cx="9" cy="7" r="4"></circle>
|
||||
</svg></button>
|
||||
<div class="absolute left-1/2 -translate-x-1/2 -top-6">
|
||||
<a href="entry-edit-step-1.html"
|
||||
class="flex border-[3px] hover:scale-105 transition-transform active:scale-95 group bg-[#3e3e3e] w-14 h-14 border-[#a7f3d0] rounded-full shadow-[0_4px_20px_rgba(0,0,0,0.4)] items-center justify-center"><svg
|
||||
xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
|
||||
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
|
||||
data-lucide="plus" class="lucide lucide-plus w-[28px] h-[28px]">
|
||||
<path d="M5 12h14"></path>
|
||||
<path d="M12 5v14"></path>
|
||||
</svg></a>
|
||||
</div>
|
||||
|
||||
<a href="login.html"
|
||||
class="flex flex-col hover:text-white transition-colors text-white/70 w-12 h-12 items-center justify-center"><svg
|
||||
xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
|
||||
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
|
||||
data-lucide="mail" class="lucide lucide-mail w-6 h-6">
|
||||
<path d="m22 7-8.991 5.727a2 2 0 0 1-2.009 0L2 7"></path>
|
||||
<rect x="2" y="4" width="20" height="16" rx="2"></rect>
|
||||
</svg></a>
|
||||
|
||||
<a href="profile.html"
|
||||
class="flex flex-col hover:text-white transition-colors text-white/70 w-12 h-12 items-center justify-center"><svg
|
||||
xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
|
||||
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
|
||||
data-lucide="user" class="lucide lucide-user w-6 h-6">
|
||||
<path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"></path>
|
||||
<circle cx="12" cy="7" r="4"></circle>
|
||||
</svg></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<script>
|
||||
lucide.createIcons();
|
||||
</script>
|
||||
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Loading…
Add table
Add a link
Reference in a new issue