🎭 FFXIV RP Template Instructions

📁 Files Included

index.html - Your main character page
style.css - Mid-2000s DIY flat color styling
instructions.html - This instruction guide

🚀 Getting Started on Neocities

Upload the files:
- Go to your Neocities dashboard
- Upload index.html and style.css to your root directory
- Your site will be available at: yoursite.neocities.org
Test it works: Visit your site URL to see the template in action

✏️ Customizing Your Character

Basic Information

Edit these sections in the HTML file:

<title>✦ Character Name ✦ FFXIV RP</title>
<h1>✦ Welcome to My Character Page ✦</h1>
<p><strong>Name:</strong> Character Name</p>

Character Portrait

Replace the placeholder image:

Upload your character image to Neocities and change the src to:

Content Sections

Fill out these areas with your character's information:

About: Basic stats and info
Appearance: Physical description
Personality: Character traits and quirks
Backstory: Character history
RP Hooks: Ways to interact with your character
OOC Info: Your timezone, preferences, contact info

🎨 Customizing Colors & Style

Changing the Main Colors

In style.css, look for these flat color backgrounds:

/* Page container border */
border: 3px solid #ff00ff;

/* Header background */
background: #ff69b4;

/* Navigation background */
background: #00ffff;

/* Content box backgrounds */
background: #ffccff; /* odd boxes */
background: #ccffff; /* even boxes */

💡 Tip: Keep it simple with flat colors! The 2000s DIY aesthetic is all about bright, contrasting colors without gradients.

Adding Your Own Fonts

The template uses web-safe fonts, but you can add Google Fonts:

📱 Responsive Design

The template automatically adjusts for mobile devices! The sidebar moves below the main content on smaller screens.

🔗 Adding Links & Pages

External Links

Update the sidebar links to your actual profiles:

<li><a href="https://na.finalfantasyxiv.com/lodestone/character/12345/">Lodestone Profile</a></li>
<li><a href="https://your-tumblr.tumblr.com">Tumblr</a></li>

Creating Additional Pages

To add more pages (like a gallery or guestbook):

Copy index.html and rename it (e.g., gallery.html)
Change the content inside the main sections
Update navigation links to point to your new pages

✨ Special Features

Animated Elements

Blinking sparkles: Classic 2000s blinking text effect
Scrolling marquee: Old-school scrolling text banner
Hover effects: Navigation buttons change colors on hover
Dotted borders: Simple dotted separators between list items

Mid-2000s DIY Features

Flat, bright colors with high contrast
Black borders on everything
Simple Comic Sans MS font
Alternating colored content boxes
Visitor counter (placeholder)
Classic scrolling marquee text

🛠️ Troubleshooting

⚠️ Common Issues:

CSS not loading: Make sure style.css is in the same folder as index.html
Images not showing: Check that image files are uploaded and the file names match exactly
Fonts not working: Google Fonts links need to be in the <head> section

🎯 Tips for Great RP Pages

Keep it updated: Regular updates show you're an active RPer
Be specific with hooks: Give other players easy ways to approach your character
Include OOC preferences: Let people know your RP style and limits
Add personality: Use the design and content to reflect your character's vibe
Keep contact info current: Make it easy for people to reach you

🌟 Advanced Customization Ideas

Add more marquee text sections with different messages
Create a photo gallery page with character screenshots in simple frames
Add a guestbook for other RPers to leave messages
Include a calendar of RP events you're attending
Add blinking text for important announcements
Use different bright background colors for each section

🎉 Keep it DIY! This template captures that authentic mid-2000s personal website vibe. Don't be afraid to use bold colors, simple effects, and fun text that matches your character's personality!

🎨 Inspiration & Advanced Effects

Want to get fancy later? Here are some effects you can add to spice up your site while keeping that 2000s charm!

✨ Animated Sparkles (Optional)

Add some moving magic to your page:

