SOURCE

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>周末行程表</title>
<style>
  body {
    margin: 0;
    padding: 40px 20px;
    background: #faf8f5;
    font-family: "Microsoft YaHei", sans-serif;
    color: #333;
    display: flex;
    justify-content: center;
  }
  .timeline {
    position: relative;
    max-width: 500px;
    width: 100%;
  }
  .timeline::after {
    content: '';
    position: absolute;
    width: 4px;
    background: #ffb6c1;
    top: 0;
    bottom: 0;
    left: 20px;
    margin-left: -2px;
    border-radius: 2px;
  }
  .item {
    padding: 10px 30px 30px 50px;
    position: relative;
  }
  .item::after {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    right: -8px;
    background-color: white;
    border: 4px solid #ff69b4;
    top: 15px;
    border-radius: 50%;
    left: 12px;
    z-index: 1;
  }
  .time {
    font-weight: bold;
    color: #ff69b4;
    font-size: 18px;
    margin-bottom: 5px;
  }
  .content {
    background: white;
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    font-size: 16px;
    line-height: 1.5;
  }
  h1 {
    text-align: center;
    color: #555;
    font-weight: normal;
    margin-bottom: 40px;
  }
</style>
</head>
<body>

<div class="timeline">
  <h1>小锦与蠢鲸鱼的周末</h1>
  
  <div class="item">
    <div class="time">10:30 AM</div>
    <div class="content">楼下接人。补觉，喝咖啡。</div>
  </div>

  <div class="item">
    <div class="time">14:30 PM</div>
    <div class="content">电影院。悬疑片（某人睡了四十分钟）。</div>
  </div>

  <div class="item">
    <div class="time">17:30 PM</div>
    <div class="content">寿司店。吃三文鱼和鳗鱼。</div>
  </div>

  <div class="item">
    <div class="time">19:00 PM</div>
    <div class="content">送你回宿舍。不许熬夜。</div>
  </div>
</div>

</body>
</html>