Neon Memories
A nostalgic journey through neon-lit streets, where memories glow with cyberpunk flair. Features a dark, moody atmosphere with vibrant neon accents, glassmorphism effects, and pulsing animations that bring the past into the future. Perfect for those anyo who remembers the golden age of the internet.
Preview:
How to apply this layout:
✨ Make Your Profile Uniquely Yours
Join our community to unlock endless customization possibilities. This layout is just one of many ways to express your style.
Free to join • Customize your profile • Express your creativity
- 1. Sign up for a free account
- 2. Copy the CSS code from the right panel
- 3. Go to your profile settings
- 4. Paste the code into the "Custom CSS" field
- 5. Set your background image to:
https://images.unsplash.com/photo-1623910270913-3e0294a1c765?q=80&w=2048&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3DClick to copy
Custom CSS
@import url('https://fonts.googleapis.com/css2?family=Audiowide&display=swap');
:root {
--neon-blue: #0ff;
--neon-pink: #f0f;
--neon-purple: #b967ff;
--dark-bg: #0f0f1a;
--darker-bg: #0a0a12;
--card-bg: rgba(20, 20, 35, 0.95);
--text-primary: #fff;
--text-secondary: #a0a0c0;
--border-radius: 12px;
--neon-shadow: 0 0 20px rgba(0, 255, 255, 0.2);
--pink-shadow: 0 0 20px rgba(255, 0, 255, 0.2);
}
/* Base & Typography */
body {
background: var(--dark-bg);
color: var(--text-primary);
font-family: 'Audiowide', cursive;
line-height: 1.6;
}
h1, h2, h3, h4, h5, h6 {
font-family: 'Audiowide', cursive;
color: var(--text-primary);
text-shadow: 0 0 10px var(--neon-blue);
}
/* Headers */
.main-header, .profile-header {
background: linear-gradient(45deg, var(--darker-bg), var(--dark-bg)) !important;
border-bottom: 2px solid var(--neon-blue);
box-shadow: var(--neon-shadow);
position: relative;
overflow: hidden;
}
.main-header::before, .profile-header::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(45deg, rgba(0, 255, 255, 0.1), rgba(255, 0, 255, 0.1));
z-index: 1;
}
/* Cards & Sections */
.bg-white, .card, .comments-section, .comment-form {
background: var(--card-bg) !important;
border: 1px solid var(--neon-blue) !important;
box-shadow: var(--neon-shadow) !important;
backdrop-filter: blur(10px);
transition: all 0.3s ease;
}
.bg-white:hover {
box-shadow: 0 0 30px rgba(0, 255, 255, 0.3) !important;
transform: translateY(-2px);
}
/* Text & Colors */
.text-gray-500, .text-gray-600, .text-gray-700 { color: var(--text-secondary) !important; }
.text-gray-900 { color: var(--text-primary) !important; }
.bg-white p, .bg-white div { color: var(--text-primary) !important; }
/* Links & Buttons */
a {
color: var(--neon-pink) !important;
text-shadow: 0 0 5px var(--neon-pink);
transition: all 0.3s ease;
}
a:hover {
color: #ff00aa !important;
text-shadow: 0 0 10px var(--neon-pink);
}
.btn, .bg-\[\#B39B63\], .comment-form .submit-button {
background: var(--neon-pink) !important;
border: 1px solid #ff00aa !important;
box-shadow: var(--pink-shadow) !important;
color: white !important;
text-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
transition: all 0.3s ease;
}
.btn:hover, .bg-\[\#B39B63\]:hover, .comment-form .submit-button:hover {
background: #ff00aa !important;
box-shadow: 0 0 20px rgba(255, 0, 255, 0.4) !important;
transform: translateY(-2px);
}
/* Forms & Inputs */
input[type="text"], textarea, select, .comment-form textarea {
background: rgba(15, 15, 26, 0.8) !important;
border: 1px solid var(--neon-blue) !important;
color: var(--text-primary) !important;
transition: all 0.3s ease;
}
input[type="text"]:focus, textarea:focus, select:focus, .comment-form textarea:focus {
box-shadow: 0 0 15px var(--neon-blue) !important;
outline: none;
}
/* Comments */
.comment {
background: rgba(15, 15, 26, 0.8) !important;
border: 1px solid rgba(0, 255, 255, 0.2) !important;
border-radius: var(--border-radius);
padding: 1rem;
margin-bottom: 1rem;
}
.comment-header {
border-bottom: 1px solid rgba(0, 255, 255, 0.2);
padding-bottom: 0.5rem;
margin-bottom: 0.5rem;
}
.comment-author { color: var(--neon-pink) !important; }
.comment-timestamp { color: var(--neon-blue) !important; opacity: 0.8; }
.comment-content { color: var(--text-primary) !important; line-height: 1.6; }
/* Scrollbar */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--darker-bg); }
::-webkit-scrollbar-thumb {
background: var(--neon-blue);
border-radius: 5px;
box-shadow: 0 0 10px var(--neon-blue);
}
::-webkit-scrollbar-thumb:hover {
background: var(--neon-pink);
box-shadow: 0 0 10px var(--neon-pink);
}
/* Animations */
@keyframes neon-pulse {
0%, 100% { text-shadow: 0 0 5px var(--neon-blue), 0 0 10px var(--neon-blue); }
50% { text-shadow: 0 0 10px var(--neon-blue), 0 0 20px var(--neon-blue); }
}
.profile-header h1 { animation: neon-pulse 2s infinite; }
Copied to clipboard! ✨