Matters

by FischKatze

HTML

<h1>Fischkatze is roaming in City Matters 魚貓漫遊馬特市</h1>
<h2>von Universum --> Earth 宇宙生物到地球 </h2> 
<h3>Its fantastic life 它的奇妙生活</h3>
<ol class="word">
<li> Life in Germany</li>
<li> Reading notes</li>
<li> Moods</li>
<li> Painting</li>
<li> Brainstoming</li>
</ol>
<p>Hi there ~ 
<br/>This is Fischkatze's writing room
<br/>嗨，馬特市的大家，歡迎來到魚貓在馬特市的家！
<br/>也可以去看看我的方格子唷：）
<br/>
</p>
<ul class="link">
<li><a href="https://vocus.cc/user/@crashyourfaceasACat" target="_blank">My Vocus</a></li>
<li class="line"><a href="[email protected]" target="_blank">My E-mail</a></li>
</ul>

CSS

body {
  background: linear-gradient( 125deg, #c6d9ec 20%, #FFECEC 95%);
  padding: 10px 20px;
  font-family: fantasy;
}
h1, h2, h3  {
  font-weight: 600;
}
h1 {
  font: fantasy;
  font-size: 20px;
  color: #5B5B5B;
}
h2 {
  font-size: 18px;
  color: #7B7B7B;
}
h3 {
  font-size: 14px;
  color: #a6a6a6;
}
li {
  font:<span style="font-family:fantasy;">Show monospace font</span>;
  color: #3D7878;
}
p {
  color: #5B5B5B;
}
.word {
  margin-left: -20px;
}
.link {
  display: inline-flex;
  list-style-type: none;
  margin-left: -40px;
  margin-top: -40px;
  font-size: 14px;
  line-height: 14px;
}
.link ul {
  margin-bottom: -40px;
}
.link > .line::before {
  content:"";
  height: 100%;
  margin: 0 20px;
  border-right: solid 1px #cacaca;
}
a {
  color: #5B5B5B;
  text-decoration: none;
  transition: 0.5s;
}
a:hover {
  color: #5B5B5B;
  text-decoration: none;
}