|
|
<!DOCTYPE html> |
|
|
<html lang="zh-CN"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>科技未来 - 创新解决方案</title> |
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
|
<style> |
|
|
|
|
|
:root { |
|
|
--primary-color: #2563eb; |
|
|
--secondary-color: #1e40af; |
|
|
--accent-color: #3b82f6; |
|
|
--dark-color: #1e293b; |
|
|
--light-color: #f8fafc; |
|
|
--text-color: #334155; |
|
|
--text-light: #64748b; |
|
|
} |
|
|
|
|
|
* { |
|
|
margin: 0; |
|
|
padding: 0; |
|
|
box-sizing: border-box; |
|
|
} |
|
|
|
|
|
body { |
|
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; |
|
|
line-height: 1.6; |
|
|
color: var(--text-color); |
|
|
background-color: var(--light-color); |
|
|
overflow-x: hidden; |
|
|
} |
|
|
|
|
|
a { |
|
|
text-decoration: none; |
|
|
color: inherit; |
|
|
} |
|
|
|
|
|
ul { |
|
|
list-style: none; |
|
|
} |
|
|
|
|
|
.container { |
|
|
max-width: 1200px; |
|
|
margin: 0 auto; |
|
|
padding: 0 20px; |
|
|
} |
|
|
|
|
|
.btn { |
|
|
display: inline-block; |
|
|
padding: 12px 28px; |
|
|
background-color: var(--primary-color); |
|
|
color: white; |
|
|
border-radius: 50px; |
|
|
font-weight: 600; |
|
|
transition: all 0.3s ease; |
|
|
border: none; |
|
|
cursor: pointer; |
|
|
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); |
|
|
} |
|
|
|
|
|
.btn:hover { |
|
|
background-color: var(--secondary-color); |
|
|
transform: translateY(-2px); |
|
|
box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15); |
|
|
} |
|
|
|
|
|
.btn-outline { |
|
|
background-color: transparent; |
|
|
border: 2px solid var(--primary-color); |
|
|
color: var(--primary-color); |
|
|
} |
|
|
|
|
|
.btn-outline:hover { |
|
|
background-color: var(--primary-color); |
|
|
color: white; |
|
|
} |
|
|
|
|
|
section { |
|
|
padding: 80px 0; |
|
|
} |
|
|
|
|
|
.section-title { |
|
|
font-size: 2.5rem; |
|
|
margin-bottom: 20px; |
|
|
position: relative; |
|
|
display: inline-block; |
|
|
color: var(--dark-color); |
|
|
} |
|
|
|
|
|
.section-title::after { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
bottom: -10px; |
|
|
left: 0; |
|
|
width: 60px; |
|
|
height: 4px; |
|
|
background-color: var(--primary-color); |
|
|
border-radius: 2px; |
|
|
} |
|
|
|
|
|
.section-subtitle { |
|
|
font-size: 1.1rem; |
|
|
color: var(--text-light); |
|
|
max-width: 700px; |
|
|
margin-bottom: 40px; |
|
|
} |
|
|
|
|
|
|
|
|
header { |
|
|
background-color: white; |
|
|
position: fixed; |
|
|
width: 100%; |
|
|
top: 0; |
|
|
left: 0; |
|
|
z-index: 1000; |
|
|
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.navbar { |
|
|
display: flex; |
|
|
justify-content: space-between; |
|
|
align-items: center; |
|
|
height: 80px; |
|
|
} |
|
|
|
|
|
.logo { |
|
|
display: flex; |
|
|
align-items: center; |
|
|
font-size: 1.5rem; |
|
|
font-weight: 700; |
|
|
color: var(--primary-color); |
|
|
} |
|
|
|
|
|
.logo i { |
|
|
margin-right: 10px; |
|
|
font-size: 1.8rem; |
|
|
} |
|
|
|
|
|
.nav-links { |
|
|
display: flex; |
|
|
gap: 30px; |
|
|
} |
|
|
|
|
|
.nav-links a { |
|
|
font-weight: 500; |
|
|
position: relative; |
|
|
padding: 10px 0; |
|
|
} |
|
|
|
|
|
.nav-links a::after { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
bottom: 0; |
|
|
left: 0; |
|
|
width: 0; |
|
|
height: 2px; |
|
|
background-color: var(--primary-color); |
|
|
transition: width 0.3s ease; |
|
|
} |
|
|
|
|
|
.nav-links a:hover::after { |
|
|
width: 100%; |
|
|
} |
|
|
|
|
|
.mobile-menu-btn { |
|
|
display: none; |
|
|
background: none; |
|
|
border: none; |
|
|
font-size: 1.5rem; |
|
|
cursor: pointer; |
|
|
color: var(--dark-color); |
|
|
} |
|
|
|
|
|
|
|
|
.hero { |
|
|
height: 100vh; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
background: linear-gradient(135deg, rgba(37, 99, 235, 0.1) 0%, rgba(255, 255, 255, 1) 100%); |
|
|
padding-top: 80px; |
|
|
} |
|
|
|
|
|
.hero-content { |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: space-between; |
|
|
gap: 40px; |
|
|
} |
|
|
|
|
|
.hero-text { |
|
|
flex: 1; |
|
|
animation: fadeInUp 0.8s ease; |
|
|
} |
|
|
|
|
|
.hero-image { |
|
|
flex: 1; |
|
|
animation: fadeInRight 0.8s ease; |
|
|
} |
|
|
|
|
|
.hero-title { |
|
|
font-size: 3.5rem; |
|
|
margin-bottom: 20px; |
|
|
color: var(--dark-color); |
|
|
line-height: 1.2; |
|
|
} |
|
|
|
|
|
.hero-subtitle { |
|
|
font-size: 1.2rem; |
|
|
color: var(--text-light); |
|
|
margin-bottom: 30px; |
|
|
max-width: 600px; |
|
|
} |
|
|
|
|
|
.hero-image img { |
|
|
max-width: 100%; |
|
|
height: auto; |
|
|
border-radius: 10px; |
|
|
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); |
|
|
} |
|
|
|
|
|
.hero-cta { |
|
|
display: flex; |
|
|
gap: 20px; |
|
|
} |
|
|
|
|
|
|
|
|
.features { |
|
|
background-color: white; |
|
|
} |
|
|
|
|
|
.features-container { |
|
|
display: grid; |
|
|
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); |
|
|
gap: 30px; |
|
|
margin-top: 50px; |
|
|
} |
|
|
|
|
|
.feature-card { |
|
|
background-color: var(--light-color); |
|
|
border-radius: 10px; |
|
|
padding: 40px 30px; |
|
|
transition: all 0.3s ease; |
|
|
text-align: center; |
|
|
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05); |
|
|
} |
|
|
|
|
|
.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); |
|
|
} |
|
|
|
|
|
.feature-icon { |
|
|
width: 70px; |
|
|
height: 70px; |
|
|
background-color: rgba(37, 99, 235, 0.1); |
|
|
border-radius: 50%; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
margin: 0 auto 25px; |
|
|
color: var(--primary-color); |
|
|
font-size: 1.8rem; |
|
|
} |
|
|
|
|
|
.feature-title { |
|
|
font-size: 1.4rem; |
|
|
margin-bottom: 15px; |
|
|
color: var(--dark-color); |
|
|
} |
|
|
|
|
|
.feature-desc { |
|
|
color: var(--text-light); |
|
|
} |
|
|
|
|
|
|
|
|
.about { |
|
|
background-color: var(--light-color); |
|
|
} |
|
|
|
|
|
.about-container { |
|
|
display: flex; |
|
|
align-items: center; |
|
|
gap: 50px; |
|
|
} |
|
|
|
|
|
.about-image { |
|
|
flex: 1; |
|
|
position: relative; |
|
|
} |
|
|
|
|
|
.about-image img { |
|
|
max-width: 100%; |
|
|
border-radius: 10px; |
|
|
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); |
|
|
} |
|
|
|
|
|
.about-image::after { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
width: 80%; |
|
|
height: 80%; |
|
|
border: 5px solid var(--primary-color); |
|
|
top: -30px; |
|
|
left: -30px; |
|
|
z-index: -1; |
|
|
border-radius: 10px; |
|
|
opacity: 0.3; |
|
|
} |
|
|
|
|
|
.about-text { |
|
|
flex: 1; |
|
|
} |
|
|
|
|
|
.about-text p { |
|
|
margin-bottom: 20px; |
|
|
} |
|
|
|
|
|
|
|
|
.team { |
|
|
background-color: white; |
|
|
} |
|
|
|
|
|
.team-container { |
|
|
display: grid; |
|
|
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); |
|
|
gap: 30px; |
|
|
margin-top: 50px; |
|
|
} |
|
|
|
|
|
.team-card { |
|
|
background-color: var(--light-color); |
|
|
border-radius: 10px; |
|
|
overflow: hidden; |
|
|
transition: all 0.3s ease; |
|
|
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05); |
|
|
text-align: center; |
|
|
} |
|
|
|
|
|
.team-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); |
|
|
} |
|
|
|
|
|
.team-image { |
|
|
height: 250px; |
|
|
overflow: hidden; |
|
|
} |
|
|
|
|
|
.team-image img { |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
object-fit: cover; |
|
|
transition: transform 0.5s ease; |
|
|
} |
|
|
|
|
|
.team-card:hover .team-image img { |
|
|
transform: scale(1.1); |
|
|
} |
|
|
|
|
|
.team-info { |
|
|
padding: 25px; |
|
|
} |
|
|
|
|
|
.team-name { |
|
|
font-size: 1.3rem; |
|
|
margin-bottom: 5px; |
|
|
color: var(--dark-color); |
|
|
} |
|
|
|
|
|
.team-position { |
|
|
color: var(--primary-color); |
|
|
margin-bottom: 15px; |
|
|
font-weight: 500; |
|
|
} |
|
|
|
|
|
.team-social { |
|
|
display: flex; |
|
|
justify-content: center; |
|
|
gap: 15px; |
|
|
} |
|
|
|
|
|
.team-social a { |
|
|
width: 35px; |
|
|
height: 35px; |
|
|
border-radius: 50%; |
|
|
background-color: rgba(37, 99, 235, 0.1); |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
color: var(--primary-color); |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.team-social a:hover { |
|
|
background-color: var(--primary-color); |
|
|
color: white; |
|
|
} |
|
|
|
|
|
|
|
|
.contact { |
|
|
background-color: var(--light-color); |
|
|
} |
|
|
|
|
|
.contact-container { |
|
|
display: grid; |
|
|
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); |
|
|
gap: 50px; |
|
|
} |
|
|
|
|
|
.contact-info { |
|
|
display: flex; |
|
|
flex-direction: column; |
|
|
gap: 25px; |
|
|
} |
|
|
|
|
|
.contact-item { |
|
|
display: flex; |
|
|
align-items: flex-start; |
|
|
gap: 15px; |
|
|
} |
|
|
|
|
|
.contact-icon { |
|
|
width: 50px; |
|
|
height: 50px; |
|
|
background-color: rgba(37, 99, 235, 0.1); |
|
|
border-radius: 50%; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
color: var(--primary-color); |
|
|
font-size: 1.2rem; |
|
|
flex-shrink: 0; |
|
|
} |
|
|
|
|
|
.contact-text h3 { |
|
|
margin-bottom: 5px; |
|
|
color: var(--dark-color); |
|
|
} |
|
|
|
|
|
.contact-text p { |
|
|
color: var(--text-light); |
|
|
} |
|
|
|
|
|
.contact-form { |
|
|
background-color: white; |
|
|
padding: 40px; |
|
|
border-radius: 10px; |
|
|
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05); |
|
|
} |
|
|
|
|
|
.form-group { |
|
|
margin-bottom: 20px; |
|
|
} |
|
|
|
|
|
.form-group label { |
|
|
display: block; |
|
|
margin-bottom: 8px; |
|
|
font-weight: 500; |
|
|
color: var(--dark-color); |
|
|
} |
|
|
|
|
|
.form-group input, |
|
|
.form-group textarea { |
|
|
width: 100%; |
|
|
padding: 12px 15px; |
|
|
border: 1px solid #ddd; |
|
|
border-radius: 5px; |
|
|
font-family: inherit; |
|
|
transition: border 0.3s ease; |
|
|
} |
|
|
|
|
|
.form-group input:focus, |
|
|
.form-group textarea:focus { |
|
|
border-color: var(--primary-color); |
|
|
outline: none; |
|
|
} |
|
|
|
|
|
.form-group textarea { |
|
|
resize: vertical; |
|
|
min-height: 120px; |
|
|
} |
|
|
|
|
|
|
|
|
footer { |
|
|
background-color: var(--dark-color); |
|
|
color: white; |
|
|
padding: 60px 0 20px; |
|
|
} |
|
|
|
|
|
.footer-container { |
|
|
display: grid; |
|
|
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); |
|
|
gap: 40px; |
|
|
margin-bottom: 40px; |
|
|
} |
|
|
|
|
|
.footer-col h3 { |
|
|
font-size: 1.3rem; |
|
|
margin-bottom: 25px; |
|
|
position: relative; |
|
|
} |
|
|
|
|
|
.footer-col h3::after { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
bottom: -10px; |
|
|
left: 0; |
|
|
width: 40px; |
|
|
height: 3px; |
|
|
background-color: var(--primary-color); |
|
|
} |
|
|
|
|
|
.footer-col p { |
|
|
margin-bottom: 20px; |
|
|
opacity: 0.8; |
|
|
} |
|
|
|
|
|
.footer-links li { |
|
|
margin-bottom: 12px; |
|
|
} |
|
|
|
|
|
.footer-links a { |
|
|
opacity: 0.8; |
|
|
transition: opacity 0.3s ease; |
|
|
} |
|
|
|
|
|
.footer-links a:hover { |
|
|
opacity: 1; |
|
|
} |
|
|
|
|
|
.footer-social { |
|
|
display: flex; |
|
|
gap: 15px; |
|
|
margin-top: 20px; |
|
|
} |
|
|
|
|
|
.footer-social a { |
|
|
width: 40px; |
|
|
height: 40px; |
|
|
border-radius: 50%; |
|
|
background-color: rgba(255, 255, 255, 0.1); |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.footer-social a:hover { |
|
|
background-color: var(--primary-color); |
|
|
transform: translateY(-3px); |
|
|
} |
|
|
|
|
|
.footer-bottom { |
|
|
text-align: center; |
|
|
padding-top: 20px; |
|
|
border-top: 1px solid rgba(255, 255, 255, 0.1); |
|
|
opacity: 0.8; |
|
|
font-size: 0.9rem; |
|
|
} |
|
|
|
|
|
|
|
|
@keyframes fadeInUp { |
|
|
from { |
|
|
opacity: 0; |
|
|
transform: translateY(30px); |
|
|
} |
|
|
to { |
|
|
opacity: 1; |
|
|
transform: translateY(0); |
|
|
} |
|
|
} |
|
|
|
|
|
@keyframes fadeInRight { |
|
|
from { |
|
|
opacity: 0; |
|
|
transform: translateX(30px); |
|
|
} |
|
|
to { |
|
|
opacity: 1; |
|
|
transform: translateX(0); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
@media (max-width: 992px) { |
|
|
.hero-content { |
|
|
flex-direction: column; |
|
|
text-align: center; |
|
|
} |
|
|
|
|
|
.hero-cta { |
|
|
justify-content: center; |
|
|
} |
|
|
|
|
|
.hero-title { |
|
|
font-size: 2.8rem; |
|
|
} |
|
|
|
|
|
.about-container { |
|
|
flex-direction: column; |
|
|
} |
|
|
} |
|
|
|
|
|
@media (max-width: 768px) { |
|
|
.nav-links { |
|
|
position: fixed; |
|
|
top: 80px; |
|
|
left: -100%; |
|
|
width: 100%; |
|
|
height: calc(100vh - 80px); |
|
|
background-color: white; |
|
|
flex-direction: column; |
|
|
align-items: center; |
|
|
padding: 40px 0; |
|
|
transition: left 0.3s ease; |
|
|
} |
|
|
|
|
|
.nav-links.active { |
|
|
left: 0; |
|
|
} |
|
|
|
|
|
.mobile-menu-btn { |
|
|
display: block; |
|
|
} |
|
|
|
|
|
.section-title { |
|
|
font-size: 2rem; |
|
|
} |
|
|
|
|
|
.hero-title { |
|
|
font-size: 2.2rem; |
|
|
} |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body> |
|
|
|
|
|
<header> |
|
|
<div class="container"> |
|
|
<nav class="navbar"> |
|
|
<a href="#" class="logo"> |
|
|
<i class="fas fa-rocket"></i> |
|
|
<span>科技未来</span> |
|
|
</a> |
|
|
<ul class="nav-links"> |
|
|
<li><a href="#home">首页</a></li> |
|
|
<li><a href="#features">特性</a></li> |
|
|
<li><a href="#about">关于</a></li> |
|
|
<li><a href="#team">团队</a></li> |
|
|
<li><a href="#contact">联系</a></li> |
|
|
</ul> |
|
|
<button class="mobile-menu-btn"> |
|
|
<i class="fas fa-bars"></i> |
|
|
</button> |
|
|
</nav> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
|
|
|
<section class="hero" id="home"> |
|
|
<div class="container"> |
|
|
<div class="hero-content"> |
|
|
<div class="hero-text"> |
|
|
<h1 class="hero-title">用创新技术改变世界</h1> |
|
|
<p class="hero-subtitle"> |
|
|
我们致力于提供最前沿的技术解决方案，帮助企业突破数字化转型的边界， |
|
|
在数字时代保持竞争优势。 |
|
|
</p> |
|
|
<div class="hero-cta"> |
|
|
<a href="#contact" class="btn">联系我们</a> |
|
|
<a href="#features" class="btn btn-outline">了解更多</a> |
|
|
</div> |
|
|
</div> |
|
|
<div class="hero-image"> |
|
|
<img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="科技未来"> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="features" id="features"> |
|
|
<div class="container"> |
|
|
<h2 class="section-title">我们的技术优势</h2> |
|
|
<p class="section-subtitle"> |
|
|
我们提供的不仅仅是技术解决方案，而是真正的业务转型和创新驱动。 |
|
|
</p> |
|
|
<div class="features-container"> |
|
|
<div class="feature-card"> |
|
|
<div class="feature-icon"> |
|
|
<i class="fas fa-brain"></i> |
|
|
</div> |
|
|
<h3 class="feature-title">人工智能</h3> |
|
|
<p class="feature-desc"> |
|
|
先进的AI算法帮助企业实现智能化决策和自动化流程，大幅提升工作效率。 |
|
|
</p> |
|
|
</div> |
|
|
<div class="feature-card"> |
|
|
<div class="feature-icon"> |
|
|
<i class="fas fa-database"></i> |
|
|
</div> |
|
|
<h3 class="feature-title">大数据分析</h3> |
|
|
<p class="feature-desc"> |
|
|
深度挖掘数据价值，洞察商业趋势，为您的决策提供数据支持。 |
|
|
</p> |
|
|
</div> |
|
|
<div class="feature-card"> |
|
|
<div class="feature-icon"> |
|
|
<i class="fas fa-cloud"></i> |
|
|
</div> |
|
|
<h3 class="feature-title">云计算</h3> |
|
|
<p class="feature-desc"> |
|
|
安全可靠的云基础设施，支持业务灵活扩展，降低成本提高效率。 |
|
|
</p> |
|
|
</div> |
|
|
<div class="feature-card"> |
|
|
<div class="feature-icon"> |
|
|
<i class="fas fa-lock"></i> |
|
|
</div> |
|
|
<h3 class="feature-title">网络安全</h3> |
|
|
<p class="feature-desc"> |
|
|
全方位的网络安全解决方案，保护您的数字资产免受威胁。 |
|
|
</p> |
|
|
</div> |
|
|
<div class="feature-card"> |
|
|
<div class="feature-icon"> |
|
|
<i class="fas fa-mobile-alt"></i> |
|
|
</div> |
|
|
<h3 class="feature-title">移动开发</h3> |
|
|
<p class="feature-desc"> |
|
|
打造卓越的移动用户体验，覆盖iOS和Android平台。 |
|
|
</p> |
|
|
</div> |
|
|
<div class="feature-card"> |
|
|
<div class="feature-icon"> |
|
|
<i class="fas fa-chart-line"></i> |
|
|
</div> |
|
|
<h3 class="feature-title">业务增长</h3> |
|
|
<p class="feature-desc"> |
|
|
技术驱动业务增长，不断优化客户体验，提升市场竞争力。 |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="about" id="about"> |
|
|
<div class="container"> |
|
|
<div class="about-container"> |
|
|
<div class="about-image"> |
|
|
<img src="https://images.unsplash.com/photo-1522071820081-009f0129c71c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="关于我们"> |
|
|
</div> |
|
|
<div class="about-text"> |
|
|
<h2 class="section-title">关于我们</h2> |
|
|
<p> |
|
|
科技未来成立于2015年，是一家专注于前沿技术研究与应用的科技公司。我们拥有一支由资深工程师、数据科学家和创新专家组成的团队，致力于为客户提供最具竞争力的技术解决方案。 |
|
|
</p> |
|
|
<p> |
|
|
我们的使命是通过技术创新帮助企业在数字化时代取得成功。我们相信技术不仅是工具，更是推动行业变革和社会进步的力量。 |
|
|
</p> |
|
|
<p> |
|
|
过去7年，我们已经成功帮助200+企业实现了数字化转型，客户满意度达到98%。我们的解决方案涵盖了金融科技、医疗健康、智能制造等多个领域。 |
|
|
</p> |
|
|
<a href="#team" class="btn" style="margin-top: 20px;">认识我们的团队</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="team" id="team"> |
|
|
<div class="container"> |
|
|
<h2 class="section-title">我们的专家团队</h2> |
|
|
<p class="section-subtitle"> |
|
|
优秀的人才创造卓越的产品和服务。认识一下我们充满激情的团队。 |
|
|
</p> |
|
|
<div class="team-container"> |
|
|
<div class="team-card"> |
|
|
<div class="team-image"> |
|
|
<img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80" alt="张明"> |
|
|
</div> |
|
|
<div class="team-info"> |
|
|
<h3 class="team-name">张明</h3> |
|
|
<p class="team-position">创始人 & CEO</p> |
|
|
<div class="team-social"> |
|
|
<a href="#"><i class="fab fa-linkedin-in"></i></a> |
|
|
<a href="#"><i class="fab fa-twitter"></i></a> |
|
|
<a href="#"><i class="fas fa-envelope"></i></a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="team-card"> |
|
|
<div class="team-image"> |
|
|
<img src="https://images.unsplash.com/photo-1534528741775-53994a69adab?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=764&q=80" alt="李娜"> |
|
|
</div> |
|
|
<div class="team-info"> |
|
|
<h3 class="team-name">李娜</h3> |
|
|
<p class="team-position">技术总监</p> |
|
|
<div class="team-social"> |
|
|
<a href="#"><i class="fab fa-linkedin-in"></i></a> |
|
|
<a href="#"><i class="fab fa-twitter"></i></a> |
|
|
<a href="#"><i class="fas fa-envelope"></i></a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="team-card"> |
|
|
<div class="team-image"> |
|
|
<img src="https://images.unsplash.com/photo-1531123897727-8f129e1688ce?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80" alt="王强"> |
|
|
</div> |
|
|
<div class="team-info"> |
|
|
<h3 class="team-name">王强</h3> |
|
|
<p class="team-position">AI高级工程师</p> |
|
|
<div class="team-social"> |
|
|
<a href="#"><i class="fab fa-linkedin-in"></i></a> |
|
|
<a href="#"><i class="fab fa-twitter"></i></a> |
|
|
<a href="#"><i class="fas fa-envelope"></i></a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="team-card"> |
|
|
<div class="team-image"> |
|
|
<img src="https://images.unsplash.com/photo-1554151228-14d9def656e4?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=686&q=80" alt="陈雪"> |
|
|
</div> |
|
|
<div class="team-info"> |
|
|
<h3 class="team-name">陈雪</h3> |
|
|
<p class="team-position">产品经理</p> |
|
|
<div class="team-social"> |
|
|
<a href="#"><i class="fab fa-linkedin-in"></i></a> |
|
|
<a href="#"><i class="fab fa-twitter"></i></a> |
|
|
<a href="#"><i class="fas fa-envelope"></i></a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="contact" id="contact"> |
|
|
<div class="container"> |
|
|
<h2 class="section-title">联系我们</h2> |
|
|
<p class="section-subtitle"> |
|
|
无论您有任何问题或项目需求，我们都随时准备为您提供帮助。 |
|
|
</p> |
|
|
<div class="contact-container"> |
|
|
<div class="contact-info"> |
|
|
<div class="contact-item"> |
|
|
<div class="contact-icon"> |
|
|
<i class="fas fa-map-marker-alt"></i> |
|
|
</div> |
|
|
<div class="contact-text"> |
|
|
<h3>我们的地址</h3> |
|
|
<p>上海市浦东新区张江高科技园区科苑路88号</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="contact-item"> |
|
|
<div class="contact-icon"> |
|
|
<i class="fas fa-envelope"></i> |
|
|
</div> |
|
|
<div class="contact-text"> |
|
|
<h3>电子邮件</h3> |
|
|
<p>info@techfuture.com</p> |
|
|
<p>hr@techfuture.com</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="contact-item"> |
|
|
<div class="contact-icon"> |
|
|
<i class="fas fa-phone-alt"></i> |
|
|
</div> |
|
|
<div class="contact-text"> |
|
|
<h3>联系电话</h3> |
|
|
<p>+86 21 8888 6666</p> |
|
|
<p>+86 400 123 4567</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="contact-item"> |
|
|
<div class="contact-icon"> |
|
|
<i class="fas fa-clock"></i> |
|
|
</div> |
|
|
<div class="contact-text"> |
|
|
<h3>工作时间</h3> |
|
|
<p>周一至周五: 9:00 - 18:00</p> |
|
|
<p>周六日: 休息</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="contact-form"> |
|
|
<form> |
|
|
<div class="form-group"> |
|
|
<label for="name">您的姓名</label> |
|
|
<input type="text" id="name" placeholder="请输入您的姓名" required> |
|
|
</div> |
|
|
<div class="form-group"> |
|
|
<label for="email">电子邮件</label> |
|
|
<input type="email" id="email" placeholder="请输入您的电子邮件" required> |
|
|
</div> |
|
|
<div class="form-group"> |
|
|
<label for="phone">联系电话</label> |
|
|
<input type="tel" id="phone" placeholder="请输入您的联系电话"> |
|
|
</div> |
|
|
<div class="form-group"> |
|
|
<label for="message">您的需求</label> |
|
|
<textarea id="message" placeholder="请详细描述您的需求" required></textarea> |
|
|
</div> |
|
|
<button type="submit" class="btn" style="width: 100%;">发送信息</button> |
|
|
</form> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<footer> |
|
|
<div class="container"> |
|
|
<div class="footer-container"> |
|
|
<div class="footer-col"> |
|
|
<h3><i class="fas fa-rocket"></i> 科技未来</h3> |
|
|
<p> |
|
|
我们相信技术的变革力量，致力于为企业提供创新的数字化解决方案，帮助他们在快速变化的市场中保持竞争优势。 |
|
|
</p> |
|
|
<div class="footer-social"> |
|
|
<a href="#"><i class="fab fa-weixin"></i></a> |
|
|
<a href="#"><i class="fab fa-weibo"></i></a> |
|
|
<a href="#"><i class="fab fa-linkedin-in"></i></a> |
|
|
<a href="#"><i class="fab fa-twitter"></i></a> |
|
|
</div> |
|
|
</div> |
|
|
<div class="footer-col"> |
|
|
<h3>快速链接</h3> |
|
|
<ul class="footer-links"> |
|
|
<li><a href="#home">首页</a></li> |
|
|
<li><a href="#features">产品特性</a></li> |
|
|
<li><a href="#about">关于我们</a></li> |
|
|
<li><a href="#team">我们的团队</a></li> |
|
|
<li><a href="#contact">联系我们</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
<div class="footer-col"> |
|
|
<h3>服务</h3> |
|
|
<ul class="footer-links"> |
|
|
<li><a href="#">人工智能</a></li> |
|
|
<li><a href="#">大数据分析</a></li> |
|
|
<li><a href="#">云计算</a></li> |
|
|
<li><a href="#">网络安全</a></li> |
|
|
<li><a href="#">移动开发</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
<div class="footer-col"> |
|
|
<h3>订阅新闻</h3> |
|
|
<p> |
|
|
订阅我们的新闻通讯，获取最新技术趋势和公司动态。 |
|
|
</p> |
|
|
<div class="form-group" style="margin-bottom: 20px;"> |
|
|
<input type="email" placeholder="您的电子邮件" style="width: 100%;"> |
|
|
</div> |
|
|
<button class="btn" style="width: 100%;">订阅</button> |
|
|
</div> |
|
|
</div> |
|
|
<div class="footer-bottom"> |
|
|
<p>© 2023 科技未来科技有限公司. 保留所有权利.</p> |
|
|
</div> |
|
|
</div> |
|
|
</footer> |
|
|
|
|
|
<script> |
|
|
|
|
|
const mobileMenuBtn = document.querySelector('.mobile-menu-btn'); |
|
|
const navLinks = document.querySelector('.nav-links'); |
|
|
|
|
|
mobileMenuBtn.addEventListener('click', () => { |
|
|
navLinks.classList.toggle('active'); |
|
|
const icon = mobileMenuBtn.querySelector('i'); |
|
|
if(navLinks.classList.contains('active')) { |
|
|
icon.classList.remove('fa-bars'); |
|
|
icon.classList.add('fa-times'); |
|
|
} else { |
|
|
icon.classList.remove('fa-times'); |
|
|
icon.classList.add('fa-bars'); |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
window.addEventListener('scroll', () => { |
|
|
const header = document.querySelector('header'); |
|
|
header.classList.toggle('scrolled', window.scrollY > 50); |
|
|
}); |
|
|
|
|
|
|
|
|
document.querySelectorAll('a[href^="#"]').forEach(anchor => { |
|
|
anchor.addEventListener('click', function(e) { |
|
|
e.preventDefault(); |
|
|
|
|
|
if(this.getAttribute('href') === '#') return; |
|
|
|
|
|
const target = document.querySelector(this.getAttribute('href')); |
|
|
if(target) { |
|
|
window.scrollTo({ |
|
|
top: target.offsetTop - 80, |
|
|
behavior: 'smooth' |
|
|
}); |
|
|
|
|
|
|
|
|
if(navLinks.classList.contains('active')) { |
|
|
navLinks.classList.remove('active'); |
|
|
const icon = mobileMenuBtn.querySelector('i'); |
|
|
icon.classList.remove('fa-times'); |
|
|
icon.classList.add('fa-bars'); |
|
|
} |
|
|
} |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
const contactForm = document.querySelector('.contact-form form'); |
|
|
if(contactForm) { |
|
|
contactForm.addEventListener('submit', function(e) { |
|
|
e.preventDefault(); |
|
|
|
|
|
|
|
|
const formData = new FormData(this); |
|
|
const data = {}; |
|
|
formData.forEach((value, key) => { |
|
|
data[key] = value; |
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
console.log('表单提交:', data); |
|
|
alert('感谢您的咨询！我们会尽快与您联系。'); |
|
|
|
|
|
|
|
|
this.reset(); |
|
|
}); |
|
|
} |
|
|
</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 <a href="https://enzostvs-deepsite.hf.space" style="color: #fff;" target="_blank" >DeepSite</a> <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;"></p></body> |
|
|
</html> |
