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

上下2段ヒーロー

上段にテキスト、下段に写真代わりの色帯を置く縦構成です。WordPressのポートフォリオや雑誌風サイトのトップに向きます。

staticcss

プレビュー

ソースコード

HTML

<div class="d01-07-06-hero">
          <div class="d01-07-06-top">
            <h1>見て、感じる、選ぶ。</h1>
            <p>写真とともに伝える、ブランドの世界観。</p>
          </div>
          <div class="d01-07-06-bottom"></div>
        </div>

CSS

.prev.d01-07-06{padding:0;display:block;min-height:300px}
        .d01-07-06-hero{height:300px;display:flex;flex-direction:column}
        .d01-07-06-top{flex:0 0 40%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;background:#fff;padding:10px}
        .d01-07-06-top h1{margin:0 0 8px;font-size:19px;font-weight:700;color:#20242a;letter-spacing:.03em}
        .d01-07-06-top p{margin:0;font-size:12px;color:#75808c}
        .d01-07-06-bottom{flex:1;background:linear-gradient(120deg,#5c7a8a 0%,#324b58 100%)}

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