Azalea

インパクトのあるファーストビューが特徴のテンプレート。

demo document download

OFUSEでメッセージを送る

特徴
1. サンプルページ
2. 実装要素
お借りしたもの
1. 素材
2. アイコン
カラーセット
スタートアップガイド
更新履歴

特徴

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

サンプルページ

実装要素

お借りしたもの

素材

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

カラーセット

カラーセットの使い方

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;
}