|
<!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"> |
|
<style> |
|
|
|
.hero-gradient { |
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); |
|
} |
|
|
|
.feature-card:hover { |
|
transform: translateY(-10px); |
|
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); |
|
} |
|
|
|
.mobile-menu { |
|
max-height: 0; |
|
overflow: hidden; |
|
transition: max-height 0.3s ease-out; |
|
} |
|
|
|
.mobile-menu.open { |
|
max-height: 500px; |
|
} |
|
|
|
@media (min-width: 1024px) { |
|
.lg\:w-30 { |
|
width: 30%; |
|
} |
|
} |
|
|
|
|
|
body { |
|
font-family: "PingFang SC", "Microsoft YaHei", sans-serif; |
|
} |
|
|
|
.chinese-text { |
|
letter-spacing: 0.5px; |
|
line-height: 1.7; |
|
} |
|
</style> |
|
</head> |
|
<body class="font-sans antialiased text-gray-800 chinese-text"> |
|
|
|
<nav class="bg-white shadow-lg sticky top-0 z-50"> |
|
<div class="max-w-6xl mx-auto px-4"> |
|
<div class="flex justify-between items-center py-4"> |
|
<div class="flex items-center space-x-4"> |
|
<div> |
|
<a href="#" class="flex items-center py-2 px-2"> |
|
<i class="fas fa-rocket text-purple-600 text-2xl mr-2"></i> |
|
<span class="font-semibold text-gray-900 text-lg">科技解决方案</span> |
|
</a> |
|
</div> |
|
</div> |
|
|
|
|
|
<div class="hidden md:flex items-center space-x-1"> |
|
<a href="#" class="py-4 px-3 text-purple-600 border-b-2 border-purple-600 font-medium">首页</a> |
|
<a href="#" class="py-4 px-3 text-gray-500 hover:text-purple-600 transition duration-300">服务</a> |
|
<a href="#" class="py-4 px-3 text-gray-500 hover:text-purple-600 transition duration-300">关于我们</a> |
|
<a href="#" class="py-4 px-3 text-gray-500 hover:text-purple-600 transition duration-300">联系我们</a> |
|
<a href="#" class="py-2 px-4 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition duration-300">免费咨询</a> |
|
</div> |
|
|
|
|
|
<div class="md:hidden flex items-center"> |
|
<button id="mobile-menu-button" class="outline-none"> |
|
<i class="fas fa-bars text-gray-500 text-2xl"></i> |
|
</button> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
|
|
<div id="mobile-menu" class="mobile-menu md:hidden bg-white"> |
|
<div class="px-2 pt-2 pb-4 space-y-1"> |
|
<a href="#" class="block px-3 py-2 text-base font-medium text-purple-600 bg-purple-50 rounded">首页</a> |
|
<a href="#" class="block px-3 py-2 text-base font-medium text-gray-500 hover:text-purple-600 hover:bg-purple-50 rounded">服务</a> |
|
<a href="#" class="block px-3 py-2 text-base font-medium text-gray-500 hover:text-purple-600 hover:bg-purple-50 rounded">关于我们</a> |
|
<a href="#" class="block px-3 py-2 text-base font-medium text-gray-500 hover:text-purple-600 hover:bg-purple-50 rounded">联系我们</a> |
|
<a href="#" class="block px-3 py-2 text-base font-medium text-white bg-purple-600 rounded hover:bg-purple-700">免费咨询</a> |
|
</div> |
|
</div> |
|
</nav> |
|
|
|
|
|
<section class="hero-gradient text-white"> |
|
<div class="max-w-6xl mx-auto px-4 py-20 md:py-32"> |
|
<div class="flex flex-col md:flex-row items-center"> |
|
<div class="md:w-1/2 mb-10 md:mb-0"> |
|
<h1 class="text-4xl md:text-5xl font-bold leading-tight mb-6">创新科技解决方案助力企业发展</h1> |
|
<p class="text-xl md:text-2xl mb-8 opacity-90">我们通过前沿技术和创新策略，帮助企业实现数字化转型和业务增长。</p> |
|
<div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4"> |
|
<button class="bg-white text-purple-700 px-8 py-3 rounded-lg font-semibold hover:bg-gray-100 transition duration-300">立即咨询</button> |
|
<button class="border-2 border-white px-8 py-3 rounded-lg font-semibold hover:bg-white hover:text-purple-700 transition duration-300">了解更多</button> |
|
</div> |
|
</div> |
|
<div class="md:w-1/2 flex justify-center"> |
|
<img src="https://images.unsplash.com/photo-1551434678-e076c223a692?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80" |
|
alt="商务会议" |
|
class="rounded-lg shadow-2xl w-full max-w-md"> |
|
</div> |
|
</div> |
|
</div> |
|
</section> |
|
|
|
|
|
<section class="py-20 bg-gray-50"> |
|
<div class="max-w-6xl 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-gray-600 max-w-2xl mx-auto">我们提供全方位的数字化解决方案，助力企业在数字时代蓬勃发展。</p> |
|
</div> |
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> |
|
|
|
<div class="bg-white p-8 rounded-xl shadow-md feature-card transition duration-300"> |
|
<div class="w-16 h-16 bg-purple-100 rounded-full flex items-center justify-center mb-6"> |
|
<i class="fas fa-laptop-code text-purple-600 text-2xl"></i> |
|
</div> |
|
<h3 class="text-xl font-bold mb-3">网站开发</h3> |
|
<p class="text-gray-600 mb-4">采用最新技术，为企业量身定制网站和Web应用程序，满足您的业务需求。</p> |
|
<a href="#" class="text-purple-600 font-semibold flex items-center"> |
|
了解更多 <i class="fas fa-arrow-right ml-2"></i> |
|
</a> |
|
</div> |
|
|
|
|
|
<div class="bg-white p-8 rounded-xl shadow-md feature-card transition duration-300"> |
|
<div class="w-16 h-16 bg-purple-100 rounded-full flex items-center justify-center mb-6"> |
|
<i class="fas fa-mobile-alt text-purple-600 text-2xl"></i> |
|
</div> |
|
<h3 class="text-xl font-bold mb-3">移动应用</h3> |
|
<p class="text-gray-600 mb-4">为iOS和Android平台开发美观实用的移动应用程序，提升客户参与度。</p> |
|
<a href="#" class="text-purple-600 font-semibold flex items-center"> |
|
了解更多 <i class="fas fa-arrow-right ml-2"></i> |
|
</a> |
|
</div> |
|
|
|
|
|
<div class="bg-white p-8 rounded-xl shadow-md feature-card transition duration-300"> |
|
<div class="w-16 h-16 bg-purple-100 rounded-full flex items-center justify-center mb-6"> |
|
<i class="fas fa-chart-line text-purple-600 text-2xl"></i> |
|
</div> |
|
<h3 class="text-xl font-bold mb-3">数字营销</h3> |
|
<p class="text-gray-600 mb-4">基于数据的营销策略，提升您的在线可见度和客户获取能力。</p> |
|
<a href="#" class="text-purple-600 font-semibold flex items-center"> |
|
了解更多 <i class="fas fa-arrow-right ml-2"></i> |
|
</a> |
|
</div> |
|
</div> |
|
</div> |
|
</section> |
|
|
|
|
|
<section class="py-20 bg-white"> |
|
<div class="max-w-6xl 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-gray-600 max-w-2xl mx-auto">听听我们的客户怎么说</p> |
|
</div> |
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> |
|
|
|
<div class="bg-gray-50 p-8 rounded-xl"> |
|
<div class="flex items-center mb-4"> |
|
<div class="w-12 h-12 rounded-full overflow-hidden mr-4"> |
|
<img src="https://randomuser.me/api/portraits/women/44.jpg" alt="张女士" class="w-full h-full object-cover"> |
|
</div> |
|
<div> |
|
<h4 class="font-bold">张女士</h4> |
|
<p class="text-gray-600 text-sm">创新科技 CEO</p> |
|
</div> |
|
</div> |
|
<p class="text-gray-700 italic">"科技解决方案彻底改变了我们的线上形象。自合作以来，我们的网站流量增长了300%。"</p> |
|
<div class="mt-4 text-purple-500"> |
|
<i class="fas fa-star"></i> |
|
<i class="fas fa-star"></i> |
|
<i class="fas fa-star"></i> |
|
<i class="fas fa-star"></i> |
|
<i class="fas fa-star"></i> |
|
</div> |
|
</div> |
|
|
|
|
|
<div class="bg-gray-50 p-8 rounded-xl"> |
|
<div class="flex items-center mb-4"> |
|
<div class="w-12 h-12 rounded-full overflow-hidden mr-4"> |
|
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="王先生" class="w-full h-full object-cover"> |
|
</div> |
|
<div> |
|
<h4 class="font-bold">王先生</h4> |
|
<p class="text-gray-600 text-sm">零售通 创始人</p> |
|
</div> |
|
</div> |
|
<p class="text-gray-700 italic">"他们为我们开发的移动应用彻底改变了客户互动方式。强烈推荐他们的服务！"</p> |
|
<div class="mt-4 text-purple-500"> |
|
<i class="fas fa-star"></i> |
|
<i class="fas fa-star"></i> |
|
<i class="fas fa-star"></i> |
|
<i class="fas fa-star"></i> |
|
<i class="fas fa-star"></i> |
|
</div> |
|
</div> |
|
|
|
|
|
<div class="bg-gray-50 p-8 rounded-xl"> |
|
<div class="flex items-center mb-4"> |
|
<div class="w-12 h-12 rounded-full overflow-hidden mr-4"> |
|
<img src="https://randomuser.me/api/portraits/women/68.jpg" alt="李女士" class="w-full h-full object-cover"> |
|
</div> |
|
<div> |
|
<h4 class="font-bold">李女士</h4> |
|
<p class="text-gray-600 text-sm">时尚购 市场总监</p> |
|
</div> |
|
</div> |
|
<p class="text-gray-700 italic">"他们的数字营销团队取得了卓越成果。我们的投资回报率从未如此好过。真正值得信赖的合作伙伴。"</p> |
|
<div class="mt-4 text-purple-500"> |
|
<i class="fas fa-star"></i> |
|
<i class="fas fa-star"></i> |
|
<i class="fas fa-star"></i> |
|
<i class="fas fa-star"></i> |
|
<i class="fas fa-star-half-alt"></i> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</section> |
|
|
|
|
|
<section class="py-20 bg-purple-600 text-white"> |
|
<div class="max-w-6xl mx-auto px-4 text-center"> |
|
<h2 class="text-3xl md:text-4xl font-bold mb-6">准备好改变您的业务了吗？</h2> |
|
<p class="text-xl mb-8 max-w-2xl mx-auto opacity-90">让我们探讨如何通过创新解决方案帮助您实现目标。</p> |
|
<div class="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-4"> |
|
<button class="bg-white text-purple-700 px-8 py-3 rounded-lg font-semibold hover:bg-gray-100 transition duration-300">免费咨询</button> |
|
<button class="border-2 border-white px-8 py-3 rounded-lg font-semibold hover:bg-white hover:text-purple-700 transition duration-300">联系我们</button> |
|
</div> |
|
</div> |
|
</section> |
|
|
|
|
|
<footer class="bg-gray-900 text-white pt-16 pb-8"> |
|
<div class="max-w-6xl mx-auto px-4"> |
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-12 mb-12"> |
|
|
|
<div> |
|
<div class="flex items-center mb-4"> |
|
<i class="fas fa-rocket text-purple-500 text-2xl mr-2"></i> |
|
<span class="font-semibold text-xl">科技解决方案</span> |
|
</div> |
|
<p class="text-gray-400 mb-4">创新科技解决方案，助力企业在数字世界中成长和成功。</p> |
|
<div class="flex space-x-4"> |
|
<a href="#" class="text-gray-400 hover:text-white transition duration-300"> |
|
<i class="fab fa-weixin"></i> |
|
</a> |
|
<a href="#" class="text-gray-400 hover:text-white transition duration-300"> |
|
<i class="fab fa-weibo"></i> |
|
</a> |
|
<a href="#" class="text-gray-400 hover:text-white transition duration-300"> |
|
<i class="fab fa-linkedin-in"></i> |
|
</a> |
|
<a href="#" class="text-gray-400 hover:text-white transition duration-300"> |
|
<i class="fab fa-tiktok"></i> |
|
</a> |
|
</div> |
|
</div> |
|
|
|
|
|
<div> |
|
<h3 class="text-lg font-semibold mb-4">快速链接</h3> |
|
<ul class="space-y-2"> |
|
<li><a href="#" class="text-gray-400 hover:text-white transition duration-300">首页</a></li> |
|
<li><a href="#" class="text-gray-400 hover:text-white transition duration-300">服务</a></li> |
|
<li><a href="#" class="text-gray-400 hover:text-white transition duration-300">关于我们</a></li> |
|
<li><a href="#" class="text-gray-400 hover:text-white transition duration-300">成功案例</a></li> |
|
<li><a href="#" class="text-gray-400 hover:text-white transition duration-300">联系我们</a></li> |
|
</ul> |
|
</div> |
|
|
|
|
|
<div> |
|
<h3 class="text-lg font-semibold mb-4">服务项目</h3> |
|
<ul class="space-y-2"> |
|
<li><a href="#" class="text-gray-400 hover:text-white transition duration-300">网站开发</a></li> |
|
<li><a href="#" class="text-gray-400 hover:text-white transition duration-300">移动应用开发</a></li> |
|
<li><a href="#" class="text-gray-400 hover:text-white transition duration-300">UI/UX设计</a></li> |
|
<li><a href="#" class="text-gray-400 hover:text-white transition duration-300">数字营销</a></li> |
|
<li><a href="#" class="text-gray-400 hover:text-white transition duration-300">SEO优化</a></li> |
|
</ul> |
|
</div> |
|
|
|
|
|
<div> |
|
<h3 class="text-lg font-semibold mb-4">联系我们</h3> |
|
<ul class="space-y-3"> |
|
<li class="flex items-start"> |
|
<i class="fas fa-map-marker-alt text-purple-500 mt-1 mr-3"></i> |
|
<span class="text-gray-400">中国北京市海淀区科技园路88号</span> |
|
</li> |
|
<li class="flex items-center"> |
|
<i class="fas fa-phone-alt text-purple-500 mr-3"></i> |
|
<span class="text-gray-400">400-888-8888</span> |
|
</li> |
|
<li class="flex items-center"> |
|
<i class="fas fa-envelope text-purple-500 mr-3"></i> |
|
<span class="text-gray-400">[email protected]</span> |
|
</li> |
|
</ul> |
|
</div> |
|
</div> |
|
|
|
<div class="border-t border-gray-800 pt-8 flex flex-col md:flex-row justify-between items-center"> |
|
<p class="text-gray-400 mb-4 md:mb-0">© 2023 科技解决方案 版权所有</p> |
|
<div class="flex space-x-6"> |
|
<a href="#" class="text-gray-400 hover:text-white transition duration-300">隐私政策</a> |
|
<a href="#" class="text-gray-400 hover:text-white transition duration-300">服务条款</a> |
|
<a href="#" class="text-gray-400 hover:text-white transition duration-300">网站地图</a> |
|
</div> |
|
</div> |
|
</div> |
|
</footer> |
|
|
|
<script> |
|
|
|
const mobileMenuButton = document.getElementById('mobile-menu-button'); |
|
const mobileMenu = document.getElementById('mobile-menu'); |
|
|
|
mobileMenuButton.addEventListener('click', () => { |
|
mobileMenu.classList.toggle('open'); |
|
}); |
|
|
|
|
|
document.querySelectorAll('a[href^="#"]').forEach(anchor => { |
|
anchor.addEventListener('click', function (e) { |
|
e.preventDefault(); |
|
|
|
const targetId = this.getAttribute('href'); |
|
if (targetId === '#') return; |
|
|
|
const targetElement = document.querySelector(targetId); |
|
if (targetElement) { |
|
window.scrollTo({ |
|
top: targetElement.offsetTop - 80, |
|
behavior: 'smooth' |
|
}); |
|
|
|
|
|
mobileMenu.classList.remove('open'); |
|
} |
|
}); |
|
}); |
|
|
|
|
|
window.addEventListener('scroll', function() { |
|
const nav = document.querySelector('nav'); |
|
if (window.scrollY > 10) { |
|
nav.classList.add('shadow-lg'); |
|
} else { |
|
nav.classList.remove('shadow-lg'); |
|
} |
|
}); |
|
</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=shengzi/myweb" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
</html> |
