HTML+CSS实现公司官网!附源码
|
admin
2026年10月14日 21:48
本文热度 33
|
<!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 href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
<script> tailwind.config = { theme: { extend: { colors: { primary: '#7E22CE', secondary: '#2563EB', dark: '#1E293B', light: '#F8FAFC' }, fontFamily: { sans: ['Inter', 'system-ui', 'sans-serif'], }, } } } </script>
<style type="text/tailwindcss"> @layer utilities { .content-auto { content-visibility: auto; } .text-gradient { background-clip: text; -webkit-background-clip: text; color: transparent; background-image: linear-gradient(90deg, #7E22CE, #2563EB); } .bg-gradient-primary { background: linear-gradient(135deg, #7E22CE 0%, #2563EB 100%); } .card-hover { transition: all 0.3s ease; } .card-hover:hover { transform: translateY(-8px); box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1); } } </style></head><body class="font-sans text-dark bg-light"> <header id="navbar" class="fixed w-full top-0 z-50 transition-all duration-300 bg-white/90 backdrop-blur-sm shadow-sm"> <div class="container mx-auto px-4 sm:px-6 lg:px-8"> <div class="flex justify-between items-center py-4"> <a href="#" class="flex items-center space-x-2"> <span class="text-2xl font-bold text-gradient">声动传媒</span> </a>
<nav class="hidden md:flex space-x-8"> <a href="#home" class="font-medium hover:text-primary transition-colors">首页</a> <a href="#platforms" class="font-medium hover:text-primary transition-colors">直播平台</a> <a href="#artists" class="font-medium hover:text-primary transition-colors">旗下经纪人</a> <a href="#services" class="font-medium hover:text-primary transition-colors">核心服务</a> <a href="#contact" class="font-medium hover:text-primary transition-colors">联系我们</a> </nav>
<a href="#contact" class="hidden md:block bg-gradient-primary text-white px-6 py-2 rounded-full font-medium hover:opacity-90 transition-opacity"> 商务合作 </a>
<button id="menuBtn" class="md:hidden text-dark text-xl"> <i class="fa fa-bars"></i> </button> </div> </div>
<div id="mobileMenu" class="md:hidden hidden bg-white border-t"> <div class="container mx-auto px-4 py-3 flex flex-col space-y-4"> <a href="#home" class="font-medium py-2 hover:text-primary transition-colors">首页</a> <a href="#platforms" class="font-medium py-2 hover:text-primary transition-colors">直播平台</a> <a href="#artists" class="font-medium py-2 hover:text-primary transition-colors">旗下经纪人</a> <a href="#services" class="font-medium py-2 hover:text-primary transition-colors">核心服务</a> <a href="#contact" class="font-medium py-2 hover:text-primary transition-colors">联系我们</a> <a href="#contact" class="bg-gradient-primary text-white px-6 py-3 rounded-full font-medium text-center hover:opacity-90 transition-opacity"> 商务合作 </a> </div> </div> </header>
<section id="home" class="pt-32 pb-20 md:pt-40 md:pb-32 bg-gradient-to-b from-primary/5 to-white"> <div class="container mx-auto px-4 sm:px-6 lg:px-8"> <div class="flex flex-col md:flex-row items-center"> <div class="md:w-1/2 mb-10 md:mb-0"> <h1 class="text-[clamp(2.5rem,5vw,4rem)] font-bold leading-tight mb-6"> 用<span class="text-gradient">声音</span>创造价值<br> 用<span class="text-gradient">直播</span>连接世界 </h1> <p class="text-lg text-gray-600 mb-8 max-w-lg"> 声动传媒是国内领先的语音直播MCN机构,专注于抖音、快手、花椒等主流直播平台的艺人孵化与内容运营,打造专业的语音直播生态体系。 </p> <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4"> <a href="#contact" class="bg-gradient-primary text-white px-8 py-3 rounded-full font-medium text-center hover:opacity-90 transition-opacity"> 加入我们 </a> <a href="#platforms" class="border border-primary text-primary px-8 py-3 rounded-full font-medium text-center hover:bg-primary/5 transition-colors"> 了解平台 </a> </div> </div> <div class="md:w-1/2"> <img src="https://picsum.photos/id/180/800/600" alt="语音直播场景" class="rounded-2xl shadow-2xl w-full object-cover h-[400px]"> </div> </div> </div> </section>
<section id="platforms" class="py-20 bg-white"> <div class="container mx-auto px-4 sm:px-6 lg:px-8"> <div class="text-center mb-16"> <h2 class="text-[clamp(1.8rem,3vw,2.5rem)] font-bold mb-4">合作直播平台</h2> <p class="text-gray-600 max-w-2xl mx-auto">我们深度布局主流直播平台,为艺人提供多渠道发展机会,实现流量最大化</p> </div>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-5 gap-8"> <div class="bg-white rounded-xl shadow-lg p-6 text-center card-hover"> <div class="w-16 h-16 bg-red-100 rounded-full flex items-center justify-center mx-auto mb-4"> <i class="fa fa-music text-red-500 text-2xl"></i> </div> <h3 class="text-xl font-bold mb-2">抖音</h3> <p class="text-gray-600 text-sm">短视频+直播双轨运营,流量扶持</p> </div>
<div class="bg-white rounded-xl shadow-lg p-6 text-center card-hover"> <div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4"> <i class="fa fa-video-camera text-blue-500 text-2xl"></i> </div> <h3 class="text-xl font-bold mb-2">快手</h3> <p class="text-gray-600 text-sm">下沉市场全覆盖,私域流量运营</p> </div>
<div class="bg-white rounded-xl shadow-lg p-6 text-center card-hover"> <div class="w-16 h-16 bg-purple-100 rounded-full flex items-center justify-center mx-auto mb-4"> <i class="fa fa-microphone text-purple-500 text-2xl"></i> </div> <h3 class="text-xl font-bold mb-2">花椒直播</h3> <p class="text-gray-600 text-sm">语音直播头部平台,垂直领域深耕</p> </div>
<div class="bg-white rounded-xl shadow-lg p-6 text-center card-hover"> <div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4"> <i class="fa fa-gamepad text-green-500 text-2xl"></i> </div> <h3 class="text-xl font-bold mb-2">捞月狗</h3> <p class="text-gray-600 text-sm">游戏语音直播,精准用户群体</p> </div>
<div class="bg-white rounded-xl shadow-lg p-6 text-center card-hover"> <div class="w-16 h-16 bg-orange-100 rounded-full flex items-center justify-center mx-auto mb-4"> <i class="fa fa-tv text-orange-500 text-2xl"></i> </div> <h3 class="text-xl font-bold mb-2">虎牙</h3> <p class="text-gray-600 text-sm">游戏直播龙头,专业内容运营</p> </div> </div> </div> </section>
<section id="artists" class="py-20 bg-gray-50"> <div class="container mx-auto px-4 sm:px-6 lg:px-8"> <div class="text-center mb-16"> <h2 class="text-[clamp(1.8rem,3vw,2.5rem)] font-bold mb-4">旗下经纪人</h2> <p class="text-gray-600 max-w-2xl mx-auto">汇聚全网顶尖语音主播,多元化风格满足不同用户需求</p> </div>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6"> <div class="bg-white rounded-xl overflow-hidden shadow-md card-hover"> <img src="https://picsum.photos/id/64/400/400" alt="艺人头像" class="w-full h-64 object-cover"> <div class="p-4 text-center"> <h3 class="font-bold text-lg mb-1">夏语</h3> <p class="text-gray-600 text-sm mb-2">情感电台 | 抖音</p> <div class="flex justify-center space-x-2 text-yellow-400"> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> </div> </div> </div>
<div class="bg-white rounded-xl overflow-hidden shadow-md card-hover"> <img src="https://picsum.photos/id/65/400/400" alt="艺人头像" class="w-full h-64 object-cover"> <div class="p-4 text-center"> <h3 class="font-bold text-lg mb-1">清风</h3> <p class="text-gray-600 text-sm mb-2">游戏解说 | 虎牙</p> <div class="flex justify-center space-x-2 text-yellow-400"> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star-half-o"></i> </div> </div> </div>
<div class="bg-white rounded-xl overflow-hidden shadow-md card-hover"> <img src="https://picsum.photos/id/66/400/400" alt="艺人头像" class="w-full h-64 object-cover"> <div class="p-4 text-center"> <h3 class="font-bold text-lg mb-1">梦音</h3> <p class="text-gray-600 text-sm mb-2">音乐翻唱 | 快手</p> <div class="flex justify-center space-x-2 text-yellow-400"> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star-o"></i> </div> </div> </div>
<div class="bg-white rounded-xl overflow-hidden shadow-md card-hover"> <img src="https://picsum.photos/id/67/400/400" alt="艺人头像" class="w-full h-64 object-cover"> <div class="p-4 text-center"> <h3 class="font-bold text-lg mb-1">星辰</h3> <p class="text-gray-600 text-sm mb-2">脱口秀 | 花椒</p> <div class="flex justify-center space-x-2 text-yellow-400"> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i> </div> </div> </div> </div>
<div class="text-center mt-10"> <a href="#" class="inline-flex items-center text-primary font-medium hover:underline"> 查看更多 <i class="fa fa-arrow-right ml-2"></i> </a> </div> </div> </section>
<section id="services" class="py-20 bg-white"> <div class="container mx-auto px-4 sm:px-6 lg:px-8"> <div class="text-center mb-16"> <h2 class="text-[clamp(1.8rem,3vw,2.5rem)] font-bold mb-4">核心服务</h2> <p class="text-gray-600 max-w-2xl mx-auto">一站式语音直播解决方案,从孵化到变现全流程服务</p> </div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8"> <div class="bg-gradient-to-br from-primary/5 to-secondary/5 rounded-xl p-8 border border-gray-100 card-hover"> <div class="w-14 h-14 bg-primary/10 rounded-full flex items-center justify-center mb-6"> <i class="fa fa-user-plus text-primary text-2xl"></i> </div> <h3 class="text-xl font-bold mb-3">艺人孵化</h3> <p class="text-gray-600 mb-4">专业的培训体系,从新人到头部主播的全周期培养,包括声音塑造、直播技巧、内容策划等。</p> <ul class="space-y-2 text-gray-600"> <li class="flex items-center"> <i class="fa fa-check text-primary mr-2"></i> 声音训练 </li> <li class="flex items-center"> <i class="fa fa-check text-primary mr-2"></i> 直播话术 </li> <li class="flex items-center"> <i class="fa fa-check text-primary mr-2"></i> 人设打造 </li> </ul> </div>
<div class="bg-gradient-to-br from-primary/5 to-secondary/5 rounded-xl p-8 border border-gray-100 card-hover"> <div class="w-14 h-14 bg-primary/10 rounded-full flex items-center justify-center mb-6"> <i class="fa fa-line-chart text-primary text-2xl"></i> </div> <h3 class="text-xl font-bold mb-3">流量运营</h3> <p class="text-gray-600 mb-4">多平台流量矩阵搭建,精准定位目标用户,提升直播间曝光和转化效率。</p> <ul class="space-y-2 text-gray-600"> <li class="flex items-center"> <i class="fa fa-check text-primary mr-2"></i> 平台推广 </li> <li class="flex items-center"> <i class="fa fa-check text-primary mr-2"></i> 数据分析 </li> <li class="flex items-center"> <i class="fa fa-check text-primary mr-2"></i> 粉丝维护 </li> </ul> </div>
<div class="bg-gradient-to-br from-primary/5 to-secondary/5 rounded-xl p-8 border border-gray-100 card-hover"> <div class="w-14 h-14 bg-primary/10 rounded-full flex items-center justify-center mb-6"> <i class="fa fa-handshake-o text-primary text-2xl"></i> </div> <h3 class="text-xl font-bold mb-3">商业变现</h3> <p class="text-gray-600 mb-4">多元化的变现渠道,包括礼物打赏、广告合作、商演活动等,最大化艺人收益。</p> <ul class="space-y-2 text-gray-600"> <li class="flex items-center"> <i class="fa fa-check text-primary mr-2"></i> 品牌合作 </li> <li class="flex items-center"> <i class="fa fa-check text-primary mr-2"></i> 直播带货 </li> <li class="flex items-center"> <i class="fa fa-check text-primary mr-2"></i> 内容电商 </li> </ul> </div> </div> </div> </section>
<section id="contact" class="py-20 bg-gradient-primary text-white"> <div class="container mx-auto px-4 sm:px-6 lg:px-8"> <div class="text-center mb-16"> <h2 class="text-[clamp(1.8rem,3vw,2.5rem)] font-bold mb-4">联系我们</h2> <p class="max-w-2xl mx-auto opacity-90">无论您是想加入我们的艺人团队,还是寻求商务合作,我们都期待您的咨询</p> </div>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-10"> <div> <div class="bg-white/10 backdrop-blur-sm rounded-xl p-8 mb-6"> <h3 class="text-xl font-bold mb-6">联系方式</h3> <div class="space-y-4"> <div class="flex items-start"> <div class="w-10 h-10 bg-white/20 rounded-full flex items-center justify-center mr-4"> <i class="fa fa-map-marker"></i> </div> <div> <h4 class="font-medium mb-1">公司地址</h4> <p class="opacity-80">新疆大学11号楼999室</p> </div> </div>
<div class="flex items-start"> <div class="w-10 h-10 bg-white/20 rounded-full flex items-center justify-center mr-4"> <i class="fa fa-phone"></i> </div> <div> <h4 class="font-medium mb-1">联系电话</h4> <p class="opacity-80">000-888-9999</p> </div> </div>
<div class="flex items-start"> <div class="w-10 h-10 bg-white/20 rounded-full flex items-center justify-center mr-4"> <i class="fa fa-envelope"></i> </div> <div> <h4 class="font-medium mb-1">邮箱地址</h4> <p class="opacity-80">contact@soundmedia.com</p> </div> </div> </div> </div>
<div class="bg-white/10 backdrop-blur-sm rounded-xl p-8"> <h3 class="text-xl font-bold mb-6">社交媒体</h3> <div class="flex space-x-4"> <a href="#" class="w-12 h-12 bg-white/20 rounded-full flex items-center justify-center hover:bg-white/30 transition-colors"> <i class="fa fa-weixin text-xl"></i> </a> <a href="#" class="w-12 h-12 bg-white/20 rounded-full flex items-center justify-center hover:bg-white/30 transition-colors"> <i class="fa fa-weibo text-xl"></i> </a> <a href="#" class="w-12 h-12 bg-white/20 rounded-full flex items-center justify-center hover:bg-white/30 transition-colors"> <i class="fa fa-qq text-xl"></i> </a> <a href="#" class="w-12 h-12 bg-white/20 rounded-full flex items-center justify-center hover:bg-white/30 transition-colors"> <i class="fa fa-youtube-play text-xl"></i> </a> </div> </div> </div>
<div> <div class="bg-white rounded-xl p-8 text-dark"> <h3 class="text-xl font-bold mb-6">在线咨询</h3> <form> <div class="mb-4"> <label for="name" class="block text-sm font-medium mb-1">姓名</label> <input type="text" id="name" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent" placeholder="请输入您的姓名"> </div>
<div class="mb-4"> <label for="phone" class="block text-sm font-medium mb-1">电话</label> <input type="tel" id="phone" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent" placeholder="请输入您的联系电话"> </div>
<div class="mb-4"> <label for="type" class="block text-sm font-medium mb-1">咨询类型</label> <select id="type" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"> <option value="">请选择咨询类型</option> <option value="artist">艺人合作</option> <option value="business">商务合作</option> <option value="other">其他咨询</option> </select> </div>
<div class="mb-6"> <label for="message" class="block text-sm font-medium mb-1">留言内容</label> <textarea id="message" rows="4" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent" placeholder="请输入您的留言内容"></textarea> </div>
<button type="submit" class="w-full bg-gradient-primary text-white px-6 py-3 rounded-lg font-medium hover:opacity-90 transition-opacity"> 提交咨询 </button> </form> </div> </div> </div> </div> </section>
<footer class="bg-dark text-white py-10"> <div class="container mx-auto px-4 sm:px-6 lg:px-8"> <div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8"> <div> <h3 class="text-xl font-bold mb-4 text-gradient">声动传媒</h3> <p class="text-gray-400 mb-4">专业的语音直播MCN机构,致力于打造高品质的语音内容生态</p> <div class="flex space-x-4"> <a href="#" class="text-gray-400 hover:text-white transition-colors"> <i class="fa fa-weixin"></i> </a> <a href="#" class="text-gray-400 hover:text-white transition-colors"> <i class="fa fa-weibo"></i> </a> <a href="#" class="text-gray-400 hover:text-white transition-colors"> <i class="fa fa-qq"></i> </a> </div> </div>
<div> <h4 class="font-bold mb-4">快速链接</h4> <ul class="space-y-2"> <li><a href="#home" class="text-gray-400 hover:text-white transition-colors">首页</a></li> <li><a href="#platforms" class="text-gray-400 hover:text-white transition-colors">直播平台</a></li> <li><a href="#artists" class="text-gray-400 hover:text-white transition-colors">签约艺人</a></li> <li><a href="#services" class="text-gray-400 hover:text-white transition-colors">核心服务</a></li> </ul> </div>
<div> <h4 class="font-bold mb-4">合作平台</h4> <ul class="space-y-2"> <li><a href="#" class="text-gray-400 hover:text-white transition-colors">抖音</a></li> <li><a href="#" class="text-gray-400 hover:text-white transition-colors">快手</a></li> <li><a href="#" class="text-gray-400 hover:text-white transition-colors">花椒直播</a></li> <li><a href="#" class="text-gray-400 hover:text-white transition-colors">捞月狗</a></li> <li><a href="#" class="text-gray-400 hover:text-white transition-colors">虎牙</a></li> </ul> </div>
<div> <h4 class="font-bold mb-4">联系我们</h4> <ul class="space-y-2"> <li class="flex items-center text-gray-400"> <i class="fa fa-phone mr-2"></i> 000-888-9999 </li> <li class="flex items-center text-gray-400"> <i class="fa fa-envelope mr-2"></i> contact@xiaohei.com </li> <li class="flex items-start text-gray-400"> <i class="fa fa-map-marker mr-2 mt-1"></i> <span>新疆大学11号楼999室</span> </li> </ul> </div> </div>
<div class="border-t border-gray-800 pt-6 text-center text-gray-500 text-sm"> <p>© 2026 声动传媒 版权所有 | xiaohei 备00000000号</p> </div> </div> </footer>
<button id="backToTop" class="fixed bottom-6 right-6 w-12 h-12 bg-primary text-white rounded-full flex items-center justify-center shadow-lg opacity-0 invisible transition-all duration-300 hover:bg-primary/90"> <i class="fa fa-arrow-up"></i> </button>
<script> const menuBtn = document.getElementById('menuBtn'); const mobileMenu = document.getElementById('mobileMenu');
menuBtn.addEventListener('click', () => { mobileMenu.classList.toggle('hidden'); const icon = menuBtn.querySelector('i'); if (icon.classList.contains('fa-bars')) { icon.classList.replace('fa-bars', 'fa-times'); } else { icon.classList.replace('fa-times', 'fa-bars'); } });
const navbar = document.getElementById('navbar'); window.addEventListener('scroll', () => { if (window.scrollY > 50) { navbar.classList.add('py-2', 'shadow-md'); navbar.classList.remove('py-4', 'shadow-sm'); } else { navbar.classList.add('py-4', 'shadow-sm'); navbar.classList.remove('py-2', 'shadow-md'); } });
document.querySelectorAll('a[href^="#"]').forEach(anchor => { anchor.addEventListener('click', function (e) { e.preventDefault();
if (!mobileMenu.classList.contains('hidden')) { mobileMenu.classList.add('hidden'); const icon = menuBtn.querySelector('i'); icon.classList.replace('fa-times', 'fa-bars'); }
const targetId = this.getAttribute('href'); const targetElement = document.querySelector(targetId);
if (targetElement) { window.scrollTo({ top: targetElement.offsetTop - 80, behavior: 'smooth' }); } }); });
const backToTopBtn = document.getElementById('backToTop');
window.addEventListener('scroll', () => { if (window.scrollY > 300) { backToTopBtn.classList.remove('opacity-0', 'invisible'); backToTopBtn.classList.add('opacity-100', 'visible'); } else { backToTopBtn.classList.add('opacity-0', 'invisible'); backToTopBtn.classList.remove('opacity-100', 'visible'); } });
backToTopBtn.addEventListener('click', () => { window.scrollTo({ top: 0, behavior: 'smooth' }); }); </script></body></html>
阅读原文:原文链接
该文章在 2026/10/16 12:57:59 编辑过