パーツ番号 09-03-05 ・ CSSのみ

Coming Soon

「準備中」の見出しと装飾ライン、固定値のカウントダウン風数字を並べた公開前ページ。WordPressのサイト公開前やランディング準備中の画面として設置できます。

css

プレビュー

ソースコード

HTML

<div class="d09-03-05-wrap">
          <span class="d09-03-05-eyebrow">COMING SOON</span>
          <p class="d09-03-05-title">準備中</p>
          <div class="d09-03-05-count">
            <div class="d09-03-05-unit"><b>12</b><small>日</small></div>
            <div class="d09-03-05-unit"><b>08</b><small>時間</small></div>
            <div class="d09-03-05-unit"><b>45</b><small>分</small></div>
          </div>
        </div>

CSS

.d09-03-05{background:linear-gradient(135deg,#1e2140,#3a2f5c)}
        .d09-03-05-wrap{text-align:center;color:#fff}
        .d09-03-05-eyebrow{display:inline-block;font-size:11px;letter-spacing:.35em;color:#c8a8ff;padding-bottom:6px;border-bottom:1px solid rgba(200,168,255,.5)}
        .d09-03-05-title{margin:12px 0 18px;font-size:30px;font-weight:800;letter-spacing:.1em}
        .d09-03-05-count{display:flex;justify-content:center;gap:14px}
        .d09-03-05-unit{background:rgba(255,255,255,.08);border-radius:10px;padding:8px 12px;min-width:52px}
        .d09-03-05-unit b{display:block;font-size:22px;font-weight:800;animation:d325pulse 2s ease-in-out infinite}
        .d09-03-05-unit small{display:block;font-size:10px;color:#b8b3d6;margin-top:2px}
        @keyframes d325pulse{0%,100%{opacity:1}50%{opacity:.5}}

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