8月配布ページ -花火- - Event Page Archive

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

@charset "UTF-8";

@import url('https://fonts.googleapis.com/css2?family=Shippori+Mincho&family=Yusei+Magic&display=swap');

body {
    background: url(★ここに背景画像のタグ#imgurl/～#を入れてね★) top center / cover fixed;
    color: #fff;
    font-size: 0.75em;
    line-height: 200%;
    letter-spacing: 2px;
    margin: 0;
}

a {
    color: #fafad6;
    background: #333;
    padding: 2px 5px;
    margin: 0 5px;
    text-decoration: none;
}

h1 {
    font-family: 'Shippori Mincho', serif;
    font-size: 2rem;
    margin: 1.5em 0 1em;
    padding: 1em;
    color: #a0d8ef;
}
h1 span { position: relative; display: inline-block; padding: 1em; text-align: center; } 
h1 span:before, h1 span:after { font-family: 'Font Awesome 5 Free'; line-height: 1; position: absolute; top: calc(50% - .5em); color: #a0d8ef; } 
h1 span:before { left: 0; content: '\f101'; } 
h1 span:after { right: 0; content: '\f100'; }

h2 {
    font-family: 'Shippori Mincho', serif;
    color: #ff3842;
    font-size: 1.8rem;
    text-align: center;
}

h3 {
    font-family: 'Shippori Mincho', serif;
    font-size: 2rem;
    display: inline-block;
    max-width: 300px;
    padding: 25px;
    background: rgba(0,0,0,.5);
    text-align: center;
    box-shadow: 0 0 0 10px rgba(0,0,0,.5);
}
.arrow {
    width: 15px;
    height: 15px;
    border: 1px solid;
    border-color: transparent transparent #fff #fff;
    transform: rotate(-45deg);
    margin: 20px auto;
}

.top {
    font-family: 'Yusei Magic', sans-serif;
    width: 80%;
    margin: 50px auto 20px;
    padding: 25px;
    background: rgba(0,0,0,.5);
    border: solid 1px #fff;
    box-shadow: 0 0 0 10px rgba(0,0,0,.5);
    text-align: center;
}

.top a,.ft span,.ft a {
    display: inline-block;
    background: none;
    border: solid 1px #fff;
    width: 80px;
    margin: 10px;
}

.top a:hover,.ft a:hover {
    background: rgba(0,0,0,.5);
}

.main{
    margin-top: 50px;
    background: rgba(0,0,0,.5);
}

.wrp {
    max-width:800px;
    margin:10px auto;
    display: flex;
    flex-wrap: wrap;
    justify-content:space-around;
}

.sec {
    width: 80%;
    margin: 50px auto 20px;
    padding: 25px 25px 35px;
    position: relative;
    border:double 3px #fff;
}

.sec a {
    background: none;
}

.sec a:hover {
    text-shadow: 0px 0px 5px #fdeff2;
}

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

.mybox{
    width: 65%;
    margin: 50px auto 20px;
    padding: 25px 25px 35px;
    position: relative;
    color: #333333;
    font-family: 'Yusei Magic', sans-serif;
    font-size: 1.2em;
    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 } 
.mybox: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;
 } 
.mybox: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;
 }
</style>

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

<div class="top">
<h1><span>＊納涼＊</span><br>浴衣イベント</h1>
<div class="arrow"></div>
<span>2021 August event at Hanamaru-So</span>
</div>

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

<div class="main">
<div class="wrp">
<div class="sec">
<h2>schedule</h2>
<div class="arrow"></div>
<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>
<div class="arrow"></div>
<p>今回のイベントはペアでの行動をしてもらいます。</p>
<p>組み合わせの都合により以前のイベントの際と同じ方とペアになる可能性もございます事をご了承ください。また、以前ペアだった方をペア希望に選んで頂いても構いません。</p>
<p>当日までにエンカをして頂き、当日はその内容の反映が可能となります。</p>
<p>詳細についてはペア発表時に情報を開示します。</p>
<p>その時間にリアルタイムでTLにいなくてはならない訳ではございません。普段は仕事の人も、この日この時間ばかりは休みや早く帰って来れた体にてご参加頂ければと思います。細かいところはご都合主義でお願いします。</p>
<p>住人皆さまでの思い出作りも兼ねているため基本的には全ての方に参加をお願いしたいと思っていますが、どうしても都合が悪い方はその旨ご連絡をお願い致します。</p>
</div>
</div>
</div>

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

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

schedule

〜8月○日　参加不参加の意思表示
参加or不参加の意思表示をお願いします。参加の場合はペア希望を第三希望までお知らせください。

8月○日　ペア発表&詳細情報開示
ペアの組み合わせと詳細なイベント内容を発表します

8月○日～8月28日 　ペア相手とのエンカ
エンカ方法は掲示板またはDMのいずれか
ロル形態についてはペア相手と相談をお願いします

8月29日　TL反映可能

PL向け案内

今回のイベントはペアでの行動をしてもらいます。

組み合わせの都合により以前のイベントの際と同じ方とペアになる可能性もございます事をご了承ください。また、以前ペアだった方をペア希望に選んで頂いても構いません。

当日までにエンカをして頂き、当日はその内容の反映が可能となります。

詳細についてはペア発表時に情報を開示します。

その時間にリアルタイムでTLにいなくてはならない訳ではございません。普段は仕事の人も、この日この時間ばかりは休みや早く帰って来れた体にてご参加頂ければと思います。細かいところはご都合主義でお願いします。

住人皆さまでの思い出作りも兼ねているため基本的には全ての方に参加をお願いしたいと思っていますが、どうしても都合が悪い方はその旨ご連絡をお願い致します。

＊納涼＊浴衣イベント

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

schedule

PL向け案内

＊納涼＊
浴衣イベント