console
<!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: #3a86ff;
--secondary-color: #8338ec;
--dark-color: #212529;
--light-color: #f8f9fa;
--success-color: #28a745;
--warning-color: #ffc107;
--danger-color: #dc3545;
--transition: all 0.3s ease;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
line-height: 1.6;
color: #333;
background-color: #fff;
overflow-x: hidden;
}
a {
text-decoration: none;
color: var(--primary-color);
transition: var(--transition);
}
a:hover {
color: var(--secondary-color);
}
.container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 0 15px;
}
.btn {
display: inline-block;
padding: 10px 20px;
background: var(--primary-color);
color: white;
border: none;
border-radius: 30px;
cursor: pointer;
transition: var(--transition);
font-weight: 500;
text-align: center;
}
.btn:hover {
background: var(--secondary-color);
color: white;
transform: translateY(-3px);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}
.btn-outline {
background: transparent;
border: 2px solid var(--primary-color);
color: var(--primary-color);
}
.btn-outline:hover {
background: var(--primary-color);
color: white;
}
.section {
padding: 80px 0;
}
.section-title {
text-align: center;
margin-bottom: 50px;
font-size: 2.5rem;
color: var(--dark-color);
position: relative;
}
.section-title:after {
content: '';
display: block;
width: 80px;
height: 4px;
background: linear-gradient(to right, var(--primary-color), var(--secondary-color));
margin: 15px auto;
border-radius: 2px;
}
.text-center {
text-align: center;
}
.navbar {
position: fixed;
top: 0;
left: 0;
width: 100%;
padding: 20px 0;
background-color: rgba(255, 255, 255, 0.95);
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
z-index: 1000;
transition: var(--transition);
}
.navbar.scrolled {
padding: 15px 0;
background-color: rgba(255, 255, 255, 0.98);
}
.navbar-container {
display: flex;
justify-content: space-between;
align-items: center;
}
.logo {
font-size: 1.8rem;
font-weight: 700;
color: var(--dark-color);
display: flex;
align-items: center;
}
.logo i {
color: var(--primary-color);
margin-right: 10px;
font-size: 2rem;
}
.nav-links {
display: flex;
list-style: none;
}
.nav-links li {
margin-left: 30px;
}
.nav-links a {
color: var(--dark-color);
font-weight: 500;
position: relative;
}
.nav-links a:after {
content: '';
position: absolute;
bottom: -5px;
left: 0;
width: 0;
height: 2px;
background: var(--primary-color);
transition: var(--transition);
}
.nav-links a:hover:after {
width: 100%;
}
.mobile-menu-btn {
display: none;
background: none;
border: none;
font-size: 1.5rem;
color: var(--dark-color);
cursor: pointer;
}
.hero {
height: 100vh;
min-height: 600px;
background: linear-gradient(135deg, rgba(58, 134, 255, 0.1), rgba(131, 56, 236, 0.1)), url('https://images.unsplash.com/photo-1518770660439-4636190af475?ixlib=rb-4.0.3&auto=format&fit=crop&w=1350&q=80') no-repeat center center/cover;
display: flex;
align-items: center;
text-align: center;
color: var(--dark-color);
padding-top: 80px;
}
.hero-content {
max-width: 800px;
margin: 0 auto;
padding: 0 20px;
}
.hero h1 {
font-size: 3.5rem;
margin-bottom: 20px;
line-height: 1.2;
}
.hero p {
font-size: 1.2rem;
margin-bottom: 30px;
opacity: 0.9;
}
.hero-btns {
display: flex;
justify-content: center;
gap: 15px;
}
.about {
background-color: var(--light-color);
}
.about-content {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 40px;
}
.about-text {
flex: 1;
min-width: 300px;
}
.about-image {
flex: 1;
min-width: 300px;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 20px 30px rgba(0, 0, 0, 0.1);
}
.about-image img {
width: 100%;
height: auto;
display: block;
transition: var(--transition);
}
.about-image:hover img {
transform: scale(1.05);
}
.services-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 30px;
margin-top: 40px;
}
.service-card {
background: white;
border-radius: 10px;
padding: 30px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
transition: var(--transition);
text-align: center;
}
.service-card:hover {
transform: translateY(-10px);
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
}
.service-icon {
font-size: 3rem;
color: var(--primary-color);
margin-bottom: 20px;
}
.service-card h3 {
margin-bottom: 15px;
font-size: 1.5rem;
}
.products {
background-color: var(--light-color);
}
.products-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 30px;
}
.product-card {
background: white;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
transition: var(--transition);
}
.product-card:hover {
transform: translateY(-10px);
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
}
.product-image {
height: 200px;
overflow: hidden;
}
.product-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: var(--transition);
}
.product-card:hover .product-image img {
transform: scale(1.1);
}
.product-info {
padding: 20px;
}
.product-info h3 {
margin-bottom: 10px;
}
.product-info p {
margin-bottom: 15px;
color: #666;
}
.team-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 30px;
}
.team-member {
text-align: center;
}
.member-image {
width: 200px;
height: 200px;
border-radius: 50%;
overflow: hidden;
margin: 0 auto 20px;
border: 5px solid white;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}
.member-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.team-member h3 {
margin-bottom: 5px;
}
.team-member p {
color: var(--primary-color);
margin-bottom: 15px;
font-weight: 500;
}
.social-links {
display: flex;
justify-content: center;
gap: 15px;
}
.social-links a {
width: 35px;
height: 35px;
border-radius: 50%;
background: var(--light-color);
display: flex;
align-items: center;
justify-content: center;
color: var(--dark-color);
transition: var(--transition);
}
.social-links a:hover {
background: var(--primary-color);
color: white;
}
.contact {
background-color: var(--light-color);
}
.contact-container {
display: flex;
flex-wrap: wrap;
gap: 40px;
}
.contact-info {
flex: 1;
min-width: 300px;
}
.contact-info h3 {
margin-bottom: 20px;
font-size: 1.5rem;
}
.contact-details {
margin-bottom: 30px;
}
.contact-details p {
margin-bottom: 10px;
display: flex;
align-items: center;
}
.contact-details i {
margin-right: 10px;
color: var(--primary-color);
width: 20px;
}
.contact-form {
flex: 1;
min-width: 300px;
background: white;
padding: 30px;
border-radius: 10px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}
.form-group {
margin-bottom: 20px;
}
.form-group label {
display: block;
margin-bottom: 5px;
font-weight: 500;
}
.form-control {
width: 100%;
padding: 12px 15px;
border: 1px solid #ddd;
border-radius: 5px;
font-family: inherit;
transition: var(--transition);
}
.form-control:focus {
outline: none;
border-color: var(--primary-color);
box-shadow: 0 0 0 3px rgba(58, 134, 255, 0.2);
}
textarea.form-control {
min-height: 150px;
resize: vertical;
}
.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: 30px;
margin-bottom: 40px;
}
.footer-col h3 {
margin-bottom: 20px;
font-size: 1.2rem;
position: relative;
padding-bottom: 10px;
}
.footer-col h3:after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 40px;
height: 2px;
background: var(--primary-color);
}
.footer-col ul {
list-style: none;
}
.footer-col ul li {
margin-bottom: 10px;
}
.footer-col ul li a {
color: #bbb;
transition: var(--transition);
}
.footer-col ul li a:hover {
color: white;
padding-left: 5px;
}
.footer-bottom {
text-align: center;
padding-top: 20px;
border-top: 1px solid rgba(255, 255, 255, 0.1);
color: #bbb;
font-size: 0.9rem;
}
@media (max-width: 992px) {
.hero h1 {
font-size: 2.8rem;
}
.section-title {
font-size: 2.2rem;
}
}
@media (max-width: 768px) {
.mobile-menu-btn {
display: block;
}
.nav-links {
position: fixed;
top: 80px;
left: -100%;
width: 100%;
height: calc(100vh - 80px);
background: white;
flex-direction: column;
align-items: center;
padding-top: 40px;
transition: var(--transition);
}
.nav-links.active {
left: 0;
}
.nav-links li {
margin: 15px 0;
}
.hero h1 {
font-size: 2.5rem;
}
.hero-btns {
flex-direction: column;
align-items: center;
}
.hero-btns .btn {
width: 80%;
margin-bottom: 15px;
}
.section {
padding: 60px 0;
}
}
@media (max-width: 576px) {
.hero h1 {
font-size: 2rem;
}
.hero p {
font-size: 1rem;
}
.section-title {
font-size: 1.8rem;
}
.btn {
padding: 8px 16px;
font-size: 0.9rem;
}
}
</style>
</head>
<body>
<nav class="navbar">
<div class="container navbar-container">
<a href="#" class="logo">
<i class="fas fa-shield-alt"></i>
<span>猛犸科技</span>
</a>
<button class="mobile-menu-btn" id="mobileMenuBtn">
<i class="fas fa-bars"></i>
</button>
<ul class="nav-links" id="navLinks">
<li><a href="#home">首页</a></li>
<li><a href="#about">关于我们</a></li>
<li><a href="#services">服务</a></li>
<li><a href="#products">产品</a></li>
<li><a href="#team">团队</a></li>
<li><a href="#contact">联系我们</a></li>
</ul>
</div>
</nav>
<section class="hero" id="home">
<div class="hero-content">
<h1>创新科技 引领未来</h1>
<p>猛犸科技致力于为企业提供最前沿的技术解决方案，助力您的业务在数字化时代蓬勃发展。</p>
<div class="hero-btns">
<a href="#contact" class="btn">免费咨询</a>
<a href="#about" class="btn btn-outline">了解更多</a>
</div>
</div>
</section>
<section class="section about" id="about">
<div class="container">
<h2 class="section-title">关于猛犸科技</h2>
<div class="about-content">
<div class="about-text">
<p>猛犸科技成立于2015年，是一家专注于人工智能、大数据分析和云计算解决方案的高科技企业。我们的团队由来自全球顶尖科技公司的专家组成，拥有丰富的行业经验和创新能力。</p>
<p>我们致力于为企业提供定制化的技术解决方案，帮助客户在数字化转型中保持竞争优势。通过我们的创新产品和服务，已有超过1000家企业实现了业务增长和效率提升。</p>
<p>猛犸科技秉承"科技改变未来"的理念，不断探索前沿技术，为客户创造更大价值。我们的愿景是成为全球领先的企业级技术解决方案提供商。</p>
<a href="#" class="btn" style="margin-top: 20px;">阅读更多</a>
</div>
<div class="about-image">
<img src="https://images.unsplash.com/photo-1552664730-d307ca884978?ixlib=rb-4.0.3&auto=format&fit=crop&w=1350&q=80" alt="猛犸科技团队">
</div>
</div>
</div>
</section>
<section class="section services" id="services">
<div class="container">
<h2 class="section-title">我们的服务</h2>
<div class="services-grid">
<div class="service-card">
<div class="service-icon">
<i class="fas fa-robot"></i>
</div>
<h3>人工智能解决方案</h3>
<p>为企业提供定制化AI解决方案，包括机器学习、计算机视觉、自然语言处理等技术应用，帮助您实现业务流程自动化。</p>
</div>
<div class="service-card">
<div class="service-icon">
<i class="fas fa-cloud"></i>
</div>
<h3>云计算服务</h3>
<p>全面的云服务解决方案，包括云迁移、云架构设计、云安全等，助您构建弹性、安全、高效的云基础设施。</p>
</div>
<div class="service-card">
<div class="service-icon">
<i class="fas fa-database"></i>
</div>
<h3>大数据分析</h3>
<p>利用先进的大数据分析技术，挖掘数据价值，提供数据可视化、预测分析和商业智能解决方案。</p>
</div>
<div class="service-card">
<div class="service-icon">
<i class="fas fa-mobile-alt"></i>
</div>
<h3>移动应用开发</h3>
<p>专业的跨平台移动应用开发服务，打造用户体验卓越的iOS和Android应用程序。</p>
</div>
<div class="service-card">
<div class="service-icon">
<i class="fas fa-shield-alt"></i>
</div>
<h3>网络安全</h3>
<p>全面的网络安全评估、渗透测试和安全加固服务，保护您的企业免受网络威胁。</p>
</div>
<div class="service-card">
<div class="service-icon">
<i class="fas fa-chart-line"></i>
</div>
<h3>数字化转型咨询</h3>
<p>为企业提供数字化转型战略咨询，帮助您规划并实施数字化升级路线图。</p>
</div>
</div>
</div>
</section>
<section class="section products" id="products">
<div class="container">
<h2 class="section-title">我们的产品</h2>
<div class="products-grid">
<div class="product-card">
<div class="product-image">
<img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-4.0.3&auto=format&fit=crop&w=1350&q=80" alt="Mammoth AI">
</div>
<div class="product-info">
<h3>Mammoth AI 平台</h3>
<p>一站式企业级人工智能平台，提供从数据准备到模型部署的全流程解决方案。</p>
<a href="#" class="btn btn-outline">了解更多</a>
</div>
</div>
<div class="product-card">
<div class="product-image">
<img src="https://images.unsplash.com/photo-1620712943543-bcc4688e7485?ixlib=rb-4.0.3&auto=format&fit=crop&w=1350&q=80" alt="CloudCore">
</div>
<div class="product-info">
<h3>CloudCore 云管理</h3>
<p>多云环境管理平台，提供资源监控、成本优化和安全合规的一体化解决方案。</p>
<a href="#" class="btn btn-outline">了解更多</a>
</div>
</div>
<div class="product-card">
<div class="product-image">
<img src="https://images.unsplash.com/photo-1460925895917-afdab827c52f?ixlib=rb-4.0.3&auto=format&fit=crop&w=1350&q=80" alt="DataInsight">
</div>
<div class="product-info">
<h3>DataInsight 分析</h3>
<p>强大的商业智能工具，支持实时数据分析和可视化，助力企业数据驱动决策。</p>
<a href="#" class="btn btn-outline">了解更多</a>
</div>
</div>
<div class="product-card">
<div class="product-image">
<img src="https://images.unsplash.com/photo-1555774698-0b77e0d5fac6?ixlib=rb-4.0.3&auto=format&fit=crop&w=1350&q=80" alt="SecureShield">
</div>
<div class="product-info">
<h3>SecureShield 安全</h3>
<p>企业级网络安全防护系统，提供威胁检测、漏洞管理和事件响应功能。</p>
<a href="#" class="btn btn-outline">了解更多</a>
</div>
</div>
</div>
</div>
</section>
<section class="section team" id="team">
<div class="container">
<h2 class="section-title">我们的团队</h2>
<div class="team-grid">
<div class="team-member">
<div class="member-image">
<img src="https://randomuser.me/api/portraits/women/43.jpg" alt="张丽 CEO">
</div>
<h3>张丽</h3>
<p>创始人 & CEO</p>
<p>前谷歌AI部门技术主管，15年人工智能领域经验。</p>
<div class="social-links">
<a href="#"><i class="fab fa-linkedin"></i></a>
<a href="#"><i class="fab fa-twitter"></i></a>
<a href="#"><i class="fas fa-envelope"></i></a>
</div>
</div>
<div class="team-member">
<div class="member-image">
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="王强 CTO">
</div>
<h3>王强</h3>
<p>首席技术官</p>
<p>云计算专家，曾任职于亚马逊AWS架构团队。</p>
<div class="social-links">
<a href="#"><i class="fab fa-linkedin"></i></a>
<a href="#"><i class="fab fa-github"></i></a>
<a href="#"><i class="fas fa-envelope"></i></a>
</div>
</div>
<div class="team-member">
<div class="member-image">
<img src="https://randomuser.me/api/portraits/women/65.jpg" alt="李娜 CDO">
</div>
<h3>李娜</h3>
<p>首席数据官</p>
<p>大数据分析专家，曾任IBM数据科学团队负责人。</p>
<div class="social-links">
<a href="#"><i class="fab fa-linkedin"></i></a>
<a href="#"><i class="fab fa-twitter"></i></a>
<a href="#"><i class="fas fa-envelope"></i></a>
</div>
</div>
<div class="team-member">
<div class="member-image">
<img src="https://randomuser.me/api/portraits/men/75.jpg" alt="赵明 CSO">
</div>
<h3>赵明</h3>
<p>首席安全官</p>
<p>网络安全专家，曾服务于多家金融机构安全团队。</p>
<div class="social-links">
<a href="#"><i class="fab fa-linkedin"></i></a>
<a href="#"><i class="fab fa-twitter"></i></a>
<a href="#"><i class="fas fa-envelope"></i></a>
</div>
</div>
</div>
</div>
</section>
<section class="section contact" id="contact">
<div class="container">
<h2 class="section-title">联系我们</h2>
<div class="contact-container">
<div class="contact-info">
<h3>获取更多信息</h3>
<p>无论您有任何问题或需要了解我们的服务，我们的团队都随时准备为您提供帮助。</p>
<div class="contact-details">
<p><i class="fas fa-map-marker-alt"></i> 北京市海淀区科技园路88号猛犸大厦</p>
<p><i class="fas fa-phone"></i> +86 10 8888 8888</p>
<p><i class="fas fa-envelope"></i> info@mammoth-tech.com</p>
<p><i class="fas fa-clock"></i> 周一至周五: 9:00 - 18:00</p>
</div>
<div class="social-links">
<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"></i></a>
<a href="#"><i class="fab fa-github"></i></a>
</div>
</div>
<div class="contact-form">
<form>
<div class="form-group">
<label for="name">姓名</label>
<input type="text" id="name" class="form-control" required>
</div>
<div class="form-group">
<label for="email">邮箱</label>
<input type="email" id="email" class="form-control" required>
</div>
<div class="form-group">
<label for="phone">电话</label>
<input type="tel" id="phone" class="form-control">
</div>
<div class="form-group">
<label for="subject">主题</label>
<input type="text" id="subject" class="form-control" required>
</div>
<div class="form-group">
<label for="message">留言</label>
<textarea id="message" class="form-control" required></textarea>
</div>
<button type="submit" class="btn">发送消息</button>
</form>
</div>
</div>
</div>
</section>
<footer class="footer">
<div class="container">
<div class="footer-container">
<div class="footer-col">
<h3>猛犸科技</h3>
<p>创新科技解决方案提供商，致力于帮助企业实现数字化转型和业务增长。</p>
<div class="social-links" style="margin-top: 15px;">
<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"></i></a>
<a href="#"><i class="fab fa-github"></i></a>
</div>
</div>
<div class="footer-col">
<h3>快速链接</h3>
<ul>
<li><a href="#home">首页</a></li>
<li><a href="#about">关于我们</a></li>
<li><a href="#services">服务</a></li>
<li><a href="#products">产品</a></li>
<li><a href="#team">团队</a></li>
<li><a href="#contact">联系我们</a></li>
</ul>
</div>
<div class="footer-col">
<h3>服务</h3>
<ul>
<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>
<li><a href="#">数字咨询</a></li>
</ul>
</div>
<div class="footer-col">
<h3>联系我们</h3>
<ul>
<li><i class="fas fa-map-marker-alt"></i> 北京市海淀区科技园路88号</li>
<li><i class="fas fa-phone"></i> +86 10 8888 8888</li>
<li><i class="fas fa-envelope"></i> info@mammoth-tech.com</li>
</ul>
</div>
</div>
<div class="footer-bottom">
<p>© 2023 猛犸科技有限公司. 保留所有权利.</p>
</div>
</div>
</footer>
<script>
const mobileMenuBtn = document.getElementById('mobileMenuBtn');
const navLinks = document.getElementById('navLinks');
mobileMenuBtn.addEventListener('click', () => {
navLinks.classList.toggle('active');
});
window.addEventListener('scroll', () => {
const navbar = document.querySelector('.navbar');
if (window.scrollY > 50) {
navbar.classList.add('scrolled');
} else {
navbar.classList.remove('scrolled');
}
});
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function(e) {
e.preventDefault();
const targetId = this.getAttribute('href');
const targetElement = document.querySelector(targetId);
if (targetElement) {
window.scrollTo({
top: targetElement.offsetTop - 80,
behavior: 'smooth'
});
navLinks.classList.remove('active');
}
});
});
</script>
</body>
</html>