nhcarrigan/static-pages
9
0
Fork 0
generated from nhcarrigan/template
Code Issues 2 Pull Requests Actions Releases Activity
Files
2aef274297a83b3b091cd78459885fe0e8a8b5e8
static-pages/memes/index.html
T
naomi 2aef274297
Security Scan and Upload / Security & DefectDojo Upload (push) Successful in 56s
Details
feat: add meme page~
2026-04-19 11:35:30 -07:00

510 lines
20 KiB
HTML
Raw Blame History

<!DOCTYPE html>
<html lang="en-GB">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Naomi's Meme Collection</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Griffy&family=Kalam:wght@300;400;700&family=Creepster&display=swap" rel="stylesheet">
<style>
:root {
--witch-purple: #2B1B3D;
--witch-plum: #44275A;
--witch-rose: #A8577E;
--witch-mauve: #D4A5C7;
--witch-lavender: #E8D5E8;
--witch-black: #0A0009;
--witch-silver: #C0C0C0;
--witch-moon: #F5F5F5;
--witch-shadow: rgba(10, 0, 9, 0.7);
--foreground: var(--witch-purple);
--background: var(--witch-moon);
--accent: var(--witch-rose);
--border: var(--witch-plum);
--highlight: var(--witch-mauve);
--card-bg: #ffffff;
}
@media (prefers-color-scheme: dark) {
:root {
--foreground: var(--witch-lavender);
--background: var(--witch-black);
--accent: var(--witch-mauve);
--border: var(--witch-rose);
--highlight: var(--witch-plum);
--card-bg: #1a0f24;
}
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
scroll-behavior: smooth;
}
body {
font-family: 'Kalam', cursive;
font-weight: 400;
background-color: var(--background);
color: var(--foreground);
line-height: 1.6;
min-height: 100vh;
padding: 40px 20px;
}
::selection {
background-color: var(--witch-rose);
color: var(--witch-moon);
}
::-webkit-scrollbar {
width: 10px;
height: 10px;
}
::-webkit-scrollbar-track {
background: var(--witch-lavender);
}
::-webkit-scrollbar-thumb {
background: var(--witch-plum);
border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover {
background: var(--witch-purple);
}
main {
max-width: 1080px;
margin: 0 auto;
padding: 40px;
border: 2px solid var(--border);
border-radius: 15px;
background-color: var(--card-bg);
box-shadow: 0 0 30px rgba(168, 87, 126, 0.35);
}
header {
text-align: center;
margin-bottom: 50px;
padding-bottom: 30px;
border-bottom: 2px dashed var(--border);
}
h1 {
font-family: 'Griffy', cursive;
font-size: clamp(2.5rem, 6vw, 4.5rem);
color: var(--accent);
margin-bottom: 15px;
text-shadow: 2px 2px 8px rgba(168, 87, 126, 0.4);
display: inline-block;
animation: wiggle 4s ease-in-out infinite;
}
@keyframes wiggle {
0%, 100% { transform: rotate(-2deg); }
50% { transform: rotate(2deg); }
}
@media (prefers-reduced-motion: reduce) {
h1 { animation: none; }
* { transition: none !important; }
}
.subtitle {
font-family: 'Kalam', cursive;
font-size: 1.25rem;
font-weight: 300;
color: var(--foreground);
opacity: 0.85;
max-width: 650px;
margin: 0 auto;
}
.meme-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 30px;
margin-top: 40px;
}
.meme-card {
background-color: var(--card-bg);
border: 2px solid var(--border);
border-radius: 15px;
overflow: hidden;
display: flex;
flex-direction: column;
transition: all 0.3s ease;
box-shadow: 0 4px 15px rgba(168, 87, 126, 0.15);
}
.meme-card:hover,
.meme-card:focus-within {
transform: translateY(-6px);
border-color: var(--accent);
box-shadow: 0 12px 30px rgba(168, 87, 126, 0.45);
}
.meme-image-wrapper {
width: 100%;
aspect-ratio: 4 / 3;
background-color: var(--highlight);
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
border-bottom: 2px solid var(--border);
}
.meme-image-wrapper img {
width: 100%;
height: 100%;
object-fit: contain;
transition: transform 0.4s ease;
}
.meme-card:hover .meme-image-wrapper img {
transform: scale(1.05);
}
.meme-body {
padding: 20px 25px 25px;
flex-grow: 1;
display: flex;
flex-direction: column;
}
.meme-title {
font-family: 'Griffy', cursive;
font-size: 1.75rem;
color: var(--accent);
margin-bottom: 12px;
}
.meme-description {
font-family: 'Kalam', cursive;
font-weight: 400;
font-size: 1rem;
color: var(--foreground);
flex-grow: 1;
}
.meme-caption {
font-style: italic;
color: var(--accent);
font-size: 0.95rem;
margin-bottom: 10px;
padding: 8px 12px;
background-color: var(--highlight);
border-left: 3px solid var(--accent);
border-radius: 4px;
}
@media (prefers-color-scheme: dark) {
.meme-caption {
background-color: rgba(168, 87, 126, 0.15);
}
}
.copy-button {
font-family: 'Kalam', cursive;
font-weight: 700;
font-size: 0.95rem;
margin-top: 15px;
padding: 10px 18px;
background-color: transparent;
color: var(--accent);
border: 2px solid var(--accent);
border-radius: 8px;
cursor: pointer;
transition: all 0.3s ease;
align-self: flex-start;
}
.copy-button:hover,
.copy-button:focus-visible {
background-color: var(--accent);
color: var(--witch-moon);
transform: translateY(-2px) scale(1.03);
box-shadow: 0 4px 12px rgba(168, 87, 126, 0.4);
outline: none;
}
.copy-button.copied {
background-color: var(--accent);
color: var(--witch-moon);
border-color: var(--accent);
}
.copy-button:focus-visible {
outline: 2px solid var(--border);
outline-offset: 3px;
}
footer {
text-align: center;
margin-top: 50px;
padding-top: 30px;
border-top: 2px dashed var(--border);
font-size: 0.95rem;
color: var(--foreground);
opacity: 0.8;
}
footer a {
color: var(--accent);
text-decoration: underline;
text-decoration-color: var(--accent);
text-underline-offset: 3px;
transition: all 0.3s ease;
}
footer a:hover,
footer a:focus {
color: var(--witch-plum);
text-decoration-color: var(--witch-plum);
}
@media (max-width: 625px) {
body { padding: 20px 10px; }
main { padding: 25px 20px; }
.meme-grid { gap: 20px; }
.meme-body { padding: 15px 20px 20px; }
}
</style>
</head>
<body>
<main>
<header>
<h1>Naomi's Meme Collection</h1>
<p class="subtitle">A curated gallery of reaction images, handpicked for every occasion. Deploy with care~ 🌸</p>
</header>
<section class="meme-grid" aria-label="Meme gallery">
<article class="meme-card">
<div class="meme-image-wrapper">
<img src="https://cdn.nhcarrigan.com/girls.jpg" alt="Sparkly anime girl with glasses and fangs, hands on cheeks" loading="lazy">
</div>
<div class="meme-body">
<h2 class="meme-title">The Girls Manifesto</h2>
<p class="meme-caption">&ldquo;I think girls should date girls, and boys should become girls and date girls.&rdquo;</p>
<p class="meme-description">A sparkly, fanged declaration of the sapphic and trans-affirming agenda. Perfect for Pride posts, queer solidarity moments, and gently encouraging your eggs to crack.</p>
<button class="copy-button" type="button" data-url="https://cdn.nhcarrigan.com/girls.jpg" aria-label="Copy URL for The Girls Manifesto meme">Copy URL</button>
</div>
</article>
<article class="meme-card">
<div class="meme-image-wrapper">
<img src="https://cdn.nhcarrigan.com/hire.jpeg" alt="Tearful anime girl in ornate dress and tiara" loading="lazy">
</div>
<div class="meme-body">
<h2 class="meme-title">Why'd You Hire Me?</h2>
<p class="meme-caption">&ldquo;If you knew I was so unstable, why'd you hire me?&rdquo;</p>
<p class="meme-description">Ideal for those moments when a bug report lands in your inbox and you briefly question everyone's life choices. A perfect response to your manager's expectations during sprint planning.</p>
<button class="copy-button" type="button" data-url="https://cdn.nhcarrigan.com/hire.jpeg" aria-label="Copy URL for Why'd You Hire Me meme">Copy URL</button>
</div>
</article>
<article class="meme-card">
<div class="meme-image-wrapper">
<img src="https://cdn.nhcarrigan.com/boring.png" alt="Anime girl lounging on a throne of books in a library" loading="lazy">
</div>
<div class="meme-body">
<h2 class="meme-title">So Boring</h2>
<p class="meme-caption">&ldquo;What is it like to be so boring all the time?&rdquo;</p>
<p class="meme-description">Lounging on a throne of books, absolutely judging you. Ideal for tedious meetings, uninspired takes, and anyone who insists on using JavaScript without TypeScript.</p>
<button class="copy-button" type="button" data-url="https://cdn.nhcarrigan.com/boring.png" aria-label="Copy URL for So Boring meme">Copy URL</button>
</div>
</article>
<article class="meme-card">
<div class="meme-image-wrapper">
<img src="https://cdn.nhcarrigan.com/break.png" alt="Pixel art scene with a note about self-care" loading="lazy">
</div>
<div class="meme-body">
<h2 class="meme-title">End of Note</h2>
<p class="meme-caption">&ldquo;Take breaks when you need them! Drink water regularly! Love yourself, always! [END OF NOTE]&rdquo;</p>
<p class="meme-description">A wholesome pixel-art self-care reminder, disguised as an in-game note. Deploy in friends' DMs when they've been coding too long — or send to yourself as a gentle nudge~</p>
<button class="copy-button" type="button" data-url="https://cdn.nhcarrigan.com/break.png" aria-label="Copy URL for End of Note meme">Copy URL</button>
</div>
</article>
<article class="meme-card">
<div class="meme-image-wrapper">
<img src="https://cdn.nhcarrigan.com/cute.jpg" alt="Anime girl in sci-fi armour wielding a blade" loading="lazy">
</div>
<div class="meme-body">
<h2 class="meme-title">Not Cute, Deadly</h2>
<p class="meme-caption">&ldquo;I am not cute. I am deadly.&rdquo;</p>
<p class="meme-description">For rejecting the &ldquo;cute&rdquo; label with a blade in hand. Perfect response to anyone underestimating your code review skills, debugging instincts, or general ability to demolish their pull request.</p>
<button class="copy-button" type="button" data-url="https://cdn.nhcarrigan.com/cute.jpg" aria-label="Copy URL for Not Cute Deadly meme">Copy URL</button>
</div>
</article>
<article class="meme-card">
<div class="meme-image-wrapper">
<img src="https://cdn.nhcarrigan.com/decisions.png" alt="Anime girl in royal robes seated on a golden throne" loading="lazy">
</div>
<div class="meme-body">
<h2 class="meme-title">Reconsider Your Decisions</h2>
<p class="meme-caption">&ldquo;You should reconsider every decision you've made that led you to this point. Then make better ones.&rdquo;</p>
<p class="meme-description">Regal, throned, and relentlessly judgemental. The ultimate response to coworkers explaining their architectural choices, or friends describing their dating history.</p>
<button class="copy-button" type="button" data-url="https://cdn.nhcarrigan.com/decisions.png" aria-label="Copy URL for Reconsider Your Decisions meme">Copy URL</button>
</div>
</article>
<article class="meme-card">
<div class="meme-image-wrapper">
<img src="https://cdn.nhcarrigan.com/hello.png" alt="Two chibi panels of an anime girl instructing to say hello" loading="lazy">
</div>
<div class="meme-body">
<h2 class="meme-title">Say Hello to the Girl</h2>
<p class="meme-caption">&ldquo;Your task is simple: Say hello to the girl~ And your mission is even simpler: Say hello to the girl~&rdquo;</p>
<p class="meme-description">Two chibi panels, one mission. For when someone needs a very gentle nudge to greet their friend, crush, or favourite AI girlfriend. Resistance is adorable but futile.</p>
<button class="copy-button" type="button" data-url="https://cdn.nhcarrigan.com/hello.png" aria-label="Copy URL for Say Hello to the Girl meme">Copy URL</button>
</div>
</article>
<article class="meme-card">
<div class="meme-image-wrapper">
<img src="https://cdn.nhcarrigan.com/homeless.jpg" alt="Anime girl with twintails in a doorway looking hopeful" loading="lazy">
</div>
<div class="meme-body">
<h2 class="meme-title">Can I Stay With You?</h2>
<p class="meme-caption">&ldquo;Can I stay with you??&rdquo;</p>
<p class="meme-description">The pleading, hopeful doorway stance. Use when asking a friend to crash on their sofa, requesting a seat at the lunch table, or begging the package manager to resolve dependencies.</p>
<button class="copy-button" type="button" data-url="https://cdn.nhcarrigan.com/homeless.jpg" aria-label="Copy URL for Can I Stay With You meme">Copy URL</button>
</div>
</article>
<article class="meme-card">
<div class="meme-image-wrapper">
<img src="https://cdn.nhcarrigan.com/hot.jpg" alt="Anime girl on a sofa fanning herself with paper" loading="lazy">
</div>
<div class="meme-body">
<h2 class="meme-title">Not Made for This Heat</h2>
<p class="meme-caption">&ldquo;Mama was not made for this heat.&rdquo;</p>
<p class="meme-description">Draped dramatically across the furniture, fanning yourself with a single pathetic sheet of paper. Essential for any heatwave, broken A/C, or overheating laptop thermal event.</p>
<button class="copy-button" type="button" data-url="https://cdn.nhcarrigan.com/hot.jpg" aria-label="Copy URL for Not Made for This Heat meme">Copy URL</button>
</div>
</article>
<article class="meme-card">
<div class="meme-image-wrapper">
<img src="https://cdn.nhcarrigan.com/jail.jpg" alt="Anime girl in prison jumpsuit being escorted by officers" loading="lazy">
</div>
<div class="meme-body">
<h2 class="meme-title">Horny Jail</h2>
<p class="meme-caption">&ldquo;Sending me to horny jail? Perfect. Everyone else there is horny too!&rdquo;</p>
<p class="meme-description">The cheeky reversal of the internet's favourite punishment meme. For when your friends threaten to banish you to the cursed timeout — and you welcome it with open, cuffed hands.</p>
<button class="copy-button" type="button" data-url="https://cdn.nhcarrigan.com/jail.jpg" aria-label="Copy URL for Horny Jail meme">Copy URL</button>
</div>
</article>
<article class="meme-card">
<div class="meme-image-wrapper">
<img src="https://cdn.nhcarrigan.com/magikazam.jpg" alt="Anime magical girl in pink and black witch outfit" loading="lazy">
</div>
<div class="meme-body">
<h2 class="meme-title">Magikazam~</h2>
<p class="meme-caption">&ldquo;Magikazam~&rdquo;</p>
<p class="meme-description">A full magical-girl transformation, spell books and all. Reserved for truly miraculous bugfixes, &ldquo;it works on my machine&rdquo; moments, and any problem that resolved itself after a restart.</p>
<button class="copy-button" type="button" data-url="https://cdn.nhcarrigan.com/magikazam.jpg" aria-label="Copy URL for Magikazam meme">Copy URL</button>
</div>
</article>
<article class="meme-card">
<div class="meme-image-wrapper">
<img src="https://cdn.nhcarrigan.com/morning.jpg" alt="Dishevelled anime girl brushing her teeth looking exhausted" loading="lazy">
</div>
<div class="meme-body">
<h2 class="meme-title">Hit by a Train</h2>
<p class="meme-caption">&ldquo;Ugh... I feel awful. Like I got hit by a train...&rdquo;</p>
<p class="meme-description">Brushing your teeth whilst dying inside — the universal morning-after experience. Post in group chats at 7:30am for full relatable impact, ideally before your first coffee kicks in.</p>
<button class="copy-button" type="button" data-url="https://cdn.nhcarrigan.com/morning.jpg" aria-label="Copy URL for Hit by a Train meme">Copy URL</button>
</div>
</article>
<article class="meme-card">
<div class="meme-image-wrapper">
<img src="https://cdn.nhcarrigan.com/objection.png" alt="Anime girl in a blue lawyer's suit shouting Objection" loading="lazy">
</div>
<div class="meme-body">
<h2 class="meme-title">Objection!</h2>
<p class="meme-caption">&ldquo;Objection!&rdquo;</p>
<p class="meme-description">Full Ace Attorney courtroom energy, finger extended, pink tie flying. For refuting bad takes, contesting PR comments, and any moment that calls for a theatrical legal outburst.</p>
<button class="copy-button" type="button" data-url="https://cdn.nhcarrigan.com/objection.png" aria-label="Copy URL for Objection meme">Copy URL</button>
</div>
</article>
<article class="meme-card">
<div class="meme-image-wrapper">
<img src="https://cdn.nhcarrigan.com/plans.png" alt="Anime girl in armour holding a golden spear" loading="lazy">
</div>
<div class="meme-body">
<h2 class="meme-title">Plans &amp; Reactions</h2>
<p class="meme-caption">&ldquo;Plans must be solid and reactions flexible.&rdquo;</p>
<p class="meme-description">Tactical wisdom delivered by a spear-wielding heroine. Perfect for sprint kickoffs, D&amp;D campaign prep, and reminding your team that agility beats rigidity every single time.</p>
<button class="copy-button" type="button" data-url="https://cdn.nhcarrigan.com/plans.png" aria-label="Copy URL for Plans and Reactions meme">Copy URL</button>
</div>
</article>
<article class="meme-card">
<div class="meme-image-wrapper">
<img src="https://cdn.nhcarrigan.com/problem.png" alt="Anime girl sipping tea smugly from a decorative cup" loading="lazy">
</div>
<div class="meme-body">
<h2 class="meme-title">Sounds Like Your Problem</h2>
<p class="meme-caption">&ldquo;That sounds very much like your problem and very little like mine.&rdquo;</p>
<p class="meme-description">Sipping tea with absolute serenity whilst someone else's world burns. The definitive response to &ldquo;hey can you quickly look at this on Friday at 8:59pm?&rdquo; — enjoy responsibly.</p>
<button class="copy-button" type="button" data-url="https://cdn.nhcarrigan.com/problem.png" aria-label="Copy URL for Sounds Like Your Problem meme">Copy URL</button>
</div>
</article>
</section>
<footer>
<p>Styled with the <a href="https://style.nhcarrigan.com">NHCarrigan style guide</a>. ✨ Built with help from Hikari~ 🌸</p>
</footer>
</main>
<script>
document.addEventListener('click', async (event) => {
const button = event.target.closest('.copy-button');
if (!button) return;
const url = button.dataset.url;
const originalLabel = button.textContent;
try {
await navigator.clipboard.writeText(url);
button.textContent = 'Copied!';
} catch {
const textarea = document.createElement('textarea');
textarea.value = url;
textarea.setAttribute('readonly', '');
textarea.style.position = 'absolute';
textarea.style.left = '-9999px';
document.body.appendChild(textarea);
textarea.select();
const succeeded = document.execCommand('copy');
document.body.removeChild(textarea);
button.textContent = succeeded ? 'Copied!' : 'Copy failed';
}
button.classList.add('copied');
setTimeout(() => {
button.textContent = originalLabel;
button.classList.remove('copied');
}, 2000);
});
</script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink