As yet I have no name

source code

自動改行“しない”で作成しています。
素材画像は空に落ちるさまのまた猫よりお借りしています。

HEAD

@import url('https://fonts.googleapis.com/css?family=Cabin+Sketch|Poppins');

body{
font-family:"Poppins","メイリオ", sans-serif;
font-size:12px;
letter-spacing:1px;
line-height:150%;
color:#333;
background-color: #fff;
background-image:-webkit-gradient(linear, 0 0, 100% 0, color-stop(.5,#e0ffff),color-stop(.5, transparent),to(transparent));
background-image:-moz-linear-gradient(left,#e0ffff 50%, transparent 50%,transparent);
background-image:-o-linear-gradient(left,#e0ffff 50%, transparent 50%, transparent);
background-image:linear-gradient(left, #e0ffff 50%, transparent 50%,transparent);
-webkit-background-size: 35px 35px;
-moz-background-size: 35px 35px;
background-size: 35px 35px;
margin:0;
padding:0;
}

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

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

.top{
margin:50px auto 20px;
text-align:center;
}

.top a{
color:#fff;
background:#ccaa66;
padding:2px 5px;
border:solid 1px #ccaa66;
}

.top a:hover{
color:#fff;
background:#e6cae6;
border:solid 1px #e6cae6;
}

.con{
background:rgba(255,255,255,.8);
border:solid 2px #afeeee;
padding:15px;
margin:20px;
}

.icn{
width:25px;
vertical-align:middle;
display:inline-block;
transform:rotate(-20deg);
}

strong{
color:#6b6bb3;
font-weight:normal;
text-decoration:underline;
}

h1{
font-family:"Cabin Sketch","メイリオ", sans-serif;
font-weight:normal;
display:inline-block;
position:relative;
height:30px;
vertical-align:middle;
text-align:center;
box-sizing:border-box;
margin:20px auto;
}

h1:before{
content:'';
position:absolute;
width:10px;
bottom:-10px;
left:-24px;
z-index:-2;
border:14px solid #e6cae6;
border-left-color:transparent;
}

h1:after{
content:'';
position:absolute;
width:10px;
bottom:-10px;
right:-24px;
z-index:-2;
border:14px solid #e6cae6;
border-right-color:transparent;
}

h1 p{
display:inline-block;
position:relative;
margin:0;
padding:0 20px;
line-height:30px;
font-size:16px;
color:#fff;
background:#d8bfd8;
}

h1 p:before{
position:absolute;
content:'';
top:100%;
left:0;
border:none;
border-bottom:solid 10px transparent;
border-right:solid 15px #b39db3;
}

h1 p:after{
position:absolute;
content:'';
top:100%;
right:0;
border:none;
border-bottom:solid 10px transparent;
border-left:solid 15px #b39db3;
}

h2{
font-family:"Cabin Sketch","メイリオ", sans-serif;
font-weight:normal;
font-size:18px;
color:#b39db3;
margin:5px 0 15px;
padding:2px 8px;
border-bottom:double 3px #d8bfd8;
}

h3{
font-family:"Cabin Sketch","メイリオ", sans-serif;
font-weight:normal;
font-size:16px;
color:#fff;
margin:5px;
padding:0 8px;
background:#d8bfd8;
display:inline-block;
}

a{
color:#555;
text-decoration:none;
padding:0 3px;
border-bottom:solid 1px #ccaa66;
}

a:hover{border-bottom:dashed 1px #ccaa66;}

</style>

本文

As yet I have no name

about

midashi2

source code