003 プロフィール -ヒヤシンス-

プロフィール

基本情報

性別：○○
職業：○○
年齢：○○歳
誕生日：○月○日
星座：○○座

容姿

長文を書くこともできます。

性格

　海のおきへ、遠く遠く出ていきますと、水の色は、いちばん美しいヤグルマソウの花びらのようにまっさおになり、きれいにすきとおったガラスのように、すみきっています。けれども、そのあたりは、とてもとても深いので、どんなに長いいかり綱づなをおろしても、底まで届くようなことはありません。海の底から、水の面おもてまで届くためには、教会の塔とうを、いくつもいくつも、積みかさねなければならないでしょう。そういう深いところに、人魚たちは住んでいるのです。
「人魚の姫」ハンス・クリスチャン・アンデルセン／青空文庫

ソースコード

自動改行「しない」で作成。

色違い→ アイリス#c7a5cc ／ヒヤシンス#6c9bd2 ／カメリア#da536e ／シナモン#be8f68

HEAD

*,::after,::before{box-sizing:border-box}
*{margin: 0; padding: 0;}
ol,ul{list-style:none}
img{max-width:100%}
table{border-collapse:collapse}
textarea{white-space:revert}

:root{
--main-color: #6c9bd2; /* アクセントカラー */
}

body{
background: var(--main-color);
color:#000000 ;
font-family: 'Noto Sans JP', sans-serif;
font-size: 0.8em;
line-height: 1.5;
}

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

.wrp{
background:#fff ;
width:85%;
max-width:600px;
margin:15px auto;
border:1px solid var(--main-color);
border-radius:30px;
}

header{
font-family: 'Kiwi Maru';
text-align: center ;
margin: 30px auto 5px;
position: relative;
}

header:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -50px;
  width: 100%;
  height: 20px;
  background: repeating-linear-gradient(-45deg, var(--main-color), var(--main-color) 2px, #fff 2px, #fff 4px);
}

.main{
max-width:600px;
margin:2em auto;
padding:4em 2em 2em;
}

section{
margin: 1.5em 0;
}

p{
margin: 1em 2em 2em;
line-height: 1.5;
}

h1{
color: var(--main-color);
font-size: 2em;
line-height:2 ;
}

h2 {
position: relative;
padding-left: 30px;
font-size:1.5em;
color: #000;
font-weight: 400;
margin: 1em 0 1.2em;
}

h2::before,
h2::after{
content: "□";
position: absolute;
}

h2::before{
left:0;
top:-3px;
}

h2::after{
left: 5px;
top: 3px;
color: #ccc;
}

h3 {
font-family: 'Kiwi Maru';
font-size: 1.2em;
line-height: 20px;
padding: 5px 0;
position: relative;
}
h3:after {
content: " ";
height: 5px;
width: 100%;
bottom: 0;
left: 0;
position: absolute;
background: repeating-linear-gradient(-45deg, var(--main-color), var(--main-color) 2px, #fff 2px, #fff 4px);
}

.icon{
height:100px;
width:100px;
position: relative;
margin: auto;
}
.icon::before,
.icon::after {
	content: '';
	position: absolute;
	width: 0;
	height: 0;
	border-style: solid;
}

.icon::before {
	top: -5px;
	right: -5px;
	border-width: 0 20px 20px 0;
	border-color: transparent var(--main-color) transparent transparent;
}

.icon::after {
	bottom: -5px;
	left: -5px;
	border-width: 20px 0 0 20px;
	border-color: transparent transparent transparent var(--main-color);
}

footer{
text-align: center ;
margin: 50px auto 20px;
}
</style>

BODY