| <!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> |
