Merhaba, sevgilinizi mutlu edin diye kod yazdım bi beğenirsiniz artık konuyu
Html + Tailwind CSS ile yaptığım basit ama bence yengeyi mutlu edebilecek bir site olsu :d
HTML:
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Güzelime...</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400;700&display=swap" rel="stylesheet">
<style>
.romantic-font {
font-family: 'Dancing Script', cursive;
}
</style>
</head>
<body class="bg-gradient-to-br from-pink-100 to-purple-200 min-h-screen">
<div class="container mx-auto px-4 py-12">
<div class="text-center mb-16">
<h1 class="romantic-font text-6xl text-pink-600 mb-4">Sevgiliniz Adı</h1>
<p class="text-2xl text-gray-700">Romantik bir söz :d</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-8 max-w-4xl mx-auto">
<div class="bg-white rounded-lg shadow-lg p-6 transform hover:scale-105 transition-transform duration-300">
<div class="aspect-w-1 aspect-h-1 mb-4">
<img src="https://placehold.co/400x400" alt="Bizim Fotoğrafımız" class="rounded-lg object-cover w-full h-full">
</div>
<p class="romantic-font text-2xl text-center text-pink-600">İlk Buluşmanız</p>
</div>
<div class="bg-white rounded-lg shadow-lg p-6">
<h2 class="romantic-font text-3xl text-pink-600 mb-4">Sana Olan Sevgim</h2>
<p class="text-gray-700 leading-relaxed mb-4">
Yengeyi etkileyecek romantik bir metin
</p>
<p class="text-gray-700 leading-relaxed">
Metin romantik olsun aman hee
</p>
</div>
</div>
<!-- Victor77 -->
<div class="mt-16">
<h2 class="romantic-font text-4xl text-center text-pink-600 mb-8">Güzel Anılarınız</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<div class="bg-white rounded-lg shadow-lg p-4 transform hover:scale-105 transition-transform duration-300">
<img src="https://placehold.co/300x300" alt="Anı 1" class="rounded-lg w-full mb-4">
<p class="text-center text-gray-700">Fotoğraf - 1 </p>
</div>
<div class="bg-white rounded-lg shadow-lg p-4 transform hover:scale-105 transition-transform duration-300">
<img src="https://placehold.co/300x300" alt="Anı 2" class="rounded-lg w-full mb-4">
<p class="text-center text-gray-700">Fotoğraf - 2</p>
</div>
<div class="bg-white rounded-lg shadow-lg p-4 transform hover:scale-105 transition-transform duration-300">
<img src="https://placehold.co/300x300" alt="Anı 3" class="rounded-lg w-full mb-4">
<p class="text-center text-gray-700">Fotoğraf - 3</p>
</div>
</div>
</div>
<div class="text-center mt-16">
<div class="text-6xl animate-bounce">❤️</div>
<p class="romantic-font text-3xl text-pink-600 mt-4">Sonsuza Kadar Seninle</p>
</div>
</div>
</body>
</html>
