generated from nhcarrigan/template
This commit is contained in:
+468
@@ -0,0 +1,468 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>🎪 Naomi's Silly Sites Carnival 🎪</title>
|
||||
<style>
|
||||
@import url('https://fonts.googleapis.com/css2?family=Bungee+Shade&family=Fredoka:wght@400;700&display=swap');
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Fredoka', cursive;
|
||||
background: linear-gradient(45deg, #ff6b6b, #4ecdc4, #45b7d1, #96ceb4, #feca57, #ff9ff3);
|
||||
background-size: 300% 300%;
|
||||
animation: gradientShift 10s ease infinite;
|
||||
min-height: 100vh;
|
||||
overflow-x: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@keyframes gradientShift {
|
||||
0% { background-position: 0% 50%; }
|
||||
50% { background-position: 100% 50%; }
|
||||
100% { background-position: 0% 50%; }
|
||||
}
|
||||
|
||||
/* Floating background elements */
|
||||
.floating-emoji {
|
||||
position: absolute;
|
||||
font-size: 2rem;
|
||||
animation: float 15s infinite ease-in-out;
|
||||
opacity: 0.7;
|
||||
user-select: none;
|
||||
cursor: pointer;
|
||||
transition: transform 0.3s;
|
||||
}
|
||||
|
||||
.floating-emoji:hover {
|
||||
transform: scale(1.5) rotate(360deg);
|
||||
}
|
||||
|
||||
@keyframes float {
|
||||
0%, 100% {
|
||||
transform: translateY(0) translateX(0) rotate(0deg);
|
||||
}
|
||||
25% {
|
||||
transform: translateY(-100px) translateX(50px) rotate(90deg);
|
||||
}
|
||||
50% {
|
||||
transform: translateY(-50px) translateX(-50px) rotate(180deg);
|
||||
}
|
||||
75% {
|
||||
transform: translateY(-150px) translateX(100px) rotate(270deg);
|
||||
}
|
||||
}
|
||||
|
||||
/* Main container */
|
||||
.container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 2rem;
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
/* Header */
|
||||
.header {
|
||||
text-align: center;
|
||||
margin-bottom: 3rem;
|
||||
animation: bounceIn 1s ease-out;
|
||||
}
|
||||
|
||||
@keyframes bounceIn {
|
||||
0% {
|
||||
transform: scale(0);
|
||||
opacity: 0;
|
||||
}
|
||||
60% {
|
||||
transform: scale(1.2);
|
||||
}
|
||||
100% {
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-family: 'Bungee Shade', cursive;
|
||||
font-size: clamp(2.5rem, 8vw, 5rem);
|
||||
color: #fff;
|
||||
text-shadow: 3px 3px 0 #ff6b6b, 6px 6px 0 #4ecdc4, 9px 9px 0 #45b7d1;
|
||||
margin-bottom: 1rem;
|
||||
animation: wiggle 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes wiggle {
|
||||
0%, 100% { transform: rotate(-3deg); }
|
||||
50% { transform: rotate(3deg); }
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-size: 1.5rem;
|
||||
color: #fff;
|
||||
text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.tagline {
|
||||
font-size: 1.2rem;
|
||||
color: #fff;
|
||||
text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/* Site cards */
|
||||
.sites-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
||||
gap: 2rem;
|
||||
margin-top: 3rem;
|
||||
}
|
||||
|
||||
.site-card {
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
border-radius: 20px;
|
||||
padding: 2rem;
|
||||
text-align: center;
|
||||
transition: all 0.3s ease;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
animation: slideUp 0.6s ease-out;
|
||||
animation-fill-mode: backwards;
|
||||
box-shadow: 0 10px 30px rgba(0,0,0,0.2);
|
||||
}
|
||||
|
||||
.site-card::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -50%;
|
||||
left: -50%;
|
||||
width: 200%;
|
||||
height: 200%;
|
||||
background: linear-gradient(45deg, transparent, rgba(255,255,255,0.3), transparent);
|
||||
transform: rotate(45deg);
|
||||
transition: all 0.6s;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.site-card:hover::before {
|
||||
animation: shine 0.6s ease-out;
|
||||
}
|
||||
|
||||
@keyframes shine {
|
||||
0% {
|
||||
top: -50%;
|
||||
left: -50%;
|
||||
opacity: 0;
|
||||
}
|
||||
50% {
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
top: 150%;
|
||||
left: 150%;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.site-card:hover {
|
||||
transform: translateY(-10px) scale(1.05);
|
||||
box-shadow: 0 20px 40px rgba(0,0,0,0.3);
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
}
|
||||
|
||||
.site-card:hover .site-icon,
|
||||
.site-card:hover .site-title,
|
||||
.site-card:hover .site-description {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
@keyframes slideUp {
|
||||
from {
|
||||
transform: translateY(30px);
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
transform: translateY(0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.site-card:nth-child(1) { animation-delay: 0.1s; }
|
||||
.site-card:nth-child(2) { animation-delay: 0.2s; }
|
||||
.site-card:nth-child(3) { animation-delay: 0.3s; }
|
||||
.site-card:nth-child(4) { animation-delay: 0.4s; }
|
||||
|
||||
.site-icon {
|
||||
font-size: 3rem;
|
||||
margin-bottom: 1rem;
|
||||
animation: bounce 2s infinite;
|
||||
}
|
||||
|
||||
@keyframes bounce {
|
||||
0%, 100% { transform: translateY(0); }
|
||||
50% { transform: translateY(-10px); }
|
||||
}
|
||||
|
||||
.site-title {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: 0.5rem;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.site-description {
|
||||
color: #666;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
/* Coming soon card */
|
||||
.coming-soon {
|
||||
background: repeating-linear-gradient(
|
||||
45deg,
|
||||
#f0f0f0,
|
||||
#f0f0f0 10px,
|
||||
#e0e0e0 10px,
|
||||
#e0e0e0 20px
|
||||
);
|
||||
border: 3px dashed #999;
|
||||
cursor: not-allowed;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.coming-soon:hover {
|
||||
transform: none;
|
||||
background: repeating-linear-gradient(
|
||||
45deg,
|
||||
#f0f0f0,
|
||||
#f0f0f0 10px,
|
||||
#e0e0e0 10px,
|
||||
#e0e0e0 20px
|
||||
);
|
||||
}
|
||||
|
||||
/* Fun cursor trail effect */
|
||||
.cursor-trail {
|
||||
position: fixed;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background: radial-gradient(circle, rgba(255,255,255,0.8) 0%, transparent 70%);
|
||||
border-radius: 50%;
|
||||
pointer-events: none;
|
||||
z-index: 9999;
|
||||
transition: transform 0.1s ease;
|
||||
}
|
||||
|
||||
/* Footer */
|
||||
.footer {
|
||||
text-align: center;
|
||||
margin-top: 4rem;
|
||||
padding: 2rem;
|
||||
color: #fff;
|
||||
text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
|
||||
}
|
||||
|
||||
.footer a {
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
font-weight: 700;
|
||||
border-bottom: 2px solid transparent;
|
||||
transition: border-color 0.3s;
|
||||
}
|
||||
|
||||
.footer a:hover {
|
||||
border-color: #fff;
|
||||
}
|
||||
|
||||
/* Responsive */
|
||||
@media (max-width: 768px) {
|
||||
.sites-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* Accessibility */
|
||||
.site-card:focus-visible {
|
||||
outline: 3px solid #4ecdc4;
|
||||
outline-offset: 3px;
|
||||
}
|
||||
|
||||
/* Fun loading animation */
|
||||
.loading-dots {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.loading-dots span {
|
||||
display: inline-block;
|
||||
animation: loadingDot 1.4s infinite;
|
||||
}
|
||||
|
||||
.loading-dots span:nth-child(1) { animation-delay: 0s; }
|
||||
.loading-dots span:nth-child(2) { animation-delay: 0.2s; }
|
||||
.loading-dots span:nth-child(3) { animation-delay: 0.4s; }
|
||||
|
||||
@keyframes loadingDot {
|
||||
0%, 80%, 100% {
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
40% {
|
||||
transform: scale(1.3);
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- Floating background elements -->
|
||||
<div class="floating-emoji" style="top: 10%; left: 10%; animation-delay: 0s;">🎈</div>
|
||||
<div class="floating-emoji" style="top: 20%; left: 80%; animation-delay: 2s;">🎪</div>
|
||||
<div class="floating-emoji" style="top: 60%; left: 5%; animation-delay: 4s;">🎨</div>
|
||||
<div class="floating-emoji" style="top: 70%; left: 90%; animation-delay: 6s;">🌈</div>
|
||||
<div class="floating-emoji" style="top: 30%; left: 50%; animation-delay: 8s;">✨</div>
|
||||
<div class="floating-emoji" style="top: 80%; left: 40%; animation-delay: 10s;">🎭</div>
|
||||
<div class="floating-emoji" style="top: 50%; left: 70%; animation-delay: 12s;">🎯</div>
|
||||
<div class="floating-emoji" style="top: 15%; left: 30%; animation-delay: 14s;">🎡</div>
|
||||
|
||||
<div class="container">
|
||||
<header class="header">
|
||||
<h1>Silly Sites Carnival</h1>
|
||||
<p class="subtitle">Welcome to Naomi's Collection of Delightfully Ridiculous Web Pages!</p>
|
||||
<p class="tagline">Where serious coding meets silly ideas 🎉</p>
|
||||
</header>
|
||||
|
||||
<main class="sites-grid">
|
||||
<a href="/travel-agency/" class="site-card" tabindex="0">
|
||||
<div class="site-icon">✈️</div>
|
||||
<h2 class="site-title">Dubious Travel Agency</h2>
|
||||
<p class="site-description">Book your next adventure to places that definitely exist! We promise!</p>
|
||||
</a>
|
||||
|
||||
<div class="site-card coming-soon" tabindex="0">
|
||||
<div class="site-icon">🔮</div>
|
||||
<h2 class="site-title">Mystery Project</h2>
|
||||
<p class="site-description">Coming soon<span class="loading-dots"><span>.</span><span>.</span><span>.</span></span> What could it be?</p>
|
||||
</div>
|
||||
|
||||
<div class="site-card coming-soon" tabindex="0">
|
||||
<div class="site-icon">🎲</div>
|
||||
<h2 class="site-title">Random Nonsense Generator</h2>
|
||||
<p class="site-description">Future home of absolutely meaningless content!</p>
|
||||
</div>
|
||||
|
||||
<div class="site-card coming-soon" tabindex="0">
|
||||
<div class="site-icon">🦄</div>
|
||||
<h2 class="site-title">Unicorn University</h2>
|
||||
<p class="site-description">Learn skills that don't exist yet!</p>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<footer class="footer">
|
||||
<p>Made with 💜 and a healthy dose of silliness by <a href="https://www.nhcarrigan.com">Naomi</a></p>
|
||||
<p>Found a bug? It's probably a feature! But you can <a href="https://support.nhcarrigan.com">report it anyway</a>.</p>
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// Add some interactive silliness!
|
||||
const emojis = ['🎈', '🎪', '🎨', '🌈', '✨', '🎭', '🎯', '🎡', '🎉', '🎊', '🎠', '🎢'];
|
||||
|
||||
// Click floating emojis to change them
|
||||
document.querySelectorAll('.floating-emoji').forEach(emoji => {
|
||||
emoji.addEventListener('click', function() {
|
||||
const randomEmoji = emojis[Math.floor(Math.random() * emojis.length)];
|
||||
this.textContent = randomEmoji;
|
||||
|
||||
// Burst effect
|
||||
const burst = document.createElement('div');
|
||||
burst.style.position = 'absolute';
|
||||
burst.style.left = '50%';
|
||||
burst.style.top = '50%';
|
||||
burst.style.transform = 'translate(-50%, -50%)';
|
||||
burst.style.fontSize = '3rem';
|
||||
burst.textContent = randomEmoji;
|
||||
burst.style.animation = 'burst 0.6s ease-out forwards';
|
||||
this.appendChild(burst);
|
||||
|
||||
setTimeout(() => burst.remove(), 600);
|
||||
});
|
||||
});
|
||||
|
||||
// Create cursor trail on mouse move
|
||||
let mouseX = 0, mouseY = 0;
|
||||
const trails = [];
|
||||
const maxTrails = 10;
|
||||
|
||||
document.addEventListener('mousemove', (e) => {
|
||||
mouseX = e.clientX;
|
||||
mouseY = e.clientY;
|
||||
|
||||
if (trails.length >= maxTrails) {
|
||||
const oldTrail = trails.shift();
|
||||
oldTrail.remove();
|
||||
}
|
||||
|
||||
const trail = document.createElement('div');
|
||||
trail.className = 'cursor-trail';
|
||||
trail.style.left = mouseX + 'px';
|
||||
trail.style.top = mouseY + 'px';
|
||||
trail.style.background = `hsl(${Math.random() * 360}, 100%, 70%)`;
|
||||
document.body.appendChild(trail);
|
||||
trails.push(trail);
|
||||
|
||||
setTimeout(() => {
|
||||
trail.style.transform = 'scale(0)';
|
||||
setTimeout(() => {
|
||||
const index = trails.indexOf(trail);
|
||||
if (index > -1) trails.splice(index, 1);
|
||||
trail.remove();
|
||||
}, 300);
|
||||
}, 100);
|
||||
});
|
||||
|
||||
// Add burst animation
|
||||
const style = document.createElement('style');
|
||||
style.textContent = `
|
||||
@keyframes burst {
|
||||
0% {
|
||||
transform: translate(-50%, -50%) scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
transform: translate(-50%, -50%) scale(3);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
`;
|
||||
document.head.appendChild(style);
|
||||
|
||||
// Console easter egg
|
||||
console.log('%c🎪 Welcome to the Silly Sites Carnival! 🎪', 'font-size: 24px; color: #ff6b6b; font-weight: bold; text-shadow: 2px 2px 4px rgba(0,0,0,0.3);');
|
||||
console.log('%cYou found the secret console message! Here\'s a joke:', 'font-size: 16px; color: #4ecdc4;');
|
||||
console.log('%cWhy do programmers prefer dark mode?\n\nBecause light attracts bugs! 🐛', 'font-size: 14px; color: #45b7d1;');
|
||||
</script>
|
||||
</body>
|
||||
<script defer="" src="https://analytics.nhcarrigan.com/js/pa-YUXAn1vhhRttySUAw_LMN.js"></script>
|
||||
<script>
|
||||
window.plausible=window.plausible||function(){(plausible.q=plausible.q||[]).push(arguments)},plausible.init=plausible.init||function(i){plausible.o=i||{}};
|
||||
plausible.init({
|
||||
customProperties: {
|
||||
domain: "silly.nhcarrigan.com",
|
||||
page: "NHCarrigan - Software Engineering & Community Management",
|
||||
path: "/",
|
||||
},
|
||||
})
|
||||
</script>
|
||||
<script async="" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-3569924701890974" crossorigin="anonymous"></script>
|
||||
</html>
|
||||
Reference in New Issue
Block a user