generated from nhcarrigan/template
feat: add meme page~
Security Scan and Upload / Security & DefectDojo Upload (push) Successful in 56s
Security Scan and Upload / Security & DefectDojo Upload (push) Successful in 56s
This commit is contained in:
@@ -0,0 +1,509 @@
|
|||||||
|
<!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">“I think girls should date girls, and boys should become girls and date girls.”</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">“If you knew I was so unstable, why'd you hire me?”</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">“What is it like to be so boring all the time?”</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">“Take breaks when you need them! Drink water regularly! Love yourself, always! [END OF NOTE]”</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">“I am not cute. I am deadly.”</p>
|
||||||
|
<p class="meme-description">For rejecting the “cute” 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">“You should reconsider every decision you've made that led you to this point. Then make better ones.”</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">“Your task is simple: Say hello to the girl~ And your mission is even simpler: Say hello to the girl~”</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">“Can I stay with you??”</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">“Mama was not made for this heat.”</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">“Sending me to horny jail? Perfect. Everyone else there is horny too!”</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">“Magikazam~”</p>
|
||||||
|
<p class="meme-description">A full magical-girl transformation, spell books and all. Reserved for truly miraculous bugfixes, “it works on my machine” 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">“Ugh... I feel awful. Like I got hit by a train...”</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">“Objection!”</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 & Reactions</h2>
|
||||||
|
<p class="meme-caption">“Plans must be solid and reactions flexible.”</p>
|
||||||
|
<p class="meme-description">Tactical wisdom delivered by a spear-wielding heroine. Perfect for sprint kickoffs, D&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">“That sounds very much like your problem and very little like mine.”</p>
|
||||||
|
<p class="meme-description">Sipping tea with absolute serenity whilst someone else's world burns. The definitive response to “hey can you quickly look at this on Friday at 8:59pm?” — 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
Block a user