パーツ番号 11-09-04 ・ CSSのみ

Coming Soonページ

バッジ・見出し・装飾ドットを組み合わせた静止の準備中デザインで、公開前のランディングページ用ダミー画面に利用できる。

staticcss

プレビュー

ソースコード

HTML

<div class="d11-09-04-wrap">
          <span class="d11-09-04-badge">SOON</span>
          <div class="d11-09-04-title">Coming Soon</div>
          <p class="d11-09-04-text">近日公開予定です、ご期待ください</p>
          <div class="d11-09-04-dots">
            <span></span><span></span><span></span>
          </div>
        </div>

CSS

.d11-09-04-wrap{ text-align:center; }
        .d11-09-04-badge{
          display:inline-block; padding:4px 12px; border-radius:999px;
          background:#eef2ff; color:#4f46e5; font-size:10px; font-weight:700;
          letter-spacing:1px; margin-bottom:12px;
        }
        .d11-09-04-title{ font-size:20px; font-weight:800; color:#1f2937; }
        .d11-09-04-text{ margin-top:8px; font-size:12px; color:#9ca3af; }
        .d11-09-04-dots{ margin-top:16px; display:flex; gap:6px; justify-content:center; }
        .d11-09-04-dots span{
          width:6px; height:6px; border-radius:50%; background:#c7d2fe;
        }

クラス名 .d11-09-04 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。