LavishMade
← Back to layouts

Emerald Grove

A serene forest-inspired theme with earthy greens and organic elements that brings the tranquility of nature to your profile.

Preview:

Emerald Grove 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://images.unsplash.com/photo-1472396961693-142e6e269027?q=80&w=2752&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D Click to copy

Custom CSS

@import url('https://fonts.googleapis.com/css2?family=Quattrocento:wght@400;700&display=swap');

:root {
  --forest-green: #2d4a3c;
  --sage-green: #8b9556;
  --moss-green: #5c6b39;
  --earth-brown: #8b7355;
  --cream: #f5f1e8;
  --border-radius: 16px;
  --box-shadow: 0 4px 12px rgba(45, 74, 60, 0.1);
}

/* Base Styles */
body {
  background: var(--cream);
  color: var(--forest-green);
  font-family: 'Quattrocento', serif;
  line-height: 1.6;
}

/* Header & Navigation */
.profile-header {
  background: linear-gradient(135deg, var(--forest-green), var(--sage-green));
  color: var(--cream);
  border-radius: var(--border-radius);
  box-shadow: var(--box-shadow);
  padding: 2rem;
}

.profile-header h1 {
  font-size: 2.5rem;
  font-weight: 700;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
}

/* Content Areas */
.bg-white {
  background: rgba(255, 255, 255, 0.95);
  border: 2px solid var(--sage-green);
  border-radius: var(--border-radius);
  box-shadow: var(--box-shadow);
  transition: transform 0.2s ease;
}

.bg-white:hover {
  transform: translateY(-2px);
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
  color: var(--forest-green);
  font-family: 'Quattrocento', serif;
  font-weight: 700;
}

/* Links */
a {
  color: var(--moss-green);
  text-decoration: none;
  border-bottom: 1px dotted var(--sage-green);
  transition: all 0.2s ease;
}

a:hover {
  color: var(--forest-green);
  border-bottom-style: solid;
}

/* Buttons */
.btn, .bg-\[\#B39B63\] {
  background: linear-gradient(135deg, var(--forest-green), var(--sage-green));
  color: var(--cream);
  border: none;
  border-radius: var(--border-radius);
  padding: 0.75rem 1.5rem;
  font-weight: 500;
  transition: all 0.2s ease;
}

.btn:hover, .bg-\[\#B39B63\]:hover {
  background: linear-gradient(135deg, var(--sage-green), var(--forest-green));
  transform: translateY(-1px);
  box-shadow: 0 4px 15px rgba(45, 74, 60, 0.2);
}

/* Cards and Sections */
.profile-card {
  background: rgba(255, 255, 255, 0.95);
  border: 2px solid var(--sage-green);
  border-radius: var(--border-radius);
  box-shadow: var(--box-shadow);
}

/* Comments Section */
.comments-section {
  background: rgba(245, 241, 232, 0.95);
  border: 2px solid var(--sage-green);
  border-radius: var(--border-radius);
  color: var(--forest-green);
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 12px;
}

::-webkit-scrollbar-track {
  background: var(--cream);
  border: 1px solid var(--sage-green);
}

::-webkit-scrollbar-thumb {
  background: var(--forest-green);
  border: 2px solid var(--cream);
  border-radius: var(--border-radius);
}

/* Interest Tags */
.bg-gray-100 {
  background-color: var(--cream) !important;
  border: 1px solid var(--sage-green) !important;
  color: var(--forest-green) !important;
}

/* Profile Navigation */
.profile-nav {
  background: var(--forest-green);
  border-bottom: 3px solid var(--sage-green);
}

.profile-nav a {
  color: var(--cream) !important;
  font-weight: 500;
  border-bottom: none;
}

.profile-nav a:hover {
  color: var(--sage-green) !important;
  background: rgba(255, 255, 255, 0.1);
}

/* Friend Cards */
.friend-card {
  background: rgba(255, 255, 255, 0.95);
  border: 2px solid var(--sage-green);
  border-radius: var(--border-radius);
  transition: all 0.2s ease;
}

.friend-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--box-shadow);
}

/* Photo Gallery */
.photo-gallery img {
  border: 2px solid var(--sage-green);
  border-radius: var(--border-radius);
  transition: all 0.2s ease;
}

.photo-gallery img:hover {
  transform: scale(1.02);
  box-shadow: var(--box-shadow);
}

Copied to clipboard! ✨

Comments for "Emerald Grove" (0)

Please log in to leave a comment.

NOTIFICATIONS

View All Notifications