example15 | ナノ

Font:Plaster
Title:Moratology

丸の横は2～3行くらいがちょうどいいです。

HEAD(CSS)

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

body{
margin:3%;
padding:3%;
font-size:11px;
color:#ccc;
line-height:2;
letter-spacing:2px;
font-family:Meiryo,メイリオ, sans-serif;
background:#180042;
text-align:center;
}

.title{
font-family:'Plaster',Meiryo,メイリオ, sans-serif;
font-size:30px;
line-height:1;
}

.menu,.menu2,.menu3{
display:inline-block;
width:70px;
margin:20px 0;
vertical-align:middle;
color:#ed66ff;
}

.menu a,.menu2 a,.menu3 a{
vertical-align:middle;
background:#ed66ff;
width:50px;
color:#180042;
font-size:13px;
font-family:'Plaster',Meiryo,メイリオ, sans-serif;
line-height:20px;
letter-spacing:0;
padding:15px 0;
display:inline-block;
border-radius:50%;
border:none;
}

.menu2 a{
background:#c7f8f2;
}

.menu3 a{
background:#ff5f5c;
}

.menu a:hover,.menu2 a:hover ,.menu3 a:hover{
background:none;
}

.text,.text2,.text3{
vertical-align:middle;
display:inline-block;
width:200px;
color:#ed66ff;
text-align:left;
}

.text2{
color:#c7f8f2;
}

.text3{
color:#ff5f5c;
}

a{
text-decoration:none;
color:#ccc;
border-bottom:dotted 1px #ff5f5c;
}

a:hover{
border:none;
color:#c7f8f2;
}
</style>

BODY(HTML)