パーティー

image0 image2

このテーマの特徴

テーマの概要:

このCSSは、暗い背景に明るい色のアクセントを使用した、夜間のパーティーをイメージしたテーマを作成します。

特徴:

  • 暗い背景: 背景色は黒に近い темно (#1d1d1d) で、夜の雰囲気を演出します。
  • 明るいアクセント色: ヘッダーとフッターには、オレンジ系の色(#f5af19、#f12711)が使用されており、パーティーの華やかさを表現しています。
  • 太字のフォント: ヘッダー、フッター、セクションタイトルのフォントは太字で、視認性を向上させています。
  • 大きなフォントサイズ: セクションのフォントサイズは24ptで、聴衆にも読みやすいように大きくなっています。
  • セクションタイトル: タイトルセクションは明るいオレンジ色の背景に白いテキストで、スライドの中で際立っています。
  • 中央揃え: ヘッダー、フッター、セクションタイトルは中央揃えで配置されており、整然とした印象を与えます。
  • ボタン: ボタンはオレンジ色(#f12711)で、白いテキストと丸みを帯びた角で目立ちます。

このテーマを利用する

CSS

/* @theme party_night */
@import default;

section{
  background-color: #1d1d1d;
  color: white;
  font-size: 24pt;
}

header{
  width: 100%;
  background: linear-gradient(to right, #f5af19, #f12711);
  color: white;
  height: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  font-size: 30pt;
  font-weight: bold;
}

footer{
  width: 100%;
  position: fixed;
  padding: 20px;
  background: linear-gradient(to right, #f12711, #f5af19);
  color: white;
  bottom: 0px;
  text-align: center;
  font-size: 14pt;
  font-weight: bold;
}

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

section.title h1{
  font-size: 48pt;
  font-weight: bold;
}

section.title p{
  font-size: 24pt;
  font-weight: normal;
}

.button{
  background-color: #f12711;
  color: white;
  padding: 10px 20px;
  border-radius: 5px;
  font-size: 16pt;
  font-weight: bold;
  text-decoration: none;
}

.button:hover{
  background-color: #f5af19;
  color: white;
}

Marpのサンプル

---
marp: true
theme: party_night
header: " "
footer: " "
---
<!--
_class: title
-->

# パーリーナイトへようこそ! ✨

きらめくライトと高揚感漂う雰囲気の中へ飛び込みましょう!

---

# パーティーを計画する

- ゲストリストの作成
- 会場とケータリングの予約
- 音楽とエンターテイメントの計画

---

# パーティーを盛り上げる

- 装飾で雰囲気を演出しましょう 🎊
- おいしい料理と飲み物でゲストを満足させましょう 🥂
- 音楽とゲームでみんなを盛り上げましょう 💃🕺

<!--
_class: footer
-->

# Enjoy the Night! 🎉