Thinker - Ikkaku

first

●非常にシンプルなデザインになりました。
●メニュー部分にホバーすると線が伸びます。
●メニューはbuttonタグでのリンクになっていますので、遷移先ＵＲＬを入力する際ご注意下さい。
●＜span class="red"＞で色が変わります。アクセントにどうぞ。
●＜h3＞で

強調

link

●管理人は＃＃＃です。
●リンクフリーに甘えています。エトセトラエトセトラ。
メニュー以外のリンクサンプル　 link　link

Source & Code

●自動改行は「しない」で制作しています。

HEAD

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Rock+Salt&display=swap" rel="stylesheet">
	
<style type="text/css">

* {box-sizing:border-box}

body,h1,h2,h3,h4,p{
 margin: 0;
 padding: 0;}

body{font-family: 'Josefin Sans',  'Kosugi Maru', sans-serif;
background-color :rgba(255,255,255,0.8);
color: #454545;
 font-size: 13px;
 line-height: 1.6;
 word-wrap : break-word;}

.top img{
  width: 40%;
  }


::selection {
    background: #e5635e;
    color: #fff;
}

//Firefox
::-moz-selection {
    background: #e5635e;
    color: #fff;
}

.all{
 max-width: 500px;
 margin: auto;
padding: 25px 15px 0 15px;
 margin-top: 30px;
}
.top{ text-align: center;
 position: relative;}


h1,h2{font-family: 'Rock Salt', cursive;}

h1{font size:20px;
background-color :rgba(255,255,255,0.8);
 display: inline;
padding:0.3em;
letter-spacing: 0.3em;
}

h2 {
	color: #454545; /* 文字色 */
	padding: 5px 5px 5px 30px; /* 上・右・下・左の余白 */
	position: relative;
}
h2:before {
	background-color: #e5635e; /* 左側の線の色 */
	border-radius: 5px;
	content: '';
	position: absolute;
	top: 0;
	left: 3px; /* 左端からの位置 */
	width: 5px; /* 左側の線の幅 */
	height: 100%;
}
h2:after {
	background-color: #afc3e5; /* 右側の線の色 */
	border-radius: 5px;
	content: '';
	position: absolute;
	top: 0;
	left: 12px; /* 左端からの位置 */
	width: 5px; /* 右側の線の幅 */
	height: 100%;
}

h3{color:#fff;
display:inline-block;
margin:.3em 0; padding:.3em .7em .2em .8em;
background:#454545; font-size:90%;}



hr{border-top:1px solid #000;}


nav{
font-size:15px;
padding: 24px 0;
padding-bottom:8px;
}

nav a{
color:#454545;
text-decoration:none;
}

nav a:hover{
color:#ccc;
 text-decoration: none;
}

.border{
    position:absolute;
    background:none;
    transition:all .5s ease-in-out;
}

button {color:#454545;background:transparent;border-width:2px;border-style: solid;border-color: #454545;position:relative;margin:1em;display:inline-block;padding:0.5em 1em;transition:all 0.3s ease-in-out;text-align:center;
}
button:before, button:after {content:'';display:block;position:absolute;border-color:#454545;box-sizing:border-box;border-style:solid;width:1em;height:1em;transition:all 0.3s ease-in-out}
button:before {top:-6px;left:-6px;border-width:2px 0 0 2px;z-index:5;}
button:after {bottom:-6px;right:-6px;border-width:0 2px 2px 0;}
button:hover:before, button:hover:after {width:calc(100% + 12px);
  height:calc(100% + 12px);border-color:#454545}
button:hover {color:#353535;background-color:#fff;border-color:#454545}



a {
     color:#010101;
     text-decoration: underline #afc3e5 dotted 4px;
     text-underline-offset: 0.2em;
 }

a:hover{color:#bbb;}

span.red{ font-weight: bold;
    color: #e5635e;
    padding: 4px ;
    margin-right: 4px;   
}

article{ margin-bottom: 26px;
padding: 10px 10px;
background:#fff;}


.footer{ text-align: center;}

.footer a{ padding: 0 3px;}


.color{ color: #a44;}

textarea{
font-family: 'Josefin Sans',  'Kosugi Maru', sans-serif;
border:0;
padding:10px;
font-size:10px;
color:#aaa;
border:solid 1px #ccc;
margin:0 0 20px;
width:200px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-moz-box-shadow: inset 1px 4px 9px -6px rgba(0,0,0,0.5);
-webkit-box-shadow: inset 1px 4px 9px -6px rgba(0, 0, 0, 0.5);
box-shadow: inset 1px 4px 9px -6px rgba(0,0,0,0.5);}
--></style>

HTML

<div class="all top"><br><h1>Thin<span class="red">k</span>er</h1>
<br><a href="">2021/00/00-〇〇更新など。</a>
<nav> 
<button onclick="location.href='http://ＵＲＬ'">Info</button>
  <button onclick="location.href='http://ＵＲＬ'">Main</button>
  <button onclick="location.href='http://ＵＲＬ'">Home</button>
<br> 12345 >><a href="#">rank</a>　<a href="#">rank</a>　<a href="#">rank</a>
</nav>
</div>
<div class="all">
<h2>Information</h2><article>
<h3>first</h3><br>
●非常にシンプルなデザインになりました。<br>
●メニュー部分にホバーすると線が伸びます。<br>
●メニューはbuttonタグでのリンクになっていますので、遷移先ＵＲＬを入力する際ご注意下さい。<br>
●＜span class="red"＞で<span class="red">色が変わります。</span>アクセントにどうぞ。<br>
●＜h3＞で<h3>強調</h3>
<br><br>
<h3>link</h3><br>
●管理人は＃＃＃です。<br>
●リンクフリーに甘えています。エトセトラエトセトラ。<br>
<a href="">メニュー以外のリンクサンプル</a>　<a href="#">link</a>　<a href="#">link</a><br>
</article></div>