Halloween Decoration

Halloween Party at Hanamaru-so

配布ページ★彡

↓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{
color: #fff;
font-size: 0.9em;
font-family: 'M PLUS Rounded 1c', sans-serif;
line-height: 1.5;
background-color: #6e1799;
background-image: repeating-linear-gradient(135deg, transparent, transparent 20px, #7D1AAE 20px, #7D1AAE 45px );
}

a{
text-decoration: none;
color: #6e1799;
}
a:hover{
color: #c78ae6;
}

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

header p{
font-family: 'Hachi Maru Pop', cursive;
color: #fff;
margin:0;
line-height: 1.5;
}

header a{
font-family: 'Poller One', cursive;
text-decoration: none;
color: #e5a323;
padding: 0 10px;
background-image: linear-gradient(to right, rgba(0, 0, 0, 0) 50%, rgb(229, 163, 35
) 50%);
background-position: 0 0;
background-size: 200% auto;
transition: .3s;
}
header a:hover{
background-position: -100% 0;
color: #6e1799;
}

#global-nav {
	width: 100%;
}

#global-nav.m_fixed {
background-color:rgba(0,0,0,0.7);
left: 0;
position: fixed;
bottom: 0;
}

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

h1 {
font-family: 'Rye', cursive;
font-size: 1.8em;
color: #e5a323;
text-shadow: -4px -4px 3px #666,  4px 4px 3px #333;
}

h2 {
font-family: 'Poller One', 'Hachi Maru Pop', cursive;
font-size: 1.2em;
color: #e5a323;
filter: drop-shadow(4px 4px 3px #333);
}
h2 span{
background: url("http://xria.biz/id/87maru/data/YssNgrGk4m.png") no-repeat left center/contain;
padding:8px 5px 8px 40px ;
height:30px;
color: #000;
filter: invert(72%) sepia(26%) saturate(6428%) hue-rotate(1deg) brightness(105%) contrast(102%);
}

hr {
border-style: solid #ccc 1px;
}

section{
background-color: #e5a323;
border: 2px dashed #fff;
border-radius: 8px;
box-shadow: 0 0 0 4px #e5a323;
margin: 1em 0 3em 0;
padding: 1.5em;
color: #ececec;
}

p span {
font-family: 'Hachi Maru Pop', cursive;
font-weight: bold;
background: #c78ae6;
margin: 2px;
padding: 2px;
}

.right{
text-align: right ;
}

p{
margin: 1em;
}

footer{
text-align: center ;
margin: 50px auto 20px;
}
</style>

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

<div class="wrp">
<header>
<h1>Halloween Decoration</h1>
<p>Halloween Party at Hanamaru-so</p>
<nav id="global-nav"><a href="#living">Living</a> <a href="#table">Table</a> <a href="#front">Front</a><br>
<a href="#jack">Jack</a> <a href="#food">Food & Drink</a></nav>
</header>
<h2 id="living"><span></span>Living</h2>
<section>
<p>内容★</p>
<p class="right"><span>担当：和＆春日</span></p>
</section>
<h2 id="table"><span></span>Table</h2>
<section>
<p>ここに内容を入れていこう★</p>
<p class="right"><span>担当：千代田＆一色</span></p>
</section>
<h2 id="front"><span></span>Front -玄関-</h2>
<section>
<p>ここに内容だよ★</p>
<p class="right"><span>担当：常葉＆瀬名</span></p></section>

<h2 id="jack"><span></span>Jack-o'-Lantern</h2>
<section>
<p>ここ内容★</p>
<p class="right"><span>担当：門脇＆葉室＆相川</span></p>
</section>

<h2 id="food"><span></span>Food & Drink</h2>
<section>
<p>サンドイッチ・ピザ・唐揚げ・ポテト・白身魚のフリッター・バーニャカウダ・南瓜サラダ・南瓜グラタン・プチケーキ・パンプキンパイ</p>
<p>各種ビール・ワイン・酎ハイ・ソフトドリンク</p>
<br>
<p>全て丸井丘商店街、花ヶ崎ショッピングモールで調達。それぞれハロウィン仕様のパッケージや盛り付けがされています。</p>
</section>
<br>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script>
var navPos = jQuery( '#global-nav' ).offset().top;
var navHeight = jQuery( '#global-nav' ).outerHeight();
jQuery( window ).on( 'scroll', function() {
	if ( jQuery( this ).scrollTop() > navPos ) {
		jQuery( 'body' ).css( 'padding-top', navHeight );
		jQuery( '#global-nav' ).addClass( 'm_fixed' );
	} else {
		jQuery( 'body' ).css( 'padding-top', 0 );
		jQuery( '#global-nav' ).removeClass( 'm_fixed' );
	}
});
</script>

アイコン画像はICOON MONO様から。
ジャックオーランタンの無料アイコン

ここから下は確認用★

Living

内容★

担当：和＆春日

Table

ここに内容を入れていこう★

担当：千代田＆一色

Front -玄関-

ここに内容だよ★

担当：常葉＆瀬名

Jack-o'-Lantern

ここ内容★

担当：門脇＆葉室＆相川

Food & Drink

サンドイッチ・ピザ・唐揚げ・ポテト・白身魚のフリッター・バーニャカウダ・南瓜サラダ・南瓜グラタン・プチケーキ・パンプキンパイ

各種ビール・ワイン・酎ハイ・ソフトドリンク

全て丸井丘商店街、花ヶ崎ショッピングモールで調達。それぞれハロウィン仕様のパッケージや盛り付けがされています。