E・KILLソースコード

自動改行“しない”で作成しています。
画像はFREE LINE DESIGNさまのセンターに花飾りの罫線からお借りしています。
600px以上のデバイスから見ると章部分が3列に並んで見えるはずです。
表紙ページに一つずつ文章へのリンクを貼る仕様になっていますので、リストタグを使用していません。お気をつけください。
HEAD

@import url('https://fonts.googleapis.com/css?family=Unica+One|Yatra+One');

@font-face
{
font-family: 刻ゴシック;
src: url('https://cdn.leafscape.be/kokugo/font_1_kokugl_1.00_rls_web.woff')
     format("woff");
}

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

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

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

.act{
width:30%;
position:relative;
display:block;}

.text{padding:30px;}
}

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

.width{
margin:0 20px;}

.text{padding:15px;}
}

.main{
padding:15px 15px 40px;}

.act{
background:#fff;
background-image:url(#imgurl/oysmnsi/O9WbWCRbQx.png#);
background-repeat:no-repeat;
background-position:50% 90%;
background-size:200px;
border:solid 1px #000;
margin:20px auto;
padding:0;
}

.main li{
display:flex;
margin:5px;}

.main li p{
font-size:10px;
color:#ccc;
margin:0;}

.main li a{display:block;}

.text{
background:#fff;
font-size:13px ;
line-height:200%;
margin:10px 3px;}

.text p{
font-size:11px;
line-height:150%;
color:#888;
background:#eee;
margin:20px 10px;
padding:10px;
border:solid 1px #ddd;}

.txtli{
margin:20px;
width:250px;}

.top{
border:solid 2px #000;
background:#fff;
padding:15px;
margin:20px;}

.tpline{
margin:20px auto 10px;
width:80%;}

header{
margin:30px auto;
text-align:center;
max-width:400px;}

.ft{
padding:0;
margin:0;
text-align:center;}

.ft a{
padding:3px 5px;
margin:5px;
background:#ccc;
border:solid 1px #ccc;}

.ft a:hover{background:#fff;}

h1{
font-family:"Unica One","メイリオ", sans-serif;
background:#000;
color:#fff;
margin:20px auto;
padding:10px;
text-align:center;
width:200px;
border:solid 1px #000;}

h2{
font-family:刻ゴシック;
font-size:15px;
background:#000;
color:#fff;
border:solid 1px #000;
margin:0 auto;
padding:5px;
text-align:center;}

h3{
margin:30px 0 50px;
font-size:24px;
font-family:刻ゴシック;
overflow:hidden;
text-align:center;}

h3 span{
position:relative;
display:inline-block;
margin:0 10px;
padding:0 30px;
text-align: left;}

h3 span::before,h3 span::after{
position:absolute;
top:50%;
content:'';
width:400%;
border-top:double 3px #666;}

h3 span::before{right:100%;}

h3 span::after{left:100%;}

a{
color:#000;
text-decoration:none;
}

a:hover{color:#b22222;}

input[type],textarea{
font-family:"Unica One","メイリオ", sans-serif;
height:80px;
width:95%;
font-size:12px;
letter-spacing:1px;
line-height:150%;
background:#ccc;
border:solid 1px #ccc;
margin:0;
padding:2px 5px;
}

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

input[type=submit]{
height:auto;
width:50px;
cursor:pointer;
text-shadow:none;
background:#333;
color:#fff;
border:#333;}

</style>

表紙

<div class="act">
<h2>かき抱いたトルソー</h2>
<div class="main">
<li><a href="#">文章画面サンプル
<p>ここに説明や傾向など記載できます</p></a></li>
<li><a href="#">逝き遺り
<p>必要なければ使用しなくても大丈夫です</p></a></li>
<li><a href="#">カーテンの中
<p>使用しないとタイトルのみに。</p></a></li>
<li><a href="#">だめな僕をどうか許して
<p>それが愛なんでしょ</p></a></li>
<li><a href="#">ビルの窓の向こう
<p>そこには君の顔をした人形がいたのです</p></a></li>
</div>
</div>

<div class="act">
<h2>Last Love Letter</h2>
<div class="main">
<li><a href="#">説明文なしだとこうなります</a></li>
<li><a href="#">火をつけて逃げろ</a></li>
<li><a href="#">走馬灯を欠いて死す</a></li>
<li><a href="#">14歳のなかにいる</a></li>
<li><a href="#">浮遊層</a></li>
<li><a href="#">剥がれ影</a></li>
<li><a href="#">救急車と歌おう</a></li>
<li><a href="#">嫌いなところはみっつだけ</a></li>
</div>
</div>

<div class="act">
<h2>非実在少年少女</h2>
<div class="main">
<a href="#">普通に横並びリンクも貼れます</a> / <a href="#">01</a> / <a href="#">02</a> / <a href="#">03</a> / <a href="#">04</a> / <a href="#">05</a> / <a href="#">06</a> / <a href="#">07</a> / <a href="#">08</a> / <a href="#">09</a> / <a href="#">10</a><br>
<br>
<li><a href="#">ソースコード
<p>ソースコードはこちらからどうぞ</p></a></li>
</div>
</div>
</div>
</div>

文章