Happy Halloween!

information～当サイトについて～

ここは○○のハロウィンまでの期間限定サイトです。

サイト名
管理人：○○○
悪戯もお菓子も大好き。

main～めいんこんてんつ～

その他
長文見本
吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。

bookmark～お世話になっております～

○○ ○○ ○○

ソースコード

自動改行「しない」で作成。
ジャックオランタンとゴーストの枠は順不同で増やせます。

画像はEVENTs Design様よりお借りしました。
背景画像：ハロウィンの背景パターン5
ゴースト：カワイイゴーストのイラスト素材
ジャック：手書きのジャック･オーランタンイラスト

色違い→ ポップ / シック

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: 'Yusei Magic', sans-serif;
line-height: 1.5;
background: url(##背景画像URL##) repeat fixed;
}

a{
font-family: 'Original Surfer', 'Yusei Magic';
text-decoration: none;
color: #fff;
background: #6e1799;
margin: 5px;
}
a:hover{
color: #e5a323;
}

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

header a{
font-family: 'Henny Penny', cursive;
font-size: 20px;
text-decoration: none;
color: #fff;
text-shadow:  1px 1px 3px #6e1799,-1px -1px 3px #6e1799;
background: none;
line-height: 2;
}

.wrp{
background-color: rgba(0,0,0,0.3);
width: 100%;
height: 100%;
max-width:600px;
margin: 0 auto;
padding: 15px;
}

h1 {
font-family: 'Original Surfer', cursive;
font-size: 35px;
color: #9370db;
text-shadow: 3px 3px 0 #fff;
}

h1 span{
color: #e5a323;
}

h2 {
font-family: 'Original Surfer', 'Yusei Magic';
font-size: 25px;
color: #fff;
text-shadow: 0 0 5px #e5a323;
}

h2 span{
font-size: 15px;
}

section{
background-color: rgba(219,183,112,0.7);
border-radius: 8px;
margin: 1em 1em 3em;
padding: 1.5em;
filter: drop-shadow(4px 4px 3px #e5a323);
}

/* ゴーストの囲み枠 */
.ghost{
background-color: rgba(219,183,112,0.7);
border-radius: 8px;
margin: 1em 0 3em 80px;
padding: 1.5em 1em 30px 40px;
position: relative;
filter: drop-shadow(4px 4px 3px #e5a323);
}
.ghost::after {
content : '';
background: url(##ゴースト画像URL##) no-repeat center/contain;
width: 100px;
height: 100px;
bottom:-20px ;
left: -50px;
position: absolute;
filter: drop-shadow(4px 4px 3px #e5a323);
}
.ghost a{
text-shadow: 0 0 5px #6e1799;
background: none;
}
.ghost a:hover{
color: #6e1799;
}

/* ジャックの囲み枠 */
.pumpkin{
background-color: rgba(147,112,219,0.7);
border-radius: 8px;
margin: 1em 80px 3em 0;
padding: 1.5em 40px 1.5em 1em;
position: relative;
filter: drop-shadow(4px 4px 3px #6e1799);
}
.pumpkin::after {
content : '';
background: url(##ジャック画像URL##) no-repeat center/contain;
width: 100px;
height: 100px;
top:-50px ;
right: -50px;
position: absolute;
filter: drop-shadow(4px 4px 3px #6e1799);
}
.pumpkin a{
text-shadow: 0 0 5px #e5a323;
background: none;
}
.pumpkin a:hover{
color: #e5a323;
}

p span{
background: #dda0dd;
color: #6e1799;
margin: 2px;
padding: 2px;
}

p{
margin: 1em;
}

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

BODY

<div class="wrp">
<header>
<h1><span>H</span>appy <span>H</span>alloween!</h1>
<a href="#info">info</a> <a href="#main">main</a> <a href="#bkm">bkm</a> <a href="#code">source</a>
</header>

<h2 id="info">information<span>～当サイトについて～</span></h2>
<section class="pumpkin">
<p>ここは○○のハロウィンまでの期間限定サイトです。</p>
<p></p>
<br>
<p>
サイト名<br>
管理人：○○○<br>
悪戯もお菓子も大好き。<br>
</p>
</section>

<h2 id="main">main<span>～めいんこんてんつ～</span></h2>
<section class="ghost">
<p><span>長編</span><br>
<a href="">長編タイトル１</a>説明とか<br>
<a href="">長編タイトル２</a><br>
<a href="">長編その３</a><br>
</p>
<p><span>短編</span><br>
<a href="">短編１</a>
<a href="">短編２</a>
<a href="">短編３</a>
</p>
<p><span>その他</span><br>
長文見本<br>
吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。
</p>
</section>

<h2 id="bkm">bookmark<span>～お世話になっております～</span></h2>
<section class="pumpkin">
<p>
<a href="">○○</a>
<a href="">○○</a>
<a href="">○○</a>
</p>
</section>