Pukuri

set

曲線が印象的な、平面でポップなテンプレート。

特徴

  • まるみと余白を大きくとった、柔らかいシルエット
  • 動きのあるアイテム

サンプルページ

実装要素

お借りしたもの

アイコン

Material Symbols and Icons - Google Fonts
Material Symbols are our newest icons consolidating over 2,500 glyphs in a single font file with a wide range of design ...

カラーセット

カラーセットの使い方

style.css内の:rootカスタムプロパティによる色設定を行っています。
:rootを書き換えるとカラーセットが反映されます。

  • #a08fd5
  • #ccc3e8
  • #f3f1f1
  • #f8f6f6
  • #c7b928
  • #f5e866
  • #edc7c7
:root {
    --white: #fff;
    --text-color: #494340;
    --text-point-color: #ccc3e8;
    --menu-color: #f5e866;
    --bg-color1: var(--theme-color1-light);
    --bg-color2: var(--theme-color1-more-light);
    --theme-color1-more-light: #f8f6f6;
    --theme-color1-light: #f3f1f1;
    --theme-color1-default: #a08fd5;
    --theme-color2-default: #c7b928;
    --theme-color3-default: #edc7c7;
}

スタートアップガイド

更新履歴

  • 2022.11.22
    公開・配布開始
  • 2022.12.22
    要素・サンプルの追加
    • 枠線ブロック(.box)追加
    • スクロール可能ブロック(.scrollbox)追加
    • 一行表示ブロック(.onlyrow)追加
    • 各種コンテンツサンプル追加
  • 2023.02.07
    SNS Iconのリンクが正常に表示されない問題の修正
  • 2023.02.13
    下部固定リンクが正常に表示されない問題の修正
タイトルとURLをコピーしました