Free Layouts | girl ben Elohim

Rules of Use

Link back is not required, but its always appreciated!
You may edit colors, fonts, and images to fit your own aesthetic however you may please.
I only ask that you do not redistribute these as your own templates.
If you use one, I'd love to see it! Leave a message in the guestbook.
Pink Buffalo Check

A responsive 1-page, Mobile Optimized Neocities template featuring a pure CSS buffalo plaid background, an interactive calendar, and pure CSS pushpins.
Preview →
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- EDIT YOUR SITE TITLE HERE -->
    <title> Pink Buffalo Check | Link In Bio Template</title>
    
    <!-- Tailwind CSS for layout and styling -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- FontAwesome for social icons -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <!-- Google Fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,600;1,400&family=Lora:ital,wght@0,400;0,500;1,400&family=Nanum+Pen+Script&display=swap" rel="stylesheet">

    <!-- TEMPLATE COLOR CONFIGURATION -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        'plaid-base': '#fcf5f5', /* Very pale pink */
                        'parchment': '#fffcfc', /* White paper */
                        'parchment-dark': '#f7eded', /* Light pinkish-grey paper */
                        'ink': '#5c4b4b', /* Soft warm brown/charcoal */
                        'dusty-pink': '#cca8a8', /* Muted pink */
                        'warm-taupe': '#d1c1b8', /* Tan/Taupe for borders */
                        'corkboard': '#d8c8bd' /* Warm sandy color for the board */
                    },
                    fontFamily: {
                        'serif-title': ['"Cormorant Garamond"', 'serif'],
                        'serif-body': ['"Lora"', 'serif'],
                    }
                }
            }
        }
    </script>

    <style>
        /* --- Muted Pink Buffalo Check Background --- */
        body {
            background-color: #fcf5f5;
            background-image: 
                linear-gradient(rgba(204, 168, 168, 0.25) 50%, transparent 50%),
                linear-gradient(90deg, rgba(204, 168, 168, 0.25) 50%, transparent 50%);
            background-size: 50px 50px; /* Adjust size of the plaid here */
        }
        
        .vintage-border {
            border: 4px double #d1c1b8;
        }

        .dashed-divider {
            border-top: 2px dashed #cca8a8;
        }

        .scallop-edge {
            border-radius: 12px;
            box-shadow: 0 10px 25px -5px rgba(92, 75, 75, 0.15), 0 8px 10px -6px rgba(92, 75, 75, 0.1);
        }

        /* Smooth scrolling */
        html { scroll-behavior: smooth; }
        
        /* Custom Scrollbar */
        ::-webkit-scrollbar { width: 8px; }
        ::-webkit-scrollbar-track { background: #fffcfc; }
        ::-webkit-scrollbar-thumb { background: #cca8a8; border-radius: 4px; }

        /* --- Bulletin Board Styles --- */
        .bulletin-board {
            width: 100%;
            background-color: #d8c8bd; 
            background-image: 
                radial-gradient(rgba(92, 75, 75, 0.15) 1px, transparent 1px),
                radial-gradient(rgba(92, 75, 75, 0.08) 1px, transparent 1px);
            background-size: 10px 10px, 14px 14px;
            background-position: 0 0, 5px 5px;
            border: 10px solid #a89488; /* Wood frame */
            border-radius: 6px;
            padding: 24px 16px;
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
            gap: 20px;
            box-shadow: inset 0px 4px 15px rgba(0,0,0,0.15), 0 4px 8px rgba(92, 75, 75, 0.15);
        }

        /* Post-It Note Base */
        .post-it {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            aspect-ratio: 1 / 1;
            padding: 16px 12px;
            color: #5c4b4b;
            text-decoration: none;
            box-shadow: 2px 4px 6px rgba(0,0,0,0.1);
            transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
            font-family: 'Nanum Pen Script', cursive;
            font-size: 1.6rem;
            line-height: 1.1;
            text-align: center;
            cursor: pointer;
            background-image: linear-gradient(180deg, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0) 100%);
        }

        .post-it::after {
            content: "";
            position: absolute;
            bottom: 0;
            right: 10%;
            width: 80%;
            height: 15px;
            box-shadow: 0px 8px 10px rgba(0,0,0,0.15);
            z-index: -1;
            transition: all 0.3s ease;
        }

        .post-it:hover, .post-it:focus {
            transform: scale(1.08) translateY(-5px) rotate(0deg) !important;
            box-shadow: 4px 8px 15px rgba(0,0,0,0.1);
            z-index: 10;
        }
        
        .post-it:hover::after, .post-it:focus::after {
            box-shadow: 0px 12px 12px rgba(0,0,0,0.15);
        }

        /* --- Pure CSS Push Pins and Tape (No Images Required!) --- */
        .css-tack-pink {
            position: absolute;
            top: 6px;
            left: 50%;
            transform: translateX(-50%);
            width: 14px;
            height: 14px;
            border-radius: 50%;
            background: radial-gradient(circle at 30% 30%, #e6c8c8, #cca8a8);
            box-shadow: 2px 3px 4px rgba(0,0,0,0.2), inset -1px -1px 3px rgba(0,0,0,0.1);
            z-index: 5;
        }
        .css-tack-pink::after {
            content: ''; position: absolute; top: 2px; left: 3px; width: 4px; height: 4px; background: rgba(255,255,255,0.6); border-radius: 50%;
        }

        .css-tack-cream {
            position: absolute;
            top: 6px;
            left: 50%;
            transform: translateX(-50%);
            width: 14px;
            height: 14px;
            border-radius: 50%;
            background: radial-gradient(circle at 30% 30%, #fff, #e8dfdf);
            box-shadow: 2px 3px 4px rgba(0,0,0,0.2), inset -1px -1px 3px rgba(0,0,0,0.1);
            z-index: 5;
        }
        .css-tack-cream::after {
            content: ''; position: absolute; top: 2px; left: 3px; width: 4px; height: 4px; background: rgba(255,255,255,0.8); border-radius: 50%;
        }

        .css-tape {
            position: absolute;
            top: -12px;
            left: 50%;
            transform: translateX(-50%) rotate(-3deg);
            width: 45px;
            height: 18px;
            background-color: rgba(255, 255, 255, 0.45);
            backdrop-filter: blur(2px);
            border-left: 2px dotted rgba(255,255,255,0.5);
            border-right: 2px dotted rgba(255,255,255,0.5);
            box-shadow: 0 1px 3px rgba(0,0,0,0.05);
            z-index: 5;
        }

        /* Rotations for messy board */
        .rot-1 { transform: rotate(-3deg); }
        .rot-2 { transform: rotate(2deg); }
        .rot-3 { transform: rotate(-4deg); }
        .rot-4 { transform: rotate(3deg); }
        .rot-5 { transform: rotate(-2deg); }
        .rot-6 { transform: rotate(4deg); }

        .blog-link {
            font-family: 'Lora', serif;
            font-style: italic;
            color: #cca8a8;
            text-decoration: underline;
            text-decoration-style: wavy;
            text-underline-offset: 4px;
            font-size: 1.1rem;
            margin-top: 15px;
            display: inline-block;
            transition: color 0.3s ease;
        }
        .blog-link:hover { color: #5c4b4b; }

        /* --- Mini Calendar Styles --- */
        .calendar-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; border-bottom: 2px dashed #cca8a8; padding-bottom: 10px; }
        .calendar-nav-btn { background: none; border: none; font-family: 'Courier Prime', monospace; font-size: 1.2rem; font-weight: bold; cursor: pointer; color: #cca8a8; transition: transform 0.2s; }
        .calendar-nav-btn:hover { transform: scale(1.2); }
        .month-year-display { font-family: 'Cormorant Garamond', serif; font-size: 1.6rem; font-weight: 600; font-style: italic; color: #5c4b4b; margin: 0; }
        .days-of-week { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; font-weight: bold; font-size: 0.75rem; color: #a89488; margin-bottom: 10px; text-transform: uppercase; letter-spacing: 1px;}
        .calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
        .calendar-day { aspect-ratio: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; border: 1px solid transparent; border-radius: 4px; cursor: pointer; font-size: 0.9rem; transition: all 0.2s; position: relative; color: #5c4b4b; font-family: 'Lora', serif; }
        .calendar-day:hover { background-color: #fffcfc; border-color: #d1c1b8; }
        .calendar-day.empty { cursor: default; }
        .calendar-day.empty:hover { background: none; border-color: transparent; }
        .calendar-day.today { font-weight: bold; color: #cca8a8; border: 1px dashed #cca8a8; }
        .calendar-day.has-event::after { content: ''; position: absolute; bottom: 15%; width: 5px; height: 5px; background-color: #cca8a8; border-radius: 50%; }
        .calendar-day.active-event { background-color: #cca8a8; color: #fffcfc; border-color: #cca8a8; }
        .calendar-day.active-event::after { background-color: #fffcfc; }
        
        .event-details-panel { margin-top: 15px; padding: 15px; background-color: #fffcfc; border: 1px solid #d1c1b8; display: none; border-radius: 4px; }
        .event-details-date { font-weight: bold; color: #a89488; font-size: 0.75rem; margin-bottom: 5px; text-transform: uppercase; letter-spacing: 1px;}
        .event-details-title { font-family: 'Cormorant Garamond', serif; font-size: 1.3rem; color: #cca8a8; margin: 0 0 8px 0; font-style: italic; line-height: 1.1; font-weight: 600;}
        .event-details-desc { font-size: 0.85rem; margin: 0; white-space: pre-wrap; color: #5c4b4b; line-height: 1.5; font-family: 'Lora', serif;}
    </style>
</head>
<body class="font-serif-body text-ink min-h-screen py-8 px-4 flex justify-center antialiased">

    <!-- Main Container -->
    <div class="bg-parchment w-full max-w-2xl scallop-edge vintage-border overflow-hidden relative">

        <!-- Top Header Area -->
        <div class="pt-8 pb-2 text-center">
            <!-- EDIT YOUR HEADER TEXT HERE -->
            <h1 class="font-serif-title text-4xl italic text-dusty-pink mb-1">Welcome to My Website! </h1>
            <p class="text-sm text-warm-taupe">Write some stuff about yourself here!! This site specifically is optimized for mobile, making it a great choice for a "Link in Bio" template! </p>
        </div>

        <div class="p-6 md:p-8 space-y-12">

            <!-- SECTION: HOME / LINKS -->
            <section id="links" class="scroll-mt-12">
                <div class="flex flex-col items-center">
                    <div class="bulletin-board mx-auto w-full max-w-lg">
                        
                        <!-- EDIT YOUR LINKS BELOW -->

                        <!-- Link 1 -->
                        <a href="#about" class="post-it rot-1 bg-parchment">
                            <div class="css-tack-pink"></div>
                            about<br>me
                        </a>
                        
                        <!-- Link 2 -->
                        <a href="https://example.com" class="post-it rot-2 bg-parchment-dark">
                            <div class="css-tape"></div>
                            my<br>portfolio
                        </a>
                        
                        <!-- Link 3 -->
                        <a href="https://example.com" class="post-it rot-3 bg-parchment">
                            <div class="css-tack-cream"></div>
                            read my<br>blog
                        </a>
                        
                        <!-- Link 4 -->
                        <a href="https://example.com" class="post-it rot-4 bg-dusty-pink text-parchment">
                            <div class="css-tack-cream"></div>
                            shop<br>updates
                        </a>
                        
                        <!-- Link 5 -->
                        <a href="https://example.com" class="post-it rot-5 bg-parchment-dark">
                            <div class="css-tape"></div>
                            secret<br>stash
                        </a>

                        <!-- Link 6 -->
                        <a href="#schedule" class="post-it rot-6 bg-parchment">
                            <div class="css-tack-pink"></div>
                            events<br>calendar
                        </a>

                    </div>
                    
                    <!-- EDIT MAIN URL HERE -->
                    <a href="https://neocities.org" target="_blank" class="blog-link">myawesomeamazingcoolsite.neocities.org</a>
                </div>
            </section>

            <div class="dashed-divider"></div>

            <!-- SECTION: FEATURED / ABOUT -->
            <section id="about" class="scroll-mt-12">
                <div class="text-center mb-6">
                    <!-- EDIT SECTION TITLE -->
                    <h2 class="font-serif-title text-3xl italic text-dusty-pink">~ Featured Project ~</h2>
                    <p class="text-xs text-warm-taupe mt-1">What I'm working on right now</p>
                </div>

                <div class="vintage-border bg-parchment-dark p-6 flex flex-col md:flex-row gap-8 items-stretch">
                    
                    <!-- Image Column -->
                    <div class="w-full md:w-1/2 flex flex-col items-center gap-6">
                        <div class="w-full flex justify-center bg-white p-2 border border-warm-taupe rounded-sm shadow-sm relative">
                            <!-- EDIT IMAGE HERE: Replace src with your image link -->
                            <img src="https://girlbenelohim.faith/Assets/Poetry/fridge-poetry%20(11).png" alt="Placeholder Image" class="w-full h-48 object-cover opacity-90 sepia-[.2]">
                        </div>
                        <p class="text-sm text-center italic px-2">
                            <strong>*Note*</strong><br>
                            Write a little caption or disclaimer for your image or project here!
                        </p>
                    </div>

                    <!-- Details Column -->
                    <div class="w-full md:w-1/2 flex flex-col gap-4">
                        <div>
                            <!-- EDIT PROJECT TITLE & SUBTITLE -->
                            <h3 class="font-serif-title text-2xl mb-1 leading-tight">My Handcrafted Zine</h3>
                            <p class="text-lg text-ink font-semibold">Available Now</p>
                        </div>
                        
                        <!-- Action Button -->
                        <a href="#" class="block w-full text-center bg-dusty-pink hover:bg-ink text-parchment py-2 text-sm rounded-full font-medium transition-colors shadow-sm">
                            View Shop
                        </a>

                        <div class="mt-2 text-sm leading-relaxed border-t border-warm-taupe pt-4">
                            <!-- EDIT DESCRIPTION HERE -->
                            <h4 class="font-serif-title text-lg font-bold mb-2">Details</h4>
                            <p>
                                Write a beautiful description about yourself, your art, or your project. You can change this entire section to be an "About Me" box if you don't have anything to sell!
                            </p>
                        </div>
                    </div>
                </div>
            </section>

            <div class="dashed-divider"></div>

            <!-- SECTION: SCHEDULE / CALENDAR -->
            <section id="schedule" class="scroll-mt-12 pb-4">
                <div class="text-center mb-6">
                    <h2 class="font-serif-title text-3xl italic text-dusty-pink">~ Calendar ~</h2>
                </div>
                
                <div class="vintage-border bg-parchment-dark p-4 md:p-6 max-w-md mx-auto">
                    <div class="calendar-header">
                        <button class="calendar-nav-btn" id="prev-month"><</button>
                        <h2 class="month-year-display" id="month-display">Month Year</h2>
                        <button class="calendar-nav-btn" id="next-month">></button>
                    </div>

                    <div class="days-of-week">
                        <div>Su</div><div>Mo</div><div>Tu</div><div>We</div><div>Th</div><div>Fr</div><div>Sa</div>
                    </div>

                    <div class="calendar-grid" id="calendar-grid">
                        <!-- Days injected via JavaScript -->
                    </div>

                    <div class="event-details-panel" id="event-panel">
                        <div class="event-details-date" id="event-date">Select a day</div>
                        <div id="events-list-container">
                            <h3 class="event-details-title" id="event-title">No events</h3>
                            <p class="event-details-desc" id="event-desc">Enjoy a day of rest.</p>
                        </div>
                    </div>
                </div>
            </section>

        </div>
        
        <!-- Footer -->
        <footer class="bg-parchment-dark border-t border-warm-taupe py-4 text-center text-xs text-ink mt-4">
            <!-- EDIT YOUR NAME/LINK BELOW -->
            template by <a href="https://girlbenelohim.faith/" class="underline hover:text-dusty-pink">girlbenElohim</a> ❀ hosted on neocities
        </footer>

    </div>

    <!-- Calendar Script -->
    <script>
        /* =========================================
           EDIT YOUR CALENDAR EVENTS HERE 
           (2 EXAMPLES SO YOU CAN SEE FORMAT / CODE STRING !!) 
           Format: YYYY-MM-DD
           ========================================= */
        const eventsData = [
            { date: "2024-01-01", title: "New Year's Day", description: "Taking a break from the internet today to drink tea and read." },
            { date: "2024-02-14", title: "Shop Update!", description: "Dropping new sticker designs at 5pm EST." },
            // Add as many events as you like! They will show up based on the actual current month/year.
        ];

        const calendarGrid = document.getElementById('calendar-grid');
        const monthDisplay = document.getElementById('month-display');
        const eventPanel = document.getElementById('event-panel');
        const evDateEl = document.getElementById('event-date');
        const eventsListContainer = document.getElementById('events-list-container');

        // Automatically sets to current actual date
        let currentDate = new Date(); 
        
        // Reset to 1st of the month for clean math
        currentDate.setDate(1); 

        function renderCalendar() {
            calendarGrid.innerHTML = "";
            eventPanel.style.display = "none";

            const year = currentDate.getFullYear();
            const month = currentDate.getMonth();

            const monthNames = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
            monthDisplay.innerText = `${monthNames[month]} ${year}`;

            const firstDayOfMonth = new Date(year, month, 1).getDay();
            const daysInMonth = new Date(year, month + 1, 0).getDate();

            const today = new Date();
            const isCurrentMonthAndYear = today.getMonth() === month && today.getFullYear() === year;

            for (let i = 0; i < firstDayOfMonth; i++) {
                let emptyCell = document.createElement("div");
                emptyCell.classList.add("calendar-day", "empty");
                calendarGrid.appendChild(emptyCell);
            }

            for (let day = 1; day <= daysInMonth; day++) {
                let dayCell = document.createElement("div");
                dayCell.classList.add("calendar-day");
                dayCell.innerText = day;

                const strMonth = String(month + 1).padStart(2, '0');
                const strDay = String(day).padStart(2, '0');
                const cellDateString = `${year}-${strMonth}-${strDay}`;

                if (isCurrentMonthAndYear && day === today.getDate()) {
                    dayCell.classList.add("today");
                }

                const eventsForThisDay = eventsData.filter(ev => ev.date === cellDateString);
                
                if (eventsForThisDay.length > 0) {
                    dayCell.classList.add("has-event");
                }

                dayCell.addEventListener("click", function() {
                    document.querySelectorAll('.calendar-day').forEach(d => d.classList.remove('active-event'));
                    dayCell.classList.add('active-event');
                    showEventDetails(cellDateString, eventsForThisDay);
                });

                calendarGrid.appendChild(dayCell);
            }
        }

        function showEventDetails(dateString, eventsArr) {
            eventPanel.style.display = "block";

            const dateParts = dateString.split('-');
            const prettyDate = new Date(dateParts[0], dateParts[1] - 1, dateParts[2]);
            const options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
            evDateEl.innerText = prettyDate.toLocaleDateString('en-US', options);

            eventsListContainer.innerHTML = ""; 

            if (eventsArr && eventsArr.length > 0) {
                eventsArr.forEach((eventObj, index) => {
                    const eventWrapper = document.createElement('div');
                    
                    if (index > 0) {
                        eventWrapper.className = 'border-t border-warm-taupe/30 pt-3 mt-3';
                    }
                    
                    const titleEl = document.createElement('h3');
                    titleEl.className = 'event-details-title';
                    titleEl.innerText = eventObj.title;

                    const descEl = document.createElement('p');
                    desc.className = 'event-details-desc';
                    descEl.innerText = eventObj.description;

                    eventWrapper.appendChild(titleEl);
                    eventWrapper.appendChild(descEl);
                    eventsListContainer.appendChild(eventWrapper);
                });
            } else {
                const titleEl = document.createElement('h3');
                titleEl.className = 'event-details-title';
                titleEl.style.color = '#5c4b4b';
                titleEl.innerText = "No events planned";

                const descEl = document.createElement('p');
                descEl.className = 'event-details-desc';
                descEl.innerText = "Enjoy a day of rest, reading, or quiet reflection.";

                eventsListContainer.appendChild(titleEl);
                eventsListContainer.appendChild(descEl);
            }
        }

        document.getElementById('prev-month').addEventListener('click', () => {
            currentDate.setMonth(currentDate.getMonth() - 1);
            renderCalendar();
        });

        document.getElementById('next-month').addEventListener('click', () => {
            currentDate.setMonth(currentDate.getMonth() + 1);
            renderCalendar();
        });

        renderCalendar();
    </script>
</body>
</html>
← back to the parlor
Layouts & Templates

Rules of Use

Pink Buffalo Check
