|
|
<!DOCTYPE html> |
|
|
<html lang="zh-CN"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>艾星辰部落格 - 星辰科技，引领未来</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
|
<script> |
|
|
tailwind.config = { |
|
|
theme: { |
|
|
extend: { |
|
|
backdropBlur: { |
|
|
xs: '2px', |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
</script> |
|
|
<style> |
|
|
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap'); |
|
|
|
|
|
body { |
|
|
font-family: 'Montserrat', 'Noto Sans SC', sans-serif; |
|
|
background: linear-gradient(135deg, #0f172a, #1e293b); |
|
|
background-attachment: fixed; |
|
|
color: #e2e8f0; |
|
|
overflow-x: hidden; |
|
|
} |
|
|
|
|
|
.glass { |
|
|
background: rgba(255, 255, 255, 0.08); |
|
|
backdrop-filter: blur(12px); |
|
|
-webkit-backdrop-filter: blur(12px); |
|
|
border: 1px solid rgba(255, 255, 255, 0.1); |
|
|
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1); |
|
|
} |
|
|
|
|
|
.glass-light { |
|
|
background: rgba(255, 255, 255, 0.05); |
|
|
backdrop-filter: blur(8px); |
|
|
-webkit-backdrop-filter: blur(8px); |
|
|
} |
|
|
|
|
|
.hero-bg { |
|
|
background: radial-gradient(circle at top right, rgba(99, 102, 241, 0.15), transparent 40%), |
|
|
radial-gradient(circle at bottom left, rgba(139, 92, 246, 0.15), transparent 40%), |
|
|
linear-gradient(to bottom, #0f172a, #020617); |
|
|
background-size: cover; |
|
|
} |
|
|
|
|
|
.service-card:hover { |
|
|
transform: translateY(-10px); |
|
|
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.2), 0 10px 10px -5px rgba(0, 0, 0, 0.1); |
|
|
} |
|
|
|
|
|
.parallax { |
|
|
background-attachment: fixed; |
|
|
background-size: cover; |
|
|
} |
|
|
|
|
|
.text-gradient { |
|
|
background: linear-gradient(90deg, #818cf8, #c084fc, #f472b6); |
|
|
-webkit-background-clip: text; |
|
|
-webkit-text-fill-color: transparent; |
|
|
background-clip: text; |
|
|
} |
|
|
|
|
|
.animate-float { |
|
|
animation: float 6s ease-in-out infinite; |
|
|
} |
|
|
|
|
|
@keyframes float { |
|
|
0% { transform: translateY(0px); } |
|
|
50% { transform: translateY(-20px); } |
|
|
100% { transform: translateY(0px); } |
|
|
} |
|
|
|
|
|
.stars { |
|
|
position: absolute; |
|
|
top: 0; |
|
|
left: 0; |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
pointer-events: none; |
|
|
} |
|
|
|
|
|
.star { |
|
|
position: absolute; |
|
|
background: white; |
|
|
border-radius: 50%; |
|
|
animation: twinkle var(--duration, 4s) infinite var(--delay, 0s); |
|
|
} |
|
|
|
|
|
@keyframes twinkle { |
|
|
0%, 100% { opacity: 0.2; } |
|
|
50% { opacity: 1; } |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="min-h-screen"> |
|
|
|
|
|
<div class="stars" id="stars"></div> |
|
|
|
|
|
|
|
|
<nav class="fixed top-0 left-0 right-0 z-50 glass py-4 px-6"> |
|
|
<div class="max-w-7xl mx-auto flex justify-between items-center"> |
|
|
<div class="flex items-center space-x-2"> |
|
|
<div class="w-10 h-10 rounded-full bg-gradient-to-br from-purple-500 to-indigo-600 flex items-center justify-center"> |
|
|
<i class="fas fa-star text-white text-xl"></i> |
|
|
</div> |
|
|
<span class="text-xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-purple-400 to-pink-600">艾星辰部落格</span> |
|
|
</div> |
|
|
|
|
|
<div class="hidden md:flex space-x-8"> |
|
|
<a href="#home" class="text-white hover:text-purple-300 transition-colors">首页</a> |
|
|
<a href="#about" class="text-white hover:text-purple-300 transition-colors">关于我们</a> |
|
|
<a href="#services" class="text-white hover:text-purple-300 transition-colors">服务项目</a> |
|
|
<a href="#portfolio" class="text-white hover:text-purple-300 transition-colors">作品展示</a> |
|
|
<a href="#contact" class="text-white hover:text-purple-300 transition-colors">联系我们</a> |
|
|
</div> |
|
|
|
|
|
<button class="md:hidden text-white"> |
|
|
<i class="fas fa-bars text-2xl"></i> |
|
|
</button> |
|
|
</div> |
|
|
</nav> |
|
|
|
|
|
|
|
|
<section id="home" class="hero-bg min-h-screen flex items-center pt-16"> |
|
|
<div class="max-w-7xl mx-auto px-4 py-20 grid md:grid-cols-2 gap-12 items-center"> |
|
|
<div class="text-center md:text-left"> |
|
|
<h1 class="text-4xl md:text-6xl font-bold mb-6"> |
|
|
<span class="block text-white">引领未来的</span> |
|
|
<span class="block text-gradient">科技创意</span> |
|
|
</h1> |
|
|
<p class="text-xl text-slate-300 mb-8 max-w-2xl"> |
|
|
艾星辰部落格专注于前沿技术与创意设计的融合，为客户提供卓越的数字化解决方案，点亮您的星辰之路。 |
|
|
</p> |
|
|
<div class="flex flex-col sm:flex-row gap-4 justify-center md:justify-start"> |
|
|
<button class="glass px-8 py-3 rounded-full font-semibold text-white hover:bg-white/10 transition-all"> |
|
|
开始探索 |
|
|
</button> |
|
|
<button class="glass px-8 py-3 rounded-full font-semibold text-white hover:bg-white/10 transition-all flex items-center justify-center"> |
|
|
<i class="fas fa-play-circle mr-2"></i> 观看视频 |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex justify-center animate-float"> |
|
|
<div class="relative"> |
|
|
<div class="absolute -top-6 -left-6 w-64 h-64 bg-purple-500 rounded-full mix-blend-soft-light filter blur-3xl opacity-30 animate-pulse"></div> |
|
|
<div class="absolute -bottom-6 -right-6 w-64 h-64 bg-pink-500 rounded-full mix-blend-soft-light filter blur-3xl opacity-30 animate-pulse"></div> |
|
|
<div class="relative w-80 h-80 md:w-96 md:h-96 rounded-2xl glass-light p-6 flex items-center justify-center"> |
|
|
<div class="text-center"> |
|
|
<i class="fas fa-rocket text-6xl text-purple-400 mb-4"></i> |
|
|
<h3 class="text-2xl font-bold text-white mb-2">创新无界</h3> |
|
|
<p class="text-slate-300">科技与创意的完美结合</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="about" class="py-20 parallax" style="background-image: url('https://images.unsplash.com/photo-1519681393784-d120267933ba?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1740&q=80');"> |
|
|
<div class="max-w-7xl mx-auto px-4"> |
|
|
<div class="glass rounded-3xl p-8 md:p-12"> |
|
|
<div class="text-center mb-16"> |
|
|
<h2 class="text-3xl md:text-4xl font-bold mb-4">关于我们</h2> |
|
|
<div class="w-24 h-1 bg-gradient-to-r from-purple-500 to-pink-500 mx-auto rounded-full"></div> |
|
|
</div> |
|
|
|
|
|
<div class="grid md:grid-cols-2 gap-12 items-center"> |
|
|
<div> |
|
|
<h3 class="text-2xl font-bold mb-6">星辰科技，引领未来</h3> |
|
|
<p class="text-slate-300 mb-6"> |
|
|
艾星辰部落格成立于2015年，是一家专注于前沿科技与创意设计融合的创新公司。我们致力于为客户打造卓越的数字化解决方案，助力企业实现数字化转型。 |
|
|
</p> |
|
|
<p class="text-slate-300 mb-6"> |
|
|
我们的团队由行业专家、技术大牛和创意设计师组成，拥有丰富的项目经验和深厚的技术积累。凭借创新的技术能力和独特的设计理念，我们已为众多知名企业提供服务。 |
|
|
</p> |
|
|
<div class="flex flex-wrap gap-4"> |
|
|
<div class="flex items-center"> |
|
|
<i class="fas fa-check-circle text-green-400 mr-2"></i> |
|
|
<span>前沿技术</span> |
|
|
</div> |
|
|
<div class="flex items-center"> |
|
|
<i class="fas fa-check-circle text-green-400 mr-2"></i> |
|
|
<span>创意设计</span> |
|
|
</div> |
|
|
<div class="flex items-center"> |
|
|
<i class="fas fa-check-circle text-green-400 mr-2"></i> |
|
|
<span>专业团队</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="grid grid-cols-2 gap-4"> |
|
|
<div class="glass rounded-xl p-6 text-center"> |
|
|
<div class="text-4xl text-purple-400 mb-4"> |
|
|
<i class="fas fa-users"></i> |
|
|
</div> |
|
|
<h4 class="text-xl font-bold mb-2">团队规模</h4> |
|
|
<p class="text-3xl font-bold text-gradient">50+</p> |
|
|
<p class="text-slate-400">专业成员</p> |
|
|
</div> |
|
|
<div class="glass rounded-xl p-6 text-center"> |
|
|
<div class="text-4xl text-pink-400 mb-4"> |
|
|
<i class="fas fa-project-diagram"></i> |
|
|
</div> |
|
|
<h4 class="text-xl font-bold mb-2">项目完成</h4> |
|
|
<p class="text-3xl font-bold text-gradient">200+</p> |
|
|
<p class="text-slate-400">成功案例</p> |
|
|
</div> |
|
|
<div class="glass rounded-xl p-6 text-center"> |
|
|
<div class="text-4xl text-indigo-400 mb-4"> |
|
|
<i class="fas fa-globe"></i> |
|
|
</div> |
|
|
<h4 class="text-xl font-bold mb-2">服务范围</h4> |
|
|
<p class="text-3xl font-bold text-gradient">30+</p> |
|
|
<p class="text-slate-400">国家地区</p> |
|
|
</div> |
|
|
<div class="glass rounded-xl p-6 text-center"> |
|
|
<div class="text-4xl text-blue-400 mb-4"> |
|
|
<i class="fas fa-award"></i> |
|
|
</div> |
|
|
<h4 class="text-xl font-bold mb-2">获得奖项</h4> |
|
|
<p class="text-3xl font-bold text-gradient">15+</p> |
|
|
<p class="text-slate-400">创新荣誉</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="services" class="py-20"> |
|
|
<div class="max-w-7xl mx-auto px-4"> |
|
|
<div class="text-center mb-16"> |
|
|
<h2 class="text-3xl md:text-4xl font-bold mb-4">我们的服务</h2> |
|
|
<p class="text-xl text-slate-400 max-w-2xl mx-auto">提供全方位的数字化解决方案，助力企业转型升级</p> |
|
|
<div class="w-24 h-1 bg-gradient-to-r from-purple-500 to-pink-500 mx-auto rounded-full mt-4"></div> |
|
|
</div> |
|
|
|
|
|
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8"> |
|
|
<div class="service-card glass rounded-2xl p-8 transition-all duration-500"> |
|
|
<div class="w-16 h-16 rounded-xl bg-purple-500/20 flex items-center justify-center mb-6"> |
|
|
<i class="fas fa-laptop-code text-2xl text-purple-400"></i> |
|
|
</div> |
|
|
<h3 class="text-2xl font-bold mb-4">网站开发</h3> |
|
|
<p class="text-slate-300 mb-6"> |
|
|
定制化网站开发服务，采用前沿技术架构，打造高性能、高安全性的企业官网和电商平台。 |
|
|
</p> |
|
|
<a href="#" class="text-purple-400 hover:text-purple-300 flex items-center"> |
|
|
了解更多 <i class="fas fa-arrow-right ml-2 text-sm"></i> |
|
|
</a> |
|
|
</div> |
|
|
|
|
|
<div class="service-card glass rounded-2xl p-8 transition-all duration-500"> |
|
|
<div class="w-16 h-16 rounded-xl bg-pink-500/20 flex items-center justify-center mb-6"> |
|
|
<i class="fas fa-mobile-alt text-2xl text-pink-400"></i> |
|
|
</div> |
|
|
<h3 class="text-2xl font-bold mb-4">移动应用</h3> |
|
|
<p class="text-slate-300 mb-6"> |
|
|
跨平台移动应用开发，覆盖iOS和Android平台，提供流畅的用户体验和强大的功能。 |
|
|
</p> |
|
|
<a href="#" class="text-pink-400 hover:text-pink-300 flex items-center"> |
|
|
了解更多 <i class="fas fa-arrow-right ml-2 text-sm"></i> |
|
|
</a> |
|
|
</div> |
|
|
|
|
|
<div class="service-card glass rounded-2xl p-8 transition-all duration-500"> |
|
|
<div class="w-16 h-16 rounded-xl bg-indigo-500/20 flex items-center justify-center mb-6"> |
|
|
<i class="fas fa-paint-brush text-2xl text-indigo-400"></i> |
|
|
</div> |
|
|
<h3 class="text-2xl font-bold mb-4">UI/UX设计</h3> |
|
|
<p class="text-slate-300 mb-6"> |
|
|
以用户为中心的设计理念，打造美观、易用且富有创意的界面设计，提升用户体验。 |
|
|
</p> |
|
|
<a href="#" class="text-indigo-400 hover:text-indigo-300 flex items-center"> |
|
|
了解更多 <i class="fas fa-arrow-right ml-2 text-sm"></i> |
|
|
</a> |
|
|
</div> |
|
|
|
|
|
<div class="service-card glass rounded-2xl p-8 transition-all duration-500"> |
|
|
<div class="w-16 h-16 rounded-xl bg-blue-500/20 flex items-center justify-center mb-6"> |
|
|
<i class="fas fa-robot text-2xl text-blue-400"></i> |
|
|
</div> |
|
|
<h3 class="text-2xl font-bold mb-4">AI解决方案</h3> |
|
|
<p class="text-slate-300 mb-6"> |
|
|
人工智能技术应用开发，包括机器学习、自然语言处理等，助力企业智能化升级。 |
|
|
</p> |
|
|
<a href="#" class="text-blue-400 hover:text-blue-300 flex items-center"> |
|
|
了解更多 <i class="fas fa-arrow-right ml-2 text-sm"></i> |
|
|
</a> |
|
|
</div> |
|
|
|
|
|
<div class="service-card glass rounded-2xl p-8 transition-all duration-500"> |
|
|
<div class="w-16 h-16 rounded-xl bg-teal-500/20 flex items-center justify-center mb-6"> |
|
|
<i class="fas fa-chart-line text-2xl text-teal-400"></i> |
|
|
</div> |
|
|
<h3 class="text-2xl font-bold mb-4">数据分析</h3> |
|
|
<p class="text-slate-300 mb-6"> |
|
|
大数据分析与可视化服务，帮助企业挖掘数据价值，制定科学的业务决策。 |
|
|
</p> |
|
|
<a href="#" class="text-teal-400 hover:text-teal-300 flex items-center"> |
|
|
了解更多 <i class="fas fa-arrow-right ml-2 text-sm"></i> |
|
|
</a> |
|
|
</div> |
|
|
|
|
|
<div class="service-card glass rounded-2xl p-8 transition-all duration-500"> |
|
|
<div class="w-16 h-16 rounded-xl bg-amber-500/20 flex items-center justify-center mb-6"> |
|
|
<i class="fas fa-cloud text-2xl text-amber-400"></i> |
|
|
</div> |
|
|
<h3 class="text-2xl font-bold mb-4">云服务</h3> |
|
|
<p class="text-slate-300 mb-6"> |
|
|
云计算解决方案，包括云迁移、云架构设计等，保障企业业务的高可用性和可扩展性。 |
|
|
</p> |
|
|
<a href="#" class="text-amber-400 hover:text-amber-300 flex items-center"> |
|
|
了解更多 <i class="fas fa-arrow-right ml-2 text-sm"></i> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="portfolio" class="py-20 bg-gradient-to-br from-slate-900 to-slate-800"> |
|
|
<div class="max-w-7xl mx-auto px-4"> |
|
|
<div class="text-center mb-16"> |
|
|
<h2 class="text-3xl md:text-4xl font-bold mb-4">作品展示</h2> |
|
|
<p class="text-xl text-slate-400 max-w-2xl mx-auto">展示我们为客户打造的精品项目，见证我们的实力与创意</p> |
|
|
<div class="w-24 h-1 bg-gradient-to-r from-purple-500 to-pink-500 mx-auto rounded-full mt-4"></div> |
|
|
</div> |
|
|
|
|
|
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8"> |
|
|
<div class="glass rounded-2xl overflow-hidden"> |
|
|
<div class="h-48 bg-gradient-to-r from-indigo-500 to-purple-600 relative"> |
|
|
<div class="absolute inset-0 flex items-center justify-center"> |
|
|
<i class="fas fa-shopping-cart text-5xl text-white/20"></i> |
|
|
</div> |
|
|
</div> |
|
|
<div class="p-6"> |
|
|
<h3 class="text-xl font-bold mb-2">星辰电商系统</h3> |
|
|
<p class="text-slate-300 mb-4">为大型零售企业打造的全渠道电商系统</p> |
|
|
<div class="flex flex-wrap gap-2"> |
|
|
<span class="bg-purple-500/20 text-purple-300 px-3 py-1 rounded-full text-sm">电商</span> |
|
|
<span class="bg-pink-500/20 text-pink-300 px-3 py-1 rounded-full text-sm">移动应用</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="glass rounded-2xl overflow-hidden"> |
|
|
<div class="h-48 bg-gradient-to-r from-teal-500 to-blue-600 relative"> |
|
|
<div class="absolute inset-0 flex items-center justify-center"> |
|
|
<i class="fas fa-chart-pie text-5xl text-white/20"></i> |
|
|
</div> |
|
|
</div> |
|
|
<div class="p-6"> |
|
|
<h3 class="text-xl font-bold mb-2">智能分析平台</h3> |
|
|
<p class="text-slate-300 mb-4">企业级数据分析与可视化平台</p> |
|
|
<div class="flex flex-wrap gap-2"> |
|
|
<span class="bg-blue-500/20 text-blue-300 px-3 py-1 rounded-full text-sm">数据分析</span> |
|
|
<span class="bg-teal-500/20 text-teal-300 px-3 py-1 rounded-full text-sm">AI应用</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="glass rounded-2xl overflow-hidden"> |
|
|
<div class="h-48 bg-gradient-to-r from-amber-500 to-orange-600 relative"> |
|
|
<div class="absolute inset-0 flex items-center justify-center"> |
|
|
<i class="fas fa-mobile-alt text-5xl text-white/20"></i> |
|
|
</div> |
|
|
</div> |
|
|
<div class="p-6"> |
|
|
<h3 class="text-xl font-bold mb-2">健康生活应用</h3> |
|
|
<p class="text-slate-300 mb-4">为健康科技公司开发的移动健康管理应用</p> |
|
|
<div class="flex flex-wrap gap-2"> |
|
|
<span class="bg-orange-500/20 text-orange-300 px-3 py-1 rounded-full text-sm">健康</span> |
|
|
<span class="bg-amber-500/20 text-amber-300 px-3 py-1 rounded-full text-sm">移动应用</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="text-center mt-12"> |
|
|
<button class="glass px-8 py-3 rounded-full font-semibold text-white hover:bg-white/10 transition-all"> |
|
|
查看更多项目 |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="contact" class="py-20 parallax" style="background-image: url('https://images.unsplash.com/photo-1550745165-9bc0b252726f?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1740&q=80');"> |
|
|
<div class="max-w-7xl mx-auto px-4"> |
|
|
<div class="glass rounded-3xl p-8 md:p-12"> |
|
|
<div class="text-center mb-16"> |
|
|
<h2 class="text-3xl md:text-4xl font-bold mb-4">联系我们</h2> |
|
|
<p class="text-xl text-slate-300 max-w-2xl mx-auto">有任何问题或合作意向？欢迎随时与我们联系</p> |
|
|
<div class="w-24 h-1 bg-gradient-to-r from-purple-500 to-pink-500 mx-auto rounded-full mt-4"></div> |
|
|
</div> |
|
|
|
|
|
<div class="grid md:grid-cols-2 gap-12"> |
|
|
<div> |
|
|
<h3 class="text-2xl font-bold mb-6">联系信息</h3> |
|
|
<div class="space-y-6"> |
|
|
<div class="flex items-start"> |
|
|
<div class="w-12 h-12 rounded-full bg-purple-500/20 flex items-center justify-center mr-4"> |
|
|
<i class="fas fa-map-marker-alt text-purple-400 text-xl"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="text-lg font-semibold mb-1">公司地址</h4> |
|
|
<p class="text-slate-300">上海市浦东新区陆家嘴金融中心88号</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-start"> |
|
|
<div class="w-12 h-12 rounded-full bg-pink-500/20 flex items-center justify-center mr-4"> |
|
|
<i class="fas fa-phone-alt text-pink-400 text-xl"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="text-lg font-semibold mb-1">联系电话</h4> |
|
|
<p class="text-slate-300">+86 021 1234 5678</p> |
|
|
<p class="text-slate-300">+86 138 0013 8000</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-start"> |
|
|
<div class="w-12 h-12 rounded-full bg-blue-500/20 flex items-center justify-center mr-4"> |
|
|
<i class="fas fa-envelope text-blue-400 text-xl"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="text-lg font-semibold mb-1">电子邮箱</h4> |
|
|
<p class="text-slate-300">contact@aixingchen.com</p> |
|
|
<p class="text-slate-300">support@aixingchen.com</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mt-10"> |
|
|
<h4 class="text-xl font-bold mb-4">关注我们</h4> |
|
|
<div class="flex space-x-4"> |
|
|
<a href="#" class="w-12 h-12 rounded-full glass flex items-center justify-center hover:bg-white/10 transition-colors"> |
|
|
<i class="fab fa-weixin text-xl text-green-400"></i> |
|
|
</a> |
|
|
<a href="#" class="w-12 h-12 rounded-full glass flex items-center justify-center hover:bg-white/10 transition-colors"> |
|
|
<i class="fab fa-weibo text-xl text-red-400"></i> |
|
|
</a> |
|
|
<a href="#" class="w-12 h-12 rounded-full glass flex items-center justify-center hover:bg-white/10 transition-colors"> |
|
|
<i class="fab fa-linkedin-in text-xl text-blue-400"></i> |
|
|
</a> |
|
|
<a href="#" class="w-12 h-12 rounded-full glass flex items-center justify-center hover:bg-white/10 transition-colors"> |
|
|
<i class="fab fa-github text-xl text-gray-300"></i> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<h3 class="text-2xl font-bold mb-6">发送消息</h3> |
|
|
<form class="space-y-6"> |
|
|
<div> |
|
|
<label class="block text-slate-300 mb-2">您的姓名</label> |
|
|
<input type="text" class="w-full glass rounded-lg px-4 py-3 focus:outline-none focus:ring-2 focus:ring-purple-500 bg-white/5" placeholder="请输入您的姓名"> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<label class="block text-slate-300 mb-2">电子邮箱</label> |
|
|
<input type="email" class="w-full glass rounded-lg px-4 py-3 focus:outline-none focus:ring-2 focus:ring-purple-500 bg-white/5" placeholder="请输入您的邮箱"> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<label class="block text-slate-300 mb-2">联系电话</label> |
|
|
<input type="tel" class="w-full glass rounded-lg px-4 py-3 focus:outline-none focus:ring-2 focus:ring-purple-500 bg-white/5" placeholder="请输入您的电话"> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<label class="block text-slate-300 mb-2">消息内容</label> |
|
|
<textarea rows="5" class="w-full glass rounded-lg px-4 py-3 focus:outline-none focus:ring-2 focus:ring-purple-500 bg-white/5" placeholder="请输入消息内容"></textarea> |
|
|
</div> |
|
|
|
|
|
<button type="submit" class="w-full glass px-6 py-3 rounded-lg font-semibold text-white hover:bg-white/10 transition-all"> |
|
|
发送消息 |
|
|
</button> |
|
|
</form> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<footer class="py-12 bg-slate-900 border-t border-white/10"> |
|
|
<div class="max-w-7xl mx-auto px-4"> |
|
|
<div class="grid md:grid-cols-4 gap-8 mb-12"> |
|
|
<div> |
|
|
<div class="flex items-center space-x-2 mb-6"> |
|
|
<div class="w-10 h-10 rounded-full bg-gradient-to-br from-purple-500 to-indigo-600 flex items-center justify-center"> |
|
|
<i class="fas fa-star text-white text-xl"></i> |
|
|
</div> |
|
|
<span class="text-xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-purple-400 to-pink-600">艾星辰部落格</span> |
|
|
</div> |
|
|
<p class="text-slate-400 mb-6"> |
|
|
专注于前沿科技与创意设计融合，为客户提供卓越的数字化解决方案。 |
|
|
</p> |
|
|
<div class="flex space-x-4"> |
|
|
<a href="#" class="w-10 h-10 rounded-full glass flex items-center justify-center hover:bg-white/10 transition-colors"> |
|
|
<i class="fab fa-weixin text-green-400"></i> |
|
|
</a> |
|
|
<a href="#" class="w-10 h-10 rounded-full glass flex items-center justify-center hover:bg-white/10 transition-colors"> |
|
|
<i class="fab fa-weibo text-red-400"></i> |
|
|
</a> |
|
|
<a href="#" class="w-10 h-10 rounded-full glass flex items-center justify-center hover:bg-white/10 transition-colors"> |
|
|
<i class="fab fa-linkedin-in text-blue-400"></i> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<h4 class="text-lg font-bold mb-6">快速链接</h4> |
|
|
<ul class="space-y-3"> |
|
|
<li><a href="#home" class="text-slate-400 hover:text-white transition-colors">首页</a></li> |
|
|
<li><a href="#about" class="text-slate-400 hover:text-white transition-colors">关于我们</a></li> |
|
|
<li><a href="#services" class="text-slate-400 hover:text-white transition-colors">服务项目</a></li> |
|
|
<li><a href="#portfolio" class="text-slate-400 hover:text-white transition-colors">作品展示</a></li> |
|
|
<li><a href="#contact" class="text-slate-400 hover:text-white transition-colors">联系我们</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<h4 class="text-lg font-bold mb-6">服务项目</h4> |
|
|
<ul class="space-y-3"> |
|
|
<li><a href="#" class="text-slate-400 hover:text-white transition-colors">网站开发</a></li> |
|
|
<li><a href="#" class="text-slate-400 hover:text-white transition-colors">移动应用</a></li> |
|
|
<li><a href="#" class="text-slate-400 hover:text-white transition-colors">UI/UX设计</a></li> |
|
|
<li><a href="#" class="text-slate-400 hover:text-white transition-colors">数据分析</a></li> |
|
|
<li><a href="#" class="text-slate-400 hover:text-white transition-colors">云服务</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<h4 class="text-lg font-bold mb-6">订阅我们</h4> |
|
|
<p class="text-slate-400 mb-4">订阅获取最新资讯和优惠信息</p> |
|
|
<div class="flex"> |
|
|
<input type="email" class="glass flex-1 rounded-l-lg px-4 py-2 focus:outline-none bg-white/5" placeholder="您的邮箱"> |
|
|
<button class="bg-gradient-to-r from-purple-600 to-pink-600 px-4 py-2 rounded-r-lg font-medium"> |
|
|
<i class="fas fa-paper-plane"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="pt-8 border-t border-white/10 text-center text-slate-500"> |
|
|
<p>© 2023 艾星辰部落格. 保留所有权利.</p> |
|
|
</div> |
|
|
</div> |
|
|
</footer> |
|
|
|
|
|
<script> |
|
|
|
|
|
function createStars() { |
|
|
const starsContainer = document.getElementById('stars'); |
|
|
const starCount = 150; |
|
|
|
|
|
for (let i = 0; i < starCount; i++) { |
|
|
const star = document.createElement('div'); |
|
|
star.classList.add('star'); |
|
|
|
|
|
|
|
|
const posX = Math.random() * 100; |
|
|
const posY = Math.random() * 100; |
|
|
|
|
|
|
|
|
const size = Math.random() * 3; |
|
|
|
|
|
|
|
|
const duration = 2 + Math.random() * 8; |
|
|
const delay = Math.random() * 5; |
|
|
|
|
|
star.style.left = `${posX}%`; |
|
|
star.style.top = `${posY}%`; |
|
|
star.style.width = `${size}px`; |
|
|
star.style.height = `${size}px`; |
|
|
star.style.setProperty('--duration', `${duration}s`); |
|
|
star.style.setProperty('--delay', `${delay}s`); |
|
|
|
|
|
starsContainer.appendChild(star); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
function smoothScroll() { |
|
|
document.querySelectorAll('a[href^="#"]').forEach(anchor => { |
|
|
anchor.addEventListener('click', function (e) { |
|
|
e.preventDefault(); |
|
|
|
|
|
const target = document.querySelector(this.getAttribute('href')); |
|
|
if (target) { |
|
|
window.scrollTo({ |
|
|
top: target.offsetTop - 80, |
|
|
behavior: 'smooth' |
|
|
}); |
|
|
} |
|
|
}); |
|
|
}); |
|
|
} |
|
|
|
|
|
|
|
|
document.addEventListener('DOMContentLoaded', () => { |
|
|
createStars(); |
|
|
smoothScroll(); |
|
|
}); |
|
|
</script> |
|
|
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=ixingchen/homess" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
