deepsite-project / beauty.html
zipin's picture
帮我生成一个美女
5daf098 verified
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>美女展示 | My static Space</title>
<link rel="stylesheet" href="style.css" />
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
</head>
<body class="bg-gray-100">
<div class="max-w-4xl mx-auto p-4">
<div class="bg-white rounded-xl shadow-md overflow-hidden mb-6">
<div class="p-8">
<h1 class="text-3xl font-bold text-gray-800 mb-6 text-center">美女展示</h1>
<p class="text-gray-600 mb-8 text-center">欣赏精选的美女图片</p>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-8">
<div class="bg-gray-50 rounded-lg overflow-hidden shadow-sm">
<img src="http://static.photos/people/320x240/1" alt="美女1" class="w-full h-48 object-cover">
<div class="p-4">
<h3 class="font-semibold text-gray-800 mb-2">优雅气质</h3>
<p class="text-sm text-gray-600">展现优雅气质的美女形象</p>
</div>
</div>
<div class="bg-gray-50 rounded-lg overflow-hidden shadow-sm">
<img src="http://static.photos/people/320x240/2" alt="美女2" class="w-full h-48 object-cover">
<div class="p-4">
<h3 class="font-semibold text-gray-800 mb-2">时尚魅力</h3>
<p class="text-sm text-gray-600">充满时尚感的美丽形象</p>
</div>
</div>
<div class="bg-gray-50 rounded-lg overflow-hidden shadow-sm">
<img src="http://static.photos/people/320x240/3" alt="美女3" class="w-full h-48 object-cover">
<div class="p-4">
<h3 class="font-semibold text-gray-800 mb-2">自然之美</h3>
<p class="text-sm text-gray-600">展现自然纯净的美丽</p>
</div>
</div>
</div>
<div class="flex flex-wrap gap-4 justify-center mb-6">
<div class="flex items-center">
<i data-feather="arrow-left" class="mr-2 text-blue-500"></i>
<a href="index.html" class="text-blue-500 hover:underline">返回首页</a>
</div>
<div class="flex items-center">
<i data-feather="heart" class="mr-2 text-red-500"></i>
<a href="services.html" class="text-red-500 hover:underline">我们的服务</a>
</div>
<div class="flex items-center">
<i data-feather="mail" class="mr-2 text-purple-500"></i>
<a href="contact.html" class="text-purple-500 hover:underline">联系我们</a>
</div>
</div>
</div>
</div>
</div>
<script>
feather.replace();
</script>
</body>
</html>