anniversaryソースコード

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

HEAD

@import url('https://fonts.googleapis.com/css?family=Arsenal|Allerta+Stencil');

body{
font-family:"Arsenal","メイリオ", sans-serif;
font-size:12px;
letter-spacing:1px;
line-height:150%;
color:#19283c;
background:#fff;
margin:20px 0;
padding:0;}

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

.con{display:flex;}

.left{
border-right:solid 2px #19283c;
padding:15px 20px 15px 5px;
width:30%;
float:left;
text-align:right;
margin-right:20px;}

.right{
padding:10px 0;
width:70%;
float:right;}
}

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

.left{
border-left:solid 5px #19283c;
border-bottom:solid 2px #19283c;
padding:5px 5px 10px 15px;
margin:30px 10px 20px;}

.right{
margin:0 10px;
padding:10px 0;}
}

.con{margin:20px;}

.right a{
color:#19283c;
background:#fff;
border:2px solid #19283c;
padding:5px 15px;
margin:0;}

.right a:hover{
color:#f6f6f6;
background:#19283c;
border:2px solid #19283c;
padding:5px 15px;
margin:0;}

#top{
font-family:"Allerta Stencil", sans-serif;
line-height:150%;
font-size:18px;
position:relative;
margin:20px 30px 30px;
padding:15px;
max-width:200px;
text-align:center;
background:#f6f6f6;
border:3px solid #19283c;
z-index:0;
display:inline-block;
}

#top:before{
content: "";
position: absolute;
bottom: -8px; left: 50%;
margin-left: -9px;
width: 0px;
height: 0px;
border-style: solid;
border-width: 9px 9px 0 9px;
border-color: #f6f6f6 transparent transparent transparent;
z-index: 0;
}

#top:after {
content: "";
position: absolute;
bottom: -12px; left: 50%;
margin-left: -10px;
width: 0px;
height: 0px;
border-style: solid;
border-width: 10px 10px 0 10px;
border-color: #19283C transparent transparent transparent;
z-index: -1;
}

.info{
text-align:left;
margin:10px;
padding:1px 10px;
background-image: linear-gradient(#ddd 2px, transparent 2px);
background-size: 25px 25px;
line-height:25px;
}

.text{
font-size:11px;
text-align:left;
margin:15px 0 5px;
padding:10px;
background:#f6f6f6;}

header{
text-align:center;
max-width:350px;
margin:50px auto 20px;}

.ft{
background:#555;
color:#fff;
padding:5px;
margin:10px 0;
text-align:center;
border:solid 1px #fff;
box-shadow: 0 0 0 3px #555;
-webkit-box-shadow: 0 0 0 3px #555;
-moz-box-shadow: 0 0 0 3px #555;
}

h1{
font-family:"Dancing Script", sans-serif;
letter-spacing:-1;
font-weight:normal;
color:#fff;
margin:0;
padding:0;
position:relative;
display:inline;}

h2{
font-size:13px;
margin:0 0 5px;
padding:0 3px;
border-bottom:solid 1px #555;
width:100px;
text-transform:uppercase;
position: relative;}

h2:after {
content:'';
width:22px;
height:1px;
background-color:#d9333f;
position:absolute;
bottom:-1px;
left:0;}

h3{
color:#b22222;
font-family:"Dancing Script", sans-serif;
letter-spacing:-1;
font-size:24px;
font-weight:normal;
margin:10px 0;
padding:0;
}

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

a:hover{color:#19283c;}

</style>

BODY