パーツ番号 11-07-01 ・ CSSのみ

ウェルカムイラスト+メッセージ(静止)

初回ログイン時に表示する歓迎メッセージとイラストの組み合わせ。会員サイトのウェルカム画面に利用できます。

staticcss

プレビュー

ソースコード

HTML

<div class="d11-07-01-wrap">
          <svg class="d11-07-01-illust" viewBox="0 0 120 100" xmlns="http://www.w3.org/2000/svg">
            <circle cx="60" cy="38" r="30" fill="#eef2ff"/>
            <circle cx="60" cy="30" r="14" fill="#818cf8"/>
            <path d="M32 78c0-16 12-26 28-26s28 10 28 26" fill="#a5b4fc"/>
            <path d="M20 20l6 6M100 20l-6 6M18 46h8M94 46h8" stroke="#c7d2fe" stroke-width="3" stroke-linecap="round"/>
          </svg>
          <p class="d11-07-01-title">ようこそ、Reiraへ</p>
          <p class="d11-07-01-sub">はじめての方向けにご案内します</p>
        </div>

CSS

.d11-07-01-wrap{ text-align:center; }
        .d11-07-01-illust{ width:110px; height:auto; }
        .d11-07-01-title{ margin:10px 0 2px; font-size:15px; font-weight:700; color:#3730a3; }
        .d11-07-01-sub{ margin:0; font-size:12px; color:#6b7280; }

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