<!DOCTYPE html>
<html lang=”zh-CN”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>关于我 | DogDo风格副页</title>
<link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css”>
<style>
/* 继承主页面基础样式 */
@import url(‘main-page.css’); /* 假设主页面样式保存为此文件 */
/* 副页专属样式 */
.about-container {
max-width: 1000px;
margin: 80px auto 40px;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
padding: 0 2rem;
}
.info-card {
background: linear-gradient(145deg, #ffffff, #f8f9fa);
padding: 2rem;
border-radius: 15px;
box-shadow: 0 10px 30px rgba(0,0,0,0.05);
transition: transform 0.3s ease, box-shadow 0.3s ease;
position: relative;
overflow: hidden;
}
.info-card:hover {
transform: translateY(-5px);
box-shadow: 0 15px 40px rgba(52, 152, 219, 0.1);
}
.card-icon {
width: 60px;
height: 60px;
display: flex;
align-items: center;
justify-content: center;
background: #2c3e50;
color: white;
border-radius: 50%;
font-size: 2rem;
margin: 0 auto 1.5rem;
position: relative;
z-index: 1;
}
.card-icon::after {
content: ”;
position: absolute;
width: 80%;
height: 80%;
background: radial-gradient(circle,
rgba(255,255,255,0.1) 0%,
rgba(255,255,255,0) 70%);
border-radius: 50%;
animation: pulse 2s infinite;
}
@keyframes pulse {
0% { transform: scale(0.8); opacity: 0.8; }
50% { transform: scale(1.2); opacity: 0.4; }
100% { transform: scale(0.8); opacity: 0.8; }
}
.skill-tag {
display: inline-block;
padding: 0.5rem 1rem;
margin: 0.5rem;
background: linear-gradient(135deg, #6c63ff 0%, #3f3d56 100%);
color: white;
border-radius: 20px;
font-weight: 500;
transition: transform 0.2s ease;
}
.skill-tag:hover {
transform: translateY(-3px);
}
/* 响应式调整 */
@media (max-width: 768px) {
.about-container {
grid-template-columns: 1fr;
padding: 0 1rem;
}
.info-card {
margin-bottom: 2rem;
}
}
</style>
</head>
<body>
<!– 继承主页面导航栏 –>
<nav class=”cyber-nav”>…</nav>
<!– 主内容区 –>
<main>
<section class=”about-container”>
<!– 基本信息卡 –>
<div class=”info-card”>
<div class=”card-icon”>
<i class=”fas fa-birthdate”></i>
</div>
<h3>出生印记</h3>
<p>🌱 1995年5月15日 · 双子座<br>
🌍 中国·上海<br>
🌟 星座特质：善变的思想家与创意实践者</p>
</div>
<!– 联系方式卡 –>
<div class=”info-card”>
<div class=”card-icon”>
<i class=”fas fa-envelope”></i>
</div>
<h3>联系通道</h3>
<div class=”contact-list”>
<p><i class=”fas fa-mobile-alt”></i> +86 138-0000-0000</p>
<p><i class=”fas fa-envelope”></i> example@mail.com</p>
<p><i class=”fas fa-map-marker-alt”></i> 上海市浦东新区世纪大道100号</p>
</div>
</div>
<!– 兴趣技能卡 –>
<div class=”info-card”>
<div class=”card-icon”>
<i class=”fas fa-paint-brush”></i>
</div>
<h3>数字指纹</h3>
<div class=”skill-tags”>
<span class=”skill-tag”>#全栈开发</span>
<span class=”skill-tag”>#用户体验设计</span>
<span class=”skill-tag”>#人工智能探索</span>
<span class=”skill-tag”>#前端架构师</span>
<span class=”skill-tag”>#开源贡献者</span>
</div>
</div>
<!– 生活哲学卡 –>
<div class=”info-card”>
<div class=”card-icon”>
<i class=”fas fa-leaf”></i>
</div>
<h3>精神图谱</h3>
<p>📖 正在阅读：《人类简史》《代码的未来》<br>
🎵 最爱音乐：电子/爵士/独立摇滚<br>
🏋️ 每周运动：游泳3次/瑜伽2次<br>
🌱 个人信条：代码即艺术，细节定成败</p>
</div>
</section>
</main>
<!– 继承主页面脚本 –>
<script>…</script>
</body>
</html>
