<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Yakında Hizmetinizdeyiz</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
font-family: Arial, sans-serif;
background-color: #f0f0f0;
color: #333;
perspective: 1000px;
}
.container {
text-align: center;
position: relative;
}
.content {
z-index: 10;
}
.logo {
width: 200px;
margin-bottom: 20px;
}
h1 {
font-size: 2.5em;
margin: 0;
}
p {
font-size: 1.2em;
}
.cube {
position: absolute;
width: 150px;
height: 150px;
transform-style: preserve-3d;
animation: rotate 5s infinite linear;
top: -99%;
left: 50%;
transform: translate(-50%, -50%);
}
.face {
position: absolute;
width: 150px;
height: 150px;
background: rgba(255, 255, 255, 0.9);
border: 1px solid #ccc;
display: flex;
justify-content: center;
align-items: center;
font-size: 2em;
font-weight: bold;
}
.front { transform: translateZ(75px); }
.back { transform: rotateY(180deg) translateZ(75px); }
.left { transform: rotateY(-90deg) translateZ(75px); }
.right { transform: rotateY(90deg) translateZ(75px); }
.top { transform: rotateX(90deg) translateZ(75px); }
.bottom { transform: rotateX(-90deg) translateZ(75px); }
@keyframes rotate {
from {
transform: translate(-50%, -50%) rotateX(0) rotateY(0);
}
to {
transform: translate(-50%, -50%) rotateX(360deg) rotateY(360deg);
}
}
@media (max-width: 600px) {
h1 {
font-size: 2em;
}
p {
font-size: 1em;
}
}
</style>
<script>
document.addEventListener("DOMContentLoaded", function() {
const cube = document.querySelector('.cube');
cube.style.animationPlayState = 'running';
});
</script>
</head>
<body>
<div class="container">
<div class="content">
<div class="logo-container">
</div>
<h1>Yakında Hizmetinizdeyiz</h1>
<p>Yeni e-ticaret sitemiz yakında sizlerle olacak. Beklemede kalın!</p>
</div>
<div class="cube">
<div class="face front"><img src="logo.png" alt="Logo"></div>
<div class="face back"><img src="logo.png" alt="Logo"></div>
<div class="face left"><img src="logo.png" alt="Logo"></div>
<div class="face right"><img src="logo.png" alt="Logo"></div>
<div class="face top"><img src="logo.png" alt="Logo"></div>
<div class="face bottom"><img src="logo.png" alt="Logo"></div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>