HTML

<img src="https://cdn.masto.host/pinkorangered/media_attachments/files/114/352/177/239/547/846/original/e568e17289193b2f.png" alt="Workplace" usemap="#map">

<map name="map">
  <area target="_blank" alt="mastodon" title="Pink Orange Red" href="https://pinkorange.red" coords="460,162,396,47,237,78,224,252,365,344,429,307,384,287" shape="poly">
  <area target="_blank" alt="pleroma" title="Sea, Swallow Me" href="https://seaswallow.me" coords="237,128,220,179,226,255,184,270,132,195,67,84,126,59,168,78,189,99,239,87" shape="poly">
  <area target="_blank" alt="writefreely" title="Rilkean Heart" href="https://tale.violaine.xyz" coords="460,171,420,219,388,284,431,304,500,261,506,223,471,171" shape="poly">
  <area target="_blank" alt="nextcloud" title="Violaine" href="https://violaine.xyz" coords="224,278,271,288,235,356,179,346,180,310" shape="poly">
   <area target="_blank" alt="nextcloud talk" title="Milk And Kisses" href="https://chat.violaine.xyz" coords="276,290,238,357,297,367,345,356,316,312,292,291" shape="poly">
  <area target="_blank" alt="owncast" title="Eyes Are Mosaics" href="https://tv.seaswallow.me" coords="436,85,485,100,526,129,488,156,460,131" shape="poly">
 <area target="_blank" alt="status" title="uptimerobot" href="https://stats.uptimerobot.com/kvPVxIYx30" coords="342,8,253,37" shape="rect">
</map>

https://www.w3schools.com/html/html_images_imagemap.asp

HTML

<div class="timeline">
  <div class="container left">
    <div class="content">
      <h2>Sep 2020</h2>
      <p>粉橙紅🍊 v3.0</p>
    </div>
  </div>
  <div class="container right">
    <div class="content">
      <h2>Dec 2020</h2>
      <p>Violaine ☁️</p>
    </div>
  </div>
  <div class="container left">
    <div class="content">
      <h2>Mar 2021</h2>
      <p>🌊 Sea, Swallow Me</p>
    </div>
  </div>
  <div class="container right">
    <div class="content">
      <h2>Jan 2022</h2>
      <p>Milk & Kisses 🐤</p>
    </div>
  </div>
  <div class="container left">
    <div class="content">
      <h2>Apr 2022</h2>
      <p>🍃 Rilkean Heart</p>
    </div>
  </div>
  <div class="container right">
    <div class="content">
      <h2>Oct 2022</h2>
      <p>Eyes are Mosaics⚡</p>
    </div>
  </div>
</div>

CSS

* {
  box-sizing: border-box;
}


/* The actual timeline (the vertical ruler) */
.timeline {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
}

/* The actual timeline (the vertical ruler) */
.timeline::after {
  content: '';
  position: absolute;
  width: 6px;
  background-color: slategrey;
  top: 0;
  bottom: 0;
  left: 50%;
  margin-left: -3px;
}

/* Container around content */
.container {
  padding: 10px 40px;
  position: relative;
  background-color: inherit;
  width: 50%;
}

/* The circles on the timeline */
.container::after {
  content: '';
  position: absolute;
  width: 25px;
  height: 25px;
  right: -17px;
  background-color: white;
  border: 4px solid aliceblue;
  top: 15px;
  border-radius: 50%;
  z-index: 1;
}

/* Place the container to the left */
.left {
  left: 0;
}

/* Place the container to the right */
.right {
  left: 50%;
}


/* Fix the circle for containers on the right side */
.right::after {
  left: -16px;
}

/* The actual content */
.content {
  padding: 20px 30px;
  background-color: aliceblue;
  position: relative;
  border-radius: 6px;
}

/* Media queries - Responsive timeline on screens less than 600px wide */
@media screen and (max-width: 600px) {
  /* Place the timelime to the left */
  .timeline::after {
  left: 31px;
  }
  
  /* Full-width containers */
  .container {
  width: 100%;
  padding-left: 70px;
  padding-right: 25px;
  }
  
  /* Make sure that all arrows are pointing leftwards */
  .container::before {
  left: 60px;
  border: medium solid white;
  border-width: 10px 10px 10px 0;
  border-color: transparent white transparent transparent;
  }

  /* Make sure all circles are at the same spot */
  .left::after, .right::after {
  left: 15px;
  }
  
  /* Make all right containers behave like the left ones */
  .right {
  left: 0%;
  }
}

Animation

@keyframes mymove {
  from {top: 200px;}
  to {top: 0px;}
}
#collection .container {  animation: mymove 8s infinite;
}

https://www.w3schools.com/cssref/atrule_keyframes.php https://www.w3schools.com/css/css3_animations.asp

• Example:

/35mm/vienna

Horizontal Scrollable Image Gallery https://www.w3schools.com/howto/howto_css_image_gallery_scroll.asp

• Example:
  
  /sweet-haze/hbd-to-robert-smith

Image Map https://www.w3schools.com/html/html_images_imagemap.asp

• Example: /sin-e/jeff-bootleg-map

HTML Colours – 140 standard color names https://www.w3schools.com/colors/colors_names.asp

Opacity on hover

img:hover {
  filter: opacity(70%);
}

Change cursor (smaller than 50px)

* {
 cursor: url(XXX.png), auto !important;
}

Code block markup

• html

<pre><code class="language-css">
</code></pre>

• markdown

段落（的前一行和最後一行，用三個反引號 ``` 包裹著）

``` 第一行後面寫html/css