8bo's diary

by sun80101

HTML

<head>
<div style="background-color:pink;">
<div class="title">
    <h1>流水日記</h1>
  </div>
<div class="subtitle">
    <h2 class="date">喜歡往戶外跑，喜歡探索新事物，這是我的戶外流水帳日記 </h2>
</div>

</div>
<p1>最後更新日期：2022/8/3</p1>
</head>


<body>
<ul class="wordUL">

<p3>目前正在連載中-日本東京富士山五日遊</p3><br>

<hr>

<p4>已完成連載項目如下，在請大家多多支持唷!</p4>
<li>日本</li>
<ul>
<li>岡山</li>
<li>北海道</li>
<li>日本富士山之旅(連載中🚀)</li>
</ul>

<li>越南</li>
<li>菲律賓</li>

</ul>

</body>


<p2>如果你喜歡我的文章，歡迎訂閱我~ 我的遊記類文章也有在Medium同步發布唷~</p2>

<ul class="link">

<li class="line"><a href="https://medium.com/sun80101" target="_blank">🚁 Medium</a></li>
</ul>

CSS

body {
  background: #fafafa;
  padding: 10px 20px;
}
h1, h2, h3  {
  font-weight: 600;
}
h1 {
  font-size: 24px;
}
h2 {
  font-size: 16px;
}
h3 {
  font-size: 16px;
  color: #4d92eb;
}
p1 {
  font-size: 10px;
  color: #888;
}
p2 {
  font-size: 14px;
  color: #888;
}
p3 {
  font-size: 16px;
  color: #ffa500;
}
p4 {
  font-size: 16px;
  color: #2e8b57;
}


.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: #4d92eb;
  text-decoration: none;
  transition: 0.5s;
}
a:hover {
  color: #4079c3;
  text-decoration: none;
}