115 lines
5.8 KiB
HTML
115 lines
5.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=1280, height=720">
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
|
<style>
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Display', sans-serif; -webkit-font-smoothing: antialiased; }
|
|
.slide {
|
|
width: 1280px; height: 720px;
|
|
display: flex; flex-direction: column;
|
|
padding: 64px 80px;
|
|
background: linear-gradient(160deg, #F5F5FA 0%, #EBEBF0 35%, #F0F0F5 100%);
|
|
position: relative; overflow: hidden;
|
|
}
|
|
.slide::before {
|
|
content: ''; position: absolute; top: -40%; right: -25%;
|
|
width: 70%; height: 90%;
|
|
background: radial-gradient(ellipse, rgba(0,122,255,0.08) 0%, transparent 60%);
|
|
pointer-events: none;
|
|
}
|
|
.glass {
|
|
background: rgba(255,255,255,0.6);
|
|
backdrop-filter: blur(48px); -webkit-backdrop-filter: blur(48px);
|
|
border: 1px solid rgba(255,255,255,0.7);
|
|
border-radius: 28px;
|
|
box-shadow: 0 8px 32px rgba(0,0,0,0.04), 0 0 0 1px rgba(255,255,255,0.8) inset;
|
|
}
|
|
.glass-strong {
|
|
background: rgba(255,255,255,0.72);
|
|
backdrop-filter: blur(56px); -webkit-backdrop-filter: blur(56px);
|
|
border: 1px solid rgba(255,255,255,0.75);
|
|
border-radius: 32px;
|
|
box-shadow: 0 12px 40px rgba(0,0,0,0.06), 0 0 0 1px rgba(255,255,255,0.9) inset;
|
|
}
|
|
.accent { color: #007AFF; }
|
|
.text-dark { color: #1D1D1F; }
|
|
.text-muted { color: #8E8E93; }
|
|
.img-wrap {
|
|
border-radius: 20px; overflow: hidden;
|
|
box-shadow: 0 8px 32px rgba(0,0,0,0.12), 0 0 0 1px rgba(0,0,0,0.04);
|
|
}
|
|
.img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }
|
|
h1 { font-size: 52px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.15; }
|
|
h2 { font-size: 20px; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; color: #007AFF; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<!-- 1. 封面：一页一主题，大留白 -->
|
|
<div class="slide" id="slide-1" style="justify-content: center; align-items: center; text-align: center;">
|
|
<div class="img-wrap" style="width: 280px; height: 280px; margin-bottom: 48px;">
|
|
<img src="file:///Users/karuo/Documents/卡若Ai的文件夹/图片/karuo_profile_cover.png" alt="卡若">
|
|
</div>
|
|
<h1 class="text-dark" style="margin-bottom: 16px;">卡若</h1>
|
|
<p class="text-muted" style="font-size: 24px; font-weight: 500; letter-spacing: 0.02em;">私域运营 · 云阿米巴 · 个人数字管家</p>
|
|
</div>
|
|
|
|
<!-- 2. 卡若是谁：少即是多，大字号 -->
|
|
<div class="slide" id="slide-2" style="justify-content: center;">
|
|
<h2 style="margin-bottom: 32px;">卡若是谁</h2>
|
|
<div class="glass-strong" style="padding: 48px 56px; max-width: 900px;">
|
|
<p class="text-dark" style="font-size: 26px; line-height: 1.7; font-weight: 500;">专注私域运营与项目变现的创业者</p>
|
|
<p class="text-muted" style="font-size: 20px; line-height: 1.8; margin-top: 28px;">五行营销方法论 · 云阿米巴分润 · 卡若AI 数字管家</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 3. 五行架构：亲密性 + 对齐 -->
|
|
<div class="slide" id="slide-3" style="flex-direction: row; align-items: center; gap: 56px;">
|
|
<div style="flex: 1; max-width: 520px;">
|
|
<h2 style="margin-bottom: 40px;">五行架构</h2>
|
|
<div class="glass" style="padding: 40px 44px;">
|
|
<div style="display: grid; gap: 20px; font-size: 19px; line-height: 1.6; color: #1D1D1F;">
|
|
<div><strong style="color: #007AFF;">金</strong> 卡资 · 稳了 · 金仓 金盾</div>
|
|
<div><strong style="color: #007AFF;">水</strong> 卡人 · 搞定了 · 水溪 水泉 水桥</div>
|
|
<div><strong style="color: #007AFF;">木</strong> 卡木 · 搞起 · 木叶 木根 木果</div>
|
|
<div><strong style="color: #007AFF;">火</strong> 卡火 · 让我想想 · 火炬 火锤 火眼 火种</div>
|
|
<div><strong style="color: #007AFF;">土</strong> 卡土 · 先算账 · 土基 土砖 土渠 土簿</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="img-wrap" style="width: 460px; height: 400px; flex-shrink: 0;">
|
|
<img src="file:///Users/karuo/Documents/卡若Ai的文件夹/图片/karuo_wuxing.png" alt="五行">
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 4. 云阿米巴：对比突出关键点 -->
|
|
<div class="slide" id="slide-4" style="flex-direction: row; align-items: center; gap: 56px;">
|
|
<div class="img-wrap" style="width: 440px; height: 380px; flex-shrink: 0;">
|
|
<img src="file:///Users/karuo/Documents/卡若Ai的文件夹/图片/karuo_yun_amiba.png" alt="云阿米巴">
|
|
</div>
|
|
<div style="flex: 1; max-width: 580px;">
|
|
<h2 style="margin-bottom: 40px;">云阿米巴</h2>
|
|
<div class="glass-strong" style="padding: 40px 48px;">
|
|
<div style="font-size: 22px; line-height: 2; color: #1D1D1F;">
|
|
<p style="margin-bottom: 16px;">分不属于对方的钱</p>
|
|
<p style="margin-bottom: 16px;">按创造价值分钱</p>
|
|
<p style="margin-bottom: 16px;">流量 + 私域体系绑定合作方</p>
|
|
<p class="text-muted" style="font-size: 18px; margin-top: 24px;">现金激励 · 不分股份</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 5. 联系：极简收尾 -->
|
|
<div class="slide" id="slide-5" style="justify-content: center; align-items: center; text-align: center;">
|
|
<h2 style="margin-bottom: 48px;">联系</h2>
|
|
<div class="glass-strong" style="padding: 48px 80px;">
|
|
<p class="text-dark" style="font-size: 28px; font-weight: 600; margin-bottom: 16px;">15880802661</p>
|
|
<p class="text-muted" style="font-size: 22px;">微信 28533368</p>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|