LavishMade
← Back to layouts

Pinkalicious Pixels

cutie-patootie, pink, sky, glitter, seals, everything you need for a perfect pinkalicious profile!!

Preview:

Pinkalicious Pixels 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.

Start Customizing Sign In

Free to join • Customize your profile • Express your creativity

  1. 1. Sign up for a free account
  2. 2. Copy the CSS code from the right panel
  3. 3. Go to your profile settings
  4. 4. Paste the code into the "Custom CSS" field
  5. 5. Set your background image to:
    https://i4.glitter-graphics.org/pub/1999/1999054nhsgjqq6ox.jpg Click to copy

Custom CSS

@import url('https://fonts.googleapis.com/css2?family=Comic+Neue&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

/* =================== VARIABLES =================== */
:root {
  --bg: #ffe8fa;
  --bg-pattern: url('https://i.imgur.com/w1I4nDC.gif');
  --text-primary: #5e0080;
  --text-secondary: #9933cc;
  --accent: #ff99cc;
  --accent-strong: #ff00aa;
  --border-color: #ffccff;
  --card-bg: rgba(255, 240, 255, 0.8);
  --glow: 0 0 6px #ffccff;
  --font-main: 'Comic Neue', cursive;
  --font-pixel: 'Press Start 2P', cursive;
}

/* =================== BASE =================== */
body {
  background: var(--bg) var(--bg-pattern) repeat;
  color: var(--text-primary);
  font-family: var(--font-main);
  font-size: 16px;
  line-height: 1.6;
  text-shadow: 0 0 1px #fff;
  padding: 1rem;
  position: relative;
}

body {
  cursor: url('https://ani.cursors-4u.net/symbols/sym-8/sym752.cur'), auto;
}

/* floating sticker */
body::after {
  content: "";
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 100px;
  height: 100px;
  background: url("https://i7.glitter-graphics.org/pub/1792/1792317j9etd3i4ig.gif") no-repeat center/contain;
  opacity: 0.9;
  pointer-events: none;
  z-index: 9999;
  animation: wiggle 4s infinite ease-in-out;
}

/* =================== TYPOGRAPHY =================== */
h1, h2, h3 {
  font-family: var(--font-pixel);
  color: var(--accent-strong);
  text-transform: uppercase;
  text-align: center;
  letter-spacing: 1px;
  margin: 1rem 0;
  text-shadow: 0 0 5px #ff66cc, 0 0 10px #ff99cc;
}

/* =================== TEXT LINKS =================== */
a {
  color: var(--accent-strong);
  text-decoration: underline wavy;
  font-weight: bold;
  transition: all 0.3s ease;
}

a:hover {
  color: #ff00dd;
  text-shadow: 0 0 10px #ff99cc;
}

/* =================== BUTTONS =================== */
.btn,
.comment-form .submit-button {
  background: linear-gradient(135deg, #ff99cc, #ff66cc);
  color: white;
  border: 2px solid #fff;
  padding: 0.6rem 1.2rem;
  font-family: var(--font-pixel);
  font-size: 0.75rem;
  border-radius: 8px;
  cursor: pointer;
  box-shadow: 0 0 10px var(--border-color);
  transition: transform 0.2s ease;
}

.btn:hover,
.comment-form .submit-button:hover {
  transform: scale(1.05);
  box-shadow: 0 0 20px #ff99ff;
}

/* =================== INPUTS =================== */
input[type="text"],
textarea,
select {
  background: #fff0fa;
  border: 2px dotted var(--accent);
  color: var(--text-primary);
  padding: 0.5rem;
  border-radius: 10px;
  font-family: var(--font-main);
  box-shadow: inset 0 0 5px var(--border-color);
}

input:focus,
textarea:focus {
  outline: none;
  box-shadow: 0 0 10px #ff99cc;
}

/* =================== SCROLLBAR =================== */
::-webkit-scrollbar {
  width: 12px;
}
::-webkit-scrollbar-track {
  background: #ffddee;
}
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #ff99cc, #cc66ff);
  border-radius: 6px;
  box-shadow: 0 0 10px #ff99cc;
}
::-webkit-scrollbar-thumb:hover {
  background: #ff66cc;
}

/* =================== CARD & CONTAINERS =================== */
.card,
.bg-white,
.comments-section,
.comment-form {
  background: var(--card-bg);
  border: 2px dashed var(--accent);
  border-radius: 15px;
  padding: 1rem;
  box-shadow: var(--glow);
  backdrop-filter: blur(4px);
  margin: 1rem 0;
}

.bg-gray-50 {
  background: transparent !important;
  backdrop-filter: blur(12px);
  border: 2px dashed var(--accent);
  border-radius: 20px;
  box-shadow: 0 0 20px rgba(255, 204, 255, 0.3);
  padding: 1rem;
}

/* =================== HEADER =================== */
.main-header {
  position: relative;
  background: linear-gradient(135deg, #ffccff, #ffe6fa);
  border: 3px dashed #ff99cc;
  border-radius: 20px;
  padding: 2rem 1rem;
  text-align: center;
  box-shadow: 0 0 25px #ff99cc;
  overflow: hidden;
}

.header-content {
  position: relative;
  z-index: 2;
  font-family: var(--font-main);
  color: #d63384;
  text-shadow: 0 0 5px #fff0f8, 0 0 8px #ff99cc;
}

.header-content h1 {
  font-family: var(--font-pixel);
  color: var(--accent-strong);
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
  text-shadow: 0 0 6px #fff0fa, 0 0 12px #ff99ff;
  animation: sparkleText 3s infinite ease-in-out;
}

.header-content p {
  font-size: 1rem;
  color: #cc3399;
  text-shadow: 0 0 4px #ffe6f3;
  font-weight: bold;
}

/* =================== NAVIGATION =================== */
nav.global-nav {
  background: linear-gradient(90deg, #ffccff, #ffe6fa, #ffccff);
  border: 3px dashed #ff99cc;
  border-radius: 16px;
  padding: 0.8rem 1.5rem;
  margin: 1.5rem auto;
  text-align: center;
  box-shadow: 0 0 15px #ff99cc;
  position: relative;
  overflow: hidden;
  font-family: var(--font-pixel);
}

nav.global-nav::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("https://i7.glitter-graphics.org/pub/153/153617fwnbu4h8qu.gif") repeat;
  opacity: 0.2;
  pointer-events: none;
  z-index: 1;
}

nav.global-nav::after {
  content: "";
  position: absolute;
  top: -10px;
  right: -10px;
  width: 60px;
  height: 60px;
  background: url("https://i2.glitter-graphics.org/pub/1269/1269502dz8mt2p1yr.gif") no-repeat center/contain;
  opacity: 1;
  transform: rotate(-15deg);
  pointer-events: none;
}

.nav-links {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 1rem;
  position: relative;
  z-index: 2;
  justify-content: center;
}

.nav-links a {
  color: var(--accent-strong);
  background: #fff0f9;
  border: 2px dashed #ff99cc;
  padding: 0.5rem 1rem;
  border-radius: 12px;
  font-size: 0.7rem;
  text-decoration: none;
  text-shadow: 0 

@keyframes floaty {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

body::before {
  content: "";
  position: fixed;
  top: 10px;
  left: 10px;
  width: 100px;
  height: 100px;
  background: url("https://i4.glitter-graphics.org/pub/2727/2727344l27pb31867.gif") no-repeat center/contain;
  z-index: 9999;
  pointer-events: none;
  opacity: 0.9;
  animation: floaty 3s ease-in-out infinite;
}

/* Music Player attached to header */
.main-header::before {
  content: "♪ Now Playing: Hilary Duff - 'Come Clean'";
  display: block;
  font-family: 'Press Start 2P', cursive;
  font-size: 0.55rem;
  color: #ff00aa;
  text-align: center;
  padding: 0.5rem;
  background: linear-gradient(90deg, #ffe0f5, #fff0fa);
  border-top: 2px dashed #ff99cc;
  border-bottom: 2px dashed #ff99cc;
  box-shadow: 0 0 10px #ffc0eb;
}

/* Fake music player buttons */
.main-header::after {
  content: "⏮   ⏯   ⏭";
  display: block;
  font-size: 0.7rem;
  text-align: center;
  margin-top: 0.3rem;
  color: #cc3399;
  text-shadow: 0 0 6px #ffccff;
}

Copied to clipboard! ✨

Comments for "Pinkalicious Pixels" (0)

Please log in to leave a comment.

NOTIFICATIONS

View All Notifications