Trick or Treat!

http://i-love-halloween.xxx/

info main source code

information

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

h2見出しをspanで挟むとカボチャのアイコンがつきます。

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

main

長編
長編タイトル１説明とか
長編タイトル２
 長編その３

短編
短編１短編２短編３

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

ソースコード

自動改行「しない」で作成。
アイコン素材：ICOON MONO
ジャックオーランタンの無料アイコン

色違い→ パープル / オレンジ

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: #333;
font-size: 0.9em;
font-family: 'Kaisei Decol';
line-height: 1.5;
background-color: #ffa500;
background-image: repeating-linear-gradient(135deg, transparent, transparent 20px, #e5a323 20px, #e5a323 45px );
}

a{
text-decoration: none;
color: #ffa500;
}
a:hover{
color: #e5a323;
}

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

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

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

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

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

h2 {
font-family: 'Poller One', 'Hachi Maru Pop', cursive;
font-size: 1.2em;
color: #c800f0;
filter: drop-shadow(4px 4px 3px #999);
}
h2 span{
background: url(#アイコン画像URL#) no-repeat left center/contain;
padding:8px 5px 8px 40px ;
height:30px;
color: #333;
filter: invert(11%) sepia(71%) saturate(5170%) hue-rotate(280deg) brightness(87%) contrast(111%);
}

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

p span{
background: #e5a323;
color: #333;
font-weight: bold;
margin: 2px 2px 2px -10px;
padding: 2px;
}

p{
margin: 1em;
}

footer{
background-color: #c78ae6;
border: 2px dashed #fff;
border-radius: 8px;
box-shadow: 0 0 0 4px #c78ae6;
margin: 1em 0 3em 0;
padding: 1.5em;
text-align: center ;
margin: 50px auto 20px;
}
</style>

BODY