Azalea

set

特徴

  • 大きく配置した写真でインパクトあるファーストビュー
  • スクロールでスッキリしたレイアウト

サンプルページ

実装要素

お借りしたもの

素材

Photo by Stephanie Klepacki on Unsplash
Download this photo by Stephanie Klepacki on Unsplash
Photo by Haitao Dai on Unsplash
Download this photo by Haitao Dai on Unsplash

アイコン

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 variants.

カラーセット

カラーセットの使い方

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

  • #f5a404
  • #ff6600
  • #dbd1ca
  • #cddbca
  • #3700ff
:root {
    --text-color: #111;
    --bg-color: var(--light-gray);
    --required-color: #3700ff;
    --white: #fff;
    --light-gray: #f1f1f1;
    --gray: #e9e7e8;
    --gray-op: rgba(233, 231, 232, 0.65);
    --theme-color1-light: #f5a404;
    --theme-color1-default: #ff6600;
    --theme-color1-gray: #dbd1ca;
    --theme-color2-gray: #cddbca;
}

スタートアップガイド

更新履歴

  • 2023.05.19
    公開・配布開始
タイトルとURLをコピーしました