open-design/skills/html-ppt/templates/single-page/image-grid.html
marco 5dd70b5016
Some checks failed
ci / Validate workspace (push) Successful in 12m32s
landing-page-ci / Validate landing page (push) Successful in 9m41s
landing-page-deploy / Deploy landing page (push) Failing after 5m23s
github-metrics / Generate repository metrics SVG (push) Failing after 2m3s
refresh-contributors-wall / Refresh contributors wall cache bust (push) Failing after 11s
Initial import: open-design source for helix-mind.ai distribution
This repository contains the open-design daemon CLI source code, built
and packaged at https://helix-mind.ai/cli/open-design/latest.tgz for use
by the HelixMind /design slash command.

Licenses: Apache-2.0 (root) + MIT (skills/*)
2026-05-06 20:50:24 +02:00

35 lines
2.0 KiB
HTML
Raw Permalink Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="utf-8"><title>Image Grid</title>
<link rel="stylesheet" href="../../assets/fonts.css">
<link rel="stylesheet" href="../../assets/base.css">
<link rel="stylesheet" id="theme-link" href="../../assets/themes/minimal-white.css">
<link rel="stylesheet" href="../../assets/animations/animations.css">
<style>
.gg{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:180px;gap:14px;margin-top:24px}
.gg .cell{border-radius:var(--radius);overflow:hidden;position:relative;box-shadow:var(--shadow)}
.gg .cell span{position:absolute;inset:auto 0 0 0;padding:12px 14px;color:#fff;font-size:13px;font-weight:500;background:linear-gradient(transparent,rgba(0,0,0,.55))}
.gg .c1{background:linear-gradient(135deg,#3b6cff,#7a5cff);grid-column:span 2;grid-row:span 2}
.gg .c2{background:linear-gradient(135deg,#ff7a90,#ff2742)}
.gg .c3{background:linear-gradient(135deg,#5ef2c6,#7aa2ff)}
.gg .c4{background:linear-gradient(135deg,#ffd27a,#f2a341)}
.gg .c5{background:linear-gradient(135deg,#c984ff,#ff5c8a)}
.gg .c6{background:linear-gradient(135deg,#0e1530,#24283b)}
.gg .c7{background:linear-gradient(135deg,#88c0d0,#5ef2c6);grid-column:span 2}
</style>
</head><body class="single">
<div class="deck"><section class="slide is-active" data-title="Image Grid">
<p class="kicker">Gallery · 作品集</p>
<h2 class="h2">一次 bento grid六张要点图</h2>
<div class="gg anim-stagger-list" data-anim-target>
<div class="cell c1"><span>主视觉 · Keynote 封面</span></div>
<div class="cell c2"><span>暖色 · Stat</span></div>
<div class="cell c3"><span>冷色 · Flow</span></div>
<div class="cell c4"><span>日落 · Code</span></div>
<div class="cell c5"><span>渐变 · Quote</span></div>
<div class="cell c6"><span>暗色 · Terminal</span></div>
<div class="cell c7"><span>极光 · CTA</span></div>
</div>
</section></div>
<script src="../../assets/runtime.js"></script>
</body></html>