<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dara by Petnow - Launching Soon</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Georgia', serif;
overflow-x: hidden;
background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 50%, #4a4a4a 100%);
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
/* Animated background particles */
.particle {
position: absolute;
border-radius: 50%;
background: rgba(255, 255, 255, 0.05);
animation: float 20s infinite;
}
@keyframes float {
0%, 100% {
transform: translateY(0) translateX(0) scale(1);
opacity: 0;
}
10% {
opacity: 0.3;
}
90% {
opacity: 0.3;
}
50% {
transform: translateY(-100vh) translateX(50px) scale(1.5);
}
}
.container {
text-align: center;
z-index: 10;
padding: 40px;
max-width: 1200px;
width: 100%;
}
.logo {
font-size: 14px;
font-weight: 700;
letter-spacing: 3px;
color: #ff6b35;
margin-bottom: 60px;
opacity: 0;
animation: fadeInDown 1s ease forwards;
font-family: Arial, sans-serif;
}
@keyframes fadeInDown {
from {
opacity: 0;
transform: translateY(-30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
h1 {
font-size: clamp(60px, 12vw, 140px);
font-weight: 300;
color: #f5f5f5;
margin-bottom: 20px;
line-height: 1.2;
opacity: 0;
animation: fadeInUp 1s ease 0.3s forwards;
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.subtitle {
font-size: clamp(14px, 2.5vw, 18px);
color: #b0b0b0;
letter-spacing: 2px;
margin-bottom: 80px;
opacity: 0;
animation: fadeInUp 1s ease 0.6s forwards;
font-family: Arial, sans-serif;
font-weight: 400;
}
.contact-btn {
display: inline-block;
padding: 18px 60px;
background: #000;
color: #fff;
text-decoration: none;
border-radius: 50px;
font-size: 18px;
font-family: Arial, sans-serif;
font-weight: 400;
letter-spacing: 1px;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
opacity: 0;
animation: fadeInUp 1s ease 0.9s forwards;
position: relative;
overflow: hidden;
border: 2px solid #000;
}
.contact-btn::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
border-radius: 50%;
background: #ff6b35;
transition: width 0.6s, height 0.6s, top 0.6s, left 0.6s;
transform: translate(-50%, -50%);
z-index: -1;
}
.contact-btn:hover::before {
width: 400px;
height: 400px;
}
.contact-btn:hover {
transform: translateY(-3px);
box-shadow: 0 10px 40px rgba(255, 107, 53, 0.3);
border-color: #ff6b35;
}
/* Floating animation for text */
@keyframes floatText {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-10px);
}
}
h1 {
animation: fadeInUp 1s ease 0.3s forwards, floatText 4s ease-in-out 1.5s infinite;
}
/* Glow effect */
@keyframes glow {
0%, 100% {
text-shadow: 0 0 20px rgba(255, 107, 53, 0.3);
}
50% {
text-shadow: 0 0 40px rgba(255, 107, 53, 0.5);
}
}
.logo {
animation: fadeInDown 1s ease forwards, glow 3s ease-in-out infinite;
}
/* Responsive */
@media (max-width: 768px) {
.logo {
font-size: 12px;
margin-bottom: 40px;
}
.subtitle {
margin-bottom: 60px;
padding: 0 20px;
}
.contact-btn {
padding: 15px 45px;
font-size: 16px;
}
}
</style>
</head>
<body>
<div class="container">
<div class="logo">DARA BY PETNOW</div>
<h1>Launching<br>soon!</h1>
<p class="subtitle">WE ARE CURRENTLY MAKING SOME<br>IMPROVEMENTS TO OUR WEBSITE!</p>
<a href="mailto:contact@darabypetnow.com" class="contact-btn">Contact</a>
</div>
<script>
// Create floating particles
function createParticle() {
const particle = document.createElement('div');
particle.className = 'particle';
const size = Math.random() * 100 + 50;
const startX = Math.random() * window.innerWidth;
const delay = Math.random() * 10;
particle.style.width = size + 'px';
particle.style.height = size + 'px';
particle.style.left = startX + 'px';
particle.style.bottom = '-100px';
particle.style.animationDelay = delay + 's';
particle.style.animationDuration = (Math.random() * 10 + 15) + 's';
document.body.appendChild(particle);
setTimeout(() => {
particle.remove();
}, (25 + delay) * 1000);
}
// Generate particles
for (let i = 0; i < 15; i++) {
setTimeout(() => {
createParticle();
}, i * 1500);
}
// Continuously create particles
setInterval(() => {
createParticle();
}, 3000);
// Mouse move parallax effect
document.addEventListener('mousemove', (e) => {
const containers = document.querySelectorAll('.container > *');
const x = e.clientX / window.innerWidth - 0.5;
const y = e.clientY / window.innerHeight - 0.5;
containers.forEach((el, index) => {
const speed = (index + 1) * 10;
el.style.transform = `translate(${x * speed}px, ${y * speed}px)`;
});
});
</script>
</body>
</html>