example10 | ナノ

和文フォント:Fontpoにほんご
欧文フォント:Alegreya Sans SC
アイコンフォント:Font Awesome
お題は神葬さまからお借りしました。

ちなみになんでメタノールでも良いかと言うとメタノールを酸化するとホルムアルデヒドになるから。更に酸化するとギ酸(蟻とかがもってるやつ)になる。←どうでもいい

HEAD(CSS)

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

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

body{
margin:5% 0;
padding:5% 0;
font-size:11px;
color:#333;
line-height:2;
letter-spacing:2px;
font-family:'Alegreya Sans SC',Fontpoにほんご,Meiryo,メイリオ, sans-serif;
background:#eee;
text-align:center;
}

p{
margin:0;
padding:0;
}

.all{
max-width:700px;
padding:0 15px;
margin-top:20px;
font-size:13px;
text-align:left;
border-top:solid 1px #fff;
}

.title,.sub{
font-size:15px;
line-height:1.5;
}

.title p,.sub p{
display:inline;
color:#ff006f;
font-size:25px;
-webkit-transform: rotate(-5deg);
-moz-transform: rotate(-5deg);
-o-transform: rotate(-5deg);
-ms-transform: rotate(-5deg);
transform:rotate(-5deg);
}

.title i{
display:inline-block;
color:#ff006f;
background:#66f3e7;
width:50px;
font-size:30px;
line-height:30px;
padding:10px 0;
margin-bottom:20px;
border-radius:50%;
}

.sub i{
display:inline-block;
color:#ff006f;
background:#66f3e7;
width:50px;
font-size:30px;
line-height:30px;
padding:10px 0;
border-radius:50%;
}

.title span,.sub span{
background:linear-gradient(transparent 50%,#efff00 0);
}

.title a,.sub a{
font-size:11px;
}

.mi{
-webkit-transform: rotate(-5deg);
-moz-transform: rotate(-5deg);
-o-transform: rotate(-5deg);
-ms-transform: rotate(-5deg);
transform:rotate(-5deg);
color:#ff006f;
background:#66f3e7;
}

a{
text-decoration:none;
color:#000;
background:#efff00;
padding:0 3px;
}

a:hover{
color:#ff006f;
background:none;
}

</style>

BODY(HTML)