File size: 10,821 Bytes
6061e17 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 | <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>BORK - The O.G Internet Dog</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Fredoka+One&family=Comic+Neue:wght@700&display=swap">
<style>
@keyframes float {
0% { transform: translateY(0px); }
50% { transform: translateY(-10px); }
100% { transform: translateY(0px); }
}
@keyframes glow {
0% { box-shadow: 0 0 5px rgba(158, 255, 203, 0.5); }
50% { box-shadow: 0 0 20px rgba(158, 255, 203, 0.8); }
100% { box-shadow: 0 0 5px rgba(158, 255, 203, 0.5); }
}
.wave-bg {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
overflow: hidden;
line-height: 0;
}
.wave-bg svg {
position: relative;
display: block;
width: calc(100% + 1.3px);
height: 150px;
}
.wave-bg .shape-fill {
fill: #7E22CE;
}
.bork-title {
font-family: 'Fredoka One', cursive;
text-shadow: 3px 3px 0 rgba(0,0,0,0.1);
}
.social-btn {
transition: all 0.3s ease;
}
.social-btn:hover {
transform: scale(1.1);
animation: glow 1.5s infinite;
}
.action-btn {
transition: all 0.3s ease;
border: 3px solid #000;
box-shadow: 5px 5px 0 rgba(0,0,0,0.2);
}
.action-btn:hover {
transform: translateY(-3px);
box-shadow: 8px 8px 0 rgba(0,0,0,0.2);
animation: glow 1.5s infinite;
}
.mascot {
animation: float 4s ease-in-out infinite;
}
.diamond {
filter: drop-shadow(0 0 10px rgba(158, 255, 203, 0.8));
}
</style>
</head>
<body class="min-h-screen bg-gradient-to-b from-purple-900 to-purple-700 text-white relative overflow-x-hidden">
<!-- Wave background -->
<div class="wave-bg">
<svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none">
<path d="M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z" class="shape-fill"></path>
</svg>
</div>
<!-- Social buttons -->
<div class="absolute top-8 left-8 flex flex-col space-y-4 z-10">
<button class="social-btn w-12 h-12 bg-green-300 rounded-lg flex items-center justify-center">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-twitter">
<path d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z"></path>
</svg>
</button>
<button class="social-btn w-12 h-12 bg-green-300 rounded-lg flex items-center justify-center">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-send">
<line x1="22" y1="2" x2="11" y2="13"></line>
<polygon points="22 2 15 22 11 13 2 9 22 2"></polygon>
</svg>
</button>
<button class="social-btn w-12 h-12 bg-green-300 rounded-lg flex items-center justify-center">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-link">
<path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path>
<path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path>
</svg>
</button>
</div>
<!-- Logo -->
<div class="absolute top-8 right-8 w-12 h-12 bg-white rounded-full flex items-center justify-center z-10">
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="#7E22CE" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-gitlab">
<path d="M22.65 14.39L12 22.13 1.35 14.39a.84.84 0 0 1-.3-.94l1.22-3.78 2.44-7.51A.42.42 0 0 1 4.82 2a.43.43 0 0 1 .58 0 .42.42 0 0 1 .11.18l2.44 7.49h8.1l2.44-7.51A.42.42 0 0 1 18.6 2a.43.43 0 0 1 .58 0 .42.42 0 0 1 .11.18l2.44 7.51L23 13.45a.84.84 0 0 1-.35.94z"></path>
</svg>
</div>
<!-- Main content -->
<div class="container mx-auto px-4 pt-32 pb-64 flex flex-col items-center justify-center text-center relative z-0">
<h1 class="bork-title text-8xl md:text-9xl mb-2 text-green-300">BORK!</h1>
<p class="text-green-300 uppercase tracking-widest text-lg mb-8">THE O.G INTERNET DOG</p>
<button class="action-btn bg-pink-400 text-black font-bold py-4 px-12 rounded-lg mb-16 text-xl uppercase tracking-wider">
LET'S BORK
</button>
<!-- Mascot -->
<div class="mascot relative w-64 h-64 md:w-80 md:h-80">
<div class="absolute inset-0 flex items-center justify-center">
<!-- Dog body -->
<div class="relative">
<!-- Head -->
<div class="w-40 h-32 bg-amber-200 rounded-t-full rounded-b-3xl relative z-10">
<!-- Eyes -->
<div class="absolute top-8 left-6 w-6 h-6 bg-white rounded-full flex items-center justify-center">
<div class="w-3 h-3 bg-black rounded-full"></div>
</div>
<div class="absolute top-8 right-6 w-6 h-6 bg-white rounded-full flex items-center justify-center">
<div class="w-3 h-3 bg-black rounded-full"></div>
</div>
<!-- Nose -->
<div class="absolute top-14 left-1/2 transform -translate-x-1/2 w-6 h-4 bg-black rounded-full"></div>
<!-- Mouth -->
<div class="absolute top-20 left-1/2 transform -translate-x-1/2 w-16 h-2 border-b-2 border-black"></div>
<!-- Sunglasses -->
<div class="absolute top-6 left-1/2 transform -translate-x-1/2 w-28 h-8 bg-black flex">
<div class="w-14 h-8 border-r-2 border-gray-600 flex items-center justify-center">
<div class="w-10 h-4 bg-green-300"></div>
</div>
<div class="w-14 h-8 flex items-center justify-center">
<div class="w-10 h-4 bg-green-300"></div>
</div>
</div>
</div>
<!-- Ears -->
<div class="absolute -top-4 left-2 w-12 h-12 bg-amber-400 rounded-full transform rotate-12 z-0"></div>
<div class="absolute -top-4 right-2 w-12 h-12 bg-amber-400 rounded-full transform -rotate-12 z-0"></div>
<!-- Body with suit -->
<div class="absolute top-28 left-1/2 transform -translate-x-1/2 w-32 h-40 bg-black rounded-b-lg">
<!-- Tie -->
<div class="absolute top-2 left-1/2 transform -translate-x-1/2 w-6 h-10 bg-pink-400"></div>
<div class="absolute top-12 left-1/2 transform -translate-x-1/2 w-10 h-2 bg-pink-400"></div>
<!-- Arms -->
<div class="absolute top-12 -left-4 w-4 h-16 bg-black rounded-full"></div>
<div class="absolute top-12 -right-4 w-4 h-16 bg-black rounded-full"></div>
<!-- Hands holding diamonds -->
<div class="absolute top-24 -left-8 w-8 h-8 diamond">
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12 2L15.09 8.26L22 9.27L17 14.14L18.18 21.02L12 17.77L5.82 21.02L7 14.14L2 9.27L8.91 8.26L12 2Z" fill="#9EFFCB"/>
</svg>
</div>
<div class="absolute top-24 -right-8 w-8 h-8 diamond">
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12 2L15.09 8.26L22 9.27L17 14.14L18.18 21.02L12 17.77L5.82 21.02L7 14.14L2 9.27L8.91 8.26L12 2Z" fill="#9EFFCB"/>
</svg>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Bottom buttons -->
<div class="fixed bottom-8 left-0 right-0 flex justify-center space-x-8 z-10">
<button class="action-btn bg-green-300 text-black font-bold py-3 px-8 rounded-lg text-lg uppercase tracking-wider">
BUY $BORK
</button>
<button class="action-btn bg-green-300 text-black font-bold py-3 px-8 rounded-lg text-lg uppercase tracking-wider">
STAKE YOUR $SOL
</button>
</div>
<script>
// Add interactive effects
document.querySelectorAll('.action-btn').forEach(button => {
button.addEventListener('mouseenter', () => {
button.classList.add('animate-bounce');
});
button.addEventListener('mouseleave', () => {
button.classList.remove('animate-bounce');
});
});
</script>
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Tollex/bork" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html> |