海中時計

・ロンリさん「海をイメージした淡い青色が基調のトップ(素材は無し)」

自動改行“しない”で作成しています。
HEAD

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

@font-face
{
font-family: 自由の翼;
src: url('https://cdn.leafscape.be/JiyunoTsubasa/JiyunoTsubasa_web.woff')
     format("woff");
}

body{
font-family:"Delius","メイリオ", sans-serif;
font-size:12px;
letter-spacing:1px;
line-height:150%;
color:#555;
background:linear-gradient(#faf0e6,#87ceeb);
margin:0;
padding:0;
text-align:center;}

@media screen and (min-width: 401px){
.wrp{
width:400px;
margin:0 auto;}

}

@media screen and (max-width:400px){
.wrp{
width:100%;
margin:0 auto;}
}

.top{
text-align:left;
background:rgba(255,255,255,.5);
margin:50px 25px 20px;
padding:15px;
border:solid 1px #aaa;
box-shadow:0 0 0 5px rgba(255,255,255,.5);
-webkit-box-shadow:0 0 0 5px rgba(255,255,255,.5);
-moz-box-shadow:0 0 0 5px rgba(255,255,255,.5);}

.title{
width:130px;
height:130px;
border-radius:50%;
padding:10px;
margin:50px auto 10px;
background:rgba(255,255,255,.5);
border:solid 1px #ccc;
display:inline-block;
text-align:center;
box-shadow:0 0 0 5px rgba(255,255,255,.5);
-webkit-box-shadow:0 0 0 5px rgba(255,255,255,.5);
-moz-box-shadow:0 0 0 5px rgba(255,255,255,.5);}

.box{
background:rgba(135,206,235,.25);
margin:10px 3px;
padding:10px;}

.icn{
position: relative;
padding:15px;
margin:0;
float:left;
}

.icn::before,.icn::after{
position:absolute;
content: '';
border-radius: 100%}

.icn::before{
top:10px;
left:0;
z-index:2;
width:18px;
height:18px;
background:rgba(255,255,255, .5);
}

.icn::after {
top:5px;
left:10px;
width:13px;
height:13px;
background:rgba(135,206,235,.5);
}

strong{
background:#add8e6;
padding:0 2px;
}

h1{
text-align:center;
color:#555;
font-family:"Delius",自由の翼, sans-serif;
font-weight:normal;
border-top:solid 1px #555;
border-bottom:solid 1px #555;
font-size:16px;
margin:5px auto 15px;
padding:3px;}

h2{
text-align:center;
color:#555;
font-family:"Delius",自由の翼, sans-serif;
text-transform:uppercase;
font-weight:normal;
font-size:16px;
margin:5px 15px 10px;
padding:0 0 2px;
border-bottom:double 3px #4682b4;
position: relative;
}

h2::before,h2::after {
position: absolute;
content: '';
border-radius: 100%}

h2::before {
left:10px;
bottom:5px;
z-index:2;
width:18px;
height:18px;
background:rgba(255,255,255, .5);
}

h2::after {
top:5px;
left:20px ;
width:13px;
height:13px;
background:rgba(135,206,235,.5);
}

h3{
font-family:"Delius",自由の翼, sans-serif;
font-weight:normal;
text-transform:uppercase;
color:#fff;
font-size:12px;
margin:0 15px 0 0;
padding:0 10px;
background:#4682b4;
border:solid 1px #4682b4;
display:inline-block;}

a{
color:#555;
text-decoration:none;
padding:0 2px;
transition:0.5s;
text-transform:uppercase;
}

a:hover{
color:#fff;
text-shadow:0 0 3px #4682b4,0 0 5px #4682b4,0 0 10px #4682b4,0 0 10px #4682b4,0 0 15px #4682b4,0 0 15px #4682b4;}

</style>

BODY

information

見だし3