グラデーション ピンク・オレンジ

このテーマの特徴

このCSSで作成したmarpテーマの特徴は次のとおりです。

• ヘッダーとフッターにグラデーション背景: ヘッダーとフッターは、左から右に色合いが変化するグラデーションになっています。ヘッダーは #f7797d から #fbd786、フッターは #fbd786 から #f7797d に変化しています。

• セクションは垂直方向に並べられている: 各セクションは縦に並んで表示されます。

• デフォルトのフォントサイズは24pt: セクション内のテキストは、デフォルトで24ptのフォントサイズで表示されます。

• タイトルセクションは中央揃えで強調表示: "title"クラスが付けられたセクションは、中央揃えで背景色が #f7797d の濃いピンク色で、文字色が白で強調されています。

• タイトルセクションのフッター: "title"クラスが付けられたセクションのフッター部分は、相対的に配置され、背景色が #fbd786 の淡いピンク色です。

このテーマを利用する

CSS

/* @theme construction_proposal */
@import default;

section{
  display: flex;
  flex-direction: column;
  font-size: 24pt;
}

header{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  background: linear-gradient(to right, #f7797d, #fbd786);
  color: white;
}

footer{
  width: 100%;
  position: fixed;
  padding: 10px;
  background: linear-gradient(to right, #fbd786, #f7797d);
  color: white;
  bottom: 0px;
  text-align: center;
}

section.title{
  background-color: #f7797d;
  color: white;
  padding: 20px;
  text-align: center;
  font-size: 36pt;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 20px;
}

section.title footer{
  position: relative;
  background: #fbd786;
  margin-top: auto;
}

Marpのサンプル

---
marp: true
theme: construction_proposal
header: "建設提案"
footer: "信頼性の高い建設パートナーとの連携"
---
<!--
_class: title
-->

## **建設提案**

**信頼性の高い建設パートナーとの連携**

---
## スライド 1: 紹介

**_プロジェクトの概要_**
**_プロジェクトのビジョンと目標_**

---
## スライド 2: プロジェクトの詳細

**_プロジェクトの範囲__**
**_タイムライン__**
**_コスト__**

---
## スライド 3: 建設の利点

**_地域社会への影響_**
**_環境への影響_**

---
## スライド 4: 設計案

**_設計コンセプト_**
**_インスピレーション_**

---
## スライド 5: 持続可能性

**_持続可能な取り組み_**
**_関連する認定や基準_**

---
## スライド 6: 建設パートナー

**_建設会社_**
**_建築家_**

---
## スライド 7: 財務情報

**_資金調達方法_**
**_投資収益率（ROI）_**

---
## スライド 8: 次の手順

**_提案書提出_**
**_連絡先情報_**