/* Add to your CSS */
.sparkles {
  position: fixed;
  font-size: 16px;
  color: #7878a8;
  animation: blink 2s linear infinite;
  pointer-events: none;
  z-index: 1000;
}

@keyframes blink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}

/* Add to your HTML body */
<div class="sparkles" style="top: 10%; left: 20%;">✨</div>
<div class="sparkles" style="top: 30%; right: 15%;">⭐</div>
<div class="sparkles" style="bottom: 20%; left: 10%;">✦</div>

🌊 Glassy/Frosted Effects

Make your widgets look like frosted glass:

.widget {
  background: rgba(45, 53, 97, 0.7);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

/* For a more subtle glass effect */
.content-box {
  background: rgba(38, 43, 69, 0.8);
  backdrop-filter: blur(5px);
  border: 1px solid rgba(120, 120, 168, 0.3);
}

💫 Floating Animations

Make elements gently float up and down:

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

.character-portrait {
  animation: float 3s ease-in-out infinite;
}

/* For a subtle hover lift */
.widget:hover {
  transform: translateY(-5px);
  transition: transform 0.3s ease;
}

🌈 Gradient Text Effects

Make your headings more dramatic:

.main-header h1 {
  background: linear-gradient(45deg, #7878a8, #9898c8, #b8b8d8);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Glowing text effect */
.content-box h2 {
  text-shadow: 0 0 10px rgba(152, 152, 200, 0.5);
  animation: glow 2s ease-in-out infinite alternate;
}

@keyframes glow {
  from { text-shadow: 0 0 10px rgba(152, 152, 200, 0.5); }
  to { text-shadow: 0 0 20px rgba(152, 152, 200, 0.8); }
}

⭐ Background Patterns

Add subtle patterns to your backgrounds:

/* Dotted pattern */
body {
  background-image: radial-gradient(circle, #3d4578 1px, transparent 1px);
  background-size: 20px 20px;
}

/* Diagonal lines */
.content-box {
  background-image: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 2px,
    rgba(61, 69, 120, 0.1) 2px,
    rgba(61, 69, 120, 0.1) 4px
  );
}

🎭 CSS Cursor Effects

Custom cursors for that extra 2000s flair:

/* Custom cursor */
body {
  cursor: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAPCAYAAAA71pVKAAAABklEQVR4nGPY//8/AzYwirkTAAAAAElFTkSuQmCC'), auto;
}

/* Different cursor for links */
a {
  cursor: pointer;
}

/* Or use built-in fun cursors */
.widget {
  cursor: help;
}

🌟 Particle Effects (Advanced)

Create falling stars or particles with CSS:

/* Falling stars animation */
.star {
  position: fixed;
  top: -10px;
  color: #9898c8;
  font-size: 12px;
  animation: fall linear infinite;
  pointer-events: none;
}

@keyframes fall {
  0% { transform: translateY(-100vh) rotate(0deg); }
  100% { transform: translateY(100vh) rotate(360deg); }
}

/* Add multiple stars with different speeds */
.star:nth-child(1) { left: 10%; animation-duration: 3s; }
.star:nth-child(2) { left: 30%; animation-duration: 5s; }
.star:nth-child(3) { left: 70%; animation-duration: 4s; }

💡 Pro Tips:

Start small: Add one effect at a time to see how it looks
Performance: Too many animations can slow down older computers
Accessibility: Some people get motion sick - consider adding a "reduce motion" option
Test on mobile: Effects might behave differently on phones
Keep backups: Save a copy before adding fancy effects!

🎪 Retro Button Styles

Make your navigation buttons extra 2000s:

/* 3D button effect */
.navigation a {
  background: linear-gradient(to bottom, #4d5588, #3d4578);
  border: 2px outset #4d5588;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}

.navigation a:hover {
  border: 2px inset #4d5588;
  transform: translateY(1px);
}

/* Neon glow buttons */
.widget a {
  box-shadow: 0 0 5px #7878a8;
  transition: box-shadow 0.3s ease;
}

.widget a:hover {
  box-shadow: 0 0 15px #9898c8;
}

⚠️ Remember: These are all OPTIONAL extras! Your site looks great as-is. Only add effects if you want to experiment and have fun. The goal is authentic 2000s charm, not to become a flashy modern site!

🏗️ Understanding the HTML Structure

Want to rearrange things or understand how the layout works? Here's a breakdown of the HTML structure!

📋 Basic Page Structure

<div class="container"> 
  <header class="main-header"> 
    <h1>Page Title</h1>
    <div class="header-subtitle">Subtitle</div>
  </header>

  <div class="marquee"> 
    <p>Your scrolling message</p>
  </div>

  <div class="content-wrapper"> 
    <aside class="left-sidebar">...</aside>
    <main class="main-content">...</main>
    <aside class="right-sidebar">...</aside>
  </div>

  <footer class="main-footer"> 
    <p>Copyright info</p>
  </footer>
</div>

🔧 What Are <aside> Tags?

<aside> is an HTML5 semantic element that represents content that's related to the main content but not essential to understanding it. Think of it as "sidebar content":

♿ Accessibility & Inclusive Design

Making your creative 2000s-style site accessible doesn't mean sacrificing personality! Here's how to keep your artistic vision while ensuring everyone can enjoy your character page.

🔊 What Are ARIA Labels?

ARIA (Accessible Rich Internet Applications) labels are special attributes that help screen readers understand what different parts of your page do. Think of them as "invisible descriptions" for people using assistive technology:

🎨 Accessible Design That Stays Creative

💡 Good News: Accessibility and artistic design work great together! Here's how:

Colors: Your bright 2000s colors are often great for contrast - just avoid red/green only combinations
Fonts: The template uses readable fonts while keeping that retro charm
Structure: The clear headings and sections make navigation easy for everyone
Alt text: Describe your character images creatively! "Fierce warrior pose in stormy lighting" is better than just "character image"

🔍 Why Accessibility Matters

Making your site accessible means:

Screen reader users can navigate your site and learn about your character
People with motor disabilities can use keyboard navigation to browse your content
Visually impaired visitors benefit from good color contrast and clear text
Everyone gets a better experience with clear structure and descriptions

✨ Easy Accessibility Wins

<img src="character.jpg" alt="Miqo'te scholar with purple hair reading in a sunlit library">


<a href="backstory.html">Read Character's Full Backstory</a>



<h1>Main Page Title</h1>
<h2>Major Section</h2>
<h3>Subsection</h3>

🌈 Color & Contrast Tips

Your 2000s bright colors can be accessibility superstars:

/* Good contrast examples */
.good-contrast {
  background: #2d3561; /* Dark blue */
  color: #ffffff; /* White text = great contrast! */
}

.also-good {
  background: #ffffff; /* White */
  color: #232940; /* Dark text = also great! */
}

/* If you want to check contrast, use online tools like: */
/* WebAIM Contrast Checker or Colour Contrast Analyser */

⌨️ Keyboard Navigation

Some visitors navigate using only keyboards. The template already supports this, but here's what to keep in mind:

Tab order: Make sure people can tab through your links in a logical order
Focus indicators: The template includes visible focus outlines on navigation
Skip links: For longer pages, consider adding a "skip to main content" link

🎭 Balancing Style & Access

🎨 Pro Tip: You don't have to choose between looking cool and being accessible!

Keep your sparkles - just add ARIA labels so screen readers know they're decorative
Use your bright colors - many provide excellent contrast
Style your focus states - make keyboard navigation look intentional and cool
Write fun alt text - "Character striking a dramatic pose with wind-blown cape" is accessible AND personality-filled

<span aria-hidden="true">✨</span>



<button aria-label="Open character gallery with 12 screenshots">Gallery</button>

⚠️ Remember: This template includes basic accessibility features, but you can always add more! The goal is making your creative vision accessible to as many people as possible while keeping that authentic 2000s RP site charm.

📦 How Div Layers Work

Think of divs like nesting boxes - each one can contain other elements:

<div class="content-box"> 
  <h2>Section Title</h2> 
  <div class="inner-section"> 
    <p>Some content here</p> 
    <div class="even-deeper"> 
      <span>Nested content</span>
    </div>
  </div>
</div>

🔄 Rearranging Sections

Want to move sections around? Here's how:

<section id="personality" class="content-box">
  <h2>Personality</h2>
  <p>All the content...</p>
</section>


<section id="appearance" class="content-box">
  <h2>Appearance</h2>
  <p>All the content...</p>
</section>

➕ Adding New Sections

To add a new content section, copy an existing one and modify:

<section class="content-box">
  <h2>Your New Section</h2>
  <p>Your new content goes here!</p>
  
</section>

💻 JavaScript Effects (Optional Fun!)

Want to add some interactive elements? Here are some simple JavaScript effects that work great with the 2000s aesthetic!

✨ Text Effects

<script>
// Typewriter effect for headers
function typeWriter(element, text, speed = 100) {
  let i = 0;
  element.innerHTML = '';
  function type() {
    if (i < text.length) {
      element.innerHTML += text.charAt(i);
      i++;
      setTimeout(type, speed);
    }
  }
  type();
}

// Use it on page load
window.onload = function() {
  const title = document.querySelector('.main-header h1');
  const originalText = title.textContent;
  typeWriter(title, originalText, 150);
};
</script>

🎵 Sound Effects

<script>
// Add click sounds to navigation
document.querySelectorAll('.sidebar-nav a').forEach(link => {
  link.addEventListener('click', function() {
    // You can add a small audio file here
    const audio = new Audio('click-sound.mp3');
    audio.volume = 0.3; // Keep it subtle
    audio.play().catch(e => {}); // Ignore errors
  });
});
</script>

🌟 Interactive Elements

<script>
// Random color changes for fun
function randomColor() {
  const colors = ['#7878a8', '#9898c8', '#b8b8d8', '#a8a8b8'];
  return colors[Math.floor(Math.random() * colors.length)];
}

// Make sparkles change color on click
document.addEventListener('click', function(e) {
  if (e.target.classList.contains('sparkles')) {
    e.target.style.color = randomColor();
  }
});
</script>

💫 Page Transitions

<style>
.fade-in {
  opacity: 0;
  transition: opacity 1s ease-in;
}
.fade-in.loaded {
  opacity: 1;
}
</style>

<script>
// Add fade-in class to container
document.querySelector('.container').classList.add('fade-in');

// Trigger fade-in after page loads
window.addEventListener('load', function() {
  document.querySelector('.container').classList.add('loaded');
});
</script>

🎨 Dynamic Content

<script>
const funFacts = [
  "Did you know my character loves collecting shells?",
  "Fun fact: She can't swim despite living by the ocean!",
  "Random trivia: Her favorite food is sea salt ice cream.",
  "Cool detail: She hums while working on research."
];

function showRandomFact() {
  const fact = funFacts[Math.floor(Math.random() * funFacts.length)];
  const factElement = document.getElementById('random-fact');
  if (factElement) {
    factElement.textContent = fact;
  }
}

// Update fact every 10 seconds
setInterval(showRandomFact, 10000);
</script>


<p id="random-fact">Loading fun fact...</p>

💡 JavaScript Tips:

Start simple: Try one effect at a time
Test thoroughly: Make sure effects work on different browsers
Keep it subtle: Too many effects can be overwhelming
Mobile-friendly: Some effects might not work well on phones
Backup plan: Your site should work fine even if JavaScript is disabled

⚠️ Neocities Notes: Neocities supports client-side JavaScript, but remember that some visitors might have JavaScript disabled. Always make sure your site works without it too!

📞 Need Help?

If you run into issues or want to customize something specific, feel free to ask for help! The FFXIV RP community is generally very supportive.

Happy RPing! Keep it authentic and have fun! 🎮