プレゼント交換

配布ページ♡

↓HEAD編集にコピペしてね↓

body{
color: #333;
font-family: 'Zen Maru Gothic', sans-serif;
font-size: 0.85em;
line-height: 1.7;
background: #fff url(#背景画像URL#) repeat fixed;
}
a{
text-decoration: none;
color: #009944;
}
a:hover{
color: #B81C22;
}

p{
margin: 1.5em 5px;
}

h1{
font-size: 1.8em;
font-family: 'Kaisei Opti', serif;
color: #B81C22;
}
h1:before{
font-family: "Font Awesome 5 Free";
content: '\f79c';
font-weight: 900;
color:#009944;
margin-right : 2px;
}
h1:after{
font-family: "Font Awesome 5 Free";
content: '\f79c';
font-weight: 900;
color:#009944;
margin-left : 5px;
display: inline-block;
transform: scaleX(-1);
}

h2{
font-size: 1.5em;
font-family: 'Kaisei Opti', serif;
color: #B81C22;
text-shadow: #fff 1px 1px 10px, #fff -1px 1px 10px, #fff 1px -1px 10px, #fff -1px -1px 10px;
}
h2:before{
font-family: "Font Awesome 5 Free";
content: '\f06b';
font-weight: 900;
color:#B81C22;
padding-right : 5px;
}

h3{
font-size: 1.2em;
line-height: 2.5em;
}

.line {
position: relative;
overflow: visible;
text-align: center;
color: #ccc;
border-width: 3px 0 0 0;
border-style: double;
border-color: #ccc;
margin: 30px auto;
}
.line:after {
font-family: "Font Awesome 5 Free";
content: '\f2dc';
font-size: 1em;
font-weight: 900;
text-shadow: #fff 1px 1px 10px, #fff -1px 1px 10px, #fff 1px -1px 10px, #fff -1px -1px 10px;
position: absolute;
top: -1em;
left: 50%;
display: inline-block;
}

.wrp{
width: 90%;
max-width:600px;
margin: 10px auto;
}

header{
font-size:1.1em;
text-align: center ;
margin: 50px auto 50px;}

.kiji {
 margin: 3em auto;
 padding: 1em;
 width: 90%;
 background-color: #71BF76; /* 背景色 */
 box-shadow: 0 0 10px 10px #71BF76; /* 影 */
}

.kiji2 {
 margin: 3em auto;
 padding: 1em;
 width: 90%;
 background-color: #DA3939; /* 背景色 */
 box-shadow: 0 0 10px 10px #DA3939; /* 影 */
}
.kiji2 h2{
font-size: 1.5em;
font-family: 'Kaisei Opti', serif;
color: #009944;
text-shadow: #fff 1px 1px 10px, #fff -1px 1px 10px, #fff 1px -1px 10px, #fff -1px -1px 10px;
}
.kiji2 h2:before{
font-family: "Font Awesome 5 Free";
content: '\f06b';
font-weight: 900;
color:#009944;
padding-right : 5px;
}

.date{
font-weight: bold;
border-bottom: 5px double #fff;
margin: 5px;
}

.post {
 margin: 0.5em auto;
 padding: 1em;
 width: 95%;
 background-color: #F7EACF; /* 背景色 */
 box-shadow: 0 0 5px 5px #F7EACF; /* 影 */
}

textarea , input[type='text'] {
width: 95%;
padding: 0.3em;
transition: 0.3s;
letter-spacing: 1px;
border: 1px solid #1b2538;
border-radius: 4px;
}
textarea:focus , input:focus {
border: 1px solid #da3c41;
outline: none;
box-shadow: 0 0 5px 1px rgba(218,60,65, .5);
}

textarea{
height: 6em;
}

input {
padding: 0.3em;
transition: 0.3s;
letter-spacing: 1px;
border: 1px solid #1b2538;
border-radius: 4px;
}

footer{
text-align: center;
}

.snow {
  color: #ccc; /*雪の色*/
  font-size: 18px; /*雪の大きさ*/
  position: fixed;
  top: -5%; /*初期位置*/
  text-shadow:
  5vw   -100px 2px,
  10vw  -400px 3px,
  20vw  -500px 4px,
  30vw  -580px 1px,
  39vw  -250px 2px,
  42vw  -340px 5px,
  56vw  -150px 2px,
  63vw  -180px 0,
  78vw  -220px 4px,
  86vw  -320px 9px,
  94vw  -170px 7px;
  animation: anim 5s linear infinite;
}
.snow2 {
  color: #ccc; /*雪の色*/
  font-size: 15px; /*雪の大きさ*/
  position: fixed;
  top: -10%; /*初期位置*/
  text-shadow:
  5vw   -100px 2px,
  10vw  -400px 3px,
  20vw  -500px 4px,
  30vw  -580px 1px,
  39vw  -250px 2px,
  42vw  -340px 5px,
  56vw  -150px 2px,
  63vw  -180px 0,
  78vw  -220px 4px,
  86vw  -320px 9px,
  94vw  -170px 7px;
  animation: anim 8s linear infinite;
}
@keyframes anim {
  100% {
    color: transparent;
    top: 150%;
  }
}
</style>

