<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<title>3D Kalp Animasyon</title>
<style>
body {
margin: 0;
height: 100vh;
background: linear-gradient(#0d1b2a, #050505);
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
overflow: hidden;
color: #ffe600;
font-family: "Brush Script MT", cursive;
text-align: center;
}
h1 {
font-size: 48px;
text-shadow: 3px 3px 10px black;
margin-bottom: 20px;
}
.tarih {
font-size: 32px;
margin-bottom: 40px;
text-shadow: 2px 2px 6px black;
}
.kalp {
width: 200px;
height: 200px;
background-color: red;
position: relative;
transform: rotate(-45deg);
animation: pulse 1.2s infinite ease-in-out;
box-shadow: 0 0 40px rgba(255,0,0,0.9),
0 0 80px rgba(255,0,0,0.5),
inset 0 0 40px rgba(0,0,0,0.5);
}
.kalp:before,
.kalp:after {
content: "";
width: 200px;
height: 200px;
background-color: red;
border-radius: 50%;
position: absolute;
}
.kalp:before {
top: -100px;
left: 0;
}
.kalp:after {
left: 100px;
top: 0;
}
@keyframes pulse {
0% { transform: rotate(-45deg) scale(1); }
50% { transform: rotate(-45deg) scale(1.15); }
100% { transform: rotate(-45deg) scale(1); }
}
.zemin {
width: 150%;
height: 300px;
background: #ffffff;
border-top-left-radius: 50%;
border-top-right-radius: 50%;
position: absolute;
bottom: -120px;
box-shadow: 0 -40px 120px rgba(0,0,0,0.5);
}
</style>
</head>
<body>
<h1>Ekimli Kasım’lı Değil… <br> Aralıksız Seviyorum Seni ❤️</h1>
<div class="tarih">05.01.2025</div>
<div class="kalp"></div>
<div class="zemin"></div>
</body>
</html>