example4 | ナノ

ここは××を主に扱う○○サイトです。
当サイト内の作品の著作権は管理人ナナシにあります。荒らし・晒し・転載はご遠慮ください。
詳しい規約はメインからどうぞ。

●管理人
ナナシ
部屋からほとんど出ない

…とかなんとか、サイトの説明など。
タイトルは神葬さまからお借りしました。
和文フォント:Fontpoにほんご
欧文フォント:Expletus Sans

HEAD(CSS)

@import url(https://fonts.googleapis.com/css?family=Expletus+Sans);

@font-face{
font-family:Fontpoにほんご;
src:url('https://cdn.leafscape.be/nihongo/FontopoNIHONGO_web.woff')
format("woff");
}

body{
margin:0;
padding:0;
font-size:13px;
color:#0b1b49;
line-height:2;
letter-spacing:2px;
font-family:'Expletus Sans',Fontpoにほんご,Meiryo,メイリオ, sans-serif;
background:#f5f5f5;
text-align:left;
}

@media screen and (max-width:600px){
.menu{
width:240px;
clear:both;
padding:20px 0 0 10px;
}
}

.top{
background:#f0224f;
width:200px;
height:80px;
border-radius:0 0 100px 100px;
font-size:20px;
color:#eee;
text-align:center;
line-height:1;
padding-top:20px;
margin-right:20px;
float:left;
}

.menu{
padding-top:10px;
}
.menu a{
text-align:center;
display:inline-block;
background:#fce35a;
color:#333;
width:50px;
line-height:12px;
padding:19px 0;
margin:0 10px 5px 0;
border-radius:50%;
letter-spacing:0;
}

.menu a:nth-child(2n){
background:#0b1b49;
color:#eee;
}

.menu a:hover{
background:#f0224f;
color:#0b1b49;
}

.all{
clear:both;
max-width:800px;
padding:10px;
padding-top:30px;
margin:0 auto;
}

.ma{
background:linear-gradient(transparent 50%,#fce35a 0);
}

a{
text-decoration:none;
color:#f0224f;
padding:0 3px;
}

a:hover{
color:#fce35a;
text-shadow:none;
}

</style>

BODY(HTML)