↓ページ編集にコピペしてね↓

<div class="wrp">
<header>
<h1>プレゼント交換</h1>
</header><div class="kiji">
<h2>Information</h2>
<div class="post"><p>大人だってクリスマスプレゼントが欲しい！朝起きてプレゼントを開ける楽しみをもう一度！<br>
はなまる荘の皆でプレゼント交換をしましょう！</p>
</div>
</div>
<hr class="line">
<div class="kiji2">
<h2>Schedule</h2>
<div class="post">
<p><span class="date">～12月19日　プレゼント受付</span><br>
プレゼントの内容を管理DMまでお送りください。<br>
送っていただく内容は「外装・ラッピング(30文字以内)」「プレゼント内容」「開封用パスワード(英数字8文字以内)」<br>
<textarea onfocus="this.select();">
外装・ラッピング：
プレゼント内容：
開封用パスワード：
</textarea></p>
<p><span class="date">12月20日～22日　あみだくじ公開</span><br>
誰が誰からのプレゼントを受け取るかはあみだくじにて決定をします。<br>
プレゼントを提出した方のみ、期間内にあみだくじを選択してください。もしも期間が過ぎても選んでいない方がいた場合はこちらでランダムに選択させて頂きます。<br>
万が一あみだくじでご本人のプレゼントが当たってしまった方がいた場合は別の方のプレゼントが手元に来るよう調整をさせていただきます。<br>
</p>
<p><span class="date">12月23日～24日　開封パスワードご連絡</span><br>
あみだくじにて決まったプレゼントの開封用パスワードを個別にDMにてご連絡します。</p>
<p><span class="date">12月25日　プレゼント開封</span><br>
クリスマス当日にプレゼント一覧のページを公開します。<br>お配りしたパスワードで該当のプレゼントを開封してください。</p>
</div>
</div>
<hr class="line">
<div class="kiji">
<h2>Attention</h2>
<div class="post">
<p>プレゼントの予算は3,000円以内。生物や危険物は禁止！</p>
<p>誰からのプレゼントか分かるよう、どこかに必ず名前の記載をお願いします。</p>
<p>集めたプレゼントはクリスマスイブの夜にツリーの下に置いておきます。クリスマス当日に各自１つずつ持っていってくださいね！</p>
</div>
<h2>fot PL</h2>
<div class="post">
<p>開封用パスワードを他の人へ教える行為は禁止</p>
<p>ご自身が用意したプレゼントの中身の公言はクリスマス以降可能ですが、誰の手に渡ったかは受け取った方が公言しない限りわからない体でお願いします</p>
<p>クリスマス以降どんなプレゼントを貰ったか、誰からのプレゼントだったかの公言は可能</p>
</div>
</div>
<hr class="line">
<div class="kiji2">
<h2>プレゼント一覧</h2>
<div class="post">
<p>準備中</p>
<p>※以下30文字見本※</p>
<p>a.赤と緑のタータンチェック柄のラッピング用紙に包まれている小箱</p>
<p>b.濃緑色の不織布でできた大きな巾着袋。留め具として赤いリボン。</p>
<p>c.Ａ４サイズの薄い箱が青地に雪が舞うラッピング紙で包まれている</p>
</div>
</div>
</div>
<div class="snow"><i class="fas fa-snowflake"></i></div>
<div class="snow2"><i class="fas fa-snowflake"></i></div>

背景画像は素材屋 flower&clover様の雪:snow 16を使用。

ここから下は確認用♡

Information

まっかなおっはっなの～トナカイさっんっは～♪
もうすぐクリスマスですね！
プレゼント交換しませんか？
やってみたくて雪を降らせてみました！

classをkijiにすると緑背景に、kiji2にすると赤背景になるよー。

Schedule

12/●募集開始
プレゼントを募集します。以下の内容を管理人DMまで連絡してね★

・プレゼント包装(20文字程度) ・プレゼントの中身(100文字～500文字程度) ・プレゼントをあける鍵(いわゆるパスワードです)

12/●募集終了

12/●～●プレゼント選択？

12/●プレゼント交換当日

Attention

いわゆる注意事項とか

おやつは１人３００円までです。バナナはおやつにはいりません。

課金上限は家賃程度にしておきましょう。ご利用は計画的に

パンが無ければケーキを食べればいいじゃない。