2020_matters

by imjhane

HTML

<div class="header">
  <h1>Jhane Chou</h1>
  <p>◍ Mar 15, 2022 © Deerlight Design</p>
</div>

<h2>推薦文章 × 自由接案 × 設計家教</h2>

<ol class="word">
  <li>
  <a href="https://matters.news/@Jhane_Chou/line-%E5%8E%9F%E5%89%B5%E4%B8%BB%E9%A1%8C%E6%9C%88%E6%94%B6%E7%9B%8A%E9%81%94%E5%85%A9%E8%90%AC%E9%87%8C%E7%A8%8B%E7%A2%91-bafyreiaiqpgby4sw7mygj2ischibb4qsrdelthulvlib57qrmeh3bxnwci" target="_blank">LINE 原創主題月收益達兩萬里程碑</a>
  </li>
  
  <li>
  <a href="https://matters.news/@Jhane_Chou/%E9%97%9C%E6%96%BC-2021-%E5%B9%B4-%E6%88%91%E5%9C%A8%E5%8F%B0%E5%8C%97%E7%94%9F%E6%B4%BB%E7%9A%84%E9%96%8B%E9%8A%B7%E8%88%87%E7%94%9F%E6%B4%BB-bafyreide2aaqtlrtucqgcbixqbadyeny4nalittt72awgusoctubzjumlq" target="_blank">關於 2021 年，我在台北生活的開銷與生活</a>
  </li>
  
  <li>
  <a href="https://matters.news/@Jhane_Chou/%E6%9B%9D%E9%B9%BF%E8%A8%AD%E8%A8%88%E5%B0%88%E6%AC%84-%E5%A6%82%E6%9E%9C%E4%BD%A0%E8%B7%9F%E6%88%91%E8%B5%B0-%E6%88%91%E6%83%B3%E7%B5%A6%E4%BD%A0%E5%85%A8%E4%B8%96%E7%95%8C-bafyreieepoukfjsi4f2hf55uhe4l577sckfitlkpa5hnao7d7g337vdsoe" target="_blank">曝鹿設計專欄－如果你跟我走，我想給你全世界</a>
  </li>
  
  <li>
  <a href="https://reurl.cc/Md4Nav" target="_blank">製作此的公告方法（附基本版型）</a>
  </li>
  
</ol>
<ul class="link">
  <li><a href="https://medium.com/deerlight" target="_blank">M</a></li>
  <li><a href="https://deerlight.design" target="_blank">Deerlight</a></li>
  <li><a href="https://reurl.cc/N6Q2Kp" target="_blank">所有文章</a></li>
</ul>  

<ul class="link">
  <li><a href="https://store.line.me/themeshop/author/93656/" target="_blank">LINE 原創主題</a></li>
  <li><a href="https://gumroad.com/jhane" target="_blank">設計物賣場</a></li>
</ul>  

<div class="footer">
  <div><p>© Deerlight Design｜</p></div>
  <div class="warning"><p>尊重設計，請勿拷貝此版型</p></div>
</div>



<div class="floating-container">
  <a href="https://liker.land/jhane_chou/civic" target="_blank"><div class="floating-button">☕</div></a>
  <div class="element-container">
  </div>
</div>

CSS

* {
  font-family: Noto San TC, Poppins;
}


body {
  background-image: url("https://cdn-images-1.medium.com/max/1800/1*7KKfPxvEb2T2HBlcxxVXUA.gif");
  background-color: #fafafa;
  background-repeat: no-repeat, repeat;
  padding: 0 20px;
  background-position: 96% 6%;
  background-size: 36%;
}

h1 {
  padding: 20px 0 0 0;
  font-size: 20px;
  line-height: 0px;
}

h2 {
  font-size: 14px;
  font-weight: 500;
  color: #a37d1b;
  line-height: 6px;
}

h2 a {
  font-size: 14px;
  color: #a37d1b;
  text-decoration: none;
}

p {
  font-size: 0.9375rem;
}

a {
  transition: 0.4s;
}

a:hover {
  opacity: 0.5;
}

.header {
  margin-bottom: 12px;
}

.header p, .footer p {
  font-size: 14px;
  color: #929292;
}

.footer {
  display: none; //flex
  margin-top: -18px;
}

.warning p {
  color: red;
}

.word {
  margin-left: 6px;
  padding-left: 30px;
  list-style-type: "◍ ";
  border-left: solid 2px #dcbf77;
  margin-bottom: 24px;
}

.word a {
  color: black;
  text-decoration: none;
  transition: 0.5s;
  line-height: 1;
}

.word li {
  margin-bottom: 6px;
}

.link {
  display: flex;
  list-style-type: none;
  margin-top: -10px;
  font-size: 14px;
  line-height: 14px;
}

.link li {
  color: #a37d1b;
  text-decoration: none;
  transition: 0.5s;
  display: block;
  margin: 2px 4px;
  border-radius: 20px;
  border: solid 1px #e3c57c;
}

.link a {
  color: #a37d1b;
  text-decoration: none;
  display: block;
  padding: 4px 12px;
  line-height: 1.6;
}

.link li:hover {
  background: #a37d1b;
  text-decoration: none;
  display: block;
  opacity: 1;
  color: white;
  border: solid 1px #a37d1b;
}

.link li:hover > a {
  color: white;
  opacity: 1;
}

ul {
  margin-left: -30px;
}

.floating-container {
  position: fixed;
  width: 100px;
  height: 100px;
  bottom: 0;
  right: 0;
  margin: 24px 4px;
}
.floating-container:hover {
  height: 300px;
}
.floating-container:hover .floating-button {
  box-shadow: 0 10px 25px rgba(200, 160, 55, 0.6);
  -webkit-transform: translatey(5px);
         ...