tailwind布局实现ai人工智能公司炫酷落地页设计代码
代码语言:html
所属分类:布局界面
代码描述:tailwind布局实现ai人工智能公司炫酷落地页设计代码
代码标签: tailwind 布局 ai 人工 智能 公司 炫酷 落地页 设计 代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Neural AI Solutions</title>
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@200;300;400;600&family=Inter:wght@400;500&display=swap" rel="stylesheet">
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/all.6.4.0.css">
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/tailwindcss.3.4.16.js"></script>
<style>
body, html {
font-family: 'Inter', system-ui, sans-serif;
background: #181025;
margin: 0;
padding: 0;
min-height: 100vh;
}
h1, h2, h3, h4 {
font-family: 'Manrope', sans-serif !important;
font-weight: 200 !important;
letter-spacing: -0.03em !important;
}
canvas#neuro {
position: fixed;
inset: 0;
width: 100vw;
height: 100vh;
pointer-events: none;
opacity: .95;
z-index: 0;
}
.glass-effect {
backdrop-filter: blur(14px) brightness(0.91);
-webkit-backdrop-filter: blur(14px) brightness(0.91);
}
.floating {
animation: float 6s ease-in-out infinite;
}
.floating-delay {
animation: float 6s ease-in-out infinite;
animation-delay: 2s;
}
@keyframes float {
0% { transform: translateY(0px); }
50% { transform: translateY(-20px); }
100% { transform: translateY(0px); }
}
</style>
</head>
<body class="relative min-h-screen overflow-x-hidden">
<canvas id="neuro"></canvas>
<!-- Navbar -->
<nav class="relative z-10 w-full py-5 px-4 md:px-8">
<div class="max-w-7xl mx-auto flex justify-between items-center">
<div class="flex items-center">
<div class="w-10 h-10 rounded-lg bg-gradient-to-br from-gray-700 to-gray-900 flex items-center justify-center mr-3 border border-white/10">
<i class="fas fa-brain text-white"></i>
</div>
<span class="text-white text-xl font-semibold">Neural<span class="text-white/80">AI</span></span>
</div>
<div class="hidden md:flex items-center space-x-8">
<a href="#" class="text-white/80 hover:text-white transition-colors">Products</a>
<a href=&q.........完整代码请登录后点击上方下载按钮下载查看
















网友评论0