love reverseソースコード

・奈南さん「ピーチピンクのかわいい感じの小説ページ。画像はなるべくあり。」

自動改行“しない”で作成しています。
幅の広いデバイスで見ると章部分が二列になります。
目次タグを使用せず、表紙画面に一つずつリンクを貼る形になっています。ご注意ください。
画像はこちらからどうぞ。

HEAD

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

@font-face
{
font-family:"ロゴたいぷゴシック-コンデンスド" ;
src: url('https://cdn.leafscape.be/LogoTypeGothicCondense/07LogoTypeGothic-Condense_web.woff')
     format("woff");
}

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

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

.wrp2{
display:flex;
flex-direction:row;
flex-wrap:wrap;}

.act{
position:relative;
width:250px;
display:inline-block;
border:dashed 2px #e8bda5;
box-shadow:0 0 0 5px #fff;
background:#fff;
margin:30px auto 10px;
padding:15px;
border-radius:10px;}
}

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

.act{
border:dashed 2px #e8bda5;
box-shadow:0 0 0 5px #fff;
background:#fff;
border-radius:10px;
margin:50px 30px 20px;
padding:15px;}
}

.text{
background:#fff;
line-height:200%;
font-size:13px;
padding:15px;
border-radius:10px;
margin:50px 10px 20px;
text-align:left;}

.text p{
line-height:150%;
border:dashed 1px #e8bda5;
margin:10px;
padding:10px;
font-size:10px;
}

header{
background:#fff;
border-radius:50%;
width:200px;
height:200px;
margin:30px auto;
border:dashed 2px #e8bda5;
box-shadow:0 0 0 5px #fff;
padding:20px;
text-align:center;}

header p{
background:none;
font-size:30px;
line-height:100%;
}

header a{
font-size:12px;
line-height:150%;
border:solid 1px #e8bda5;
background:#e8bda5;
color:#000;
padding:1px;
margin:5px;
display:inline-block;
width:120px;
text-align:center;}

header a:hover{
border:solid 1px #e8bda5;
background:#fff;}

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

.ft a{
color:#000;
background:#fbdac8;
border:solid 1px #fbdac8;
padding:1px 5px;
margin:5px;}

.ft a:hover{
color:#555;
background:#fff;
border:solid 1px #fbdac8;
padding:1px 5px;
margin:5px;}

h1{
font-family:Sacramento,ロゴたいぷゴシック-コンデンスド,sans-serif;
line-height:100%;
font-size:40px;
color:#96514d;
margin:25px 0 10px;
padding:0;
text-align:center;}

h2{
line-height:150%;
font-family:Sacramento,ロゴたいぷゴシック-コンデンスド,sans-serif;
font-weight:normal;
font-size:18px;
margin:-30px 0 10px;
padding:0;
text-align:center;
}

h2 p{
display:inline-block;
border-bottom:double  5px #e8bda5;
margin:0 0 10px;
padding:0 10px;}

h3{
line-height:200%;
font-family:Sacramento,ロゴたいぷゴシック-コンデンスド,sans-serif;
font-weight:normal;
font-size:20px;
margin:20px auto 50px;
padding:0;
text-align:center;
}

a{
color:#000;
text-decoration:none;
padding:0 3px;
transition:0.5s;
border-bottom:solid 1px #e8bda5;
}

a:hover{
color:#555;
border-bottom:dashed 1px #e8bda5;}

input[type],textarea{
height:50px;
width:70%;
font-family:"Comfortaa","メイリオ", sans-serif;
font-size:12px;
letter-spacing:1px;
line-height:150%;
background:#fbdac8;
color:#000;
border:solid 1px #fbdac8;
margin:5px 10px;
padding:2px 5px;
}

input[type=text]{
margin:5px;
height:24px;
width:80px;}

input[type=submit]{
margin:5px;
height:auto;
width:80px;
cursor:pointer;
text-shadow:none;
border:solid 1px #333;
background:#333;
color:#fff;
font-weight:normal;
}

</style>

表紙

<header>
<img width="100px" src="##ハートの画像URL##">
<h1>Love reverse</h1>
<a href="#">NAME</a>
<a href="#">CAUTION</a>
</header>

<div class="wrp">
<div class="wrp2">
<div class="act">
<h2><img width="100px" src="##リボンの画像URL##"><br>
<p>ため息をきかせて</p></h2>
<a href="#">タイトル</a> / <a href="#">不思議なこの夜が明けたら</a> / <a href="#">燃える心臓</a> / <a href="#">君と僕がゆっくり溶けてゆく</a> / <a href="#">涙葬送</a> / <a href="#">銃声いななく</a> / <a href="#">どろどろになるまで</a> / <a href="#">愛なんてただの言葉</a> / <a href="#">ラブ回収</a> / <a href="#">もうわたしの命はいいよ</a>
</div>

<div class="act">
<h2><img width="100px" src="##リボンの画像URL##"><br>
<p>See you on the other side!</p></h2>
NAME <a href="#">葬迎</a><br>
NAME <a href="#">君の呼吸で世界が変わる</a><br>
NAME <a href="#">なまえのなかった日</a><br>
NAME <a href="#">空から降ってくるもの</a><br>
NAME <a href="#">たくさんいたい</a><br>
</div>

<div class="act">
<h2><img width="100px" src="##リボンの画像URL##"><br>
<p>手に入らなかった未来</p></h2>
<a href="#">タイトル</a></div>
</div>
</div>

文章

名前変換