Yamada Hanako山田花子

「何か一言とかあれば」

性別
女性
職業
○○○
年齢
○○歳
誕生日
1月1日
身長
○○cm

for example

長文スペース。詳細な設定などが記述できます。
アリスは川辺でおねえさんのよこにすわって、なんにもすることがないのでとても退屈（たいくつ）しはじめていました。一、二回はおねえさんの読んでいる本をのぞいてみたけれど、そこには絵も会話もないのです。「絵や会話のない本なんて、なんの役にもたたないじゃないの」とアリスは思いました。

ソースコード

自動改行「しない」で作成。
プロフィールページのテンプレが少ないと聞いてぼんやり作ってみました。
背景画像を変えるだけでも随分雰囲気が変わると思います。

アイコンの枠→パブリックドメインのものを利用しています。こちらからDLしてください

背景画像→Bg-patterns様　クラシックな壁紙

HEAD

/*** The new CSS Reset - version 1.2.0 (last updated 23.7.2021) ***/
:where(:not(iframe,canvas,img,svg,video):not(svg*)){all:unset;display:revert}*,::after,::before{box-sizing:border-box}ol,ul{list-style:none}img{max-width:100%}table{border-collapse:collapse}textarea{white-space:revert}
hr { height: 0; margin: 0; padding: 0; border: 0;}
ul,ol {list-style: none;}

body{
background: url(##背景画像URL##) repeat;
font-family: 'Playfair Display', 'Noto Serif JP', serif;
font-size:0.85em;
line-height:1.5;
margin: 0;
padding: 0;
}

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

.wrp{
background: #fff;
height: 100%;
width: 90%;
max-width: 600px;
margin: 0 auto;
padding: 10px;
}

header{
font-family: 'Great Vibes', 'Klee One';
font-size:1.2em;
text-align: center ;
margin: 50px auto 20px;
}
.icon{
position: relative;
width: 100px;
margin: 20px auto;
}
.icon::after {
content: '';
position: absolute;
top: -20px;
left: -20px;
width: 140px;
height: 140px;
background: url(##アイコン枠画像URL##);
filter: invert(50%) sepia(0%) saturate(11%) hue-rotate(143deg) brightness(101%) contrast(93%);
background-size:cover;
}
hr {
height: 1px;
background-image: -webkit-gradient(linear, left top, right top, from(transparent), color-stop(#ccc), to(transparent));
background-image: linear-gradient(to right, transparent, #ccc, transparent);
}

h1{
font-size:2.5em;
color: #ccc;
font-weight:400;
position: relative;}

h1 span{
font-size: 0.6em;
color:#000;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);}

h2{
font-size:1.5em;
text-shadow: 0px 0px 3px #666;
}

ul{
list-style: none;
display: flex;
flex-wrap: wrap;
text-align: center;
}
li {
width: 125px;
padding-bottom: 1em;
margin: 5px 20px;
}
li > div {
padding: .2em 1em;
margin-bottom: .5em;
background: #fff;
border-radius: 4px;
box-shadow: 0 0 5px #ccc;
}

.text{
margin: 0 15px; 
padding-right: 1.5em;
padding-left: 1.5em;
line-height: 2em;
background-image: linear-gradient(transparent 0, transparent 97%, #ccc 100%);
background-size: 100% 2em;
}

footer{
font-family: 'Klee One';
text-align: center ;
margin: 50px auto 20px;
}

</style>

body