2022年8月配布～花火～ - Event Page Archive

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

*,::after,::before{box-sizing:border-box}
*{margin: 0; padding: 0;}
ol,ul{list-style:none}
img{max-width:100%}
table{border-collapse:collapse}
textarea{white-space:revert}

body{
 background: url(★背景画像URL★) no-repeat center / cover fixed;
background-color: #000;
color: #fffffc;
font-family: 'Noto Serif JP', serif;
font-size:0.85em;
line-height:1.5;
margin: 0;
padding: 0;
}

a{
text-decoration:none;
color: #999;
}

header{
background: rgba(0,0,0,0.7);
font-family: 'Yuji Boku', serif;
font-size:1.2em;
text-align: center ;
border: double 3px #ccc;
box-shadow: 0 0 0 15px rgba(0,0,0,.7);
padding: 10px;
margin: 50px auto 20px;
width: 320px;
}

h1{
font-family: 'Yuji Boku', serif;
font-size:1.5em;
transform: rotate(-10deg);
-moz-transform: rotate(-10deg);
-webkit-transform: rotate(-10deg);
margin:20px;}

.blue{
color: #6699ff;
}

.kao:before, .kao:after { font-family: 'Font Awesome 5 Free'; font-weight: 800;} 
.kao:before { content: '\f666'; } 
.kao:after { content: '\f666'; }

h2{
font-family: 'Yuji Boku', serif;
font-size:1.5em;
}
h2:first-letter {
  font-size: 2em;
  color: #6699ff;
}
h3{
font-family: 'Yuji Boku', serif;
font-size:1.2em;
}
h3:before { font-family: 'Font Awesome 5 Free'; font-weight: 400; content: '\f186'; margin-right:5px; }

.date {
font-size: 1.2em; 
background: linear-gradient(transparent 70%, #e6b422 70%);
}

p{
margin-bottom: 1.5em;}

footer{
text-align: center ;
margin: 50px auto 20px;
}

.main{
width: 95%;
max-width: 600px;
margin: 0 auto 10px;
padding: 10px;
}

.sec{
background: rgba(0,0,0,0.7);
padding: 15px;
margin: 30px auto;
}

.memo{
width: 80%;
margin: 20px auto;
padding: 25px 25px 35px;
position: relative;
color: #333;
font-family: 'Yusei Magic', sans-serif;
font-size: 1em;
text-align: center;
background: #fff;
border: 1px solid #ccc;	/* 線の太さ・種類・色 */ 
box-shadow:1px 1px 6px 0px #ccc; 
padding: 50px 10px 10px 10px;	/* 内側の余白 上・右・下・左 */
position: relative; 
z-index: -2 } 
.memo:before{
background-image: -webkit-gradient(radial, 30% 30%, 0, 30% 30%, 10, from(#ffe5ed), to(#e50044));	/* マップピンの色 */
border-radius: 50%; 
box-shadow: .5px .5px 4px 1px rgba(128, 128, 128, 0.5);
content: '';
display: block;
position: absolute;
top: 5px;
left: 50%;
width: 15px;
height: 15px;
z-index: 0;
} 
.memo:after{
background-image: linear-gradient(-80deg, transparent 47%, #333333 47%, #333333 52%, transparent 52%,transparent);
content: '';
position: absolute;
top: 15px;
left: 50%;
width: 10px;
height: 13px;
z-index: -1;
 }

input, textarea {
width: 85%;
border: solid 1px #333;
background: #fff;
padding: 2px;
}
textarea{
height: 5em;
}
</style>

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

<div class="wrp">
<header>
<h1><span class="blue">Y</span>ukata de <span class="blue">S</span>ummer<br><span class="kao"> <span class="blue">E</span>vent </span></h1>
<span>納涼★浴衣イベント2022</span>
</header>
<div class="main">

<div class="memo">
<p>日にち：8月29日(日)<br>
時間：20時00分～</p>
<p>夏の最後に夏らしいことをしよう！<br>
全員浴衣で集合！<br>
詳細は後日発表！</p><br></div>

<div class="sec">
<h2>スケジュール</h2>
<span class="date"><b>〜8月○日</b>　 参加不参加の意思表示</span><br>
参加or不参加の意思表示をお願いします。参加の場合はペア希望を第三希望までお知らせください。<br>
<textarea rows="3" name="msg">参加or不参加
ペア希望(第三希望まで)
参加人数が奇数だった場合に二回ペアを組むことは可能か</textarea><br>
<br>
<span class="date"><b>8月○日</b>　ペア発表&詳細情報開示</span><br>
ペアの組み合わせと詳細なイベント内容を発表します<br><br>
<span class="date"><b>8月○日～8月28日 </b>　ペア相手とのエンカ</span><br>
エンカ方法は掲示板またはDMのいずれか<br>
ロル形態についてはペア相手と相談をお願いします<br><br>
<span class="date"><b>8月29日</b>　TL反映可能</span><br>
</div>
<div class="sec">
<h2>PL向け案内</h2>
<p>今回のイベントはペアでの行動をしてもらいます。</p>
<p>組み合わせの都合により以前のイベントの際と同じ方とペアになる可能性もございます事をご了承ください。また、以前ペアだった方をペア希望に選んで頂いても構いません。</p>
<p>当日までにエンカをして頂き、当日はその内容の反映が可能となります。</p>
<p>詳細についてはペア発表時に情報を開示します。</p>
<p>その時間にリアルタイムでTLにいなくてはならない訳ではございません。普段は仕事の人も、この日この時間ばかりは休みや早く帰って来れた体にてご参加頂ければと思います。細かいところはご都合主義でお願いします。</p>
<p>住人皆さまでの思い出作りも兼ねているため基本的には全ての方に参加をお願いしたいと思っていますが、どうしても都合が悪い方はその旨ご連絡をお願い致します。</p>
</div>

</div>
</div>

↓背景画像はここから保存していいよー↓

Yukata de Summer
Event

↓ここから下は確認用★↓

Yukata de Summer
Event

スケジュール

PL向け案内